body {
  text-align: center;
  font-family: sans-serif;
  width: 60em;
  margin: 2em auto;
  padding: 2em;
}

h1 a {
  text-decoration: none;
  color: black;
  border-bottom: #ccc 1px dotted;
}

#upload {
  width: 33em;
  margin: 5ex auto;
}

#upload table {
  width: 100%;
}

#upload .config {
  font-size: smaller;
}

#upload .info {
  text-align: left;
  font-size: smaller;
  border-bottom: #ccc 1px dashed;
}

#upload .field {
  text-align: right;
  vertical-align: bottom;
}

#warning {
  margin-top: 2em;
  text-align: justify;
}

#copyright {
  font-size: smaller;
}

.message {
  width: 33em;
  margin: 3ex auto;
}

.error {
  border: red 1px solid;
  background-color: #FBB;
  padding-bottom: 1ex;
  padding-top: 1ex;
}

.info {
  border: green 1px solid;
  background-color: #BFB;
  padding-bottom: 1ex;
  padding-top: 1ex;
}

.error p:before {
  content: url('/media/images/error.png');
  padding-right: 1ex;
}

.info p:before {
  content: url('/media/images/ok.png');
  padding-right: 1ex;
}

td.label {
  text-align: right;
  font-size: smaller;
}

td.content {
  text-align: left;
  font-size: smaller;
  padding-left: 5px;
}

.bar {
  height: 7px;
  background: #0099FF;
}

.percentage {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#file_size {
  font-size: smaller;
  margin-left: 0.5em;
}

#jyraphe {
  background: url('/media/images/jyraphe.png') left top no-repeat;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 300px;
  width: 300px;
  clear:both;
}


#jyraphe_landing h2 {
  margin-bottom: 2em;
}

#jyraphe_landing .message {
  width: auto;
  max-width: 40em;
  margin: 2em auto;
  padding: 20px;
  text-align: center;
}

#jyraphe_landing .message h3 {
  margin-top: 0;
}

#jyraphe_landing .message p {
  margin: 1em 0;
}

/* Fix landing page alignment */
#jyraphe_landing {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#jyraphe_landing > div {
  width: 45em;
  max-width: 90%;
}