* {
	font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
}

body
{
  margin: 0 0 0 0;
  height: 100%;
}

html
{
  height: 100%;
}

H1
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 20pt;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    WHITE-SPACE: nowrap;
}

TD
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    WHITE-SPACE: nowrap;
}

TD.list
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 8pt;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    WHITE-SPACE: nowrap;
    text-indent: 4px;
	 padding: 3 5 3 5;
}

TD.head
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 16pt;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    WHITE-SPACE: nowrap;
    text-indent: 4px;
    COLOR: #0072BC;
}

TD.head2
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 12pt;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    WHITE-SPACE: nowrap;
    text-indent: 4px;
    COLOR: #0072BC;
}

TD.head3
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    WHITE-SPACE: nowrap;
    text-indent: 4px;
    COLOR: #0072BC;
}

a {
    color: #4183c4;
    text-decoration: none;
}

a:hover {
    color: #1e70bf;
    text-decoration: none;
}

A:active {
    color: #4183c4;
}

A:visited {
    color: #4183c4;
}

TR.even TD
{
    background: rgb(235,235,255);
}
TR.odd TD
{
    background: #FFFFFF;
}

select
{
   height: 18px;
   font: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   font-size: 10pt;
   COLOR: #000000;
}

.sort_button:hover
{
    background: #FFFFFF;
    color:#000000;
    cursor:pointer;
}

input.text
{
   height: 25px;
   font: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   font-size: 12px;
   COLOR: #000000;
}

input.noedit
{
   height: 18px;
   font: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   font-size: 10px;
   BACKGROUND-COLOR: lemonchiffon;
   BORDER-RIGHT: lightsteelblue 1px solid;
   BORDER-LEFT: lightsteelblue 1px solid;
   BORDER-TOP: lightsteelblue 1px solid;
   BORDER-BOTTOM: lightsteelblue 1px solid;
}

input.optional
{
   height: 18px;
   font: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   font-size: 10px;
   background-color: lemonchiffon;
   BORDER-RIGHT: lightsteelblue 1px solid;
   BORDER-LEFT: lightsteelblue 1px solid;
   BORDER-TOP: lightsteelblue 1px solid;
   BORDER-BOTTOM: lightsteelblue 1px solid;
   COLOR: #000000;
}

input
{
   height: 18px;
   font: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   font-size: 14px;
   COLOR: #222244;
	padding: 3 5 3 5;
	background-color: transparent;
   BORDER-RIGHT: lightsteelblue 1px solid;
   BORDER-LEFT: lightsteelblue 1px solid;
   BORDER-TOP: lightsteelblue 1px solid;
   BORDER-BOTTOM: lightsteelblue 1px solid;
}

input[type=text] {
	padding:3 5 3 5;
   height: 18px;
   font: Arial, Tahoma, Verdana, Helvetica, sans-serif;
}

input[type=button] {
	background-color: #e7e7e7;
	border: none;
	border-radius: 4px;
	color: #00529C;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
}

input[type=button]:hover {
	background-color: #0072BC;
   color: white;
}

input[type=submit] {
	background-color: #e7e7e7;
	border: none;
	border-radius: 4px;
	color: #00529C;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
}

input[type=submit]:hover {
	background-color: #0072BC;
   color: white;
}

p
{
   font-size: 14px;
   font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   color:#00005A;
   LINE-HEIGHT: 20px;
   text-decoration: none;
}

li
{
   font-size: 14px;
   font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   color:#00005A;
   LINE-HEIGHT: 25px;
   text-decoration: none;
	font-weight: bold;
}

ul
{
  margin: 0.33em 0;
  padding: 0 0 0 15px;
  list-style-type: none;
}

li:before { /* the custom styled bullets */
  background-color: #00529C;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}

hr
{
	border: 0px;
   background-color: #0072BC;
   height: 2px;
}

td.label
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 16pt;
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    WHITE-SPACE: nowrap;
    color: #0072BC;
}

.datatable {
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #ddd;
}

.datatable tr, .datatable td  {
	border: 1px solid #ddd;
	padding: 5;
	font-size: 12px;
}

