@font-face {
  font-family: "GothamBold";
  src: url("../fonts/Gotham-Bold.eot");
  src: url("../fonts/Gotham-Bold.eot#iefix") format("embedded-opentype"),url("../fonts/Gotham-Bold.svg#Gotham-Bold") format("svg"),url("../fonts/Gotham-Bold.woff") format("woff"),url("../fonts/Gotham-Bold.ttf") format("truetype");
  font-style:normal
}
@font-face {
  font-family: "GothamBook";
  src: url("../fonts/Gotham-Book.eot");
  src: url("../fonts/Gotham-Book.eot#iefix") format("embedded-opentype"),url("../fonts/Gotham-Book.svg#Gotham-Book") format("svg"),url("../fonts/Gotham-Book.woff") format("woff"),url("../fonts/Gotham-Book.ttf") format("truetype");
  font-style:normal
}

.fileSelector {
  border: 2px dashed #c2cdda;
  padding: 20px;
}

.form-group {
  margin: auto;
}

.stepButtons {
  margin-top: 20px;
}

input[type="file"] {
  display: none;
}

.btnCentred {
  margin: auto;
  display: block;
  width: 200px;
}

.errorText {
  color: red;
}

.draggingOver {
  background-color: #c2cdda;
}

#waitLoader {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#trackerProgress {
  width: 100%;
  background-color: #ddd;
}

#trackerBar {
  width: 1%;
  height: 30px;
  background-color: darkgray;
  text-align: center;
  line-height: 30px;
  color: white;
}

#csvDataDiv, #csvViewDiv {
  height: 540px;
  border: 1px solid lightgray;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0px;
  margin-top: 0px;
  align: center;
}

#csvData, #csvView {
  width: 100%;
  background-color: white;
  border-spacing: 1px;
  border: 1px solid black;
  border-collapse: collapse;
}

#csvData th, #csvView th {
  color: white;
  background-color: black;
  border: 1px solid white;
  text-align: left;
  /*height: 20px;*/
}

#csvData td, #csvView td {
  vertical-align: middle;
  border: 1px solid gray;
  padding: 2px;
}
#csvData td.rowNumber, #csvView td.rowNumber {
  text-align: right;
}
table#csvData tr:nth-child(even) {
  background-color: #eee;
}

table#csvView tr:nth-child(even) {
  background-color: #eee;
}

table#csvData tr:nth-child(odd) {
  background-color: #fff;
}

table#csvView tr:nth-child(odd) {
  background-color: #fff;
}

table#csvData tr:hover {
  background-color: #C0DFFC;
}

table#csvView tr:hover {
  background-color: #C0DFFC;
}

table#csvData tbody tr.selected {
  background: none repeat scroll 0 0 #C0DFFC;
  color: black;
}

table#csvView tbody tr.selected {
  background: none repeat scroll 0 0 #C0DFFC;
  color: black;
}

#csvDataCaptionDiv, #csvViewCaptionDiv {
  color: gray;
  font-size: 16px;
  font-weight: bold;
}
#radCsvDataDiv, #radCsvViewDiv {
  display: inline-block;
  color: gray;
}
.radTitleLabel {
  float: left;
  color: black;
}

.error {
  color: red;
  background: none repeat scroll 0 0 yellow;
}

.sortable {
  cursor: pointer;
}

.radLabel {
  float: left;
  clear: none;
  display: block;
  margin-left: 5px;
  /* padding: 3px 3em 0 0; */
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 5px 0 0 5px;
}

#note {
  color: #8bc435;
  font-size: 12px;
  font-family: "GothamBook","-apple-system,BlinkMacSystemFont","Segoe UI","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}

#stopWatch {
  width: 250px;
  height: auto;
  text-align: center;
  display: none;
  padding: 0px;
  margin: 0 auto;
}

#timer, #timeTaken {
  width: auto;
  height: auto;
  padding: 1px;
  display: none;
  border: 1px solid #eee;
  text-align: center;
  box-shadow: 0 0 5px #ccc;
  background: #fbfbf0;
  color: darkblue;
  border-bottom: 1px solid darkgrey;
}

#timeTaken {
  display: none;
  width: 230px;
}

#csvData th.valBackground, #csvView th.valBackground {
  border: 1px solid darkgray;
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  color: black;
  background: #FFFF99;
  background-clip: padding-box;
}

#csvData th.oriBackground, #csvView th.oriBackground {
  border: 1px solid darkgray;
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  color: black;
  background: #C0DFFC;
  background-clip: padding-box;
}

#csvData th.addBackground, #csvView th.addBackground {
  border: 1px solid darkgray;
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  background: #F9B571;
  color: black;
  background-clip: padding-box;
}

#csvData thead tr:nth-child(2) th{
  position: sticky;
  top: 0;
}
#csvView thead tr:nth-child(2) th{
  position: sticky;
  top: 0;
}
.progress {
  align: center;
  margin: 10px auto;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 90px;
  background: #ebecf0;
}

.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid #d5d5da;
  vertical-align: top;
}

.progress .bar {
  position: relative;
  width: 120px;
  /* line width */
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  top: 16px;
  vertical-align: top
}

.progress .circle .label {
  display: inline-block;
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: 42px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 15px;
}

.progress .circle .title {
  color: #b5b5ba;
  line-height: 18px;
  margin-left: -30px;
  display: block;
  width: 100px;
  margin-top: 5px;
  font-size: 17px;
}

.progress .bar.done {
  background: #8bc435;
}

.progress .circle.done {
  background: #eee;
}

.progress .bar.active {
  background: linear-gradient(to right, #8bc435 45%, #FFF 55%);
}

.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.done .title {
  color: #444;
}

.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.active .title {
  color: #0c95be;
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 3px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}
#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
.wrapper li a {
  display: inline-block;
  color: white;
  text-align: right;
  padding: 0px 8px;
  text-decoration: none;
  /* font-family:"Arial","sans-serif"; */
  font-family: "GothamBook","-apple-system,BlinkMacSystemFont","Segoe UI","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
  font-weight: normal;
  font-size: 14px;
}
.wrapper {
  float:right;
  left:-50%;
  text-align:right;
  border: 0px solid yellow;

}
.wrapper ul, ul {
  list-style:none;
  left:50%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #002664;
}
.wrapper li{
  float:left;
	color: darkgray;
	text-align: right;
	padding: 0px 8px;
	text-decoration: none;
}
.hdrText {
	color:white;
	font-weight: bold;
	font-size:32px;
	margin:0;
	padding:0;
  font-family: "GothamBook","-apple-system,BlinkMacSystemFont","Segoe UI","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}
.hdrSubText {
	font-weight: normal;
	font-size: 20px;
  padding-top: 15px;
	color: white;
	display:table-cell;
	align-items: center;
  font-family: "GothamBook","-apple-system,BlinkMacSystemFont","Segoe UI","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}
.box {
   display: flex;
   align-items:center;
	 margin-left: 12px;
}
#username, #organisation {
  color: darkgray;
}