body {
  width: 100%;
  height: 100vh;
  background: #f7f4f3;
  color: #252627;
  font-family: Montserrat, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
}

a,
u {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.logo {
  margin-top: 50px;
  text-align: center;
}

.header {
  padding: 2em;
}

.header img {
  height: 120px;
}

.content {
  width: 640px;
}

.content,
.header {
  /* padding-left: 2em;
  padding-right: 2em */
}

.header h1 {
  font-size: 320%
}

.header h2 {
  font-size: 128%
}

.content p {
  font-size: 1.125em
}

.wrapper {
  width: 100%;
}

.progress-bar {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 3px;
}

.progress-bar-fill {
  display: block;
  height: 22px;
  background-color: #659cef;
  border-radius: 3px;
  transition: width 500ms ease-in-out;
}

.card {
  box-shadow: 5px 5px 20px 0px #0000001f;
  background-color: white;
  padding: 40px;
  border-radius: 10px;
}

.download .icon {
  max-width: 120px;
  margin: auto;
  display: block;
  text-align: center;
}

.download .icon img {
  width: 100%;
  margin-bottom: 20px;
}

.error {
  text-align: center;
}

.upload-form {
  text-align: center;
}

.upload-form .errors p {
  color: red;
  font-weight: bold;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: absolute;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(62, 64, 149, 0.2);
  border-right: 1.1em solid rgba(62, 64, 149, 0.2);
  border-bottom: 1.1em solid rgba(62, 64, 149, 0.2);
  border-left: 1.1em solid #3e4095;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader.animate {
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.footer {
  display: flex;
  flex-grow: 1;
}

.footer a {
  margin-top: auto;
}

.footer img {
  width: 16px;
  opacity: 0.5;
  margin: 20px 0px;
}

.footer-mobile {
  display: none;
  bottom: 0px;
  left: 0px;
  right: 0px;
  justify-content: center;
  align-items: center;
}

.footer-mobile img {
  width: 16px;
  opacity: 0.5;
  margin-bottom: 20px;
}


.field:not(:last-child) {
  margin-bottom: 40px;
}

.field label {
  font-weight: bold;
  margin-bottom: 2px;
  margin-top: 20px;
}

.field input {
  margin: auto !important;
}

.field input[type=file] {
  overflow: hidden;
}

.field input[type=date] {
  width: 180px;
}

.button-success,
.button-error,
.button-warning,
.button-secondary {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
  background: rgb(28, 184, 65);
  /* this is a green */
}

.button-error {
  background: rgb(202, 60, 60);
  /* this is a maroon */
}

.button-warning {
  background: rgb(223, 117, 20);
  /* this is an orange */
}

.button-secondary {
  background: rgb(66, 184, 221);
  /* this is a light blue */
}

dl.share-info dt {
  margin-top: 10px;
  font-weight: bold;
}

dl.share-info dd {
  overflow: hidden;
}

.link-output {
  margin-bottom: 20px;
}

.link-output h4 {
  margin: 0 0 4px 0 !important;
}

.text-centered {
  text-align: center;
}

/*
The loaders use CSS custom properties (variables) to control the attributes of the loaders
*/
:root{
	--loader-width: 20px;
	--loader-height: 20px;
	--loader-color-primary: white;
	--loader-color-secondary: rgba(62, 64, 149, 0.2);
	--line-width: 3px;
	--animation-duration: 2s;
	--loader-initial-scale: 0.1;
}
.small-loader,.small-loader:before,.small-loader:after{
	box-sizing: border-box;
	flex-grow: 0;
	flex-shrink: 0;
}
/*
In order to get optimal results, please only change the 
variables above and don't change anything in the actual loader code
*/

@keyframes circle-loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.small-loader.simple-circle {
  transform-origin: center center;
  border: var(--line-width, 4px) solid var(--loader-color-secondary, #fff);
  border-right-color: var(--loader-color-primary, #00f);
  width: var(--loader-width, 100px);
  height: var(--loader-height, 100px);
  border-radius: 50%;
  animation: circle-loader var(--animation-duration, 1s) infinite ease-out;
  margin: auto;
}

@media (max-width: 768px)
{
  .header {
    width: 80%;
    text-align: center;
  }

  .header img { 
    width: 80%;
  }

  .field input[type=file] {
    width: 100%;
  }

  .content {
    width: 80%;
  }
}

.login h4.message {
  text-align: center;
  color: red;
}

.link-status {
  text-align: center;
  margin-bottom: 20px;
}

.link-status p {
  font-weight: bold;
  margin: 0;
}

.link-status small {
  margin-top: 6px;
}

.link-status p.valid {
  color: green;
}

.link-status p.invalid {
  color: red;
}

.admin-controller-form {
  margin-top: 40px;
}