@import url("/style/dropzone.css");
* {
	font-family: 'Barlow Semi Condensed', sans-serif;
	--font-size: 16px;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.self-center {
	margin: 0 auto;
}

.uppercase {
	text-transform: uppercase;
}

.pointer {
	cursor: pointer;
}

.modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
}

.modal2 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}

.circle {
	border-radius: 50%;
}

.full {
	width: 100%;
}

.hidden {
	display: none;
}

.content {
	display: flex;
	flex-direction: column;
	gap: 10px 0px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	width: 50%;
	max-width: 800px;
	min-width: 330px;
}
@media only screen and (max-width: 800px) {
	.content {
		position: relative;
		left: 0;
		transform: translate(0%, 0);
		width: 100%;
		min-width: 330px;
	}
}


#overlay {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;	
	background: rgba(0, 0, 0, 0.75);
	z-index: 1000;
}

#dialog {
	display: none;
	z-index: 2000;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	width: 50%;
	max-width: 600px;
	padding: 10px;
	margin: auto;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);
	border: 1px solid black;
	box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 600px) {
	
	#dialog {
		width: 350px;
		max-height: 500px;
	}
}

.dialog-element {
	display: none;
	z-index: 2000;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	width: 50%;
	max-width: 600px;
	padding: 10px;
	margin: auto;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);
	border: 1px solid black;
	box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.5);	
}


#dialog-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#uploader {
	display: none;
	z-index: 2000;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	width: 50%;
	max-width: 600px;
	padding: 10px;
	margin: auto;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);
	border: 1px solid black;
	box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.5);	
}

#execute {
	display: none;
}



.results {
	height: 100px;
	overflow: auto;
	border: 1px solid gray;
	margin-bottom: 10px;
}

.box {
	position: relative;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);
	border: 1px solid grey;
	padding: 8px;
	box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.5);
	max-width: calc(100% - 16px);
}

@media only screen and (max-width: 600px) {
	.box {
		padding: 6px;
		max-width: calc(100% - 12px);
	}
}

.box-titlebar {
	text-transform: uppercase;
	color: grey;
	font-size: 12px;
	font-weight: bold;
	align-items: center;
}

.line {
	position: relative;
	background: white;
	border: 1px solid gray;
	padding: 6px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5);
}

.line-item {
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;
	border-right: 2px solid gray;
}

.icon {
	position: relative;
	width: 80px;
	height: 80px;
	object-fit: cover;
	object-position: 0 0;
	border: 1px solid gray;
}

@media only screen and (max-width: 600px) {
	.icon {
		width: 50px;
		height: 50px;	
	}	
}

.employee-icon {
	content: url('/gfx/emp/na.jpg');
}

.icon-missing {
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 10px;
	line-height: 100px;
	text-align: center;
	vertical-align: center;
}

.icon-grid {
	border-collapse: separate;
	border-spacing: 50px;
}

.menu {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	background: white;
	border: 0px;
	border: 1px solid #888888;
	box-shadow: 2px 2px 2px 0 #888888;
	z-index: 100;
}

.menu-option > a {
	text-decoration: none;
	color: gray;
}

.menu-option {
	padding: 5px;
	cursor: pointer;
	border-bottom: 1px solid gray;
	width: auto;
}

.menu-option:first-child {
	--border-radius: 5px 5px 0 0;
}

.menu-option:last-child {
	--border-radius: 0 0 5px 5px;
	border-bottom: 0px;
}

.menu-option:hover {
	background: orange;
	color: white;
}

.menu-icon {
	font-size: 20px;
	position: absolute;
	left: 5px;
}

