:root {
	--headerHeight: 60px;
	--footerHeight: 50px;

	--logoMainColor: #fd7014; 
	
	/*--accentColor: #fd7014;*/
	/*--accentColor: #06d6fb; */
	--accentColor: #337ab7;
	--accentColorContrastText: #363640;

	--accentColorHover: #363640;
	--accentColorHoverContrastText: white;

	/*--accentBadgeColor: #b38f00;*/
	--accentBadgeColor: #06d6fb;

	/*--mainMenuButtonIconColour: var(--accentColor);*/
	--mainMenuButtonIconColour: var(--logoMainColor);
	
	
	--gridToolbarButtonIconForegroundColour: var(--logoMainColor); 


	--mainMenuDrawerBackgroundColor: white;
	--mainMenuDrawerWidth: 400px;

	--pageContentBackgroundColor: white;

	--page-banner-height: 3rem;
	--page-banner-text-colour: black;

	--pageMenuTreeviewWidth: 20%;
	--pageMasterSaveToolbarHeight: 70px;
	--pageMasterSaveToolbarPadding: 10px;

	--dataGridMargin: 10px;
	--dataGridCellPadding: 10px;

	/*--widgetHeight: 2.5rem;*/
}

* {
	box-sizing: border-box;
	padding: 0;
}


@font-face {
	font-family: "dx-icon";
	src: url("/sport-sesel-web/common/css/dx/icons/dxicons.woff2") format('woff2');
	font-weight: normal;
  }


html {
	height: 100%;
	/*box-sizing: border-box;*/
}


body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	color: #373435;

	position: relative;
	min-height: 100dvh;
}


header {
	height: var(--headerHeight);
}


div.page-banner
{
	height: var(--page-banner-height);
	font-size: calc(var(--page-banner-height) / 2);
	padding: 0.8rem;

	display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;

	background-color: #f2f2f2;
	color: var(--page-banner-text-colour);

	text-decoration: none;
	/*color: inherit;*/

	a {
		text-decoration: none;
		color: var(--page-banner-text-colour);
	}

	.home-icon {
		height: calc(var(--page-banner-height) / 2);
	}
	
	
	/* Used with css as <img> tag - not used for now */
	/*
	.arrow-separator-icon {
		height: calc(var(--page-banner-height) / 2);
	}
	*/

	svg.rounded-right-icon {
		height: calc(var(--page-banner-height) / 2);
		fill: var(--logoMainColor);
	}
}

.page-details
{
	height: calc(100% - var(--page-banner-height));
	display: flex;
}

/* Ensure the width of page-menu-treeview is correctly set, say at required width */
.page-menu-treeview
{
	/*width: var(--pageMenuTreeviewWidth);*/
	padding: 0;

	border-right-style: solid;
    border-right-color: #e7e7e7;
    border-right-width: 1px;
}

.persist-treeview-item-selection 
{
	background-color: #337ab7; /* rgba(44, 38, 165, 0.662); */
	color: white;
}


/* Ensure the width of page tabs take the reminder of horizontal space, after the treeview takes its position on the left */
.page-tabs
{
	/*width: calc(100% - var(--pageMenuTreeviewWidth));*/
	height: 100%;

	display: flex;
	flex-direction: column;
}



.page-tab-visible 
{
	display: block;
}

.page-tab-not-visible 
{
	display: none;
}


.page-tabs 
{
	div.dx-fieldset
	{
		position: absolute;
		/*left: 50%;*/
		/*transform: translateX(-50%);*/
		
		width: clamp(450px, 25%, 700px);
		
		padding-left: 2rem;
		padding-right: 2rem;
		padding-top: 1rem;
		padding-bottom: 2rem;
		
		/*border-radius: 7px;*/
		border-radius: unset;
		
		background-color: white;
		/*outline: 1px solid rgba(0, 0, 0, 0.1);*/
		outline: unset;
		
		/*box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);*/
		box-shadow: unset;

		.dx-texteditor .dx-label
		{
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}

		.dx-texteditor-with-floating-label
		{
			margin-bottom: 1.5rem;
		}

		.dx-button 
		{
			width: 100%;
		}
	}

	/* Ensure the scrollview height takes all the space, especially for grids to be displayed in full. */
	.dx-scrollview-content {
    	position: absolute;
		height: 100%;
		width: 100%;
	}

	
}





