*::selection { color:white; background-color: rgb(30, 41, 59);}

#mainMenu 
{
    background-color: rgb(30, 41, 59);
    padding: 10px;
}

body
{
	background-color: white;
	color: black;
	font-size: x-large;
	margin: 0;
}

a { color: rgb(30, 41, 59)}

table 
{ 
    border-collapse: collapse;
    width: 100%;
}

table.visibleBordersTable, .visibleBordersTable td, .visibleBordersTable th
{
	border: 1px solid rgb(184, 184, 184);
}

table td
{
	border-bottom: 1px solid lightgray;
}

th.shrinkCell, td.shrinkCell { width: 10px; white-space: nowrap; }

.formField
{
	display: block;
	margin: 5px;
}

.rightControl 
{
	text-align: right;
}

h1, h2, .centControl 
{
	text-align: center;
}

.searchFormField
{
	display: flex;
	align-items: center;
}

/***************************** Calendar basic styles *****************************/
.event { background-color: #d3d3d3; color: #888; }
.holiday { background-color: #ffc0cb; color: #cc0000; }
.simpleevent { background-color: #ffffe0; color: #aaaa00; }
/**********************************************************************************/

.searchButton { min-width: 20px; }

input, select, textarea { outline: none; }

.linkButton, input[type="button"], input[type="submit"], button
{
    margin: 3px;
    font-size: 18pt;
    min-width: 150px;
    height: 30px;
    border: 1px solid rgb(16, 22, 31);
    border-radius: 5px;
    background-color: rgb(30, 41, 59);
    color: white;
    transition-duration: 0.1s;
    box-shadow: inset 0px -7px 10px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

.linkButton
{
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-family: sans-serif;
	padding: 0 5px 0 5px;
}

.linkButton:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover { background-color: rgb(42, 58, 83); }
.linkButton:active, input[type="button"]:active, input[type="submit"]:active, button:active { box-shadow: inset 0px 7px 10px rgba(0,0,0,0.2); }

input[type="button"]:disabled, input[type="submit"]:disabled, button:disabled
{
    background-color:dimgray;
    border: 1px solid dimgray;
    color: gray;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type='url'],
input[type="search"], input[type="date"], input[type="time"], select, textarea { font-size: large; }
textarea { width: 100%; }

ul.pagination, .editDeleteButtonsFrame ul { display: block; list-style-type: none;  }
.pagination li { display: inline; margin-right: 5px;}
li.currentpageNum a { font-weight: bold; text-decoration:none;}

.viewDataFrame { margin-top: 10px; margin-bottom: 10px; }
.viewDataFrame label { font-weight: bold; }

.pageMessagesFrame
{
	text-align: center;
	background-color: lightslategray;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	max-width: 500px;
	border-radius: 15px;
}

fieldset
{
	border-radius: 10px;
    border: 2px solid darkgray;
    margin-bottom: 0.5rem;
}

.editDeleteButtonsFrame li { display: inline; margin-right: 5px; } 

.inputToggleButton
{
	display: inline-block;
	padding: 0;
}

.inputToggleButtonFace
{
	display: block;
	text-align: center;
	font-family: sans-serif;
	padding: 3px 3px 0 3px;
	margin: 3px;
    font-size: 18pt;
    border: 1px solid rgb(21, 28, 41);
    border-radius: 5px;
    background-color: rgb(30, 41, 59);
    color: white;
    transition-duration: 0.1s;
    box-shadow: inset 0px -7px 10px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

.inputToggleButton input[type='checkbox']:checked + .inputToggleButtonFace
{
	background-color: rgb(30, 41, 59);
	box-shadow: inset 0px 7px 10px rgba(0,0,0,0.2);
}
.inputToggleButton input[type='checkbox']:checked + .inputToggleButtonFace * { transform: scale(0.9); }

.inputToggleButton label > input[type='checkbox'] { display: none; }


tr.expandableTableRow { cursor: pointer; }
tr.expandableTableRow:hover { background-color: #eee; }

tr.expandableTableRow + tr.tableRowExpandInfosPanel 
{ position: absolute; visibility: hidden; }
tr.expandableTableRow:focus + tr.tableRowExpandInfosPanel,
tr.expandableTableRow + tr.tableRowExpandInfosPanel:active, 
tr.expandableTableRow + tr.tableRowExpandInfosPanel:focus-within,
tr.expandableTableRow + tr.tableRowExpandInfosPanel:hover
{ visibility: visible; position: unset;}

tr + tr.tableRowExpandInfosPanel > td > div
{
	max-height: 0;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0.3em;
    background-color: #f8f8f8;
    box-shadow: inset 3px 3px 6px 2px rgb(0 0 0 / 20%);
	font-size: 95%;
	transition: max-height 0.3s, padding 0.3s;
}

tr.expandableTableRow:focus + tr.tableRowExpandInfosPanel > td > div,
tr.expandableTableRow + tr.tableRowExpandInfosPanel:active > td > div, 
tr.expandableTableRow + tr.tableRowExpandInfosPanel:focus-within > td > div,
tr.expandableTableRow + tr.tableRowExpandInfosPanel:hover > td > div
{
	max-height: 500px;
	transition: max-height 0.6s, padding 0.6s;
}

hr { margin: 5px; }

.databaseEntityIdInput { width: 4em; }

.dropdownMenuButtonArea
{
	position: relative;
	display: inline-block;
}

.dropdownMenu 
{ 
	display: block;
	min-width: 128px;
	max-width: 350px;
	visibility: hidden; 
	position: absolute;
	top: 5px;
	background-color: #eee;
	border-radius: 5px;
	border: 1px solid lightgray;
	list-style: none;
	padding: 5px;
	width: max-content;
	z-index: 2;
}

.dropdownMenu li
{
	padding: 3px;
	white-space: normal;
	word-wrap: break-word;
}

.dropdownMenu li a 
{
	display: block;
	width: 100%;
	flex: 1;
	text-decoration: none;
	color: black;
}

.dropdownMenu li label { display: flex; width: 100%; }
.dropdownMenu li label > input, .dropdownMenu li label > select { flex: 1 10 auto; min-width: 2em; }

.dropdownMenu li:hover { background-color: lightgray; }

.dropdownMenuButtonArea button ~ .dropdownMenu:focus-within,
.dropdownMenuButtonArea button ~ .dropdownMenu:hover,
.dropdownMenuButtonArea button:focus ~ .dropdownMenu
{ visibility: visible; }

/*************************** NOTIFICATIONS ***************************/

 #notificationPanel { position: relative; display: inline-block; }
#notificationPanel:focus-within #notificationDropdown { display: flex; } 
#notificationPanelButton { margin: 0.5em; font-size: 0.8em; cursor: pointer; display: inline-block; }
#notificationPanelButton:not([data-notifications="0"])::after 
{ 
	content: attr(data-notifications);
	color: white;
	font-weight: bold;
	background-color: #cc0000;
	padding: 5px;
	border-radius: 5px;
}

#notificationPanelButton + #notificationDropdown
{
	box-sizing: border-box;
	display: none;
	position: absolute;
	left: 5px;
	top: 40px;
	background-color: #f8f8f8;
	border: 4px solid rgb(30, 41, 59);
	border-radius: 10px;
	padding: 5px;
	margin: 0;
	width: 380px;
	max-height: 400px;
	flex-direction: column;
	overflow-y: auto;
	z-index: 1;
}

.notificationItemBox { border-bottom: 1px solid darkgray; }

.notificationItemBox[data-is-read="0"] { background-color: lightgray; }

.notificationItemBox > a 
{ 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 5px;
	text-decoration: none;
	display: flex; 
	flex-direction: row;   
	color: black;
}

.notificationItemBox .deleteNotificationLinkBox
{ 
	display: block; 
	text-align: right; 
	font-size: medium;
}

.notificationTextBox { width: 100%; }
.notificationIconBox { text-align: center; padding: 5px; margin-right: 5px;}
.notificationTextBox h1 { font-size: 0.9em; text-align: left; margin: 0; padding: 0; }
.notificationTextBox p { font-size: 0.8em; margin: 5px 0 0 0; padding: 0; }

.notificationTextBox .notificationDateTime { display:block; text-align: right; font-size: 0.5em; width: 100%; }

.notificationReadStatusButton { width: 20px; padding-right: 5px; }
.notificationReadStatusButton input[type="checkbox"] { display: none;}

.notificationReadStatusButton .notificationSetReadStatusCircle
{
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid darkgray;
	width: 15px;
	height: 15px;
	cursor: pointer;
}

.notificationReadStatusButton input[type="checkbox"]:checked + .notificationSetReadStatusCircle { background-color: darkgrey; }

.notificationSeeMoreLink { text-align: center; padding: 3px; }

/******************************************************************/

main
{
	display: block;
	margin: 30px 0 0 0;
	padding: 0;
	min-height: calc(100vh - 154px); /* space filler for "Sticky footer" */
}

footer
{
	color: white;
	background-color: rgb(30, 41, 59);
	left: 0;
	right: 0;
	height: 100px;
}

#Logos
{
	background-color: white;
	padding: 20px;
	bottom: 100px;
	left: 0;
	right: 0;
	overflow: auto;
}

@media all and (min-width: 750px)
{	
	div#mainPageWrapper
	{
		display: block;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 20px;
		padding-bottom: 30px;
	}
	
	.doubleColumnFrame { column-count: 2; }
}

@media all and (max-width: 749px)
{
	
	div#mainPageWrapper
	{
		display: block;
		margin-bottom: 0;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 20px;
		padding-bottom: 30px;
	}
	
	.searchFormField input[type='search'] { width: 80%; } 
	.searchFormField { display: block; }
	
	input[type='text'], input[type='email'], select { max-width: 100%; }
	
	table, thead, th, tbody, tr, td
	{
		display: block;
		text-align: left !important;
	}
	
	td { border: none !important; }
	
	thead th
	{
		position: absolute;
		visibility: hidden;
	}
	
	tr
	{
		padding: 10px;
		border-bottom: 2px solid lightgray;
	}
	
	td[data-th]:before
	{
		font-weight: bold;
		content: attr(data-th) ": ";
	}
}