.footer {
	display: block;
	position: absolute;
	bottom: 8px;
	right: 8px;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

h1 {
	position: relative;
	--background: repeating-linear-gradient(45deg, #eeeeee, #eeeeee 10px, #dddddd 10px, #dddddd 20px);
	background: linear-gradient(180deg, rgba(180,180,180,1) 0%, rgba(100,100,100,1) 35%, rgba(100,100,100,1) 65%, rgba(180,180,180,1) 100%);
	min-height: 20px;
	--background: #dddddd;
	margin: 0px;
	margin-bottom: 5px;
	padding-left: 10px;
	--padding-bottom: 2px;
	padding: 3px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #FFFFFF;
	text-transform: uppercase;
	--border: 1px solid;
	--border-image: linear-gradient(to right, #222222 0%, #eeeeee 100%) 0 0 100% 0;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
	cursor: default;
}

h1-old {
	position: relative;
	--background: repeating-linear-gradient(45deg, #eeeeee, #eeeeee 10px, #dddddd 10px, #dddddd 20px);
	background: #dddddd;
	margin: 0px;
	margin-bottom: 5px;
	padding-left: 10px;
	--padding-bottom: 2px;
	padding: 3px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #555555;
	text-transform: uppercase;
	--border: 1px solid;
	--border-image: linear-gradient(to right, #222222 0%, #eeeeee 100%) 0 0 100% 0;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
	cursor: default;
}

.h1-icon {
	position: absolute;
	top: 3px;
	right: 2px;
	height: 20px;
	font-size: 20px;
	vertical-align: middle;
	font-weight: normal;
	cursor: default;
}

h2 {
	position: relative;
	margin: 0px;
	margin-bottom: 4px;
	--padding: 3px;
	font-size: 14px;
	font-weight: bold;
	color: #666666;
}

h3 {
	position: relative;
	margin: 0px;
	margin-bottom: 5px;
	padding: 0px;
	font-size: 13px;
	font-weight: normal;
	color: #666666;
}
.header-button {
	--position: absolute;
	--right: 2px;
	background: white;
	font-size: 12px;
	color: grey;
	text-transform: uppercase;
	border: 1px solid black;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);	
}

p {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	font-weight: normal;
	color: grey;
}

.input-block {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}
.input-block:last-child {
	margin-bottom: 0px;
}

label {
	display: inline-block;
	font-size: 12px;
	color: grey;
}

select {
	background: #ffffff;
	font-size: 12px;
	padding: 5px;
	box-shadow: inset 0 2px 2px -1px rgba(0, 0, 0, 0.5);
	--box-shadow: inset 0 1px 0px black;
	color: gray;
	--text-shadow: 0 1px black;
	outline: none;
	border: 1px solid gray;
	--webkit-appearance: none;
	-webkit-border-radius: 0px;
	height: 26px;
}

.multiple {
	width: 100%;
	min-height: 100px;
}

option {

	font-size: 12px;
	
}

input:focus {
	outline: none;
	cursor: text;
}

input {
	display: inline-block;
	box-sizing: border-box;
	--height: 30px;
	background: #ffffff;
	font-size: 12px;
	padding: 5px;
	border: 1px solid gray;
	--box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 2px 2px -1px rgba(0, 0, 0, 0.5);
	color: gray;
	--text-shadow: 0 1px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.disabled {
	background: repeating-linear-gradient(45deg, #eeeeee, #eeeeee 10px, #dddddd 10px, #dddddd 20px);
}

.text {
	height: 20px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
	font-family: "Barlow Semi Condensed", sans-serif;
	-webkit-text-fill-color: grey;
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
}

.textarea {
    border: 1px solid gray;
    overflow: auto;
    outline: none;

	font-family: "Barlow Semi Condensed", sans-serif;
	color: grey;
	font-size: 12px;
	font-weight: normal;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: inset 0 2px 2px -1px rgba(0, 0, 0, 0.5);

    resize: none; /*remove the resize handle on the bottom right*/	
	width: 99%;
	height: 80px;
}

--span {
--	display: block;
--	--font-family: 'Barlow Semi Condensed', sans-serif;
--	font-size: 16px;
--	color: grey;
--}

.button-bar {
	--margin-top: 10px;
	margin-bottom: 0px;
}
.button-bar:last-child {
	margin-bottom: 0px;
}
@media only screen and (max-width: 600px) {
	.button-bar {
		--margin-top: 6px;
	}
}




.button-old {
	background: linear-gradient(0deg, #888888 0%, #444444 100%);
	--background: repeating-linear-gradient(45deg, #888888, #888888 10px, #AAAAAA 10px, #AAAAAA 20px);
	height: 30px;
	padding: 5px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 16px;
	--font-weight: bold;
	border: 1px solid black;
	color: #dddddd;
	text-transform: uppercase;
	box-shadow: 0 2px 2px 0 grey;
	cursor: pointer;
}

.button:hover {
	--background: repeating-linear-gradient(-45deg, #888888, #888888 10px, #AAAAAA 10px, #AAAAAA 20px);
	box-shadow: none;
	--top: 2px;
}

.button {
	background: white;
	height: 22px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 10px;
	--font-weight: bold;
	border: 1px solid grey;
	color: #444444;
	text-transform: uppercase;
	margin: 1px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.sub-form {
	
	background: white;
	padding: 2px;
	border: 1px solid black;
	box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.5);
	
}

.micro-button-box {

    position: absolute;
    right: 5px;
    top: 0px;
}

.micro-button {
	display: inline-block;
	background: white;
	--background: linear-gradient(0deg, #888888 0%, #444444 100%);
	--background: repeating-linear-gradient(45deg, #888888, #888888 10px, #AAAAAA 10px, #AAAAAA 20px);
	width: 15px;
	height: 15px;
	padding: 0;
	font-size: 10px;
	color: #444444;
	text-transform: lowercase;	
	text-align: center;
	line-height: 15px;
	vertical-align: middle;
	border: 1px solid gray;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
	cursor: pointer;		
}

.micro-button-symbol {
	font-size: 10px;	
}

.item-remove-button {
	display: inline-block;
	position: absolute;
	top: 1px;
	right: 2px;
	width: 19px;
	height: 19px;
	font-size: 14px;
	font-weight: bold;
	line-height: 8px;
	vertical-align: middle;
	text-align: center;
	color: red;
	border: 0;
	border-radius: 3px;
	background: none;
	z-index: 100;
	cursor: pointer;
}

.item-remove-button:hover {
	background: rgba(255, 0, 0, 0.5);
	color: white;
	font-weight: bold;
}

.sub-button {
	display: inline-block;
	background: linear-gradient(0deg, #888888 0%, #444444 100%);
	--background: repeating-linear-gradient(45deg, #888888, #888888 10px, #AAAAAA 10px, #AAAAAA 20px);
	min-width: 15px;
	height: 15px;
	padding: 5px;
	font-size: 12px;
	color: #dddddd;
	text-transform: uppercase;	
	text-align: center;
	line-height: 15px;
	vertical-align: middle;
	border: 1px solid black;
	box-shadow: 0 2px 2px 0 grey;
	cursor: pointer;
}

.checkbox {
	width: auto;
	cursor: pointer;
}

.checkbox:focus {
	cursor: pointer;
}

p {
	color: grey;
}

table.merge {
	table-layout:fixed;
	width: 100%;		
	border-collapse: collapse;
	border-spacing: 0px;
}

table.cells {
	table-layout:fixed;
	width: 100%;	
	border-collapse: separate;
	border-spacing: 2px;
}

.item {

}

.item:hover {
	background: rgba(128, 128, 128, 0.25);
}

th {
	padding: 5px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 10px;
	font-weight: normal;
	--text-transform: uppercase;
	text-align: center;
}

.list-row {
	border: 0;
	border-bottom: 0.5px solid;
	--border-image: linear-gradient(to right, #222222 0%, #eeeeee 100%) 0 0 100% 0;
}

.list-row:last-child {
	border-bottom: 0;
}

.list-row > td {
	--font-family: 'Barlow Semi Condensed', sans-serif;
	padding: 10px;
}

.valuePadding {
	display: inline-block;
	width: 65px;
	border: 0;
	height: 30px;
	background: gray;
	box-shadow: inset 0 1px 1px black;
	color: white;
	text-shadow: 0 1px black;
	padding-right: 2px;
}
.valuePadding input {
	background: none;
	border: none;
	padding:0px;
	outline: none;
	text-align: right;
	box-shadow: none;
}

.seperate {
	border-top: 1px solid;
	border-image: linear-gradient(to right, #222222 0%, #eeeeee 100%) 0 0 100% 0;
}

.form-result {
	border: 1px solid black;
	padding: 0px;
	font-size: 14px;
	font-weight: normal;
	text-transform: none;
	--margin: 10px;
	text-align: center;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);	
}

.form-result-title {
	text-align: left;
	font-size: 14px;
	--font-weight: bold;
	line-height: 16px;
	vertical-align: middle;
	padding: 6px;
}

.info {
	background: repeating-linear-gradient(-60deg, #007700, #007700 10px, #008800 10px, #008800 20px);
	color: white;
}

.info-title {
	background: #007700;
	color: white;
}

.error {
	background: repeating-linear-gradient(45deg, #FFDDDD, #FFDDDD 10px, #FFEEEE 10px, #FFEEEE 20px);
	text-transform: uppercase;
	color: #AA2222;
}

.error-title {
	background: #AA2222;
	color: white;
}


.warning {
	background: repeating-linear-gradient(60deg, #ff8b19, #ff8b19 10px, #ff8000 10px, #ff8000 20px);
	text-transform: uppercase;
	color: white;
}

.warning-title {
	background: #ff8000;
	color: white;
}


.info-detail-box {
	text-align: left;
}

.info-detail {
	font-size: 12px;
	text-transform: none;
	padding: 8px;
}


/* these are outdated - remove when encountered */
.info-text {
	font-size: 14px;
	text-align: left;
	text-transform: none;
}

.info-list {
	font-size: 12px;
	text-align: left;
	text-transform: none;
}
/* --------------------------------------------- */


.notification-icon {
	display: inline-block;
	position: relative;
	--right: 10px;
	--top: 2px;
	bottom: 4px;
	margin-left: 1px;
	width: 10px;
	height: 10px;
	line-height: 10px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #AA0000;
	box-shadow: 0 2px 2px 0 grey;
	border: 2px solid white;
}

.checkbox {
	width: 10px;
	height: 10px;
	accent-color: #888888;
	box-shadow: none;
}

.cell {
	--font-family: 'Barlow Semi Condensed', sans-serif;
	background: #FFFFFF;
	font-size: 10px;
	font-weight: normal;
	padding-left: 5px;
	padding-right: 5px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	border: 1px solid #AAAAAA;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
}

.cell > a {
	color: black;	
	text-decoration: none;
	underline: none;
}

.permission-1-bg{
	background: green;
}

.permission-2-bg{
	background: blue;
}

.permission-3-bg{
	background: orange;
}

.permission-4-bg{
	background: red;
}


.red {
	background: #FFCCCC;
}

.red:hover {
	background: #FF9999;
}

.orange {
	background: #FFCCCC;
}

.orange:hover {
	background: #FFCCCC;
}

.yellow {
	background: #FFFFCC;
}

.yellow:hover {
	background: #FFFF66;
}

.green {
	background: #CCFFCC;
}

.green:hover {
	background: #66FF66;
}

.title {
	position: absolute;
	top: 5px;
	left: 10px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 20px;
	font-weight: bold;
}

input.cell {
	background: white;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 10px;
	border: none;
	height: 20px;
	width: 100%;
	text-shadow: none;
	color: black;
	box-shadow: none;
}

.tab {
	margin-left: 10px;
	background: #CCCCCC;
	width: 80px;
	height: 30px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.25);
	border-left: 1px solid rgba(0, 0, 0, 0.50);
	border-right: 1px solid rgba(0, 0, 0, 0.75);
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.tab-selected {
	background: white;
	border-bottom: 0;
}

.tab-space {
	border-bottom: 1px solid gray;
}

.tab-content {
	padding: 10px;
	column-span: all;
	background: white;
	box-shadow: 0 5px 5px -1px grey;
	--display: none;
	border-left: 1px solid rgba(0, 0, 0, 0.50);
	border-right: 1px solid rgba(0, 0, 0, 0.75);
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);	
}

.list-toolbar {
	margin-bottom: 8px;
}

.flex-row {
	display: flex;
	flex-direction: row;
	--justify-content: space-between;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: auto;
	--height: 35px;
	--overflow: hidden;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-grow {
	flex-grow: 1;	
}

.flex-shrink {
	flex-shrink: 1;
}

.flex-gap {
	gap: 8px 8px;
	justify-content: flex-start;
}

.flex-gap-small {
	gap: 5px 5px;
}

.flex-space-between {
	justify-content: space-between;
}

.flex-header {
	padding: 5px;
	--font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 10px;
	font-weight: normal;

	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	--z-index: 100;
}

.flex-cell {
	display: inline-block;
	overflow: hidden;
	margin: 1px;
	
	--height: 24px;
	
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: 100px;
}

.desktop {
	display: block;
}

.mobile {
	display: none;
}

.content-container {
	margin-bottom: 8px;
}


@media only screen and (max-width: 600px) {
	
	.desktop {
		display: none;
	}
	
	.mobile {
		display: block;
	}
}

.flex-app-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;	
}

.flex-app-icon {
	flex-direction: row;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	margin: 25px;
}

.flex-app-icon-inner {
	position: absolute;
	margin: auto;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);
}

.app-symbol {
	font-size: 60px;
	color: grey;
}

.app-label {
	font-size: 14px;
	text-transform: uppercase;
	color: grey;
}



.flex-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	width: auto;
	overflow: hidden;
}

.flex-item {
	display: inline-block;
	overflow: hidden;
	
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: 100px;
}

@media only screen and (max-width: 600px) {
	
	label {
		font-size: 16px;
	}
	
	.flex-content {
		flex-direction: column;
	}
	
	.flex-item {
		display: flex;
		flex-grow: 1;
		--background: red;
		margin-bottom: 10px;	
		
	}

}


.mail-container {

	--background: purple;
	display: flex;
	flex-direction: row;
	gap: 5px;
	--flex-grow: 1;
	width: auto;
	
}

.mail-tools {

	--background: red;
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: 25%;

}

.mail-list {

	--background: orange;
	display: flex;
	flex-direction: column;
	--flex-shrink: 0;
	flex-grow: 1;
	flex-basis: auto;
	--width: auto;
}

.mail-content {
	--background: yellow;
	display: flex;
	flex-wrap: wrap;
	--flex: 0 0 100%;
	flex-direction: column;
	content-align: 
}

.mail-item {
	--background: green;
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 5px;
	--flex-grow: 0;
	--background: pink;
	--padding: 5px;
	margin-bottom: 10px;
	cursor: pointer;
}

.mail-item:last-child {
	margin-bottom: 0px;
}

.mail-item-icon {
	--position: relative;
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: 60px;
	width: 60px;
	height: 60px;
	object-fit: cover;
	object-position: 0 0;
	border: 1px solid grey;
	box-shadow: 0 2px 2px 0 grey;
}

.message-title {
	--background: red;
	font-size: 16px;
	--flex-grow: 1;
	--width: auto;
}

.message-detail {
	font-size: 11px;
	color: grey;
	--width: 100%;
	--flex-grow: 1;
}

.message-bubble {
	display: block;
	position: relative;
	background: white;
	border: 1px solid grey;
	border-radius: 0px 10px 10px 10px;
	box-shadow: 0 3px 2px -1px grey;
	padding: 10px;
	padding-top: 0px;
	font-size: 12px;
	color: grey;
	width: auto;
	--flex-grow: 1;
	--width: 300px;
	--white-space: nowrap;
	line-height: 40px;
}

.message-date {
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 12px;
	color: grey;
}

.message-fade {
	background-image: linear-gradient(to right, transparent, white);
	width: 50px;
	position: absolute;
	right: 8px;
	top: 0px;
}

@media only screen and (max-width: 600px) {

	.mail-container {
	
		flex-direction: column;
		flex-wrap: wrap;
	
	}
	
}

.card {
	margin-bottom: 8px;
}

.card:last-child {
	margin-bottom: 0px;
}

.employee-container {
	display: flex;
	flex-direction: row;
}

.employee-data-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-left: 8px;
}

.employee-contact {
	font-size: 10px;
}

.tool-container {
	display: flex;
	flex-direction: row;
}

.tool-data-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-left: 8px;
}

.tool-data {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	--margin-left: 8px;
	--cursor: pointer;
}

.tool-name {
	
}

.tool-serial-number {
	position: relative;
	font-size: 10px;
}

.tool-id-number {
	display: inline-block;
	position: absolute;
	right: 8px;
	font-size: 10px;
}

.tool-detail-container {
	display: none;
	position: relative;
	background: white;
	font-size: 10px;
	color: gray;
	padding: 5px;
	margin-top: 10px;
	border: 1px solid gray;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5);
}

.tool-detail {
	font-size: 10px;
}

.request-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	--margin-bottom: 10px;
}

.request-container:last-child {
	margin-bottom: 0px;
}

.request-data-container {
	display: flex;
	position: relative;
	flex-direction: column;
}

.request-id {
	position: absolute;
	right: 0px;
	font-size: 10px;	
}

.request-status {
	display: inline-block;
	position: absolute;
	top: 4px;
	width: 50px;
	height: 16px;
	background: yellow;
	color: black;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	border: 1px solid black;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5);
	margin-left: 10px;
	
}

.request-status-cell{
	
	color: black;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	vertical-align: middle;
	box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.request-date {
	display: inline-block;
	position: absolute;
	right: 5px;
	font-size: 10px;
}

.request-initiator {
	font-size: 12px;
}

.organization-container {
	display: flex;
	flex-direction: row;
}

.organization-data-container {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	--gap: 10px 0px;
	margin-left: 8px;
}

.organization-data-columns {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.organization-address-container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	cursor: pointer;
}

.organization-address {
	font-size: 10px;
}

.organization-phone-container {
	display: flex;
	flex-direction: column;
	text-align: right;
}
.organization-phone {
	display: flex;
	justify-content: flex-end;
	font-size: 10px;
	
}

.organization-phone-link {
	text-decoration: none;
	font-size: 10px;
	color: #666666;
}

.organization-phone-link:hover {
	color: black;
}

.organization-contact-container {
	position: relative;
	display: none;
	flex-direction: column;
	flex-grow: 1;
	flex-wrap: nowrap;
	gap: 10px 0px;
	justify-content: flex-end;
	--background: white;
	--border: 1px solid grey;
	--padding: 5px;
	margin-top: 10px;
}

.organization-contact-count {
	display: flex;
	justify-content: flex-end;
	font-size: 12px;
}

.contact-list {
	display: flex;
	flex-direction: column;
	gap: 10px 0px;
}

.contact-container {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 5px;
	border: 1px solid grey;
	background: white;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5);
}

.contact-name {
	font-size: 14px;
	font-weight: bold;
}

.contact-title {
	font-size: 12px;
}

.contact-email {
	font-size: 10px;
	cursor: pointer;
}

.contact-data-container {
	position: absolute;
	right: 5px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.contact-data {
	display: flex;
	justify-content: flex-end;
	font-size: 10px;
}

.contact-data-link{
	
}

.contact-data-link:hover {
	
}

/* new tabs */
.tab-set {
	display: flex;
	flex-direction: column;
	gap: 0px 0px;
}

.tab-bar {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.tab2 {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1px;
	background: #f4f4f4;
	--background: linear-gradient(0deg, rgba(136,136,136,1) 0%, rgba(255,255,255,0) 5%);
	width: 80px;
	height: 39px;
	font-size: 10px;
	--text-align: center;
	--line-height: auto;
	--vertical-align: middle;
	border: 1px solid grey;
	z-index: 100;
	cursor: pointer;
}

.shadow-tab {

	position: absolute;
	box-shadow: 0 5px 5px -1px grey;
	z-index: 0;

}

.selected {
	
	margin-top: 0px;
	height: 40px;
	background: white;
	border-bottom: 1px solid white;
	
}

#tab-content {
	
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px 0px;
	top: -1px;

	padding: 10px;
	--column-span: all;
	background: white;
	box-shadow: 0 5px 5px -1px grey;
	border: 1px solid gray;	

}

.form-container {
	display: flex;
	flex-direction: column;
	gap: 10px 0px;
}

.form-input-row {
	display: flex;
	flex-direction: row;
	gap: 0px 10px;
}

.form-input {
	display: flex;
	flex-direction: column;
}

.form-input-group {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	gap: 0px 10px;		
}

.form-input-container {
	display: flex;
	--flex-shrink: 1;
	flex-grow: 1;
	--flex-wrap: wrap;
	flex-direction: column;
	--background: red;
}

.search-container {
	display: flex;
	flex-direction: row;
	gap: 10px 10px;
}

.search-field-container {
	display: flex;
	flex-direction: column;
}

/* end new tabs */

.badge {
	position: absolute;
	padding-left: 2px;
	padding-right: 2px;
	right: 5px;
	top: 6px;
	border: 1px solid black;
	font-size: 9px;
	font-weight: normal;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5);
}

.data {
	position: relative;
	background: white;
	border: 1px solid grey;
	border-top: 0;
	padding: 8px;
	font-size: 12px;
	color: grey;
	box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.5);
}

.data-horizontal-divider {
	height: 1px;
	margin-top: 8px;
	margin-bottom: 8px;
	background: linear-gradient(90deg, rgba(225,225,225,1) 0%, rgba(136,136,136,1) 50%, rgba(225,225,225,1) 100%);
	overflow: hidden;
}

.data-vertical-divider {
	width: 1px;
	margin-left: 8px;
	margin-right: 8px;
	background: linear-gradient(0deg, rgba(225,225,225,1) 0%, rgba(136,136,136,1) 50%, rgba(225,225,225,1) 100%);
	overflow: hidden;	
}