.page-data-validation-summary
{
	margin-top: auto;
}


.page-master-save-toolbar
{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    padding: 1rem 1rem 1rem 2rem;
    justify-content: flex-start;
    align-items: center;
	gap: 1rem;

	height: var(--pageMasterSaveToolbarHeight);
	/*margin-top: auto;*/ /* not needed because .page-data-validation-summary has margin-top: auto, which causes this div to also fall to the bottom */
	background-color: #f2f2f2;
}


div.page-master-save-toolbar .page-master-back-button 
{
	background-color: #3379b77c;
	border: #2d2e31;
	transition: background-color 0.35s;
	color: white;
	/*width: 10ch;*/
}


div.page-master-save-toolbar .page-master-save-button 
{
	/*margin-left: -1rem;*/
	transition: background-color 0.35s;
}


/*
.page 
{
	position: relative;
}
*/

.page
{
	transition: opacity 1.35s;
}

.page.loading
{
	display: none;
	opacity: 0;
}

.page.ready
{
	display: block;
	opacity: 1;
}

.page.loader
{
	position: absolute;
	margin: 0;
	top: 45%;
	left: calc(calc(100dvw / 2) - 36px); /* 36 => 72/2 */
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	/* https://cssloaders.github.io/ */
	width: 72px;
	height: 72px;
	border: 10px solid;
	border-color: var(--accentColor) transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 2s linear infinite;
}

@keyframes rotation 
{
	0% 
	{
		transform: rotate(0deg);
	}
	100% 
	{
		transform: rotate(360deg);
	}
} 



.button-content {
	position: relative; 
	width: 100%; 
	height: 100%;
}


.dx-button-loader {
	position: absolute;
	left: 0;
	margin-top: auto;
	margin-bottom: auto; 
	width: 10px;
	height: 18px;
}


/*
.dx-widget {
	height: var(--widgetHeight);
}
s*/
/*
form-submit-button-with-loader
*/




