/**,
*:before,
*:after {
	outline: solid 0.5px #db6a7d;
	border: 0;
}*/
:root {
	/*https://htmlcolorcodes.com/*/
	--white: #FFF;
	--primary: #0F172A;
	--primary-med: #5b72a7;
	--primary-light: #c2d2f6;
	--primary-light-alpha: #c2d2f666;
	--primary-lightest: #f7f9ff;
	--secondary: #ACFADD;
	--secondary-med: #cbfcea;
	--secondary-light: #e5fff5;
	--weed-green: #164015;
}

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

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

body {
	min-height: 100%;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, '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;
	}
}
/*******************************/
/*  */
/*******************************/
.rel {
	position: relative;
}

.abs {
	position: absolute;
}
/*******************************/
/* Flex */
/*******************************/
.f {
	display: flex;
}

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

.f1 {
	flex: 1;
}

.f2 {
	flex: 2;
}

.f3 {
	flex: 3;
}

.f4 {
	flex: 4;
}

.f5 {
	flex: 5;
}

.fWrap {
	flex-wrap: wrap;
}

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

.acStart {
	align-content: start;
}

.aiCenter {
	align-items: center;
}

.aiStart {
	align-items: start;
}

.asCenter {
	align-self: center;
}

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

.jcCenter {
	justify-content: center;
}

.jcEnd {
	justify-content: end;
}

.jiCenter {
	justify-items: center;
}

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

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

.gap1 {
	gap: 1em;
}

.pad025 {
	padding: 0.25em;
}

.pad05 {
	padding: 0.5em;
}

.pad1 {
	padding: 1em;
}

.pad2 {
	padding: 2em;
}

.padR1 {
	padding-right: 1em;
}
.padL1 {
	padding-left: 1em;
}
.padL2 {
	padding-left: 2em;
}

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

.padV025 {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

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

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

.padT1 {
	padding-top: 1em;
}

.padB1 {
	padding-bottom: 1em;
}

.margin025 {
	margin: 0.25em;
}

.margin1 {
	margin: 1em;
}

.marginL1 {
	margin-left: 1em;
}

.marginSide1 {
	margin-right: 1em;
	margin-left: 1em;
}

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

.w45 {
	width: 45em;
}

.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(--primary-med);
	border-bottom: 2px solid var(--primary);
}
/*******************************/
/*Buttons*/
/*******************************/
button,
.button,
input[type=button] {
	padding: 0.5em 1em;
	border-radius: 0.25em;
	box-shadow: none;
	border: 1px solid var(--secondary-light);
	color: var(--secondary-light);
	background-color: var(--primary);
	font-weight: 500;
	font-size: 1.0rem;
	cursor: pointer;
}

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

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

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

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

		button.empty:disabled,
		.button.empty:disabled,
		input[type=button].empty: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;
	}

	button.tiny,
	.button.tiny,
	input[type=button].tiny {
		padding: 0.1em .3em;
		font-size: 0.8rem;
	}

input[type="button"].active {
	border: 1px solid #E0E0E0;
	color: #E0E0E0;
	cursor: default;
	background-color: white;
}

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

	table thead tr {
		background: var(--primary);
		color: white;
	}

		table thead tr th {
			padding: 0.25em;
		}

			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-light);
	}

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

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

	.tab button {
		background-color: var(--primary-med);
		border-radius: 0;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
		font-size: 17px;
	}

		.tab button:hover {
			background-color: var(--primary-med);
		}

		.tab button.active {
			background-color: var(--primary);
		}

.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*******************************/
/*TODO*/
/*******************************/
img.med {
	width: 3em;
	height: 3em;
}

img.small {
	width: 2em;
	height: 2em;
}
.smText{
font-size:0.8em;
}

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-light);
		}

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

	ul ul {
		margin-left: 1em;
	}

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

.none {
	display: none;
}

.bcsecondarylight {
	background-color: var(--secondary-light)
}

.bcwhite {
	background-color: var(--white)
}

html {
	height: 100%;
}

body {
	height: 100%;
}

#modalContainer {
	height: 100%;
}

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

	#modalContainer .modal-content {
		overflow: auto;
		max-height: 85vh;
	}

.truncate {
	max-width: 120px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 20px;
}

	/* 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: 16px;
		width: 16px;
		left: 2px;
		bottom: 2px;
		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(18px);
	-ms-transform: translateX(18px);
	transform: translateX(18px);
}

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

	.slider.round:before {
		border-radius: 50%;
	}
/*******************************/
/* todo */
/*******************************/
.cWhite{
color:var(--white);
}
.cSecond {
	color: var(--secondary);
}

.bgPrimary {
	background-color: var(--primary);
}

.login_logout_button_primary {
	padding: 0.5em 1em;
	border-radius: 0.25em;
	box-shadow: none;
	border: 1px solid var(--secondary);
	color: var(--primary);
	background-color: var(--secondary);
	font-weight: 500;
	font-size: 1.0rem;
	cursor: pointer;
}

.usernamePasswordLabel {
	padding-right: 11px;
}