/* ******************************* */
/* Debug Class */
/* ******************************* */
/*

*,
*:before,
*:after {
	outline: solid 0.5px #db6a7d;
	border: 0;
}

*/

/* ******************************* */
/* Global settings */
/* ******************************* */
:root {
	/*https://htmlcolorcodes.com/*/
	--white: #FFF;
	--black: #000;
	--black10: rgba(0, 0, 0, .1);
	--primary: #DA6458; /*red, primary*/
	--primary-light: #edb2ac; /*red, 50 white alpha overlay*/
	--primary-dark: #6d322c; /*red, 50 dark alpha overlay*/
	--primary-med: #e18378; /*red, 25 white alpha overlay*/
	--secondary: #B0938B; /*brown, secondary*/
	--secondary-med: #c0a9a2; /*brown 20 white alpha overlay*/
	--secondary-med25: #c4aea8; /*brown 25 white alpha overlay*/
	--secondary-med50: #d8c9c5; /*brown 50 white alpha overlay*/
	--secondary-light80: #efe9e8; /*brown 80 white alpha overlay*/
	--secondary-light90: #f7f4f3; /*brown 90 white alpha overlay*/
	--tertiary: #4E4E57; /*charcoal, tertiary*/
	--tertiary-med: #a7a7ab; /*charcoal, 50 white alpha overlay*/

	--light-grey: #ccc; /*light grey*/
}

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

html {
	font-size: 14px;
	height: 100%;
	position: relative;
	min-height: 100%;
}

body {
	min-height: 100%;
	height: 100%;
	margin: 0;
	font-family: 'Manrope', sans-serif,'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 16px;
	background-color: #fff;
	overflow: hidden;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

h4 {
	font-size: 0.9em;
}
/*******************************/
/* Flex */
/*******************************/
.f {
	display: flex;
}

	.f.c {
		flex-direction: column;
	}

.f1 {
	flex: 1;
}

.f2 {
	flex: 2;
}

.f3 {
	flex: 3;
}

.f4 {
	flex: 4;
}

.fWrap {
	flex-wrap: wrap;
}

/* Alignment */
.acCenter {
	align-content: center;
}

.acStart {
	align-content: start;
}

.aiEnd {
	align-items: end;
}

.aiCenter {
	align-items: center;
}

.aiStart {
	align-items: start;
}

.asCenter {
	align-self: center;
}

.asEnd {
	align-self: end;
}

/* Justification */
.jcBetween {
	justify-content: space-between;
}

.jcCenter {
	justify-content: center;
}

.jcEnd {
	justify-content: end;
}

.jiCenter {
	justify-items: center;
}

/* Other alignment / justification */
.textCenter {
	text-align: center;
}

.textRight {
	text-align: right;
}

.textSmall {
	font-size: 0.8em;
}

/* Spacing */
.gap025 {
	gap: 0.25em;
}

.gap05 {
	gap: 0.5em;
}

.gap1 {
	gap: 1em;
}

.pad025 {
	padding: 0.25em;
}

.pad05 {
	padding: 0.5em;
}

.pad1 {
	padding: 1em;
}

.pad2 {
	padding: 2em;
}

.padL1 {
	padding-left: 1em;
}

.padL2 {
	padding-left: 2em;
}

.padSide1 {
	padding-left: 1em;
	padding-right: 1em;
}

.padV05 {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.padV1 {
	padding-top: 1em;
	padding-bottom: 1em;
}

.padT05 {
	padding-top: 0.5em;
}

.padT1 {
	padding-top: 1em;
}

.padB05 {
	padding-bottom: 0.5em;
}

.padB1 {
	padding-bottom: 1em;
}

.margin0 {
	margin: 0em;
}

.margin1 {
	margin: 1em;
}

/*******************************/
/*Width*/
/*******************************/
.w100p {
	width: 100%;
}

.s24px {
	height: 24px;
	width: 24px;
}
/*******************************/
/*Styles*/
/*******************************/
.f700 {
	font-weight: 700;
}

.uline {
	text-decoration: underline;
}
/*******************************/
/*Inputs*/
/*******************************/
input[type=text],
input[type=password],
input[type=number],
textarea,
select {
	padding: 0.25em;
	border: 1px solid var(--tertiary-med);
	border-radius: 0.5em;
}
/*******************************/
/*Buttons*/
/*******************************/
button,
.button,
input[type=button] {
	padding: 0.5em 1em;
	border-radius: 2.5em;
	box-shadow: none;
	border: 1px solid var(--secondary-light90);
	color: var(--white);
	background-color: var(--primary);
	font-weight: 500;
	font-size: 1.0rem;
	cursor: pointer;
}

	button.pointed,
	button.pointed,
	input[type=button].pointed {
		border-top-left-radius: 0em;
		border-bottom-right-radius: 0em;
		padding: 0.75em 1em;
	}

	button:disabled,
	.button:disabled,
	input[type=button]:disabled {
		background-color: var(--primary-light);
	}

	button:hover,
	.button:hover,
	input[type=button]:hover {
		background-color: var(--primary-dark);
		color: var(--white);
	}

	button:active,
	.button:active,
	input[type=button]:active {
		background-color: var(--primary-light);
		color: var(--primary);
	}

	button.light,
	.button.light,
	input[type=button].light {
		border: 1px solid var(--primary-med);
		color: var(--primary);
		background-color: var(--secondary-light90);
	}

		button.light:hover,
		.button.light:hover,
		input[type=button].light:hover {
			background-color: var(--primary-light);
			color: var(--primary);
		}

		button.light:active,
		.button.light:active,
		input[type=button].light:active {
			background-color: var(--secondary);
			color: var(--primary-med);
		}

		button.light:disabled,
		.button.light:disabled,
		input[type=button].light:disabled {
			border: 1px solid var(--primary-light);
			color: var(--primary-light);
		}

	button.sm,
	.button.sm,
	input[type=button].sm {
		padding: 0.3em .7em;
		font-size: 0.9rem;
	}

/*******************************/
/*Table*/
/*******************************/
table {
	border-spacing: 0;
}

	table thead tr {
		/* Added important for nested tables which are picking up the nth-child styling, but don't like it, investigate better ideas later */
		background: var(--secondary-med);
		color: black;
	}

		table thead tr th {
			padding: 0.5em;
			font-size: 0.9em;
			font-weight: 500;
		}

			table thead tr th.sort {
				cursor: pointer;
			}

	table thead th[data-direction="asc"]:after {
		content: "▲"; /* Up arrow */
		display: inline-block;
		margin-left: 5px;
	}

	table thead th[data-direction="desc"]:after {
		content: "▼"; /* Down arrow */
		display: inline-block;
		margin-left: 5px;
	}

	table tbody tr:nth-child(2n+1) {
		background-color: var(--secondary-light90);
	}

	table tbody tr td {
		padding: 0.5em 0.5em;
	}

	table thead tr.altHead {
		background: var(--secondary-med50);
	}

/*******************************/
/* Tabs */
/*******************************/
.tab {
	overflow: hidden;
	/*border: 1px solid var(--primary);*/
}

	.tab .tablinks {
		font-size: 0.9em;
		background-color: var(--secondary-light80);
		border-radius: 0;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
		font-size: 17px;
	}

		.tab .tablinks:hover {
			background-color: var(--secondary-med25);
		}

		.tab .tablinks.active {
			background-color: var(--secondary-med50);
		}

.tabcontent {
	display: none;
	/*padding: 6px 12px;*/
	/*border: 1px solid #ccc;
	border-top: none;*/
	/*border: 1px solid var(--primary);*/
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*******************************/
/*TODO*/
/*******************************/
.h100p {
	height: 100%;
}

img.ofContain {
	object-fit: contain;
}

img.med {
	width: 3em;
	height: 3em;
}

img.sm {
	width: 2em;
	height: 2em;
}

img.tiny {
	width: 1em;
	height: 1em;
}

.bgSL {
	background-color: var(--secondary-light90);
}

.bgWhite {
	background-color: white;
}

a {
	text-decoration: none;
	color: var(--primary);
}

.shadow {
	/*
		0: Horizontal offset (no horizontal shadow)
		4px: Vertical offset (shadow appears below the element)
		2px: Blur radius (amount of blur for the shadow)
		-2px: Spread radius (negative value makes the shadow smaller than the element)
		gray: Color of the shadow
	*/
	box-shadow: 0 1px 3px 2px rgba(0,0,0,0.12);
}

ul {
	list-style-type: none;
}

	ul.simpleList li {
		margin: 0.25em 0em;
		padding: 0.2em;
	}

		ul.simpleList li:nth-child(2n+1) {
			background-color: var(--secondary-light90);
		}

		ul.simpleList li:hover {
			background-color: var(--secondary-med);
		}

	ul ul {
		margin-left: 1em;
	}


#modalContainer {
	height: 100%;
}

	#modalContainer .modal-dialog {
		/*max-height: 90%;*/
		/*overflow:scroll;*/
	}

	#modalContainer .modal-content {
		overflow: auto;
		max-height: 85vh; /* VH isn't always supported in mobile */
	}
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

	/* Hide default HTML checkbox */
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

	.slider.round:before {
		border-radius: 50%;
	}

