body {
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: 300;
    background: #f9f9f9;
}

b, b * { font-weight: 700; }

a { color: #3a859a; font-weight: 500; }

form#xlsfile  { 
    display: block;
    background: #eee;
    border: 1px solid #bbb;
    border-radius: 5px;
    padding: 5px 15px;
}
form#xlsfile > #uploadWrap,
form#xlsfile > #resultWrap { display: inline-block; font-weight: 700; font-size: 17px; }
div#resultWrap > * { display: inline-block; }

#xlsfile input[type="submit"],
#xlsfile input[type="reset"],
#xlsfile input[type="file"]::file-selector-button,
.fakeButton {
  display: inline-block;
  margin: 10px;
  padding: 10px;
  background-color: #415259;
  border: 0px;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
}
#fakeResetButton { margin-right: 75px; }

div#fakeFileName { 
  font: 13px sans-serif;
    display: inline-block;
    width: 135px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: -3px;
}

#xlsfile input[type="file"] { width: 125px; margin-right: 10px; }
/* CSS rules here will only be applied in Firefox */
@-moz-document url-prefix() {
  #xlsfile input[type="file"] { width: 105px; }
}
#xlsfile.file-downloaded input[type="file"] { width: 0px; }

#xlsfile input[type="reset"] { margin-right: 75px; }
#xlsfile input[type="reset"],
#xlsfile input[type="file"].file-uploaded::file-selector-button {
    background: transparent;
    border: 2px solid #415259;
    color: #415259;
}

#xlsfile input[type="submit"]:hover,
#xlsfile input[type="reset"]:hover,
#xlsfile input[type="file"]::file-selector-button:hover { background-color: #3a859a; color: #fff; transition: all 0.3s ease; }

#xlsfile #messageWrap { display: block; }


#xlsfile .fakeButton,
#xlsfile input[type="submit"].file-downloaded { display: none; }

#xlsfile.file-downloaded input[type="submit"],
#xlsfile.file-downloaded input[type="reset"],
#xlsfile.file-downloaded input[type="file"]::file-selector-button { display: none; }

#xlsfile.file-downloaded .fakeButton { display: inline-block; }

#xlsfile input[type="submit"]#spreadsheet.file-downloaded ~ #fakeSpreadsheetButton,
#xlsfile input[type="submit"]#reports.file-downloaded ~ #fakeReportsButton { display: inline-block; }

.fakeButton {
    cursor: not-allowed !important;
    background: #ccc !important;
    border: 2px solid #415259;
    color: #415259 !important;
    margin: 10px;
    padding: 10px;
    display: inline-block;
}

#spreadsheetMessageWrap,
#reportMessageWrap {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.check-circle,
.spinner { width: 20px; margin-right: 7px; display: inline-block; }

.check-circle svg path { fill: #47c047; }

.spinner { animation: spin 2s linear infinite; }
@keyframes spin {
  0% {
    transform: rotate(0deg);           /* Start at 0 degrees */
  }
  100% {
    transform: rotate(360deg);         /* End at 360 degrees, completing one rotation */
  }
}