﻿body {
	position: absolute;
	width: 100%;
}

.ui.form{
	margin-top:1em;
}

.user-edit{
	margin-left:1em;
}
.edit-workstation {
	float:right;
}
.top-table-controls {
	width: 89%;
}
.ui.middle.aligned.center.aligned.grid {
	height: 100%;
	position: absolute;
	width: 100%;
	margin-left:-8em;
}

h1.login-logo {
	font-weight: 700;
	font-style: normal;
	font-size: 5rem;
	color: #fff;
	margin-bottom: 0px;
}

.button.default.login {
    width: 100%;
    font-size: 1.2rem;
    padding-top: .8em;
    background: #01b4e1;
    color: #fff;
    transition: all 0.2s;
    letter-spacing: 4px;
    border: 0.16em solid #01b4e1;
     border-radius: 2em;
    margin-top: 1.5em;
}

	.button.default.login:hover {
		border-color: #1f446E;
		background: #1f446E !important;
		color: #fff;
		letter-spacing: 4px;
		-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
	}

	.button.default.login:active {
		border-color: #131F46;
		background: #131F46 !important;
		color: #fff;
		letter-spacing: 4px;
		-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
	}


label{
	font-size:1.2em !important;
    font-family:Sansation,sans-serif;
}
.ui.form .two.fields {

margin-left:0px;
}
.ui.form .two.fields > label {
	font-weight: 700;
}

.ui.table.admin tbody tr td.functions div {
	width: 5.9rem;
	float: right;
}
.ui.table tr td:first-child, .ui.table tr th:first-child {
    width: 4% !important;
    border-top: none !important;
}
th{
	text-align:center !important;
}

.ui.table tbody td span {
	font-size:1rem;
}

.ui.form .fields{
	margin-top:2em;
	margin-left:2em;
}

h2 {
	position: relative;
	color: #454D56
}

h2 span {
	background-color: white;
	padding-right: 10px;
    font-family:Sansation,sans-serif;
}

h2:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0.5em;
	border-top: 1px solid #dcdcdc;
	z-index: -1;
}

.ui.selection.dropdown {
	border: 1px solid rgba(34,36,38,.15) !important; 
	border-radius: 4px !important;
}

.top-table-controls.malum {
	margin-left: 1% !important;
	margin-top: 3.5rem;
	margin-bottom: 2rem;
}
.top-table-controls.malum.add.cam {
	margin-left: 3% !important;
}

	.top-table-controls.malum.add.key {
		margin-top: -3.5em;
		margin-bottom: 2em;
	}
		.top-table-controls.malum.add.key.add-key span {
			margin-left: 1em;
		}

/**   TABLE SCROLL   **/
.scrollit {
	overflow: scroll;
	height: 50em;
}
.scrollitmain {
	overflow: scroll;
	height: 38em;
}

.workstation-edit-page .error-top {
	width: 30%;
	margin-left:2.2rem;
	display:block;
}

.error-top
{
	border: 3px solid red !important;
	color: dimgray;
	background: pink;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: unset !important;
	padding: 8px 20px;
	border-radius: 10px;
	/*MAY BE A PROBLEM*/
	display: inline-block;
	padding-left: 20px;
	width: 95%;
	margin-bottom: 10px;
	text-align: center;
}
.warning-top {
	border: 3px solid red !important;
	color: dimgray;
	background: pink;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: unset !important;
	padding: 8px 20px;
	border-radius: 10px;
	/*MAY BE A PROBLEM*/
	display: inline-block;
	padding-left: 20px;
	width: 95%;
	margin-bottom: 10px;
	text-align: center;
}

.errors{
	padding-left:2em;/*MAY BE A PROBLEM*/
	display: block;
	padding-left: 20px;
	width: max-content;
	margin-bottom: 10px;
	margin-left:2rem;
}

.hide {
	display:none !important;
}
.form-control.input-name.errorInput,
.ui.selection.dropdown.errorInput {
	border: 2px solid red !important;
}

.icon-span{
	cursor:pointer;
}

