/**
    Title: global.css
    Author: Jordan Nishimura-Anderson
    Date: 3/19/2023
    Description: Styling for the all html files
*/

/** The body styling. */
body {
  font-family: 'Roboto', "Helvetica Neue", sans-serif;
}

/** The app header styling. */
.app-header {
  text-align: center;
  font-weight: 400;
}

/** The drop down menu styling. */
.drop-down-menu {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/** The card styling. */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

/** The card title styling. */
.card-title {
  text-align: center;
  font-size: 2em;
  color: #4f3674;
  font-weight: 400;
  padding: 5px;
}

/** The card content styling. */
.card-content {
  padding: 2px 16px;
}

/** The card hover styling. */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/** The button styling. */
.btn {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  padding: 15px 32px;
  color: black;
}

/** The button primary action styling. */
.btn-primary {
  background-color: #4f3674;
  color: white;
}

/** The button primary action hover styling. */
.btn-primary:hover {
  background-color: #d6a800;
  color: #4f3674;
}

/** The input field styling. */
.input {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/** The full width styling. */
.full-width {
  width: 100%;
}

/** The form styling. */
.form {
  display: inline-grid;
  grid-template-columns: auto;
}

/** The form field styling. */
.form-field {
  padding: 20px;
}

/** The return home anchor styling. */
.return-home {
  color: #4F3674;
  text-decoration: none;
}

/** The return home anchor hover styling. */
.return-home:hover {
  color: #4F3674;
  background-color: #D6A800;
}

/** The return home anchor visited styling. */
.return-home:visited {
    color: #3C275A;
}

/*
  The below elements adds styling to HTML tables.
  It sets the table header to purple and adds a grayish
  border to the cells. It also adds a yellow hover
  for table rows.
*/
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 30px;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4F3674;
  color: white;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:hover {
  background-color: #D6A800;
  color: #4f3674;
  cursor: pointer;
}