.toast-notification {
	position: fixed;
	text-decoration: none;
	z-index: 999999;
	max-width: 300px;
	background-color: #fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	display: flex;
	padding: 10px;
	transform: translate(0, -150%);
  }
  .toast-notification .toast-notification-wrapper {
	flex: 1;
	padding-right: 10px;
	overflow: hidden;
  }
  .toast-notification .toast-notification-wrapper .toast-notification-header {
	padding: 0 0 5px 0;
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	word-break: break-all;
	color: #4f525a;
  }
  .toast-notification .toast-notification-wrapper .toast-notification-content {
	font-size: 14px;
	margin: 0;
	padding: 0;
	word-break: break-all;
	color: #4f525a;
  }
  .toast-notification .toast-notification-close {
	appearance: none;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 24px;
	line-height: 24px;
	padding-bottom: 4px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.2);
  }
  .toast-notification .toast-notification-close:hover {
	color: rgba(0, 0, 0, 0.4);
  }
  .toast-notification.toast-notification-top-center {
	transform: translate(calc(50vw - 50%), -150%);
  }
  .toast-notification.toast-notification-bottom-left, .toast-notification.toast-notification-bottom-right {
	transform: translate(0, 150%);
  }
  .toast-notification.toast-notification-bottom-center {
	transform: translate(calc(50vw - 50%), 150%);
  }
  .toast-notification.toast-notification-dark {
	background-color: #2d2e31;
  }
  .toast-notification.toast-notification-dark .toast-notification-wrapper .toast-notification-header {
	color: #edeff3;
  }
  .toast-notification.toast-notification-dark .toast-notification-wrapper .toast-notification-content {
	color: #edeff3;
  }
  .toast-notification.toast-notification-dark .toast-notification-close {
	color: rgba(255, 255, 255, 0.2);
  }
  .toast-notification.toast-notification-dark .toast-notification-close:hover {
	color: rgba(255, 255, 255, 0.4);
  }
  .toast-notification.toast-notification-success {
	background-color: #C3F3D7;
	border-left: 4px solid #51a775;
  }
  .toast-notification.toast-notification-success .toast-notification-wrapper .toast-notification-header {
	color: #51a775;
  }
  .toast-notification.toast-notification-success .toast-notification-wrapper .toast-notification-content {
	color: #51a775;
  }
  .toast-notification.toast-notification-success .toast-notification-close {
	color: rgba(0, 0, 0, 0.2);
  }
  .toast-notification.toast-notification-success .toast-notification-close:hover {
	color: rgba(0, 0, 0, 0.4);
  }
  .toast-notification.toast-notification-error {
	background-color: #f3c3c3;
	border-left: 4px solid #a75151;
  }
  .toast-notification.toast-notification-error .toast-notification-wrapper .toast-notification-header {
	color: #a75151;
  }
  .toast-notification.toast-notification-error .toast-notification-wrapper .toast-notification-content {
	color: #a75151;
  }
  .toast-notification.toast-notification-error .toast-notification-close {
	color: rgba(0, 0, 0, 0.2);
  }
  .toast-notification.toast-notification-error .toast-notification-close:hover {
	color: rgba(0, 0, 0, 0.4);
  }
  .toast-notification.toast-notification-verified {
	background-color: #d0eaff;
	border-left: 4px solid #6097b8;
  }
  .toast-notification.toast-notification-verified .toast-notification-wrapper .toast-notification-header {
	color: #6097b8;
  }
  .toast-notification.toast-notification-verified .toast-notification-wrapper .toast-notification-content {
	color: #6097b8;
  }
  .toast-notification.toast-notification-verified .toast-notification-close {
	color: rgba(0, 0, 0, 0.2);
  }
  .toast-notification.toast-notification-verified .toast-notification-close:hover {
	color: rgba(0, 0, 0, 0.4);
  }
  .toast-notification.toast-notification-dimmed {
	opacity: .3;
  }
  .toast-notification.toast-notification-dimmed:hover, .toast-notification.toast-notification-dimmed:active {
	opacity: 1;
  }







body.dx-viewport header {
	height: var(--headerHeight);
}

body.dx-viewport main {
	height: calc(100dvh - var(--headerHeight) - var(--footerHeight));
}

body.dx-viewport footer {
	height: var(--footerHeight);
}

body.dx-viewport main div#content {
	height: 100%;
}

body.dx-viewport main div.page-content {
	height: 100%;
	background-color: var(--pageContentBackgroundColor);
}


body.dx-viewport header .dx-icon-menu:before {
	color: var(--mainMenuButtonIconColour); 
}



/* remove top and bottom borders in menu items */
#main-menu-drawer .dx-item.dx-list-item 
{
    border-top: unset;
    color: #333;
}



/* Ensure the grid is not flush against the left and right sides of the screen or container, and the height is correctly set taking into account bannerHeight and footerHeight */
.default-datagrid-dimensions
{
	margin-top: var(--dataGridMargin);
	margin-left: var(--dataGridMargin);
	margin-right: var(--dataGridMargin);
	margin-bottom: var(--dataGridMargin);
	width: calc(100% - calc(var(--dataGridMargin) * 2));
	height: calc(100% - var(--page-banner-height) - var(--footerHeight) - calc(var(--dataGridMargin) * 2));
}


/* Ensure content is grid cells are vertically centered */
.dx-datagrid-content .dx-datagrid-table .dx-row>td
{
	vertical-align: middle !important;
}

/* Reduce the standard thick padding (e.g.padding: 14px 16px;) inside grid cells */
.dx-datagrid .dx-data-row>td {
	padding: var(--dataGridCellPadding) !important;
}



