/* Helper rule to disable all interactions with the component */
.disable-events {
    pointer-events: none;
}

/* Helper rules for MudTextTruncate (own component, just named after the original MudText */
.truncate-singleline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Text truncate for controls having a input child */
    .truncate-singleline input {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.truncate-multiline {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.truncate-multiline-internal {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* The next two css rules are used to add the hover effect to the MeasureProjectSearchResultComponent result list */
/* The original code might be or not be from the MudTable rules*/
/* It checks if hover is supported and a fine pointer (e.x. mouse) is used */
/* .hover-effect-enabled when hover is supported and pointer is fine */
@media (hover: hover) and (pointer: fine) {
    .hover-effect-enabled:hover {
        background-color: var(--mud-palette-action-default-hover);
    }
}

/* This enables the hover effect for active elements and focused elements (except if it has the .mud-selected-item class applied)  */
.hover-effect-enabled:focus:not(.mud-selected-item),
.hover-effect-enabled:active {
    background-color: var(--mud-palette-action-default-hover);
}

/* Two rules for sticky columns in a MudTable, still looks ugly and I think one is broken */
/* MudDataGrid has better support for sticky columns */
.sticky-column-left {
    position: -webkit-sticky;
    position: sticky;
    background-color: var(--mud-palette-surface);
    border: 0px !important;
    text-align: center !important;
    z-index: 999;
    left: 0;
}

.sticky-column-right {
    position: -webkit-sticky;
    position: sticky;
    background-color: var(--mud-palette-surface);
    border: 0px !important;
    text-align: center !important;
    z-index: 999;
    right: 0;
}

/* Smaller <MudFab> version*/
.mud-fab-size-extra-small {
    width: 28px;
    height: 28px;
}

/* Warning text, using error text style */
.warning-helper-text .mud-input-helper-text {
    color: #FFDE03;
}

/* Error text, same as in MudBlazor just for usage in code */
.error-helper-text .mud-input-helper-text {
    color: #FF0000;
}

/* Picture Component Edit Badge */
.picture-edit-badge .mud-badge-wrapper {
    width: 85% !important;
    height: 85% !important;
}

/* 2-dimensional tab layout hack */
.mud-tabs-toolbar-wrapper.mud-tabs-vertical {
    width: 100% !important;
}

.mud-tabs-panels.mud-tabs-vertical {
    overflow-x: auto;
}

.mud-tabs.mud-tabs-vertical .mud-tabs-panel-header {
    flex: 0 1 auto;
}

.mud-tabs-vertical .mud-tab {
    justify-content: start;
}

.mud-tabs-vertical .d-inline-block {
    width: 100% !important;
    display: flex !important;
}

/* Custom rules to modify the site selector in the appbar */
.site-select div.mud-input {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.site-select div.mud-input-slot {
    padding-top: 14px !important;
    padding-bottom: 18px !important;
}

/* Hack to correctly align MudAvatars in table rows */
.mud-table .mud-avatar {
    vertical-align: middle;
    margin: 2px 0px;
}

/* Hack to correctly align Text inside MudAlerts */
/* Need to be checked if it works for all alignments of icons */
.mud-alert-position {
    align-items: center;
}

/* Align text on input elements to the right */
.align-right input {
    text-align: right;
}

/* Apply caption style to input element (this is a hack, newer versions support Typo) */
.typo-style-caption input {
    margin: 0 !important;
    font-size: var(--mud-typography-caption-size) !important;
    font-family: var(--mud-typography-caption-family) !important;
    font-weight: var(--mud-typography-caption-weight) !important;
    line-height: var(--mud-typography-caption-lineheight) !important;
    letter-spacing: var(--mud-typography-caption-letterspacing) !important;
    text-transform: var(--mud-typography-caption-text-transform) !important;
}

.typo-style-caption mud-input-text {
    margin: 0 !important;
}

/* Well, its for bold text ¬_¬ */
.bold-text {
    font-weight: bold !important;
}

/* Remove inner margin from MudTextField by applying "ma-0 mud-input-dense" classes */
.mud-input-dense > .mud-input-control-input-container > div.mud-input {
    margin-top: 0px !important;
}

    .mud-input-dense > .mud-input-control-input-container > div.mud-input > .mud-input-slot {
        padding: 12px !important;
    }

/* Allows the MudSelectItems to be more width then the MudSelectBox */
.mud-select-popover-class-unrestricted-width {
    width: auto !important;
    max-width: initial !important;
}

/* Adds a required star on the label of a control */
.required label::after {
    content: " *";
    color: var(--mud-palette-error) !important;
}

/* Adds a required star on MudText element rendered as p element */
p.required::after {
    content: " *";
    color: var(--mud-palette-error) !important;
}

/* Adds a required star on MudText element rendered as span element */
span.required::after {
    content: " *";
    color: var(--mud-palette-error) !important;
}

/* Apply this to a textfield so the height stays the same even if validation/error text is switched on and off */
.textfield-validation-preserver {
    height: 71px;
}

/* ShrinkLabel Fix for some input controls */
.mud-shrink-fix ~ label.mud-input-label {
    transform: translate(0, 1.5px) scale(0.75);
    transition: transform 0.2s ease;
}

/* ShrinkLabel Fix for some input controls */
.mud-shrink-fix label.mud-input-label {
    transform: translate(0, 1.5px) scale(0.75) !important;
    transition: transform 0.2s ease !important;
}

/* Truncate for chips with long text */
.truncated-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.truncated-chip .mud-chip-content {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    line-height: 34px !important;
}

/* Tooltip fix for truncated content. Apply to RootClass of MudTooltip */
.truncated-content-tooltip {
    width: auto;
    max-width: 100%;
    white-space: normal !important;
}

/* Fix length on vertical divider */
.divider-vertical-fix {
    height: auto !important;
}

/* Fix input gap with 2 line labels */
.two-line-label-fix .mud-input-slot {
    margin-top: 12px !important;
}

/* Fix input gap with 2 line labels */
.non-cap-tabs .mud-tab {
    text-transform: none;
}