body {
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #f4f4f4;
	font-family: Arial, sans-serif;
	position: relative; /* relative positioning for the body */
	min-height: 100vh; /* ensure the body takes at least the full height of the viewport */
}

header, footer {
	text-align: center;
	padding: 15px;
	background-color: #fff;
}

header {
	border-bottom: 10px solid #0092d5;
}

header a {
	text-decoration: none;
}

header h1 {
	color: #0092d5;
	margin: 0;
}

header h2 {
	margin-bottom: 0.25em;
}

footer {
	border-top: 10px solid #0092d5;
	margin-top: 20px;
	font-size: 0.9em;
}





.version-number {
	position: absolute; /* absolute positioning within the container */
	bottom: 10px; /* 10px from the bottom */
	right: 10px; /* 10px from the right */
	background-color: rgba(0, 0, 0, 0.7); /* semi-transparent background */
	color: #fff; /* white text color */
	padding: 5px 10px; /* padding around the text */
	border-radius: 5px; /* rounded corners */
	font-size: 14px; /* font size */
}





.bluelink {
	color: blue;
	text-decoration: none;
}



.warning {
	border: 4px dashed black;
	margin: 1em;
	padding: 1em;
	background-color: #FF8C00;
	font-weight: bold;
	color: white;
}

.info {
	border: 2px dotted black;
	margin-bottom: 0.5em;
	padding: 0.5em;
	background-color: #E0E0E0;
	font-style: italic;
}


