/* styles that can have media query overrides */
.mw-home-tile {
	font-size:24px;
	padding:12px;
	background:var(--mw-blue);
	color:white;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	border-radius:inherit;
	transition:background 0.3s;
	touch-action:manipulation;
}
.mw-home-tile svg { font-size:72px; }
.mw-home-tile:hover { background:#4a8cf0; }
.mw-filter-row-button { height:41px; min-width:62px; padding:0; } /* overrides mud-button defaults */
	
/* install screen */
.mw-install, .mw-loading-progress { font-family:Roboto,Arial; margin:4px; }
.mw-install { font-size:16px; }
.mw-loading-progress { font-size:22px; }
.loading-progress-percentage:after { content:var(--blazor-load-percentage-text, "0%"); }
.linear-progress { background:var(--mw-gray-200); width:75vw; height:.7rem; border-radius:10rem; overflow:hidden; position:relative; }
.linear-progress:after { content:''; position:absolute; inset:0; scale:var(--blazor-load-percentage, 0%) 100%; transform-origin:left top; transition:scale ease-out 0.5s; background:linear-gradient(to right, #639cf3, #1e4e99, #639cf3); background-size:200% 100%; animation:shimmer 2s linear infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.mw-install .tab-container { display:flex; border-bottom:1px solid #eee; margin:24px 0 12px 0; }
.mw-install .tab { background:#eee; border-bottom:2px solid #ddd; padding:10px 0; cursor:pointer; margin-right:2px; border-radius:5px 5px 0 0; width:120px; text-align:center; transition:background 0.5s; }
.mw-install .tab:hover { background:#ddd; }
.mw-install .tab.active { background:#fff; border-bottom:2px solid var(--mw-blue); }
.mw-install .tab-content { display:none; padding:12px 4px; }
.mw-install .tab-content.active { display:block; }
.mw-install i { color:var(--mw-blue); }
.mw-install button { margin-top:12px; font-size:20px; background:var(--mw-blue); color:white; border-radius:4px; padding:8px 20px; }
.mw-install button i { color:white; }

@media (max-width:599.98px) { /* xs overrides (phones in portrait mode) */
	.mw-home-tile { font-size:18px; }
	.mw-home-tile svg { font-size:64px; }
	.mw-filter-row-button { min-width:54px; }
	.mw-install .tab { width:85px; }
}

/* custom mars styles that dont have media query overrides */
.mw-reading-button { text-transform:none; line-height:1.2; padding:8px 12px!important; } /* leave client chosen text casing; less vertical space if button text wraps */
.mw-appbar-icon { padding:8px; }
.mw-hide-tabs .mud-tabs-tabbar { display:none; }
.mw-results-message { margin:0 0 8px 4px; font-size:13px; }
.mw-map-icon-primary { fill:var(--mw-blue); }
.mw-map-event-row { margin-top:4px; padding:6px 0 2px 0; font-size:.9em; border-top:solid 1px #eee; }

/* tab header chevrons (within mud-tabs-tabbar so they dont also apply to the tab content) */
.mud-tabs-tabbar .mw-tab-chevron { position:relative; }
.mud-tabs-tabbar .mw-tab-chevron::before, .mud-tabs-tabbar .mw-tab-chevron::after {
	content:'';
	position:absolute;
	width:16px; /* line length */
	height:2px; /* line thickness */
	background-color:#aaa;
	transform-origin:right center;
	top:50%;
	right:-5px; /* allows the chevron to extend into the tab to the right */
}
.mud-tabs-tabbar .mw-tab-chevron::before { transform:translateY(-45%) rotate(75deg); }
.mud-tabs-tabbar .mw-tab-chevron::after { transform:translateY(-55%) rotate(-75deg); }

/* grid rows (selectors need to be this specific to override default telerik alternating row style) */
.k-grid tbody tr.k-table-row.mw-row-outgoing, .k-grid tbody tr.k-table-row.k-table-alt-row.mw-row-outgoing { background-color:#c5cae9; color:black; }
.k-grid .k-table-tbody > tr.k-table-row.mw-row-outgoing:hover { background-color:#e8eaf6; }
.k-grid tbody tr.k-table-row.mw-row-existing, .k-grid tbody tr.k-table-row.k-table-alt-row.mw-row-existing { background-color:#e0f0e0; color:black; }
.k-grid .k-table-tbody > tr.k-table-row.mw-row-existing:hover { background-color:#efffef; }
.k-grid tbody tr.k-table-row.mw-row-incoming, .k-grid tbody tr.k-table-row.k-table-alt-row.mw-row-incoming { background-color:#e0e0f0; color:black; }
.k-grid .k-table-tbody > tr.k-table-row.mw-row-incoming:hover { background-color:#efefff; }