body {
    display: flex;
    height: 100%;
    /*min-height: 100vh;*/
    flex-direction: column;
    background-color: #eeeeee;
}

html {
    height: 100%;
}

main {
    flex: 1 0 auto;
    background-color: #eeeeee;
    /*height: 100vh;*/
}

.site {
    float: left;
    width: 100%;
    /*margin: 0 auto;*/
    /*padding: 20px;*/
    padding-bottom: 30px;
}

a.blue-text {
    color: #0170c9;
}

a.transition-blue {
    color: #3c3c3b !important;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

a.transistion-blue :hover {
    color: #0170c9 important!;
    text-decoration: underline;
}

.brand-logo {
    margin-left: 10px;
}

.containerLarge {
    margin-left: 10px;
    margin-right: 10px;
}

.material-icons {
    display: inline-flex;
    vertical-align: top;
}

nav ul .waves-effect i {
    display: inline;
}

.triforxRed {
    background-color: #e30613 !important;
}

.triforxGrey {
    background-color: #3c3c3b !important;
}

.triforxGrey-text {
    color: #3c3c3b !important;
}

.text-bold {
    font-weight: bold;
}

.text-thin {
    font-weight: thin;
}

.small {
    font-size: 0.7em;
}

.tiny {
    font-size: 0.5em;
}

/****
DeviceCards
****/

.deviceCardView {
  margin: 0 5%;
  width: auto;
  /*padding-left: 5%;
  padding-right: 5%;*/
  /*border: 1px solid #000;*/
}

.deviceCardView .section h5 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.deviceCard {
    font-size: 0.9em;
    float: center;
    display: inline-block;
    /*margin: 8px;*/
    margin: 0.5rem 15px 1rem 0px;
    padding: 5px;
    width: 280px;
    background-color: #fff;
    color: #3c3c3b;
	/*border: 1px solid #8a8a8a;*/
    -webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);
}

.deviceCard ul {
	list-style-type: none;
	padding-left: 0px;
}

.deviceCard ul li span {
	float: left;
  text-align: right;
  width: 80px;
  padding-right: 5px;
  font-weight: bolder;
  color: rgb(102, 102, 102);
}

.deviceCard li {
  margin-top: 3px;
}

.underline {
  color: #3c3c3b;
  border-bottom: 1px dotted #3c4c3b;
}

greenBackground {
  background-color: #009900;
  padding: 1pt 3pt 1pt 3pt;
  color: #fff;
}

/* device seems offline*/
orangeBackground {
  background-color: #ff9900;
  padding: 1pt 3pt 1pt 3pt;
  color: #333;
}

redBackground {
  background-color: #ff3300;
  padding: 1pt 3pt 1pt 3pt;
  color: #fff;
}


.deviceCardTitle {
    font-size: 1.1em;
    font-weight: bold;
    background-color: rgb(223, 223, 223);
    text-align: left;
    padding: 3px;
}

.deviceCardIcon {
    display: inline-flex;
    vertical-align: text-top;
    margin-right: 6px;
    /*border: 1px solid #000;*/
}

.CardView {
    font-size: 0.9em;
    float: left;
    /*display: inline-block;*/
    /*margin: 8px;*/
    margin: 0.5rem 15px 1rem 0px;
    padding: 5px;
    width: auto;
    background-color: #fff;
    color: #3c3c3b;
	/*border: 1px solid #8a8a8a;*/
    -webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);
}

/** Override table settings **/

td {padding: 8px 5px;}
td input { margin:0 !important; height:2em !important; }
/*td .select-wrapper input.select-dropdown{height:2em;line-height:2em;}*/

table.highlight>tbody>tr:hover {
    /*background-color: rgba(194, 206, 23, 0.5) !important;*/
    background-color: rgba(56, 166, 217, 0.5) !important;
}

table.highlight:striped {
  background-color: rgba(56, 166, 217, 0.5) !important;
}

/*table.highlight>tbody>tr {
    color: red;                                     // whatever color you want
}*/