.datatable thead tr th {
	padding: 2px 5px;
	font-size: 12px;
	background: #0072bc;
	color:#fff;
	border: 1px solid #0072bc;
}

body {
    width: 100%;
    min-height: 100%;
    padding:0;
    margin:0;
}

.message {
    position: relative;
    font-size:12px;
  min-height: 1em;
  margin: 1em 0;
  background: #f8f8f9;
  padding: .7em .7em;
  line-height: 1.4285em;
  color: #000000de;
  -webkit-transition: opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  transition: opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;
  transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;
  border-radius: .28571429rem;
  -webkit-box-shadow: 0 0 0 1px rgba(34,36,38,.22) inset, 0 0 0 0 transparent;
  box-shadow: 0 0 0 1px rgba(34,36,38,.22) inset, 0 0 0 0 transparent;
}

.message.error, 
.message.red {
    background-color: #ffe8e6;
  color: #db2828;
  -webkit-box-shadow: 0 0 0 1px #db2828 inset, 0 0 0 0 transparent;
  box-shadow: 0 0 0 1px #db2828 inset, 0 0 0 0 transparent;
}

.navheader {
    display: flex;
    z-index:9999999999;
    height:50px;
    width: 100%;
    margin-bottom:12px;
    background-color:#0072BC;
}

.navheader .right {
    height:100%;
    margin-left:auto;
}

.navheader .logo {
    height: 100%;
    padding:10px;
}

.navheader .logo img {
    height: 30px;
}

.navheader .companyname {
    font-size:1.5em;
    padding-left:0.5em;
    color:#fff;
    line-height: 50px;
}

.loginpage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#fff;
    
    background-image: url('./images/background.jpg') !important; 
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.loginpage .loginform {
    max-width:400px;
    width: 70%;
    max-height:80vh;
    max-height:80%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    padding:1em 3em;
    top:50%;
    left:50%;
    background-color:#fff;
    border-radius: .28571429rem;
    transform: translateY(-50%) translateX(-50%);
}

.loginpage .loginform .header {
    font-weight: 600;
    color: #00529C;
    text-align: center;
    font-size:1.5em;
}

.loginpage .loginform img.logo {
    max-width:300px;
    max-height:200px;

    margin-left:auto;
    margin-right:auto;
}

.loginpage .loginform .header.companyname {
    padding-bottom:.5em;
}
.loginpage .loginform .header.login {
    font-size:.9em;
}
form .field.center {
    text-align: center;
}
form .field {
    padding:7px 0;
    width: 100%;
}
form .field label {
    width:100%;
    font-size:0.8em;
    display: block;
    font-weight: 600;
    padding:5px 0;
}


form .field input, form .field select {
	 box-sizing: border-box;
    outline: 0;
    background: #fff;
    border: 1px solid #22242626;
    color: #000000de;
	 padding:7px;
	 height:2.3em;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    box-shadow: 0 0 0 0 transparent inset;
    -webkit-transition: color .1s ease,border-color .1s ease;
    transition: color .1s ease,border-color .1s ease;
    width: 100%;
}

form .field select {
    display: block;
  height: auto;
  width: 100%;
  background: #fff;
  border: 1px solid #22242626;
  border-radius: .28571429rem;
  -webkit-box-shadow: 0 0 0 0 transparent inset;
  box-shadow: 0 0 0 0 transparent inset;
  padding: .62em 1em;
  color: #000000de;
  -webkit-transition: color .1s ease,border-color .1s ease;
  transition: color .1s ease,border-color .1s ease;
}

.button.fluid {
    width: 100%;
}
.button {
    cursor: pointer;
  display: inline-block;
  min-height: 1em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  color: #0009;
  padding: .78571429em 1.5em .78571429em;
  text-transform: none;
  text-shadow: none;
  font-weight: 700;
  line-height: 1em;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  border-radius: .28571429rem;
  -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
  transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  will-change: '';
  -webkit-tap-highlight-color: #0000;
}





/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/


/* ==== GRID SYSTEM ==== */

.row {
    position: relative;
    width: 100%;
}

.row [class^="col"] {
    float: left;
    margin: 0;
    min-height: 0.125rem;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}


/* 720px */

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    position: static
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 73.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}