/*==================Forms Account Admin===============*/

form.full {
width:100%;
margin-right:4em;
}
	form.full .ui.dividing.header {
		float:left;
	}
	form.full .two.fields {
		width: 100%;
	}
	form.full .three.fields {
		width: 100%;
		margin-left:0px;
	}

.ui.form .two.fields.account {
	margin-left: 2em;
}
.ui.grid.no-indent {
	margin-left: 0px;
}
.ui.large.form {
	margin-top:0px;
}
.three.fields.no-top {
	margin-top:0px;
}
button {
	white-space:nowrap;
	height:max-content;
}
	button.top {
		margin-top: 29px !important;
	}
.ui.form .fields.no-top {
	margin-top: 0px;
}
.ui.form .fields .field:first-child {
	padding-left:0px;
}
.ui.form .fields .field:last-child {
	padding-right: 0px;
}

.field .ui.input {
    max-width: 320px !important;
    
} 

@media screen and (max-width: 990px) {
	.field, hr, button.ui.button.default.login {
		margin-left: 5em !important;
		margin-right: 8em !important;
	}

	button.ui.button.default.login{
		width:50%;
	}
	.field.model{
		margin-left:0em !important; 
	}
}

@media only screen and (max-width: 1150px){
	.ui.grid > .stackable.stackable.row > .column, .ui.stackable.grid > .column.grid > .column, .ui.stackable.grid > .column.row > .column, .ui.stackable.grid > .column:not(.row), .ui.stackable.grid > .row > .column, .ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .wide.column {
		width: 100% !important;
		margin: 0 0 !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		padding: 1rem 1rem !important;
	}
	.top-table.key {
		margin-left: 38%;
		margin-bottom: 2rem;
		text-transform: uppercase;
		font-family: canada-type-gibson, sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 1.5rem;
		letter-spacing: 3px;
		vertical-align: bottom;
		margin-top:2em;
	}
	.ui.table.key tr td:first-child, .ui.table.key tr th:first-child {
		width: 6% !important;
		 background: none !important; 
		 border-left: 1px solid rgba(34,36,38,.15) !important; 
		 border-bottom: 1px solid rgba(34,36,38,.15) !important; 
		 border-top: 1px solid rgba(34,36,38,.15) !important; 
	}
	.ui.table.key tr th:first-child {
		width: 6% !important;
		 background: #495561 !important; 
		 border-right: 0px #FFF solid !important; 
	}
	.ui.table:not(.unstackable) td:first-child, .ui.table:not(.unstackable) th:first-child {
		 font-weight: normal; 
	}
	.column-sidebar {
		height: 105%;
	}
	.top-table-controls.malum.add.key {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}


@media screen and (max-width: 767px) {
	table {
		border: 0;
	}

		table caption {
			font-size: 1.3em;
		}

		table thead {
			border: none !important;
			clip: rect(0 0 0 0) !important;
			height: 1px !important;
			margin: -1px !important;
			overflow: hidden !important;
			padding: 0 !important;
			position: absolute !important;
			width: 1px !important;
		}

		table tr {
			display: block !important;
			text-align: right !important;
		}

		table td {
			border-bottom: 1px solid #ddd;
			display: block !important;
			font-size: .8em;
			text-align: right !important;
		}
	.ui.table tbody tr {
		min-height: initial !important;
		height: auto !important;
	}
	table td::before {
		/*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
		content: attr(data-label !important);
		float: left !important;
		font-weight: bold !important;
		text-transform: uppercase !important;
	}

	table td:last-child {
		border-bottom: 0 !important;
	}
	.ui.table:not(.unstackable) tr {
		 padding-top: 0; 
		 padding-bottom: 0; 
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}
	.ui.table.key tr td:first-child, .ui.table.key tr th{
		border-left: 0px solid rgba(34,36,38,.15) !important;
		border-right: 0px solid rgba(34,36,38,.15) !important;
		border-bottom: 0px solid rgba(34,36,38,.15) !important;
		border-top: 0px solid rgba(34,36,38,.15) !important;
	}
}