:root {
    --breadcrumbs-bg: #79aec8;
}

/* MikeO Styles */

div#react-root {
  margin-left:auto;
  margin-right:auto;
  max-width:1200px;
}

div#csv-column-nav h1 {
  float:left;
  width:100%;
}

h1#intro-heading {
  font-size: 32px;
  float:left;
  width:100%;
  margin-top:1em;
}
div.field-area-row {
  float:left;
  margin-bottom:30px;
  border-top:1px dotted #d9d9d9;
  border-bottom:1px dotted #d9d9d9;
  padding-top:20px;
  padding-bottom:20px;
}

h1#fields-heading {
  float:left;
  width: 100%;
  margin-top:30px;
}

div#csv-column-nav ul li a {
  border:1px dotted #0088cc;
  padding:10px;
  display:block;
  width:33%;
  float:left;
  margin:10px;
  text-align: center;
}

div#csv-column-nav {
  width:100%;
  float:left;
  margin-bottom: 30px;
}

div#react-root input {
	border:1px solid #0088cc;
	height:22px;
	border-radius:0px;
	padding:4px;
}

div.new-label-section {
  width:100%;
  margin-bottom: 20px;
  float:left;
}

div.field-area-row input {
  width:60%;
  padding:10px;
}
div.clearing {
  clear:both;
}

button.save-button {
  background-color:#008800;
  margin-right:20px;
}
button.cancel-button {
  background-color:#B20000;
}

button.delete-button {
  background-color:#B20000;
}

button.edit-button {
  background-color:#FF7400;
  margin-right:20px;
}

button {
	background-color:#0096DB;
	color:#fff;
	border:0px;
	padding:7px;
	border-radius:3px;
	min-width:150px;
	cursor:pointer;
}

div#react-root label{
	width:100%;
	float:left;
	color:#015391;
	font-weight:bold;
	font-family:"Arial", Helvetica, sans-serif;
}

div.wrapper {
	margin-left:auto;
	margin-right:auto;
	max-width:1200px;
    min-width: 700px;
    width:80%;
}

div.container {
	width:100%;
}

div.container:after {
  content: "";
  display: block;
  height: 100px;
}


div#page-container {
	min-height:300px;
	margin-top:40px;
}

div#header-container {
	background-color:#015391;
	padding-top:20px;
	padding-bottom:20px;
	height:30px;
}

div#header-logo {
	float:left;
	width:20%;
}

p.logo-subscript {
    border-top: 0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
    color: #fff;
}

div#header-nav {
	float:right;
	width:80%;
}

div#header-nav ul li {
	float:left;
	margin-right:25px;
}

div#header-nav ul li a{
	color:#fff;
	font-size:16px;
}

nav#header-nav ul li button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    min-width: unset;
    border-radius: unset;
    color: #FFF;
    font-size: 16px;
}

div#header-nav ul li a:hover,
nav#header-nav ul li button:hover
{
	text-decoration: underline;
}

/* MikeO Styles END*/


h1 {
    font-size: 24px;
    color: #015391;
    font-weight: bold;
    font-family: "Arial", Helvetica, sans-serif;
}

div#react-root input {
    border:1px solid #0088cc;
    height:22px;
    border-radius:0;
    padding:4px;
}

button, thead th {
    background-color:#0096DB;
    color:#fff;
}

button.collapse {
    font-weight: bold;
}

tbody td, button.collapse {
    font-size: 16px;
}

thead th {
    font-size: 12px;
}

button.collapse {
    min-width: 2em;
    width: 2em;
    height: 2em;
    margin-top: 44px;
    margin-left: 18px;
}

button {
    border:0;
    padding:7px;
    border-radius:3px;
    min-width:150px;
    cursor:pointer;
}

div#react-root label{
    width:100%;
    float:left;
    color:#015391;
    font-weight:bold;
    font-family:"Arial", Helvetica, sans-serif;
}

div.new-label-section span.psf-site {
  width:80%;
  padding:5px;
}

div#footer-container {
    background-color:#ebebeb;
    padding-top:20px;
    padding-bottom:20px;

    width:100%;
    position: fixed;
    bottom: 0;
}