.color-present {background-color: palegreen;}
.color-1a      {background-color: #f9f06cff;}
.color-1b      {background-color: #f9e839ff;}
.color-1c      {background-color: #f9df06ff;}
.color-2a      {background-color: #ffb366ff;}
.color-2b      {background-color: #ff9733ff;}
.color-2c      {background-color: #ff7c00ff;}
.color-3a      {background-color: #e3b5e2ff;}
.color-3b      {background-color: #d78ed5ff;}
.color-3c      {background-color: #cc67c4ff;}
.color-4a      {background-color: #aecceaff;}
.color-4b      {background-color: #85b1e0ff;}
.color-4c      {background-color: #5c95d6ff;}








/*----------------------------------------------------------------------------*/

.login-container {
	max-width: 300px;
	margin: 20px auto;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.login-container h2 {
	color: #0092d5;
	margin-bottom: 20px;
}

.login-container label {
	display: block;
	margin-top: 10px;
	color: #333;
	text-align: left;
}

.login-container input[type="text"],
.login-container input[type="email"],
.login-container input[type="password"] {
	width: 100%;
	padding: 8px;
	margin-top: 5px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

.login-container input[type="submit"] {
	background-color: #0092d5;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 20px;
}

.login-container input[type="submit"]:hover {
	background-color: #0092d5;
}

.error-message {
	color: red;
	margin: 10px 0;
}






/*----------------------------------------------------------------------------*/

.hlinkbox {
	max-width: 600px;
	margin: 20px auto;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.hlinkbox a {
	display: inline-block;
	width: 35%;
	padding: 10px 20px;
	margin: 10px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color: #0092d5;
	border-radius: 6px;
	outline: none;
	transition: 0.3s;
	border: 2px solid transparent;
	font-weight: bold;
}
.hlinkbox a:hover, .hlinkbox a:focus {
	background-color: #ffffff;
	color: #0092d5;
	border-color: black;
}

/* adjustments for smaller screens */
@media screen and (max-width: 600px) {
	.hlinkbox {
		max-width: 300px;
	}
	.hlinkbox a {
		display: block;
		width: 80%;
		margin: 20px auto;
	}
}

/*----------------------------------------------------------------------------*/















/*----------------------------------------------------------------------------*/

.form-group {
	width: 100%;
	margin-bottom: 15px;
}

xbutton {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

xbutton:hover {
	background-color: #45a049;
}










/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

table {
	border-collapse: collapse;
}

table, th, td {
	border: 1px solid #ddd;
}

th, td {
	padding: 0.5em;
	text-align: left;
}

th {
	background-color: #0092d5;
	color: white;
}


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

#tb-studentInfo {
	width: 100%;
}
#tb-studentInfo td:nth-child(1) {
	width: 35%;
}
#tb-studentInfo td:nth-child(2) {
	width: 65%;
}

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

.tb-datePicker {
	width: 100%;
}

.tb-datePicker td:nth-child(1) {
	width: 35%;
}

.tb-datePicker td:nth-child(2) {
	width: 65%;
}

#student-start {
	max-width: 100px;
}

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

#dv-catering {
	border: 1px solid #ddd;
	padding: 0.5em;
	width: 98%;
}
#tb-catering {
	width: 100%;
}
#tb-catering td:nth-child(1) {
	width: 1%;
}
#tb-catering, #tb-catering td {
	border: 0;
}
#tb-catering label {
	display: inline-flex;
}
#tb-catering input[type="checkbox"] {
	width: 20px;
}
#tb-catering input {
	width: 100%;
}

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




/* target the last column */
.tb-matrix th:nth-child(10), .tb-matrix td:nth-child(10) {
	text-align: right;
}

/* target columns 3-7 */
.tb-matrix th:nth-child(2), .tb-matrix td:nth-child(2),
.tb-matrix th:nth-child(3), .tb-matrix td:nth-child(3),
.tb-matrix th:nth-child(4), .tb-matrix td:nth-child(4),
.tb-matrix th:nth-child(5), .tb-matrix td:nth-child(5),
.tb-matrix th:nth-child(6), .tb-matrix td:nth-child(6),
.tb-matrix th:nth-child(7), .tb-matrix td:nth-child(7),
.tb-matrix th:nth-child(8), .tb-matrix td:nth-child(8),
.tb-matrix th:nth-child(9), .tb-matrix td:nth-child(9) {
	text-align: center;
}

/* styles for sum columns and row */
#day-sum-row {
	background-color: #e8e8e8;
}

/* specific styles for the total sum */
#td-serviceSumTotal {
	font-weight: bold;
	background-color: #FFD700;
}


/* fixing the width of some of the cells */
.tb-matrix th:not(:first-child), .tb-matrix td:not(:first-child) {
	width: 10%;
}

/* fixing the width of some of the cells */
.tb-deductions td:last-child {
	width: 20%;
}

#td-coretimeDiscount,
#td-childrenDiscount,
#td-incomeDiscount,
#td-bookingTotal {
	text-align: center;
}

#children {
	width: 60px;
	text-align: center;
}

#tr-bookingTotal {
	font-weight: bold;
	background-color: #98FB98;
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------*/
/* LAYOUT: LEFT RIGHT responsive                                              */
/*----------------------------------------------------------------------------*/

.dv-leftright-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.dv-left, .dv-right {
	width: 48%;
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {
	.dv-leftright-container {
		flex-direction: column;
	}
	.dv-left, .dv-right {
		width: 98%;
		font-size: 0.8em;
	}
}










/*----------------------------------------------------------------------------*/
/* TABLE: Students Service
/*----------------------------------------------------------------------------*/

.table-students-service {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}

.thead-students-service {
	background-color: #0092d5;
	color: white;
}

/*----------------------------------------------------------------------------*/

















/*----------------------------------------------------------------------------*/





#dv-familyOverview, #dv-studentOverview, #dv-lunchOverview,
#dv-addFamily, #dv-addStudent, #dv-addBooking,
#dv-delFamily, #dv-delStudent, #dv-delBooking,
#dv-edtFamily, #dv-edtStudent, #edt-addBooking {
	background-color: #fff;
	margin:     20px auto;
	padding:    20px;
	min-width: 360px;
	max-width: 800px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#dv-userOverview,
#dv-addUser,
#dv-delUser,
#dv-edtUser {
	background-color: #fff;
	margin:     20px auto;
	padding:    20px;
	min-width: 360px;
	max-width: 800px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



#tb-familyOverview,
#tb-studentOverview {
	overflow-x: auto;
}

#tb-familyOverview  tr:hover,
#tb-studentOverview tr:hover {
	background-color: Gainsboro;
}



