/* built-ins */
body {
  background-color: white;
  color: #82D173;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0; }

table {
  text-align: left;
  border-collapse: collapse; }

th,
td {
  padding: 10px 10px 10px 10px; }

th {
  color: #82D173; }

tr {
  border-bottom: 2px solid #82D173; }

input {
  font-weight: bold;
  border-radius: 0.5rem;
  padding: 0.25rem; }

input[type='text'] {
  border: #82D173 solid 1px;
  color: #82D173;
  padding: 15px;
  font-family: "Lexend", sans-serif;
  font-size: 16px; }

input[type='submit'] {
  color: #82D173;
  border: #82D173 solid 2px;
  padding: 0.5rem 2rem 0.5rem 2rem;
  background-color: white;
  font-family: "Lexend", sans-serif; }

input[type='submit']:hover {
  background-color: #82D173;
  color: #383843; }

/* Positioning & Structures */
.center {
  text-align: center;
  flex: 0 1 auto;
  align-items: center; }

.m-1 {
  margin: 1rem; }

.m-1 > * {
  margin: 1rem; }

.w-100 {
  width: 100%; }

.w-75 {
  width: 75%; }

.w-50 {
  width: 50%; }

/* Forms */
.form-row {
  margin: 1rem; }

.sign-in-form {
  text-align: left;
  margin: auto;
  padding: 1rem; }

/* User Feedback */
.notice {
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #E4F2CF;
  color: #82D173;
  font-weight: bold;
  margin: 0.25rem; }

.warning {
  color: #FF6542;
  background-color: #FFDCD6; }

.success {
  color: #82D173;
  background-color: #E4F2CF; }

/* Elements */
.btn {
  text-decoration: none;
  border: #82D173 solid 2px;
  border-radius: 0.5rem;
  padding: 0.5rem 2rem 0.5rem 2rem;
  color: #82D173; }

.btn:hover {
  background-color: #E4F2CF; }

.bottom {
  bottom: 0;
  padding-bottom: 10px;
  position: fixed;
  font-size: 18px; }

.bottom-right {
  bottom: 0;
  right: 0;
  padding-bottom: 8px;
  padding-right: 12px;
  padding-left: 12px;
  padding-top: 8px;
  position: fixed;
  font-size: 18px;
  background-color: #FFFFFF;
  border-radius: 5px; }

/* Text and Fonts */
.bold {
  font-weight: bold; }

/* ad-hoc */
.endoftheroad {
  width: 80%;
  margin: 5rem;
  padding: 5rem;
  border: 2px solid #82D173;
  border-radius: 1rem; }

/* Modal Styles */
.modal {
  position: fixed;
  text-align: center;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: none; }

.modal-content {
  font-weight: bold;
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width: 60%;
  border-radius: 1rem;
  border: 5px solid #82D173; }
  .modal-content h3 {
    font-size: 40px; }
  .modal-content p {
    font-size: 20px; }