/* Ensure buttons have spacing to the left and right (of the screen) */
/* if grid is not flush against left side of screen */
/*
div.dx-datagrid > div.dx-datagrid-header-panel
{
    margin-left: 10px;
}
*/
/* if grid is not flush against right side of screen */
/*
div.dx-datagrid > div.dx-datagrid-header-panel div.dx-toolbar div.dx-toolbar-after
{
    right: 10px; 
}
*/

/* Change colour of toolbar button icons */
div.dx-datagrid div.dx-toolbar div.dx-button.dx-datagrid-toolbar-button svg path.icon-foreground-colour,
div.dx-datagrid div.dx-toolbar div.dx-dropdownbutton.dx-datagrid-toolbar-button svg path.icon-foreground-colour
{
	fill: var(--gridToolbarButtonIconForegroundColour); 
}
/* Change colour of Export to Excel button icons */ 
.dx-icon-xlsxfile:before,
.dx-icon-exportselected:before {
	color: var(--gridToolbarButtonIconForegroundColour); 
}


/* For custom dxcheckbox in grid, to ensure it is horizontally aligned to centre */
div.grid-checkbox-container-centre-item div.dx-checkbox-container {
	justify-content: center;
}









/* Ensure the Tree List is not flush against the left and right sides of the screen or container, and the height is correctly set taking into account bannerHeight and footerHeight */
.default-tree-list-dimensions
{
	margin-top: var(--dataGridMargin);
	margin-left: var(--dataGridMargin);
	margin-right: var(--dataGridMargin);
	margin-bottom: var(--dataGridMargin);
	width: calc(100% - calc(var(--dataGridMargin) * 2));
	height: calc(100% - var(--page-banner-height) - var(--footerHeight) - calc(var(--dataGridMargin) * 2));
}


/* Ensure content is Tree List cells are vertically centered */
.dx-treelist-content .dx-treelist-table .dx-row>td
{
	vertical-align: middle !important;
}

/* Reduce the standard thick padding (e.g.padding: 14px 16px;) inside Tree List cells */
.dx-treelist .dx-data-row>td {
	padding: var(--dataGridCellPadding) !important;
}

/* Change colour of toolbar button icons */
div.dx-treelist div.dx-toolbar div.dx-button.dx-tree-list-toolbar-button svg path.icon-foreground-colour,
div.dx-treelist div.dx-toolbar div.dx-dropdownbutton.dx-tree-list-toolbar-button svg path.icon-foreground-colour
{
	fill: var(--gridToolbarButtonIconForegroundColour); 
}








/* Update a specific button */
/*
div.dx-datagrid div.dx-toolbar div.dx-button.dx-datagrid-toolbar-button.dx-datagrid-toolbar-delete-button svg path.icon-foreground-colour
{
	fill: red; 
}
*/	

/* Change colour of filter icon in grid header */
/*
.dx-datagrid .dx-header-filter::before 
{
    color: cadetblue;
}
*/


/**
 * Toolbar title
 */
.dx-theme-material-typography .toolbar-title a {
    color: var(--accentColor); /*#cddc39;*/
    text-decoration: none!important;
    font-size: 1.3rem;
}




/**
 * main menu (dxDrawer)
 */
 /*
 .dx-drawer.dx-widget .dx-scrollview-top-pocket {
	 margin-bottom: 10px;
 }

 .dx-drawer.dx-widget .dx-theme-accent-as-background-color {
	background-color: var(--accentColor)!important; /#*#cddc39;*#/
	fill: var(--accentColor)!important; /#*#cddc39;*#/
}

.dx-drawer.dx-widget .dx-theme-accent-as-background-color .dx-list-item {
	border-top: unset;
	color: var(--accentColorContrastText);
	transition: 0.15s
}

.dx-drawer.dx-widget .dx-theme-accent-as-background-color .dx-list-item:hover {
	background-color: var(--accentColorHover);
	color: var(--accentColorHoverContrastText); /#*white;*#/
}
*/