div#page-container {
    min-height:300px;
    margin-top:40px;
}

div#header-container {
    background-color:#015391;
    padding-top:20px;
    padding-bottom:20px;
    height:30px;
}



nav#header-nav ul li {
    float:left;
    margin-right:25px;
}

nav#header-nav ul li a{
    color:#fff;
    font-size:16px;
}

nav#header-nav ul li a:hover{
    text-decoration:underline;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #333333;
    clear: left;
    text-align: center;
}
header h1 {
    color: white;
}

nav {
    float: right;
    margin: 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {

}

ul li {
    list-style-type: none;
    padding: 0;
}

.column-left {
    float: left;
    width:20%;
}

.column-right {
    float: left;
    width:80%;
}

.psf-label {
    cursor: default;
    display: inline-block;
    padding-left:30px;
    padding-top:10px;
    padding-bottom:10px;
    margin-right:30px;
    border-radius: 3px;
    border-width: thin;
    border-color: #e6e6e6;
    border-style: solid;
    width:40%;
    margin-bottom:20px;

}

.psf-site {
    cursor: default;
    background-color:#f4f4f4;
    display: inline-block;
    padding: 3px;
    margin: 2px;
    border-radius: 3px;
    border-width: thin;
    border-color: #e6e6e6;
    border-style: solid;
}

p.input-warning {
    color: red;
    font-weight: bold;
    font-family:"Arial", Helvetica, sans-serif;
    font-size:13px;
}

div.footer-left {
    float: left;
}

div.footer-right {
    float: right;
}

img.csv-icon {
    height: 1.4em;
    width: auto;
}

input.login-submit-button {
    background-color:#3BA61F;
    border-radius: 5px;
    border:none !important;
    text-transform: uppercase;
    color: #fff !important;
    cursor: pointer;
    font-size: 20px;
    float:left;
    margin-left:20%;
    height: 53px !important;
    width:100%;
    border:none;
    font-family:"proxima_nova_rgbold", sans-serif;
    max-width:400px;
    margin-top: 40px;
}

div.login-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
    text-align: center;
    padding-top: 64px;
}

div.login-wrapper input[type="text"], input[type="password"] {
    width: 50%;
}

div.graph-text {
    clear: both;
}

span.graph-title {
    float: left;
    font-size: 24px;
}

span.graph-detail {
    float: right;
    text-align: right;
}

span.graph-detail-label {
    font-size: 16px;
}

span.graph-detail-value {
    font-size: 24px;
    font-weight: bold;
}

td.graph-cell {
    line-height: normal;
    padding: 8px;
}

img.pretty-graph {
    width: 520px;
    height: auto;
}

table.graph-block-collapse {
    background-color: #d9e2f3;
    border-radius: 4px;
}

h1.graph-block-title {
    padding-top: 48px;
}

td.alert-cell {
    font-weight: bold;
}

div.react-tags__search-input {
    margin-top: 12px;
}

div.react-tags__selected {
    margin-top: 12px;
}

div.new-tag-section {
    margin: 8px 0 8px 0;
    padding: 12px;
    border-radius: 4px;
    background-color: #f4f4f4;
    align-items: center;
}

div.react-tags__suggestions ul li {
    margin: 8px 0 8px 0;
    background-color: #0096DB;
    color: white;
    padding: 4px;
    border-radius: 3px;
}

button.react-tags__selected-tag {
    margin-right: 8px;
}

div.tag-cloud {
    display: flex;
    flex-direction: row;
    padding-bottom: 16px;
}

div.click-tag {
    padding: 4px 8px 4px 8px;
    margin: 4px 8px 4px 8px;
    background-color: #0096DB;
    border-radius: 3px;
}

div.click-tag a {
    text-decoration: none;
    color: white;
}

span#footer-copyright {
    color: #333;
}

div.collapse {
    display: flex;
    flex-direction: row;
}

div.breadcrumbs {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    min-width: 700px;
}

div.crumb-wrapper {
    background-color: #79aec8;
}

div.report-table-container p {
    font-size: 16px;
}

img.nav-tile-image {
    max-width: 31px;
    max-height: 31px;
}