body {
	font-family: sans-serif;
	color: #333333;
	font-size: 12px;
}
form {
	display:inline;
}

table.fancy {
	border-spacing:1px;
}

table.fancy thead th, table.fancy tbody td, table.fancy tfoot td {
	cursor: default;
	margin: 0;
	padding: 2px 8px;
	border: 0;
	border-top: 1px solid #eefafc;
	border-left: 1px solid #eefafc;
}

table.fancy thead th, table.fancy tfoot tr {
	background: linear-gradient(to bottom, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%);
}

table.fancy tfoot div {
	display: flex;
	flex-flow: row nowrap;
}

table.fancy tfoot form {
	display: inline-block;
	flex: 1 1 100%;
}

table.fancy tfoot input {
	box-sizing: border-box;
	width: 100%;
}

table.fancy tfoot span {
	display: inline-block;
	flex: 0 0 auto;
	margin-left: 10px;
}

table.fancy thead th a {
	color: #333333;
	text-decoration: none;
}

table.fancy tbody tr:hover {
	background: linear-gradient(to bottom, #ececec 0%,#e0e0e0 40%,#cecece 100%);
}

table.licenses {
	white-space:nowrap;
}

table.licenses td:nth-of-type(n+6):nth-of-type(-n+13) {
	text-align:center;
	white-space: nowrap;
}

table.systems td.mac_address,
table.licenses td.mac_address,
table.licenses td.license_key {
	font-family: monospace;
}

table.systems td:nth-of-type(7) {
	text-align: center;
}

table.systems td:last-of-type {
	white-space: nowrap;
}

a.button, input[type="button"], input[type="submit"], button:not(.select2-selection__clear) {
	font-weight: normal;
	padding: 1px 6px;
	color: #333333;
	margin: 0;
	display: inline-block;
	background: linear-gradient(to bottom, #d5e3e4 0%,#ccdee0 40%,#b3c8cc 100%);
	border-radius: 4px;
	border: 1px solid #999999;
	border-top: 1px solid #eefafc;
	border-left: 1px solid #eefafc;
	cursor: pointer;
	text-decoration: none;
}

a.button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:not(.select2-selection__clear):hover {
	background: linear-gradient(to bottom, #e0eff0 0%,#d8ebed 40%,#bed4d9 100%);
}

a.button:active, input[type="button"]:active, input[type="submit"]:active, button:not(.select2-selection__clear):active {
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

div.login, h1.login_header {
	text-align: center;
}

div.head {
	margin-bottom: 1em;
}

table.edit_license td:nth-of-type(2), table.create_license td:nth-of-type(2) {
    width: 260px;
}

table.edit_license tr:nth-of-type(n+7) > td, table.create_license tr:nth-of-type(n+7) > td {
    vertical-align: middle;
}

table.edit_license th,
table.edit_license td:nth-of-type(1),
table.create_license th,
table.create_license td:nth-of-type(1) {
	padding: 4px 8px;
	border: 0;
	border-top: 1px solid #eefafc;
	border-left: 1px solid #eefafc;
}

table.edit_license th,
table.edit_license td:nth-of-type(2),
table.create_license th,
table.create_license td:nth-of-type(2) {
	padding: 4px 8px;
	border: 0;
	border-top: 1px solid #eefafc;
	border-left: 1px solid #eefafc;
}

table.edit_license tfoot td,
table.create_license tfoot td {
	text-align: right;
	white-space: nowrap;
}

table.edit_license tfoot input[type="text"],
table.create_license tfoot input[type="text"]{
	text-align: center;
	width: 50px;
}

iframe[name="hardware_license"] {
	width: 100%;
	height: 400px;
	border-width: 0px;
	margin: 0px -7px 0px;
}

span.mandatory {
  color: red;
  font-size: 150%;
}

p.mandatory {
  color: red;
}

/* Tooltip CSS */
span.tooltip{
  position: relative;
  cursor:pointer;
  border:1px solid gray;
  border-radius:10px;
  background-color:#DEEDF7;
  width:10px;
  font-size:x-small;
  vertical-align:middle;
  color:#14405C;
  display:inline-block;
  text-align:left;
  margin-left:3px;
}

span.tooltip:hover:before{
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 15px;
  content: "";
  left: 50%;
  position: absolute;
}

span.tooltip:hover:after{
  background: #A1CCD6;
  border-radius: 5px;
  bottom: 21px;
  color: #000000;
  content: attr(tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  width: 220px;
}

/* Copy to clipboard field */
div.created_license > p > input {
  width: 250px;
  cursor: pointer;
}

form.edit_license p.mandatory,
table.edit_license tr.system_attr,
table.create_license tr.system_attr {
  display:none;
}

/* Color license rows on expiration */
table.licenses tr.warn {
	background-color: #fde174;
}

table.licenses tr.bad {
	background-color: #fa9485;
}

table.products td:nth-of-type(1),
table.products td:nth-of-type(2),
table.products td:nth-of-type(8),
table.products td:nth-of-type(9),
table.products td:last-of-type {
	white-space: nowrap;
}

table.products td:nth-of-type(3) {
	text-align: right;
}

table.products td:nth-of-type(6) {
	text-align: center;
}

table.hosts td:nth-of-type(1) {
	white-space: nowrap;
}

table.hosts td:nth-of-type(2) {
	text-align: center;
}

table.users td:last-of-type {
	white-space: nowrap;
}

table.companies td:last-of-type {
	white-space: nowrap;
}

table.metrics td:nth-of-type(2),
table.metrics td:nth-of-type(3) {
	text-align: center;
}

table.metrics td:last-of-type {
	white-space: nowrap;
}

form.basic {
	display: grid;
	grid: auto-flow / repeat(2, auto);
	grid-gap: 10px 10px;
	align-items: center;
	justify-content: start;
}

form.basic h1 {
	text-align: center;
	grid-column: 1 / 3;
}

form.basic input[type="submit"] {
	text-align: center;
	justify-self: center;
}

form.profile {
	grid: auto-flow / repeat(3, auto);
}

form.profile h1, form.profile input[type="submit"] {
	grid-column: 1 / 4;
}

form.profile input[type="checkbox"] {
	justify-self: start;
}

content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

content history {
	display: grid;
	grid: auto / auto-flow;
	align-content: start;
}

content history p {
	grid-column: 1 / 5;
	justify-self: center;
}

content history since {
	grid-column: 1 / 2;
	white-space: nowrap;
}

content history cause {
	font-weight: bold;
	grid-column: 2 / 3;
	white-space: nowrap;
}

content history who {
	grid-column: 3 / 4;
	white-space: nowrap;
}

content history key {
	grid-column: 4 / 5;
	white-space: nowrap;
}

content history changes {
	display: grid;
	grid-column: 1 / 5;
	grid-template-columns: 0.5em auto 1fr;
	column-gap: 0.5em;
}

content history changes name {
	grid-column-start: 2;
}

content history changes value::before {
	content: "\279c  ";
}

table.license_report h3 {
	text-align: left;
}

table.license_report tr td:nth-child(3) {
	text-align: right;
}

table.license_report tr th:nth-child(5),
table.license_report tr th:nth-child(6) {
	text-align: left;
}

.part-numbers {
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-gap: 3px;
	justify-content: start
}

.part-numbers button {
	display: none;
	grid-column: 2 / 3;
	width: 100%;
}

.first-header {
	grid-column: 1 / 2;
	justify-self: center;
}

.second-header {
	grid-column: 2 / 3;
	justify-self: center;
}

.third-header {
	grid-column: 3 / 4;
	justify-self: center;
}

.fourth-header {
	grid-column: 4 / 5;
	justify-self: center;
}

.fifth-header {
	grid-column: 5 / 6;
	justify-self: center;
}

#volume-licensing-dialog form {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 3px;
}

#volume-licensing-dialog form span {
	display: block;
	text-align: center;
}

.ui-dialog button.ui-dialog-titlebar-close {
	display: none;
}

input, select, textarea {
	border: 1px solid #aaa;
	padding: 5px;
	border-radius: 4px;
	background: white;
}

input[required] {
	background-image: radial-gradient(red 15%, transparent 25%);
	background-size: 1em 1em;
	background-position: top right;
	background-repeat: no-repeat
}

select[required] {
	background-image: radial-gradient(red 15%, transparent 25%);
	background-size: 1em 1em;
	background-position: 100% 0%;
	background-repeat: no-repeat
}

select[required] + .select2 .select2-selection__arrow {
	background-image: radial-gradient(red 15%, transparent 25%);
	background-size: 1em 1em;
	background-position: 100% 0%;
	background-repeat: no-repeat
}

.user_groups {
	display: inline-grid;
	grid-template-columns: auto auto;
	column-gap: 1em;
}

.group_actions {
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto;
	column-gap: 1em;
}

.group_actions > span {
	align-self: center;
}

.group_actions > input {
	justify-self: center;
}

/* fix modal dimmer */
body .ui-widget-overlay {
	background: #000;
	opacity: .3;
}


.metric-report select {
	width: 100%;
}

.ui-dialog-buttonset.override {
	display: flex;
	float: none !important;
	flex-flow: row nowrap;
	justify-content: space-between;
}