.bt-add, .bt-del, .bt-edt, .bt-show {
	padding: 0.4em 0.6em;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	display: inline;
}

.bt-add {
	background-color: ForestGreen;
	color: white;

}
.bt-add:hover {
	background-color: DarkGreen;
}

.bt-del {
	background-color: Red;
	color: white;
}
.bt-del:hover {
	background-color: Firebrick;
}

.bt-edt {
	background-color: Blue;
	color: white;
}
.bt-edt:hover {
	background-color: DarkBlue;
}

.bt-show {
	background-color: Lime;
	color: black;
}
.bt-show:hover {
	background-color: DarkGreen;
	color: white;
}

.bt-appr {
	font-size: small;
	padding: 0.25em;
}




















/*----------------------------------------------------------------------------*/
.card-container {
	display        : flex;
	flex-wrap      : wrap;
	gap            : 20px;   /* space between cards */
	justify-content: center; /* center cards in container */
}

.card {
	flex: 1 1 calc(33.333% - 20px); /* Adjusts to 3 cards per row, minus the gap */
	border         : 1px solid #ddd;
	border-radius  : 10px;
	box-shadow     : 0 2px 5px rgba(0,0,0,0.1);
	padding        : 20px;
	box-sizing     : border-box;
	min-width      : 300px;   /* Minimum width for each card */
	max-width      : 300px;   /* Maximum width for each card */
	text-decoration: none;    /* remove underline from link */
	color          : inherit; /* inherit text color */
	transition     : background-color 0.3s; /* smooth transition for hover effect */
}

.card:hover {
	background-color: LightGray; /* light grey on hover */
}

.card-body {
	display       : flex;
	flex-direction: column;
	align-items   : flex-start;
}

.card-title {
	font-size    : 1.25em;
	margin-bottom: 10px;
}

.card-text {
	margin: 5px 0;
}

.card-actions {
	display        : flex;
	justify-content: flex-start;
	flex-wrap      : nowrap;
	margin-top     : 10px;
}

@media (max-width: 768px) {
	.card {
		flex: 1 1 calc(50% - 20px); /* Adjusts to 2 cards per row on smaller screens */
	}
}

@media (max-width: 480px) {
	.card {
		flex: 1 1 calc(100% - 20px); /* Adjusts to 1 card per row on mobile screens */
	}
}




























.hidden {
	display: none !important;
}

.debug_good {
	color: green;
}

.debug_bad {
	color: red;
}

.debug {
	width: 100%;
	border: 4px dashed red;
	padding: 5px;
}





















/*----------------------------------------------------------------------------
 * MAIN CONTAINER
 * ---------------------------------------------------------------------------*/

