@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

html, body {
    height: 100%;
	font-family: var(--site-fontfamily);
	font-size: 1rem;
}
app {
    display: block;
    height: 100%;
}

.header-logo {
    /* -webkit-mask: url('../images/Logo.svg'); */
    /* mask: url('../images/Logo.svg'); */
    /* mask-position: center; */
    /* -webkit-mask-repeat: no-repeat; */
    /* mask-repeat: no-repeat; */
	flex-shrink: 0;
    background-color: currentColor;
	background: url(../images/Tevarai-logo-full.png) left center no-repeat;
	background-size:contain;
    width: 200px;
    height: 22px;
	margin-left: 0px !important;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}


/*--------LOADING OVERRIDE---------*/
.spinner-border {
    border: .2em solid var(--site-secondary);
    border-right-color: transparent;
}

#loadingBackground img.loading-image {
    width: 140px !important;
    height: 140px !important;
    border-radius: 300px;
}

#loadingBackground img.loading-image {
    width: 140px !important;
    height: 140px !important;
    border-radius: 300px;
}

.loading-items-center > .bg-primary {
    background-color: var(--site-tertiary);
    background: var(--site-tertiary-custombg) !important;
}

.loading-items-center > .border-primary {
    border-color: var(--site-tertiary) !important;
}

.border-primary {
    border-color: var(--site-primary) !important;
}

.bg-primary {
    background-color: var(--site-primary) !important;
    background: var(--site-primary-custombg) !important;
}

/* .loading-floated-circle { 
    border-color: var(--site-primary) !important;
}*/

.dxbl-pivot-table {
    height: -webkit-fill-available;
}

/*google autocomplete always content top*/
.pac-container {
    z-index: 99999 !important;
}

span.list-previous-count {
    text-decoration: line-through;
    opacity: 50%;
}

span.previous-count {
    text-decoration: line-through;
    opacity: 50%;
}

/*--------STATE BADGE (StateBadgeEditor)---------*/

/* Shape matches the dashboard List widget's status pill (tvr-list-badge) so the
   same status reads the same on both surfaces. The colours here are the neutral
   fallback for a value no state matches — a matched state supplies its own
   inline, so nothing here may be !important or the configured colours lose. */
.tvr-state-badge {
    display: inline-block;
    max-width: 100%;
    padding: .25em .75em;
    border-radius: 50px;
    background-color: rgba(123, 139, 145, .85);
    color: #fff;
    font-size: .8em;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* The value's [ImageName] glyph (.tvr-state-badge__icon) is styled inline by
   StateBadgeEditor, mask URL included — nothing for this sheet to add. It is a
   mask rather than an <img> because the shipped icons stroke in black and would
   vanish against a dark pill; a mask paints currentColor through the glyph. */

/* The state's Appearance row also makes XAF paint the whole cell
   (StateMachineAppearanceController), which would put a coloured block behind
   the pill. The pill carries the colour, so clear the fill — scoped to cells
   that actually hold one. */
.dxbl-grid td:has(.tvr-state-badge) {
    background-color: transparent !important;
}

.map-routelist-compact-toggle-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0px;
    border-radius: 6px;
    background: url('../IImageService/align-justify') center center no-repeat;
    background-size: 22px 22px;
    opacity: .55;
    cursor: pointer;
}