/*@import url('https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css');*/
@import url('./vis-timeline-graph2d.min.css');
@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
@import url("../fontawesome/css/all.min.css");
@import url("./feedback-form.css");
@import url("./indi-cards.css");
@import url("./asset-selection-toolbar.css");
@import url("./sf-responsiveness-desktop.css");
@import url("./sf-responsiveness-mobile.css");
@import url("./sf-responsiveness-tablet.css");
@import url('./timeline.css');

:root {
	--indi-primary-colour: #0D808E;
	--indi-primary-dark: #084951;
	--indi-primary-light: #36c3d3;
	--indi-primary-text-colour: #000;
	--indi-primary-transparent: #0D808Ebb;
	
	--indi-secondary-colour: #31AFAE;
	--indi-secondary-text-colour: #000;
	--indi-secondary-transparent: #31AFAEbb;

	--indi-light-colour: #fff;
	--indi-light-text-colour: #000; /* NOTE: This is usually a *DARK* colour! This is the colour for text to be put on the "light" background */
	--indi-light-transparent: #ffffffbb;
	
	--indi-white: #f1f1f1;
	--indi-grey: #727272;
	--indi-black: #000000;
	
	--indi-small-spacing: 8px;
	--indi-big-spacing: 16px;
}

html, body {
	background: none;
}

a, .btn-link {
	color: var(--indi-primary-colour);
}

.e-dialog .e-dlg-header-content,
.e-btn.e-flat.e-primary,
.e-css.e-btn.e-flat.e-primary,
.btn-primary {
	color: var(--indi-primary-colour);
	background-color: var(--indi-white);
	border-color: var(--indi-primary-colour);
}

.e-btn.e-flat.e-primary:hover,
.e-btn.e-flat.e-primary:focus,
.e-css.e-btn.e-flat.e-primary:hover,
.btn-primary:hover {
	background-color: var(--indi-secondary-colour);
	border-color: var(--indi-secondary-colour);
}

.e-btn.e-flat.e-primary:focus {
	box-shadow: 0 0 0 0.25em rgba(49, 175, 174, 0.5);
}

.e-dlg-header {
	color: var(--indi-primary-colour);
}

.e-btn.e-flat:disabled,
.e-css.e-btn.e-flat:disabled {
	background-color: grey;
	cursor: not-allowed;
}

.top-row {
	height: 3.5rem;
	display: flex;
	align-items: center;
}

.main {
	flex: 1;
}

app {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	line-height: 1.0;
	background: none;
}




/*  
	This is all of the remaining space outside of the collapsed sidebar & the header
*/
.indi-app-body {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	flex: 1;
	background: none;
}





/* Designed for the MainLayout app body definition so it takes up the entire browser viewport. */
.indi-app-body-fill {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: none;
}

.indi-panel {
	display: flex; 
	flex-direction: column; 
	align-content: center;
	
	gap: 12px;
	padding: 12px;

	color: var(--indi-white);
	background-color: rgba(0 0 0 / 0.6);
	
	border: 1px; 
	border-style: solid; 
	border-radius: 4px;
	border-color: var(--indi-white);
}

.indi-toolbar {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	margin: 12px;
}

.layout-wrapper
{
	display: flex;
}

.layout-wrapper.vertical{
	flex-direction: column;
}

/*  Designed for when an Indi viewport is being embedded within the page and doesn't take up the entire page.
    z-index needs to be >0 for Indi viewports which have pointer interaction functionality.
*/
.indi-viewport {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: none;
}

/*  Designed for when an Indi viewport is to take up the entire browser viewport. 
    z-index needs to be >0 for Indi viewports which have pointer interaction functionality.
*/
.indi-viewport-fill {
	top: 0;
	left: var(--collapsed-sidebar-width);
	right: 0;
	bottom: 0;
	background: none;
	position: absolute;
	display: flex; 
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-items: center;
}

.indi-background-browser-fill {
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.e-dialog {
	border-style: none;
}

.main .top-row {
	background-color: #f7f7f7;
	border-bottom: 1px solid #d6d5d5;
	justify-content: flex-end;
}

.main .top-row > a, .main .top-row .btn-link {
	white-space: nowrap;
	margin-left: 1.5rem;
}

.main .top-row a:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.content {
	padding-top: 1.1rem;
}

.navbar-toggler {
	background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

.opacity-half {
	opacity: 0.5;
}

#SitesDialogue .e-footer-content {
	text-align: center;
	padding: 0.5rem;
}

.site-button {
	display: block;
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
}

.sfgrid_vertical_scrollbar_hack {
	/* An imperfect hack to ensure EjsGrid's vertical scroll bars appear to the right of the data rows'*/
	height: 95%;
}

.e-grid.e-wrap .e-columnheader .e-headercelldiv,
.e-grid .e-columnheader.e-wrap .e-headercelldiv {
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

.e-dialog .e-dlg-header-content {
	border-radius: 3px 3px 0 0;
}

.e-dialog .e-footer-content {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

/********************* Pagination *********************/
.e-link.e-numericitem.e-spacing.e-currentitem.e-active,
.e-link.e-numericitem.e-spacing.e-currentitem.e-active:hover {
	background-color: var(--indi-primary-colour);
	color: white;
}

.e-link.e-numericitem.e-spacing.e-pager-default {
	background-color: white;
	color: var(--indi-primary-colour);
}

.e-pager div.e-icons {
	color: var(--indi-primary-colour);
}

/******************** Navigable Asset Icons ********************/
.teleport-to-icon.has-location {
	font-size: 20px;
	color: green;
}

.teleport-to-icon.no-location {
	font-size: 20px;
	color: red;
}

.teleport-to-icon.small-oi-icon {
	font-size: 14px;
}

/******************** Blazor Errors ********************/
#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 99999;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

/******************** Media Queries ********************/
@media (max-width: 767.98px) {
	.main .top-row:not(.auth) {
		display: none;
	}

	.main .top-row.auth {
		justify-content: space-between;
	}

	.main .top-row a, .main .top-row .btn-link {
		margin-left: 0;
	}
}

@media (min-width: 768px) {
	app {
		flex-direction: row;
	}

	.main .top-row {
		position: sticky;
		top: 0;
	}

	.main > div {
		padding-left: 2rem !important;
		padding-right: 1.5rem !important;
	}

	.navbar-toggler {
		display: none;
	}
}

.image-backdrop {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1000;
}

.strike-bar {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	background-color: rgba(0 0 0 / 0.6);
}

.strike-bar-text {
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	text-align: center;
	color: white;
	font-size: 20px;
	margin-top: 8px;
}