.main-container-s,
.main-container-m,
.main-container-l,
.main-container-xl {
	background-color: white;
	margin:     20px auto;
	padding:    20px;
	min-width:  360px;

	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.main-container-s {
	max-width: 600px;
}

.main-container-m {
	max-width: 800px;
}

.main-container-l {
	max-width: 1000px;
}

.main-container-xl {
	max-width: 1200px;
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE NON RESPONSIVE
 * ---------------------------------------------------------------------------*/

.table-non-responsive {
	display: table;
	width  : 100%;
	border-collapse: collapse;
}

.table-non-responsive .table-head,
.table-non-responsive .table-row {
	display: table-row;
}

.table-non-responsive .table-head {
	color           : white;
	background-color: #0092d5;
}

.table-non-responsive .table-row:hover {
	background-color: Gainsboro;
}

.table-non-responsive .table-cell {
	display: table-cell;
	padding: 0.5em;
	border : 1px solid #ddd;
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE RESPONSIVE
 * ---------------------------------------------------------------------------*/

.table-responsive {
	display: table;
	width  : 100%;
	border-collapse: collapse;
}

.table-responsive .table-head,
.table-responsive .table-row {
	display: table-row;
}

.table-responsive .table-head {
	color           : white;
	background-color: #0092d5;
}

.table-responsive .table-head .table-cell {
	position: relative;
	cursor: pointer;
}

.sort-icon {
	margin-left: 5px;
	font-size: 0.8em;
}

.table-responsive .table-head .table-cell:hover .sort-icon {
	color: #000;
}

.table-responsive .table-row:hover {
	background-color: #ddd;
}

.table-responsive .table-cell {
	display: table-cell;
	padding: 0.5em;
	border : 1px solid #ddd;
}

@media (max-width: 768px) {
	.table-responsive {
		display: block;
	}

	.table-responsive .table-head {
		display: none;
	}

	.table-responsive .table-row {
		display      : flex;
		flex-wrap    : wrap;
		margin-bottom: 10px;
		border       : 1px solid #ddd;
		background-color: #f4f4f4;
	}

	.table-responsive .table-cell {
		display: flex;
		width  : 50%;
		border : none;
		box-sizing: border-box;
	}
}

@media (max-width: 480px) {
	.table-responsive .table-row {
		flex-direction: column;
	}

	.table-responsive .table-cell {
		width: 100%;
	}
}

/*----------------------------------------------------------------------------*/





















/*----------------------------------------------------------------------------
 * TABLE 2
 * ---------------------------------------------------------------------------*/

.table2 {
	display: table;
	width  : 100%;
	border-collapse: collapse;
}

.table2 .table-head,
.table2 .table-row {
	display: table-row;
}

.table2 .table-head {
	color           : white;
	background-color: #0092d5;
}

.table2 .table-head .table-cell {
	position: relative;
	cursor: pointer;
}

.table2 .sort-icon {
	margin-left: 5px;
	font-size: 0.8em;
}

.table2 .table-head .table-cell:hover .sort-icon {
	color: #000;
}

.table2.hover .table-row:hover {
	background-color: #ddd;
}

.table2 .table-cell {
	display: table-cell;
	padding: 0.5em;
	border : 1px solid #ddd;
}

.table2 img {
	height    : 1.6em;   /* ensure an image does not exceed the height of the row */
	vertical-align: middle; /* align the image vertically in the middle */
	text-align: center;
}

.absent-row {
    background-color: violet;
}

.strikethrough {
	background: repeating-linear-gradient(
		90deg, /* 45-degree angle for diagonal stripes */
		#FFA07A, /* Stripe color 1 */
		#FFA07A 10px, /* Width of stripe color 1 */
		#DCDCDC 10px, /* Stripe color 2 */
		#DCDCDC 20px /* Total width of one stripe set */
	);
}

/*----------------------------------------------------------------------------*/


















/*----------------------------------------------------------------------------
 * TABLE CARD FAMILY
 * ---------------------------------------------------------------------------*/

.table-card-family td:nth-child(1) {
	font-weight: bold;
}
	white-space: nowrap;

.table-card-family tr:first-child {
	font-size: larger;
	background-color: #0092d5;
	color: white;
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE VIEW CORETIME
 * ---------------------------------------------------------------------------*/

.table-view-coretime .table-row {
	height: 2.4em;
}
.table-view-coretime img {
	height    : 1.2em;   /* ensure an image does not exceed the height of the row */
	vertical-align: middle; /* align the image vertically in the middle */
	text-align: center;
}

.table-view-coretime .table-cell:nth-child(1) {
	width: 1em;
}

.table-view-coretime .table-cell:nth-child(2) {
	width: 1.5em;
}

.table-view-coretime .table-cell:nth-child(3) {
	width: 10em;
}

.table-view-coretime .table-cell:nth-child(5) {
	width: 1.5em;
}

.table-view-coretime .table-cell:nth-child(6) {
	width: 1.5em;
}

@media (max-width: 600px) {
	.table-view-coretime {
		font-size: 0.8rem;
	}
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE VIEW LUNCH
 * ---------------------------------------------------------------------------*/

.table-view-lunch-sums {
	min-width: 50%;
}

.table-view-lunch-sums td:nth-child(2) {
	text-align: center;
	min-width: 20px;
}

.table-view-lunch-sums tr:first-child {
	background-color: yellow;
	font-weight: bold;
}

.table-view-lunch .table-row {
	height: 2.4em;
}
.table-view-lunch img {
	height    : 1.2em;   /* ensure an image does not exceed the height of the row */
	vertical-align: middle; /* align the image vertically in the middle */
	text-align: center;
}

@media (min-width: 601px) {
	.table-view-lunch .table-cell:nth-child(1) {
		width: 1em;
	}

	.table-view-lunch .table-cell:nth-child(2) {
		width: 1.5em;
	}

	.table-view-lunch .table-cell:nth-child(3) {
		width: 10em;
	}

	.table-view-lunch .table-cell:nth-child(5) {
		width: 4.2em;
	}

	.table-view-lunch .table-cell:nth-child(6),
	.table-view-lunch .table-cell:nth-child(7),
	.table-view-lunch .table-cell:nth-child(8) {
		text-align: center;
		width: 2em;
	}
}

.table-view-lunch .table-row:last-child {
	background-color: #f4f4f4;
}

@media (max-width: 600px) {
	.table-view-lunch {
		font-size: 0.8rem;
	}
	.table-view-lunch .table-cell:nth-child(1) {
		display: none;
	}
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE VIEW HOMEWORK
 * ---------------------------------------------------------------------------*/

.table-view-homework .table-row {
	height: 2.4em;
}
.table-view-homework img {
	height    : 1.2em;   /* ensure an image does not exceed the height of the row */
	vertical-align: middle; /* align the image vertically in the middle */
	text-align: center;
}

.table-view-homework .table-cell:nth-child(1) {
	width: 1em;
}

.table-view-homework .table-cell:nth-child(2) {
	width: 1.5em;
}

.table-view-homework .table-cell:nth-child(3) {
	width: 10em;
}

.table-view-homework .table-cell:nth-child(5) {
	width: 1.5em;
}

.table-view-homework .table-cell:nth-child(6) {
	width: 1.5em;
}

@media (max-width: 600px) {
	.table-view-homework {
		font-size: 0.8rem;
	}
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE VIEW GTB
 * ---------------------------------------------------------------------------*/

.table-view-gtb .table-row {
	height: 2.4em;
}
.table-view-gtb img {
	height    : 1.2em;   /* ensure an image does not exceed the height of the row */
	vertical-align: middle; /* align the image vertically in the middle */
	text-align: center;
}

.table-view-gtb .table-cell:nth-child(1) {
	width: 1em;
}

.table-view-gtb .table-cell:nth-child(2) {
	width: 1.5em;
}

.table-view-gtb .table-cell:nth-child(3) {
	width: 10em;
}

.table-view-gtb .table-cell:nth-child(5) {
	width: 1.5em;
}

.table-view-gtb .table-cell:nth-child(6) {
	width: 1.5em;
}

@media (max-width: 600px) {
	.table-view-gtb {
		font-size: 0.8rem;
	}
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE VIEW ACCOUNTING
 * ---------------------------------------------------------------------------*/

.table-view-accounting .table-cell:nth-child(1) {
	font-weight: bold;
}

.table-view-accounting .table-cell:nth-child(2) {
	text-align: center;
}

/*
.table-view-accounting .table-cell:nth-child(3),
.table-view-accounting .table-cell:nth-child(4),
.table-view-accounting .table-cell:nth-child(5),
.table-view-accounting .table-cell:nth-child(6) {
	text-align: right;
}
*/

/*
.table-view-accounting .table-cell:nth-child(6) {
	font-weight: bold;
}
*/

/*
.table-view-accounting .table-row:last-child {
	background-color: yellow;
}
*/

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE VIEW ACCOUNTING YEAR FAMILY
 * ---------------------------------------------------------------------------*/

.table-view-accyearfam .table-cell:nth-child(1) {
	width: 30%;
	font-weight: bold;
}

.table-view-accyearfam .table-cell:nth-child(2),
.table-view-accyearfam .table-cell:nth-child(3),
.table-view-accyearfam .table-cell:nth-child(4),
.table-view-accyearfam .table-cell:nth-child(5) {
	width: 17.5%;
	text-align: right;
}

.table-view-accyearfam .table-cell:nth-child(5) {
	font-weight: bold;
}

.table-view-accyearfam .table-row:last-child {
	background-color: yellow;
}

/*----------------------------------------------------------------------------*/










/*----------------------------------------------------------------------------
 * TABLE PRICING
 * ---------------------------------------------------------------------------*/

.table-pricing {
	width: 100%;
}

.table-pricing th,
.table-pricing td {
	text-align: center;
}

.table-pricing th:nth-child(1),
.table-pricing td:nth-child(1) {
	text-align: left;
}

.table-pricing td:nth-child(1) {
	border-right: 1px solid black;
}

.table-pricing td:nth-child(3) {
	border-right: 1px solid black;
}


/*----------------------------------------------------------------------------*/



























/* style for the card container */
.bcard-container {
	display: flex;
	flex-direction: column;
	gap: 20px; /* space between cards */
	padding: 20px;
}

/* style for each card */
.bcard {
	display: block; /* ensure each card is treated as a block element */
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
	text-decoration: none; /* remove underline from links */
	color: inherit; /* inherit color from parent */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s, box-shadow 0.2s;
}

.bcard:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* style for the card body */
.bcard-body {
	padding: 20px;
}

/* style for the card text */
.bcard-text {
	margin: 10px 0;
	font-size: 16px;
}

/* style for the actions section */
.bcard-actions {
	margin-top: 20px;
	display: flex;
	gap: 10px;
}


















@media print {
	/* ensure certain elements start on a new page */
	.clevel {
		break-before: always; /* forces a page break before this element */
	}

	/* avoid breaking inside certain elements like images or large containers */
	.avoid-break {
		break-inside: avoid; /* prevents the element from being split across two pages */
	}

	/* ensure a break after specific elements */
	.break-after {
		break-after: always; /* forces a page break after this element */
	}

	header, footer, .hlinkbox {
		display: none;
	}
}

















/*----------------------------------------------------------------------------*/



/* groupbox styling */
.groupbox {
	border: 2px solid #333;
	padding: 20px;
	position: relative;
	border-radius: 5px;
	margin-bottom: 20px;
	text-align: center;
}
.groupbox-title {
	position: absolute;
	top: -10px;
	left: 15px;
	padding: 0 10px;
	background-color: #f4f4f9;
	color: #333;
	font-weight: bold;
}














/*----------------------------------------------------------------------------*/

.divParentOverview{
	/* none */
}

.overviewcard {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
	margin: 10px 0px;
	padding: 10px;
	background-color: #fff;
}
.overviewcard-user {
	background-color: #FDE3E3;
}
.overviewcard-family {
	background-color: #e3f2fd;
}
.overviewcard-student {
	background-color: #ffecb3;
}
.overviewcard-booking {
	background-color: #c8e6c9;
}
.edit-icon {
	margin-left: 10px;
	text-decoration: none;
	color: #007BFF;
	font-size: 0.9em;
}

@media (max-width: 768px) {
	.overviewcard h2 {
		font-size: 1.2em;
	}
	.overviewcard h3 {
		font-size: 1.1em;
	}
}









.button-add {
	border-radius: 10px;
	cursor: pointer;
	display: inline-block;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	font-size: 14px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.button-add:hover {
	transform: scale(1.05) rotate(-1deg);
}

.button-green {
	background-color: #c8fbd9;
	box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,
		rgba(44, 187, 99, .15) 0 1px 2px, rgba(44, 187, 99, .15) 0 2px 4px,
		rgba(44, 187, 99, .15) 0 4px 8px, rgba(44, 187, 99, .15) 0 8px 16px,
		rgba(44, 187, 99, .15) 0 16px 32px;
	color: darkgreen;
}

.button-green:hover {
	box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,
		rgba(44,187,99,.25) 0 1px 2px, rgba(44,187,99,.25) 0 2px 4px,
		rgba(44,187,99,.25) 0 4px 8px, rgba(44,187,99,.25) 0 8px 16px,
		rgba(44,187,99,.25) 0 16px 32px;
}

.button-yellow {
	margin: 10px;
	background-color: #ffecb3;
	box-shadow: rgba(255, 213, 79, 0.2) 0 -25px 18px -14px inset,
		rgba(255, 213, 79, 0.15) 0 1px 2px, rgba(255, 213, 79, 0.15) 0 2px 4px,
		rgba(255, 213, 79, 0.15) 0 4px 8px, rgba(255, 213, 79, 0.15) 0 8px 16px,
		rgba(255, 213, 79, 0.15) 0 16px 32px;
	/*color: #996600;*/
	color: black;
}

.button-yellow:hover {
	box-shadow: rgba(255, 213, 79, 0.35) 0 -25px 18px -14px inset,
		rgba(255, 213, 79, 0.25) 0 1px 2px, rgba(255, 213, 79, 0.25) 0 2px 4px,
		rgba(255, 213, 79, 0.25) 0 4px 8px, rgba(255, 213, 79, 0.25) 0 8px 16px,
		rgba(255, 213, 79, 0.25) 0 16px 32px;
}

.button-blue {
	margin: 10px;
	background-color: #e3f2fd;
	box-shadow: rgba(100, 181, 246, 0.2) 0 -25px 18px -14px inset,
		rgba(100, 181, 246, 0.15) 0 1px 2px, rgba(100, 181, 246, 0.15) 0 2px 4px,
		rgba(100, 181, 246, 0.15) 0 4px 8px, rgba(100, 181, 246, 0.15) 0 8px 16px,
		rgba(100, 181, 246, 0.15) 0 16px 32px;
	/*color: #1565c0;*/
	color: black;
}

.button-blue:hover {
	box-shadow: rgba(100, 181, 246, 0.35) 0 -25px 18px -14px inset,
		rgba(100, 181, 246, 0.25) 0 1px 2px, rgba(100, 181, 246, 0.25) 0 2px 4px,
		rgba(100, 181, 246, 0.25) 0 4px 8px, rgba(100, 181, 246, 0.25) 0 8px 16px,
		rgba(100, 181, 246, 0.25) 0 16px 32px;
}



.button-absent {
	position: absolute;
	right: 10px;
	bottom: 10px;

	border-radius: 10px;
	cursor: pointer;
	display: inline-block;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	font-size: 14px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.button-absent:hover {
	transform: scale(1.05) rotate(-1deg);
}

.button-red {
	background-color: #fbd8d8;
	box-shadow: rgba(220, 53, 69, .2) 0 -25px 18px -14px inset,
		rgba(220, 53, 69, .15) 0 1px 2px, rgba(220, 53, 69, .15) 0 2px 4px,
		rgba(220, 53, 69, .15) 0 4px 8px, rgba(220, 53, 69, .15) 0 8px 16px,
		rgba(220, 53, 69, .15) 0 16px 32px;
	color: darkred;
}

.button-red:hover {
	box-shadow: rgba(220,53,69,.35) 0 -25px 18px -14px inset,
		rgba(220,53,69,.25) 0 1px 2px, rgba(220,53,69,.25) 0 2px 4px,
		rgba(220,53,69,.25) 0 4px 8px, rgba(220,53,69,.25) 0 8px 16px,
		rgba(220,53,69,.25) 0 16px 32px;
}










.add-form table, th, td {
	border: none;
}

.edt-form table, th, td {
	border: none;
}