/* Background colour of drawer menu */ 
.dx-viewport #main-menu-drawer .dx-overlay-content
{
	background-color: var(--mainMenuDrawerBackgroundColor);
}



/**
 * user drop down in toolbar
 */
.user-menu-icon-color {
	fill: var(--accentColor); /*colour based on accent color */
}

.dx-list-item-badge.dx-badge {
    background-color: var(--accentBadgeColor);
}




.header-content {
	/* left: 50%; */
	/* padding: 10vmin; */
	/* position: fixed; */
	/* text-align: center; */
	/* top: 10%; */
	/* transform: translate(-50%, -50%);
	/*color: #373435;*/
	/* font-size: 2rem; */
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
}

.header-content > div {
	margin: 10px;
}


.loginLink 
{
	font-size: .8rem;
	color: unset;
	text-decoration: underline; 
}


.content {
	left: 50%;
	padding: 10vmin;
	position: fixed;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}


.logoImage {
	/*width: 200px; /* ratio width to height is 2000 to 285 */
	height: 100%; 
	/*width:25%;*/
	width: clamp(250px, 25%, 700px);
}

.content > p {
	font-size: clamp(1.5rem, 1.7vw, 3rem); 
}
	



body main div#content
{
	/*
	background-image: url(https://hrp.transformers.sc/hrp/common/image/logo/logo-wide.svg);
	background-repeat: repeat;
	*/
	background-color: white;
}


/**
 * row selection in dx-datagrid
 */
/*
div.dx-datagrid div.dx-datagrid-rowsview tr.dx-row.dx-data-row.dx-column-lines.dx-selection,
div.dx-datagrid div.dx-datagrid-rowsview tr.dx-row-focused.dx-data-row>td:not(.dx-focused)
{
	background: unset;
}
*/







/* ensure the save and keep open checkbox is not flush against the top of the submit/save button */
.dx-fieldset {

	.dx-fieldset-header {
		/*margin-top: 30px;*/
	}
	
	.form-submit-button-with-loader, .fieldset-button-with-loader
	{
		/* Prime the submit button so that the loader can be positioned absolute within it */
		position: relative;

		background-color: var(--accentColor);
		transition: background-color 0.35s;
		color: white;
	}
	
	.form-submit-button-with-loader:hover, .fieldset-button-with-loader:hover
	{
		background-color: #00bcdd;
	}

	/*
	.form-submit-button-loader, .dx-button-loader fieldset-button-loader
	{
		position: absolute;
		left: 10px;
	}
	*/

	/* ensure the save and keep open checkbox is not flush against the top of the submit/save button */
	.save-and-keep-open-checkbox
	{
		padding-top: 10px;
	}
}




/* Ensure validation summary is show at the bottom, ideally just above the save button */
.dx-validationsummary.dx-widget.dx-collection #profile-and-preference-page-data-validation-summary
{
    margin-top: auto;
}

/* Ensure validation summary items' background catches attention of user */
.dx-item.dx-validationsummary-item
{
    padding: 20px;
	background-color: #fbd4d6;
}

.page-master-save-toolbar .master-save-button
{
	background-color: var(--accentColor);
	transition: background-color 0.35s;
	color: white;
	width: 120px;
}



.footerContent {
	left: 50%;
	/*padding: 4vmin;*/
	position: fixed;
	text-align: center;
	bottom: 0px;
	transform: translate(-50%, 0%);
	color: #373435;
	font-size: 1rem;
	width: 100%;
}		


.footerContent > p {
	margin-bottom: 16px;
}

.footerContentEmail {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;

	gap: 7px;
}




/* Change the colour of the overlay when popups apear */
body.dx-viewport div.page div.dx-overlay-shader
{
	background-color: rgba(0,0,0,.5);
}


div.page-details div.page-menu-treeview div.dx-treeview-search 
{
	border: unset;
	border-radius: unset;

	border-bottom: 1px solid #e7e7e7;
}



.dx-header-row:first-of-type {
	font-weight: 700 !important;
}