.FileField {
  display: block;
}

.FileField > input[type="file"].Disabled {
    display: none;
}

.FileField > select {
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 0.25em;
  margin: 0.25em;
  height: 1.5em;
  width: auto;
}

.FileField > input,
.FileField > span.FileName {
  width: auto;
  height: auto;
  padding-left: 6px;
}

.FileField > span.FileName.Empty {
  padding-left: 8px;
  padding-right: 8px;
  border-right: 1px solid #CBCBCB;
}

.ProgressArea table.data {
  width: 100%;
  margin-bottom: 0;
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
}

.ProgressArea table > tr td,
.ProgressArea table > tr th {
  padding-left: 0.5em;
  padding-right: 0.5em;
  height: 2em;
}

.ProgressArea table > tr td:last-child {
  width: 10%;
}

.UploadRow {
  border: 1px solid #DDDDDD;
}

.UploadRow .FileName {
  width: 200px;
}

.UploadRow td {
  white-space: nowrap;
  overflow: hidden;
}

.UploadArea {
  position: relative;
  transition: background 0ms 10ms;
}

.UploadArea ul {
  margin: 0;
}

.DraggingInside {
  outline: 2px dashed #0060FF;
}

.DraggingOutside {
  outline: 2px dashed #E0E0E0;
}

.UploadImage {
  display: none;
}

.DraggingInside .UploadImage,
.DraggingOutside .UploadImage {
  display: block;
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 5;
  background-image: url("UserInterface.Icon.Cloud.Blue.svg");
  background-size: 100px 100px;
  background-position: top center;
  background-repeat: no-repeat;
}

.ProgressBar {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.ProgressBar > .Indicator {
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  height: 1.5em;
  width: 0%;
  color: white;
  text-indent: 0.5em;
  background-color: rgba(0, 96, 255, 0.5);
  border-radius: 1em;
  transition: ease 0.1s;
}

.Finished > td > .ProgressBar > .Indicator {
  background-color: rgba(96, 200, 96, 0.5);
}

.Cancelled > td > .ProgressBar > .Indicator {
  background-color: #D0D0D0;
}

.File.Field.edit {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: min-content auto min-content;
  -ms-grid-rows: 1.75em; 0.25em;
  grid-template-columns: min-content auto min-content;
  grid-template-rows: 1.75em; 0.25em;
  transition: ease 0.5s;
}

.File.Field.edit > .Icon {
  height: 2em;
  width: 2em;
  background-size: 1.5em;
  background-repeat: no-repeat;
  background-image: url("UserInterface.Icon.Cloud.Gray.svg");
  background-position: center center;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-area: 1 / 1 / 2 / 2;
  cursor: pointer;
  transition: ease 0.5s;
}

.File.Field.edit > .Clear {
  display: none;
  height: 2em;
  width: 2em;
  background-size: 0.5em;
  background-repeat: no-repeat;
  background-image: url("UserInterface.Icon.Cross.svg");
  background-position: center center;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-area: 1 / 3 / 2 / 4;
  cursor: pointer;
}

.File.Field.edit.Selected {
  border-bottom: 1px solid #60C060;
}

.File.Field.edit.Selected > .Clear {
  display: block;
}

.File.Field.edit > .FileName {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-area: 1 / 2 / 2 / 3;
  padding-left: 0.5em;
  font-size: 60%;
  color: #A0A0A0;
}

.File.Field.edit.Uploading > .FileName,
.File.Field.edit.Selected > .FileName {
  cursor: pointer;
  font-size: 100%;
}

.File.Field.edit > .ProgressBar {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-area: 2 / 1 / 3 / 4;
  width: 0;
  background-color: #0060FF;
}

.File.Field.edit.Uploading > .ProgressBar {
  transition: ease 0.1s;
}

.File.Field.edit.Uploading > .Icon {
  background-image: url("UserInterface.Icon.Cloud.Blue.svg");
}

.File.Field.edit.DraggingOutside > .Icon {
  background-image: url("UserInterface.Icon.Cloud.Blue.svg");
}

.File.Field.edit.DraggingInside > .Icon {
  background-image: url("UserInterface.Icon.Cloud.Blue.svg");
}

.File.Field.edit.DraggingInside {
  border-bottom: 1px dashed #0060FF;
}

.File.Field.edit.Selected > .Icon {
  background-image: url("UserInterface.Icon.Cloud.Green.svg");
}

.File.Field.edit.DraggingOutside {
  border-bottom: 1px dashed #E0E0E0;
}

.File.Field.display > .FileName:hover {
  text-decoration: underline;
  cursor: pointer;
}

.File.Field > .Preview {
  position: fixed;
  z-index: 6;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 5;
  background-color: rgba(0,0,0,0);
  transition: background-color 0.5s ease, opacity 0.5s ease, visibility 0s ease 0.5s, width 0s ease 0.5s, height 0s ease 0.5s;
  visibility: hidden;
  width: 0;
  height: 0;
}

.File.Field > .Preview.Expanded {
  display: table;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  transition: background-color 0.5s ease, opacity 0.5s ease;
  visibility: visible;
}

.File.Field > .Preview > .Contents {
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}