@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* <default css classes> */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    width: 100%;
    height: 100%;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* </default css classes>/


/* <legacy css classes (can be deleted at some point)> */

.validation-message {
    color: #dc3545;
    font-size: 8pt;
}


.validation-message-success {
    color: #28a745;
    font-size: 8pt;
}

/* </legacy css classes (can be deleted at some point)> */

/* <general helper css classes> */

.cadence-clickable {
    cursor: pointer;
}

.cadence-center {
    display: flex;
    justify-content: center;
    order: 1;
}

.cadence-left {
    display: flex;
    justify-content: left;
    margin-left: 20px;
}


.cadence-img-left img {
    max-height: 100px;
    height: auto;
    object-fit: contain;
}

.cadence-img-center {
    order: 2;
    text-align: center;
    flex-grow: 1;
}


.cadence-fill-parent {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.cadence-fill-parent .mud-tabs-panels {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* </general helper css classes> */


/* <general layout css classes> */

.cadence-layout-link-text {
    color: var(--mud-palette-appbar-text) !important;
}


.cadence-spinner {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
}

/* </general layout css classes> */

/* <appbar css classes> */

.cadence-app-bar-brand-image {
    margin: 5px;
    max-height: 32px;
}

.cadence-app-bar-brand-image-print {
    max-height: 32px;
    height: auto;
}

.cadence-app-bar-logo-image {
    margin: 5px;
}

.cadence-app-bar-summary-avatar {
    margin-right: 10px;
    cursor: pointer;
}

/* </appbar css classes> */

/* <footer css classes> */

.cadence-footer {
    background-color: var(--mud-palette-appbar-background) !important;
    position: fixed;
    bottom: 0px;
    font-size: 8pt;
    text-align: center;
    width: 100%;
}

/* </footer css classes> */


/* <menubar css classes> */

.cadence-menu-icon-bar {
    background-color: var(--mud-palette-appbar-background);
    height: inherit;
    width: 56px;
}

.cadence-menu-icon-bar-icon {
    margin-top: 5px;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
}

/* Pass an explicit height down to cadence-menu-bar so that
   cadence-menu-bar-content genuinely overflows and mouse-wheel
   scrolling works naturally over the menu items. */
.mud-drawer .mud-drawer-content {
    height: 100%;
}

.mud-drawer .mud-drawer-content > .mud-navmenu {
    height: 100%;
}

.cadence-menu-bar {
    background-color: var(--mud-palette-primary-lighten);
    width: calc(100% - 56px);
    padding: 5px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

.cadence-menu-bar-profile-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: -15px;
    border-radius: 4px;
}

.cadence-menu-bar-title {
    margin-top: 5px;
    padding: 5px;
    flex: 0 1 auto;
}

.cadence-menu-bar-content {
    margin-top: 5px;
    padding: 5px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.cadence-menu-bar-action-text {
    cursor: pointer;
}

.cadence-menu-bar-profile-expand-panel {
    margin-top: 30px;
    max-height: inherit;
}

.cadence-menu-bar-nav-menu {
    max-height: inherit;
}

/* </menubar css classes> */

/* <content css classes> */

.cadence-content {
    background-color: var(--mud-palette-surface);
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.cadence-content-image {
    background-image: url(../images/brand.png);
    background-size: auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center center;
    background-position-y: 40px;
    opacity: 1;
}

.cadence-content-right {
    margin-top: -5px !important;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

.cadence-content-right-mini {
    margin-top: -5px !important;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

.cadence-content-left {
    margin-top: -5px !important;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-flow: column;
    height: 100%;
}


.cadence-content-left-mini {
    margin-top: -5px !important;
    padding-bottom: 8px;
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

.cadence-content-grid {
    flex: 1 1 auto;
    overflow: auto;
}

.cadence-content-grid {
    flex: 1 1 auto;
    overflow: auto;
}

/* </content css classes> */


/* <index page css classes> */

.cadence-home-card-large {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.cadence-home-card-small {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.cadence-home-card-title {
    width: 100%;
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
}

.cadence-home-card-title-chip {
    width: 100% !important;
}

.cadence-home-card-content {
    width: 100%;
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow: hidden;
    justify-content: center;
    text-align: center;
}

.cadence-home-card-text {
    cursor: pointer;
}

.cadence-home-card-footer {
    flex: 0 1 20px;
    padding-left: 3px;
    padding-right: 3px;
}

.cadence-home-card-large-detail {
    justify-content: center;
    text-align: center;
    overflow: auto;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.cadence-home-card-large-text {
    width: 100%;
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow: hidden;
    justify-content: center;
    text-align: center;
}

.cadence-home-card-large-row {
    height: 100%;
    overflow: hidden;
}

.cadence-home-card-action-div {
    width: 100%;
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow: auto;
    text-align: left;
    max-height: 200px;
}

/* </index page css classes> */
.cadence-home-card-action-div .mud-paper {
    width: 100%;
    min-width: 250px;
    max-width: 250px;
    box-sizing: border-box;
}

.cadence-home-card-action-div .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
}

/* <login page css classes> */

.cadence-login-card {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cadence-login-card-content {
    margin: auto auto;
    background-color: var(--mud-palette-appbar-background) !important;
    z-index: 1000;
    padding: 10px;
    border-radius: 10px;
    width: 340px;
}

.cadence-login-card-content-inner {
    padding: 10px;
    overflow: hidden;
}
/* </login page css classes> */


/* <task css classes>*/

.cadence-task-table > .mud-table-container > .mud-table-root {
    width: calc(100% - 1px);
}

.cadence-task-table > .mud-table-container {
    overflow-y: visible;
    height: fit-content;
}

@media print {
    @page {
        size: inherit;
    }

    table tr td,
    table tr th {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    div {
        -webkit-print-color-adjust: exact;
    }
}

.cadence-task-print-matrix {
    margin-top: 20px !important;
    width: 100%;
    table-layout: auto;
}

.cadence-task-print-matrix-header-cell {
    width: auto;
    padding: 8px;
    border: 1px solid #d1d1d1 !important;
    text-align: left;
    vertical-align: middle;
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    font-weight: bolder;
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
    background-color: #B1ADAD;
}

.cadence-task-print-matrix-row-label {
    padding: 6px;
    /*background-color: #B1ADAD;*/
    border: 1px solid #d1d1d1 !important;
    text-align: left;
    vertical-align: middle;
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    font-weight: bolder;
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
}

.cadence-task-print-matrix-table-cell {
    width: auto;
    padding: 6px;
    border: 1px solid #d1d1d1 !important;
    text-align: left;
    vertical-align: middle;
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
}

.cadence-task-print-header {
    background-color: #999696 !important;
    border-radius: 6px;
    padding: 10px;
    margin: -10px;
}

.cadence-task-print-header-print-icon-container {
    padding-bottom: 16px !important;
    padding-right: 6px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cadence-task-print-header-print-icon {
    color: #555;
    background: transparent !important;
    margin-left: 5px;
}

.cadence-task-print-form-header {
    background-color: #B1ADAD !important;
    border-radius: 6px;
    padding: 3px;
    margin: -10px;
}

.cadence-task-print-form-header-print {
    background-color: transparent !important;
    border-radius: 6px;
    padding: 3px;
    margin: -10px;
}

.cadence-task-print-resultset-header {
    background-color: #B1ADAD !important;
    border-radius: 6px;
    padding: 3px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
}

.cadence-task-print-resultset-header-print {
    background-color: #FFFAFA !important;
    border-radius: 6px;
    padding: 3px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
}

.cadence-task-print-section-header {
    background-color: #B1ADAD !important;
    border-radius: 6px;
    padding: 3px;
    margin-left: -10px;
    margin-right: -10px;
}

.cadence-task-print-section-header-print {
    display: flex;
    justify-content: space-between; /* left and right */
    align-items: center; /* vertically center everything */
    padding: 10px 1px;
    background: transparent !important;
    border-radius: 6px;
}

.cadence-task-print-footer {
    background-color: #B1ADAD !important;
    margin: 10px;
    padding-top: 10px;
    border-radius: 6px;
}

.cadence-task-print-box {
    width: calc(100% - 10px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    border: 2px outset;
    padding: 20px;
    border-color: #838083;
    border-radius: 5px;
}

.cadence-task-print-box-sub {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px inset;
    padding: 20px;
    border-color: #838083;
    border-radius: 5px;
}

.cadence-table-cell-shrink {
    width: 1px;
    text-align: center;
    text-wrap: none;
}

.cadence-table-cell-list {
    border-left: none;
    border-right: none;
}

.cadence-task-navigator {
    background-color: var(--mud-palette-appbar-background) !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1310;
    overflow: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cadence-task-navigator-task-container {
    flex: 1 1 auto;
    overflow: hidden;
}

.cadence-task-navigator-pager-container {
    flex: 0 0 32px;
    width: 100%;
    margin-top: 5px;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
}

.cadence-task-navigator-content {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

.cadence-task-navigator-toolbar {
    flex: 0 0 56px;
    background-color: var(--mud-palette-appbar-background);
    height: inherit;
    /* Keep the toolbar clickable above the MudOverlay backdrop (z-index:5) used by the
       Comments/Attachments/Settings side panels, so buttons stay usable while a panel is open. */
    position: relative;
    z-index: 10;
}

.cadence-task-navigator-resultsets {
    flex: 0 0 56px;
    overflow: auto;
    margin-left: 5px;
}

.cadence-task-navigator-content-task-view {
    margin-left: 5px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cadence-task-navigator-timeline {
    flex: 0 0 240px;
    margin-left: 5px;
    margin-bottom: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cadence-task-navigator-timeline-body {
    margin-top: 5px;
}

.cadence-task-navigator-timeline-header {
    margin-top: 5px;
    padding: 10px;
    width: inherit;
}

.cadence-task-view-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.cadence-task-view-inner-header {
    flex: 0 0 auto;
    margin-top: 5px;
}

.cadence-task-view-inner-header-text {
    overflow: hidden;
    padding: 10px;
    margin-left: 5px;
}

.cadence-task-form-header {
    margin-left: 0px;
    padding: 0px;
    margin-top: 5px;
}

.cadence-task-view-inner-resultset {
    margin-top: 5px;
    flex: 1 1 auto;
    overflow: auto;
    padding: 0px;
    margin-bottom: 5px;
}

.cadence-task-view-file-view {
    position: absolute;
    /* Leave room on the right for the Forms/Timeline panel (240px + 5px margin) so this panel
       doesn't render on top of it. */
    width: calc(100% - 389px);
    height: calc(100% - 144px);
    z-index: 1400;
    top: 72px;
    left: 72px;
    padding: 10px;
}

.cadence-task-view-file-header {
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
}

.cadence-task-view-file-view-upload-button {
    margin-top: 15px;
    padding: 10px;
}

.cadence-task-view-file-text {
    padding-top: 10px;
}

.cadence-task-view-comment {
    position: absolute;
    /* Leave room on the right for the Forms/Timeline panel (240px + 5px margin) so this panel
       doesn't render on top of it. */
    width: calc(100% - 389px);
    height: calc(100% - 144px);
    z-index: 1400;
    top: 72px;
    left: 72px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cadence-task-view-comment-header {
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    flex: 0 0 32px;
}

.cadence-task-view-comment-add {
    margin-top: 15px;
    padding: 10px;
    flex: 0 0 32px;
}

.cadence-task-view-comment-card {
    padding: 10px;
    margin-top: 10px;
}

.cadence-task-view-comment-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    padding: 10px;
}

.cadence-task-view-route-view {
    flex: 0 0 auto;
    margin-bottom: 5px;
}

.cadence-task-view-route-list {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100% - 10px);
}

.cadence-task-view-file-list {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
}

.cadence-task-view-file-card {
    width: 100px;
    max-width: 100px;
    height: 120px;
    max-height: 120px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
}

.cadence-task-view-settings {
    position: absolute;
    /* Leave room on the right for the Forms/Timeline panel (240px + 5px margin) so this panel
       doesn't render on top of it. */
    width: calc(100% - 389px);
    height: calc(100% - 144px);
    z-index: 1400;
    top: 72px;
    left: 72px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cadence-field-copy-window {
    position: absolute;
    width: calc(100% - 144px);
    height: 300px;
    z-index: 1400;
    top: 72px;
    left: 72px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cadence-section-copy-window {
    position: absolute;
    width: calc(100% - 144px);
    height: calc(100% - 144px);
    z-index: 1400;
    top: 72px;
    left: 72px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}


.cadence-task-view-settings-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    padding: 10px;
}

.cadence-file-category-selector-form {
    position: absolute;
    width: 500px;
    height: 190px;
    z-index: 1400;
    margin-left: -250px;
    margin-top: -95px;
    top: 50%;
    left: 50%;
    padding: 10px;
}

.cadence-file-category-selector-form-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    padding: 10px;
}


.cadence-task-form-header > .mud-expand-panel > .mud-expand-panel-header {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.cadence-task-view-file-view > .mud-expand-panel > .mud-expand-panel-header {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.cadence-task-view-route-view > .mud-expand-panel > .mud-expand-panel-header {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.cadence-task-detail-view {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 5px;
}

.cadence-task-search-parameters {
    margin-top: 22px;
    padding-left: 5px;
    padding-right: 5px;
}

.cadence-task-search-action-buttons {
    margin-top: 20px !important;
    padding-right: 60px;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
}
/* </task css classes>*/


/* <cadence doc css classes>*/

.cadence-doc-container-toolbar {
    flex: 0 0 56px;
    background-color: var(--mud-palette-appbar-background);
    height: inherit;
    /* Same fix as .cadence-task-navigator-toolbar: keep this toolbar clickable above the
       MudOverlay backdrop (z-index:5) used by the Sign/Actions/Changes/Flow side panels, so
       buttons stay usable while a panel is open instead of the overlay swallowing the click. */
    position: relative;
    z-index: 10;
}

.cadence-doc-container {
    background-color: var(--mud-palette-appbar-background) !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1310;
    overflow: hidden;
    padding: 10px;
    display: flex;
    /* Was row: this container has exactly two children in the markup - the Accept/Close toolbar
       bar (.cadence-doc-container-toolbar, flex: 0 0 56px) and the editor area (.cadence-doc-view).
       row laid them out side by side as narrow columns instead of stacked, so the 56px toolbar
       strip sat to the left of the editor area at the same vertical position as CKEditor's own
       sticky toolbar - which is what looked like the Accept/Close buttons overlapping/hiding part
       of the CKEditor toolbar. column stacks the toolbar bar above the editor as intended. */
    flex-direction: column;
}

.cadence-doc-view {
    margin-left: 5px;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px;
}

/* CKEditor renders tables at width:100% of the editable area via its own stylesheet, but that
   width is never written into the saved HTML (it's purely a CKEditor display default), so the
   view/print rendering - which plays the raw saved HTML back with no CKEditor styling - falls
   back to browser default table sizing (shrink-to-fit content). Force the same width here so the
   view matches what was seen and authored in the editor. */
.cadence-doc-view table {
    width: 100% !important;
}

/* Same fix as .cadence-doc-view, applied to the standalone print-preview page (DocPrint.razor,
   opened via documents/docprint) which renders the same saved HTML but with its own wrapper. */
.cadence-doc-print table {
    width: 100% !important;
}

/* Bulleted/numbered lists render with no visible marker and no indentation, both inside the
   CKEditor editing area and in the read-only view/print pages. Root cause: CKEditor 5's own CSS
   (.ck-content ul/ol) only sets list-style-type (disc/circle/square) - it deliberately relies on
   the browser's default UA stylesheet (padding-inline-start: 40px) to reserve room for the marker,
   rather than setting its own padding. Something else in this app resets padding/margin to 0 on
   every <ul>/<ol>/<li> globally (MudBlazor components lean on bare <ul>s for menus/lists and ship
   a reset for this - not present in cadence.css or bootstrap.min.css, which were checked and ruled
   out). With zero padding, list markers have no reserved space and are rendered squashed against
   the text with nothing visible. Restore the indentation CKEditor expects, scoped to its own
   content (.ck-content = live editing view) and to the saved-HTML view/print wrappers (which have
   no .ck-content class since they just replay the raw saved markup), without touching MudBlazor's
   own list-based components elsewhere in the app. */
.ck-content ul,
.ck-content ol,
.cadence-doc-view ul,
.cadence-doc-view ol,
.cadence-doc-print ul,
.cadence-doc-print ol {
    padding-left: 40px !important;
    margin-left: 0 !important;
}

/* CKEditor 5 appends its contextual "balloon" toolbars (table properties, cell properties, link
   editing, etc.) into a bare, unpositioned <div class="ck-body-wrapper"> that it attaches directly
   to <body> - NOT inside CHtmlEditor's own DOM tree. Because that wrapper has no CSS position of
   its own, the balloon panels inside it (.ck-balloon-panel, z-index: var(--ck-z-panel), which
   defaults to only 1000) stack directly against every other positioned element hanging off <body>.
   CHtmlEditor.razor's outer MudPaper is `position:fixed; z-index:1300`, which is higher than 1000,
   so it was painting on top of (hiding) every CKEditor balloon - this is why no table/cell
   properties toolbar ever appeared when clicking into a table. Raising --ck-z-default here raises
   --ck-z-panel (and every other CKEditor UI layer derived from it) well above 1300/1400 so
   balloons, dropdowns, and tooltips render above the editor's own wrapper again.

   NOTE: index.html loads cadence.css BEFORE ckeditor5.css, and ckeditor5.css defines its own
   `:root{--ck-z-default:1}`. Same-specificity :root rules resolve by source order, so without
   !important CKEditor's own later rule silently wins and resets this back to 1 - the override
   below must carry !important to survive that. */
:root {
    --ck-z-default: 2000 !important;
}

.cadence-doc-action {
    position: absolute;
    width: 640px;
    height: 480px;
    z-index: 1400;
    top: 50%;
    left: 50%;
    margin-top: -240px;
    margin-left: -320px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

/* </cadence doc css classes>*/

/* <cadence spec css classes>*/

.cadence-spec-file-cell {
    /*border-width: 2px;
        border-radius: 5px;*/
    height: 150px;
    border-radius: 30px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
}

.cadence-spec-file-cell-header {
    white-space: nowrap;
    overflow: hidden;
}

.cadence-spec-file-cell-content {
    margin: 10px;
    padding: 5px;
}


.cadence-spec-file-MissingDate {
    color: var(--mud-palette-primary) !important;
}

.cadence-spec-file-Expired {
    color: var(--mud-palette-error) !important;
}

.cadence-spec-file-Good {
    color: var(--mud-palette-success) !important;
}

.cadence-spec-file-AlmostExpired {
    color: var(--mud-palette-warning) !important;
}

.cadence-spec-file-MissingFile {
    background-color: #B76E79 !important;
    color: whitesmoke !important;
}

.cadence-spec-file-NotApplicable {
    background-color: #8a8889 !important;
    color: whitesmoke !important;
}

.cadence-spec-divider {
    margin: 10px;
}

.cadence-spec-container {
    display: flex;
    flex-direction: column;
    flex: 1 auto;
    overflow: auto;
    height: 100%;
    width: auto;
    padding: 0px;
    margin: 0px;
}

.cadence-spec-selector {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    padding: 20px;
}

.cadence-spec-tabs {
    margin: 10px;
    height: 100%;
    overflow: auto;
}

/* </cadence spec css classes>*/
/* <cadence page css classes> */
/* </cadence page css classes> */
/*<cadence control classes>*/
.cadence-textfield-expand-box {
    background-color: var(--mud-palette-appbar-background) !important;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1275;
    overflow: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cadence-textfield-expand-box-container {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 10px;
}

.cadence-textfield-expand-box-footer {
    flex: 0 0 32px;
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
}

.cadence-textfield-expand-box-field {
    width: 100%;
    height: 100%;
}

    .cadence-textfield-expand-box-field > .mud-input-control-input-container {
        position: relative;
        display: flex;
        flex-direction: column;
        height: inherit !important;
    }

        .cadence-textfield-expand-box-field > .mud-input-control-input-container > .mud-input {
            position: relative;
            color: var(--mud-palette-text-primary);
            cursor: text;
            display: inline-flex;
            font-size: 1rem;
            box-sizing: border-box;
            align-items: center;
            font-weight: 400;
            line-height: 1.1876em;
            letter-spacing: .00938em;
            height: inherit !important;
        }

            .cadence-textfield-expand-box-field > .mud-input-control-input-container > .mud-input > textarea.mud-input-root {
                font: inherit;
                color: currentColor;
                width: 100%;
                height: inherit !important;
                border: 0;
                margin: 6px 0 7px;
                padding: 0;
                display: block;
                min-width: 0;
                background: none;
                position: relative;
                box-sizing: content-box;
                letter-spacing: inherit;
                -webkit-tap-highlight-color: transparent;
                resize: none;
                cursor: auto;
            }

.cadence-file-upload {
    box-shadow: 0 2px 7px #4caf50;
    display: inline-flex;
    width: 150px;
    justify-content: space-around;
    border-radius: 2em;
    color: white;
    border: 2px solid;
    cursor: pointer;
    align-items: center;
    padding: 6px;
    background-color: #4caf50;
}

.cadence-file-upload-small {
    box-shadow: 0 2px 7px #4caf50;
    display: inline-flex;
    justify-content: space-around;
    border-radius: 2em;
    color: white;
    border: 2px solid;
    cursor: pointer;
    align-items: center;
    padding: 6px;
    background-color: #4caf50;
}

.cadence-file-preview-image {
    max-height: max-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cadence-focus-box-outline {
    border-radius: 10px;
    border-color: var(--mud-palette-secondary);
    border-width: 5px;
}

.cadence-popup-container {
    display: flex;
    flex-direction: column;
    flex: 1 auto 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.cadence-popup-container-inline {
    display: flex;
    flex-direction: column;
    flex: 1 auto 1;
    overflow: hidden;
}

.cadence-popup-container-inline-extra {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.cadence-popup-header {
    overflow: hidden;
    padding: 10px;
}

.cadence-popup-footer {
    overflow: hidden;
    padding: 10px;
}

.cadence-popup-inner-footer {
    float: right;
    margin-bottom: 5px;
}

.cadence-popup-content {
    height: 100%;
    margin: 10px;
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    overflow: auto;
}

.cadence-top-right {
    float: right;
}

.cadence-page-container {
    display: flex;
    flex-direction: column;
    flex: 1 auto 1;
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.cadence-page-header {
    overflow: hidden;
    padding: 10px;
    margin-bottom: 20px;
}

.cadence-page-footer {
    overflow: hidden;
    padding: 10px;
}

.cadence-page-inner-footer {
    float: right;
    margin-bottom: 5px;
}

.cadence-page-content {
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cadence-content-div {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    padding: 20px;
}

.cadence-table-row-selected {
    background-color: #1E88E5 !important;
}

    .cadence-table-row-selected > td {
        color: white !important;
    }

        .cadence-table-row-selected > td .mud-input {
            color: white !important;
        }

.cadence-report-table > .mud-table-container {
}


.cadence-treeview-selector-dropdown-div {
    width: 100%;
    overflow: hidden;
    height: 300px;
    position: absolute;
    top: 70px;
    text-align: center;
    padding: 10px 0;
    z-index: 1700;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}

    .cadence-treeview-selector-dropdown-div::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.cadence-treeview-selector-nodes-div {
    max-height: 220px !important;
    height: 220px !important;
    overflow: auto;
}

.cadence-treeview-popup-container {
    display: flex;
    flex-direction: column;
    flex: 1 auto 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    margin: 20px;
}

.cadence-treeview-popup-parameters {
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    height: 500px;
    max-height: 500px;
    min-height: 500px;
    z-index: 1400;
}

.cadence-treeview-selector-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.cadence-treeview-item-text {
    text-align: left;
}

/*</cadence control classes>*/
/* <overrride mud css classes to get desired behaviour> */
.mud-appbar .mud-toolbar > .mud-input-control > .mud-input-control-input-container > .mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font: inherit;
    width: 100%;
    border: 0;
    height: 1.1876em;
    margin: 0;
    display: block;
    min-width: 0;
    background: none;
    position: relative;
    box-sizing: content-box;
    letter-spacing: inherit;
    -webkit-tap-highlight-color: transparent;
    padding-left: 5px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    color: var(--mud-palette-drawer-text);
}

.mud-appbar .mud-toolbar > .mud-input-control > .mud-input-control-input-container > .mud-input > .mud-input-adornment > .mud-icon-root {
    color: var(--mud-palette-drawer-icon);
}

.mud-appbar .mud-toolbar .mud-input-control {
    background-color: var(--mud-palette-primary-lighten);
    height: 42px;
    border-radius: 10px;
}

.mud-navmenu {
    margin: 0;
    position: relative;
    list-style: none;
    overscroll-behavior-y: contain;
    overflow-x: hidden;
    height: inherit;
}

.mud-tabs-toolbar {
    background-color: var(--mud-palette-appbar-background) !important;
}

.mud-tooltip-root {
    margin-left: 2px;
}

.mud-charts-xaxis > text {
    text-align: right;
    writing-mode: vertical-rl;
}

/* </overrride mud css classes to get desired behaviour> */


/* <some cool classes to be kept just in case> */

/*.cadence-left-drawer-triangle-cut-out {
    width: 0;
    height: 0;
    border-left: solid 120px;
    border-right: solid 120px;
    border-top: solid 32px;
    border-bottom: solid 32px;
    background-color: var(--mud-palette-primary-lighten);
    border-color: transparent transparent white white;
    position: absolute;
    right: 0;
    top: 0;
}

.cadence-right-drawer-triangle-cut-out {
    width: 0;
    height: 0;
    border-left: solid 120px;
    border-right: solid 120px;
    border-top: solid 32px;
    border-bottom: solid 32px;
    background-color: var(--mud-palette-primary-lighten);
    border-color: transparent white white transparent;
    position: absolute;
    left: 0;
    top: 0;
}

.cadence-left-drawer-image {
    max-width: 120px;
    max-height: 120px;
    z-index: 10;
}

.cadence-hamburger-image {
    height: 2.5rem;
    cursor: pointer;
}
.cadence-hamburger-image-container {
    background-color: transparent;
    margin-top: 5px;
}*/

/* </some cool classes to be kept just in case> */