:root {
  --main-color: #00698A;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #F8F8F8;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:0;
  text-align: center;
}
.content {
  width:100%; padding:20px 15px; box-sizing:border-box;
}
h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 200; font-size:30px; line-height:1.3em;
  margin-bottom: 0.5rem;
  color: var(--main-color);
}
h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600; font-size:24px; line-height:1.3em;
  padding:8px; margin:0;
  color: black;
  background:#E9E9E9;
}
h2 em {
  font-weight:200; font-style:normal;
}
.logout a {
  color:black;
}
p {
  font-size: 1rem; line-height:1.4em;
  margin-top:0; margin-bottom: 1.3rem;
}
.btn {
  appearance:none;
  background-color: var(--main-color);
  color: white;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.5rem 1.2rem;
  width:100%; box-sizing:border-box;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
  display: inline-block;
  cursor:pointer;
}
.btn:hover {
  background-color: #00556f;
}
form#login {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:500px; margin:15px auto 30px;
}
form#login > div {
  width:calc(50% - 10px);
}
form#login .field {
  display:block; width:100%; box-sizing:border-box;
  padding:8px;
}
footer {
  margin-top: 4rem;
  font-size: 0.9rem;
  color: #777;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
.logo-wrapper {
  background:white; width:100%; min-height:30vh;
}
.logo {
  max-width: 380px; margin:20px 0;
}
.error {
  color:#A00000; font-weight:900;
}
table {
  width:100%; background:white; border-collapse:collapse;
}
table thead {
  background:black; color:white;
}
table tbody td {
  border:1px solid #E0E0E0; font-size:14px;
  padding:2px 5px;
}
table tbody tr:hover {
  background:#F0F0F0;
}
.folder {
  margin:30px 0;
}
.folder:not(.expanded) table tbody tr:nth-child(n+11) {
  display: none;
}
.folder .expand-wrapper,
.folder .reduce-wrapper {
  display:flex; justify-content:flex-end; margin-top:15px;
}
.folder .btn {
  width:auto;
}
.folder.expanded .expand-wrapper {
  display:none;
}
.folder:not(.expanded) .reduce-wrapper {
  display:none;
}
.get-link,
a.download {
  display:inline-block; margin:0 5px;
  text-decoration:underline; cursor:pointer; font-size:.9em; color: var(--main-color);
}
.get-link:hover,
a.download:hover {
  color:black;
}

@media (max-width: 600px) {
  h1 {
    font-size:28px; 
  }
  p {
    font-size: 1rem;
    padding: 0 1rem;
  }
  p br {
    display:none;
  }
  .btn {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
  .logo {
    max-width: 90%;
  }
  form#login {
    flex-direction:column;
  }
  form#login > div {
    width:100%; margin-top:15px;
  }
}