.invert25 {
	filter: invert(0.25);
}

.mixed-blend-mode {
	mix-blend-mode: difference;
}

.testFilter {
	/*filter: brightness(0) invert(14%) sepia(43%) saturate(4969%) hue-rotate(343deg) brightness(89%) contrast(107%);*/
}
/*******************************/
/* Pagination */
/*******************************/
.pagination {
	display: flex;
	padding: 0.5em;
	justify-content: center;
}

	.pagination > div {
		padding: 1em;
		border-top: 1px solid var(--primary);
		border-bottom: 1px solid var(--primary);
		border-right: 1px solid var(--primary);
		cursor: pointer;
	}

		.pagination > div:first-child {
			border-left: 1px solid var(--primary);
			border-top-left-radius: 1em;
			border-bottom-left-radius: 1em;
		}

		.pagination > div:last-child {
			border-top-right-radius: 1em;
			border-bottom-right-radius: 1em;
		}

	.pagination .selected {
		background: var(--primary);
		color: var(--white);
	}
/*******************************/
/* todo */
/*******************************/
.cLightGrey {
	color: var(--light-grey);
}

.cSecond {
	color: var(--secondary);
}

.wbWord {
	word-break: break-word;
}

.wsPreWrap {
	white-space: pre-wrap;
}

.vTop {
	vertical-align: top;
}

.border {
	border: 1px solid var(--primary);
}

.hover3d:hover {
	cursor: pointer;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.success {
	border: 1px solid green;
	background-color: #e5f5e5;
}