.standardsplash-logowithprogress-logo {
    height: 200px !important;
    margin-bottom: 150px !important;
}

.grid-text-success {
    font-weight: bold;
    color: rgba(11, 186, 131, 1) !important;
}

.grid-text-warning {
    font-weight: bold;
    color: rgba(255, 168, 0, 1) !important;
}

.grid-text-error {
    font-weight: bold;
    color: rgba(246, 78, 98, 1) !important;
}

.grid-text-disabled {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.25) !important;
}

.warning-background,
.warning-background td,
.warning-background td:hover,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.warning-background:hover .mud-table-cell.sticky-right,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.warning-background:hover .mud-table-cell.sticky-left {
    background-color: #FFFFDE !important;
}

.completed-background,
.completed-background td,
.completed-background td:hover,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.completed-background:hover .mud-table-cell.sticky-right,
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row.completed-background:hover .mud-table-cell.sticky-left {
    background-color: #E6FFEA !important;
}

.evaluation-pro {
    color: #424242 !important;
    background-color: #4caf503d !important;
}

.sc-labelfield .evaluation-pro .mud-input-slot {
    color: #424242 !important;
}

.evaluation-con {
    color: #424242 !important;
    background-color: #f99a9347 !important;
}

.sc-labelfield .evaluation-con .mud-input-slot {
    color: #424242 !important;
}

.evaluation-info {
    color: #424242 !important;
    background-color: #00000012 !important;
}

.sc-labelfield .evaluation-info .mud-input-slot {
    color: #424242 !important;
}

.span-child-flexitem-star > span {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    min-width: 0px;
    min-height: 0px;
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

.clickable-field,
.clickable-field * {
    cursor: pointer !important;
}

/* Our version of MudBlazor seems to emit style="min-width:160px;" for each mud-tab header. To patch this on
   JobApplication-Edit page where we desire to have two icon tabs with small width, the following two
   styles are introduced */
.mmit-ams-jobapplication-edit div.mud-tab:has(.mmit-ams-jobapplication-edit-mails-tab) {
    min-width: auto !important;
}
.mmit-ams-jobapplication-edit div.mud-tab:has(.mmit-ams-jobapplication-edit-attachments-tab) {
    min-width: auto !important;
}
/* if a mud-tab header contains a tooltip, make the triggering area fill up as much space as possible in that mud-tab header */
.mud-tab > .mud-tooltip-root {
    flex: 1 1 auto;
    place-content: center;
    height: stretch;
}

/* in the vertical side area with comment cards near the (right) end-border of display-space, make the triggering area fill up as much space as possible in the content part of the card */
.mmit-ams-comment-list-side-end .mud-tooltip-root {
    min-width: stretch;
    max-width: stretch;
    min-height: stretch;
    max-height: stretch;
    display: flex;
}
/* in the vertical side area with comment cards near the (right) end-border of display-space, create cards that can grow in height, but have a base height of 6 lines */
.mmit-ams-comment-list-side-end.mud-card {
    display: block;
}
/* for a comment card, separate the header from the content with a vertical line */
.mmit-ams-comment-list-side-end .mud-card-header {
    border-bottom-color: var(--mud-palette-divider);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: var(--mud-palette-table-striped);
}
/* next four: for a comment card, display the header information as block and place the (tooltipped) chip inline, trying to align all text on the same line */
.mmit-ams-comment-list-side-end .mmit-ams-comment-list-side-end-header {
    display: inline-block;
}
.mmit-ams-comment-list-side-end .mmit-ams-comment-list-side-end-header > * {
    display: inline!important;
    /*vertical-align: middle;*/
}
.mmit-ams-comment-list-side-end .mmit-ams-comment-list-side-end-header.mud-chip {
    display: inline-block!important;
    margin-top: 0;  /* intentionally kill mud-chip margin */
    margin-right: 0;  /* intentionally kill mud-chip margin */
    margin-left: 0.8em;  /* intentionally have some space between previous element(s) and mud-chip */
    margin-bottom: 3px;  /* this is a hack to align the text baseline of the mud-chip's text with the preceeding text */
}
.mmit-ams-comment-list-side-end .mmit-ams-comment-list-side-end-header.mud-chip .mud-chip-content {
    display: inline-block !important;
    /*vertical-align: middle;*/
    align-content: center;
}
/* for a comment card, ensure the content is wrapped, but cannot overflow the height of the container. Basically we want an ellipsis, but that is not possible in CSS if you allow wrapping on multiple lines as we do, i. e. if you have white-space: pre-wrap */
.mmit-ams-comment-list-side-end .mmit-ams-comment-card-content {
    text-align: start;
    height: stretch;
    overflow-y: hidden;
    white-space: pre-wrap; /* display spaces and newlines as entered */
    overflow-wrap: break-word;
    text-wrap-mode: wrap;
    text-wrap-style: stable;
    text-overflow: ellipsis;
}

/* use class mmit-ams-pre-line-validation and expand this for other controls where you want validation messages to keep their line-breaks */
.mmit-ams-pre-line-validation.mud-input-control div.me-auto {
    white-space: pre-line;
}

.impersonation-active::before {
    content: '';
    position: fixed;
    inset: 0;
    border: 4px solid rgba(244, 67, 54, 1);
    pointer-events: none;
    z-index: 9999;
}

.html-editor-full-size .mud-input-control-input-container,
.html-editor-full-size .mud-input,
.html-editor-full-size .mud-input-slot,
.html-editor-full-size .d-flex.flex-wrap.align-center.mud-width-full {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

.html-editor-full-size .rz-html-editor {
    flex: 1;
}

.mud-expand-panel-header {
    padding: 9px !important;
}

.mud-toolbar {
    padding: 9px !important;
}