/* @define utilities */
.u-ellipsis {
    vertical-align: bottom;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.u-oneLine {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.u-circleIndicatorInvalid,
.u-circleIndicatorValid {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
}

.u-circleIndicatorInvalid {
    background-color: var(--danger);
}

.u-circleIndicatorValid {
    background-color: var(--success);
}

.u-invalidItem {
    color: var(--danger);
}

.u-validItem {
    color: var(--success);
}

.u-table {
    /*
     * Sets common table header styles.
     * See rules involving u-table in bootstrap-override.css for more details.
     * This class should be deprecated once the Vue transition is complete,
     * we just want to avoid interfering with AngularJS based tables until then.
     */
    overflow-wrap: break-word;
}

/* Sets common table header styles */
.u-table thead {
    position: sticky;
    top: 0;
    background-color: var(--surface-default);
}

/* Sets common table header styles */
.u-table thead th {
    cursor: pointer;
    user-select: none;
    vertical-align: top;
    background: var(--secondary-subtle);
    border-top: none;
}

.u-table.is-unsortable thead th {
    cursor: default;
}

/* Sets the common rule for the container that wraps a loading spinner.  */
.u-loader-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--surface-default);
    z-index: 900;
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-loader {
    font-size: 10vh;
}

.show-vue-background {
    background-color: rgba(66, 184, 131, 1) !important;
}