:root {
    /* From the "Maryland Brand: Colors" style guide at https://brand.umd.edu/colors */
    --maryland-red: #e21833;
    --maryland-gold: #ffd200;
    --dark-gray: #454545;
    --medium-gray: #7f7f7f;
    --light-gray: #e6e6e6;
    --bronze-testudo: #ad7231;

    /* Body font definition from https://brand.umd.edu/typography */
    --body-font-family: "Source Sans 3", sans-serif;

    /* Margins and sizes */
    --header-horizontal-spacing: 5em;
    --main-horizontal-spacing: 5em;
    --footer-horizontal-spacing: 5em;

    /* Colors (borrowed from Bootstrap) */
    --success: #198754;
    --success-subtle: #d1e7dd;
    --danger: #dc3545;
    --danger-subtle: #f8d7da;
    --warning: #ffc107;
    --warning-subtle: #fff3cd;
    --info: #0dcaf0;
    --info-subtle: #cff4fc;

    /* Shaded color variants */
    --shading-percentage: 25%;
    --success-shaded: color-mix(in srgb, var(--success), black var(--shading-percentage));
    --info-shaded: color-mix(in srgb, var(--info), black var(--shading-percentage));
    --danger-shaded: color-mix(in srgb, var(--danger), black var(--shading-percentage));
    --warning-shaded: color-mix(in srgb, var(--warning), black var(--shading-percentage));
    --light-gray-shaded: color-mix(in srgb, var(--light-gray), black var(--shading-percentage));
    --medium-gray-shaded: color-mix(in srgb, var(--medium-gray), black var(--shading-percentage));

    /* tables */
    --table-cell-padding: .5em;
    --table-border-color: var(--medium-gray);
    --table-background-color: #fcfcfc;
    --table-background-color-shaded: color-mix(in srgb, var(--table-background-color), 25% black);
    /* used for striping or highlighting */
    --table-alternate-background-color: color-mix(in srgb, var(--table-background-color), 10% black);

    /* for rounded UI elements */
    --rounded-border-radius: 5px;

    /* for form and form-like controls */
    --widget-padding: .25em .5em;
    --widget-font-size: 1em;
    --widget-border-width: 1px;
    --widget-border-style: solid;
}

/* Body layout is:

    [  header  ]
    +----------+
    |          |
    |   main   |
    |          |
    +----------+
    [  footer  ]

The header and footer elements are sized to fit their content,
while the main element expands to fill the available space.
This way, if the content in main is shorter than the current
viewport height, the footer is still pushed to the bottom of
viewport.
*/
body {
    /* Body layout (adapted from https://matthewjamestaylor.com/bottom-footer#grid) */
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    /* fallback height */
    min-height: 100vh;
    /* new small viewport height for modern browsers */
    min-height: 100svh;

    /* Body font definition from https://brand.umd.edu/typography */
    font-family: var(--body-font-family);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Add some margin on the bottom of these elements */
li,
form,
table {
  margin: 0 0 0.5em 0;
}

/* Banner layout is:

    [logo][app name][            navigation]

The .banner element should only have three direct children.
The first two are sized to fit their content, and the third
expands to fill the remaining space.
*/
.banner {
    background-color: var(--maryland-red);
    color: white;
    padding: .75em var(--header-horizontal-spacing);
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    justify-items: end;
}
.banner>* {
    vertical-align: middle;
}
.banner img {
    max-height: 50px;
}
.application-name {
    display: inline-block;
    padding: 0 2em;
    font-size: 1.5em;
}
.application-name:link,
.application-name:visited {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

/* Navigation links in the header:

    header
      .logo
      .application-name
      nav
        ul
          li
*/
nav {
    display: inline-block;
    text-align: right;
}
nav a:link,
nav a:visited {
    color: white;
    text-decoration: none;
}
nav>ul {
    padding: 0;
}
nav>ul>li {
    display: inline;
    padding: 0 1em;
}

/* Main content area */
main {
    padding: 1em var(--main-horizontal-spacing);
}

/* Footer content area */
footer {
    padding: 1em var(--footer-horizontal-spacing);
    background-color: var(--light-gray);
    border-top: 1px solid var(--medium-gray);
    display: inline-block;
    text-align: right;
    color: var(--dark-gray);
}

/* Tables */
table {
    border-collapse: collapse;
}
th, td {
    padding: var(--table-cell-padding);
}

/* Table display with full borders on each cell, zebra striping,
   and dark background header cells
*/
table.grid th,
table.grid td
{
    border: 1px solid var(--table-border-color);
}
table.grid th {
    background-color: var(--table-background-color-shaded);
    color: black;
}
table.grid td {
    background-color: var(--table-background-color);
    color: black;
}
table.grid tbody tr:nth-child(2n) td {
    background-color: var(--table-alternate-background-color);
    color: black;
}

/* Lightweight table display that simply uses horizontal lines between each row */
table.lined td,
table.lined th
{
    text-align: left;
}
table.lined tr {
    border-top: 1px solid var(--table-border-color);
    border-bottom: 1px solid var(--table-border-color);
}
table.lined thead tr {
    border-top: none;
}
table.lined tbody tr:hover {
    background-color: var(--table-alternate-background-color);
}


/* Environment Banner

The environment banner, if present, appears above the regular
banner in the header:

    body
      header
        .environment-banner
        .banner

Full header layout, with environment banner:

    [ environment banner         ]
    [logo][app name][         nav]
*/
.environment-banner {
    padding: .125em 2em;
}
.development.environment-banner {
    background-color: green;
    color: white;
}
.sandbox.environment-banner {
    background-color: tan;
    color: black;
}
.test.environment-banner {
    background-color: #fff100;
    color: black;
}
.qa.environment-banner {
    background-color: blue;
    color: white;
}


/* Messages */
.messages {
    padding: 0;
}
.message {
    border: 2px solid;
    padding: .5rem;
    list-style-type: none;
}
.info.message {
    border-color: var(--info);
    background: var(--info-subtle);
}
.success.message {
    border-color: var(--success);
    background: var(--success-subtle);
}
.success.message:before {
    content: '✔️ ';
}
.warning.message {
    border-color: var(--warning);
    background: var(--warning-subtle);
}
.error.message {
    border-color: var(--danger);
    background: var(--danger-subtle);
}
.error.message:before {
    content: '❗ ';
}

/* Details/summary elements */
details>summary {
    list-style-position: outside;
    cursor: pointer;
    margin: 1em 0;
}
summary>* {
    display: inline;
    margin: 0;
}

/* Forms

The `button` class should be applied to forms whose only visible control is a
single button. This class makes the form render as an inline-block element so
it can be placed alongside links or other inline content.

These forms will typically have one or more hidden fields. The single button
will usually have an action class (see "Form controls" below)

    form.button
        (input@type=hidden)*
        button.{action}

*/
form.button {
    display: inline-block;
    margin: 0;
}

/* Form controls

Includes standardized button class names of "create", "edit", "update", and "delete".

*/
button,
a.button,
select,
input,
textarea {
    padding: var(--widget-padding);
    font-family: var(--body-font-family);
    font-size: var(--widget-font-size);
    border-width: var(--widget-border-width);
    border-style: var(--widget-border-style);
    border-radius: var(--rounded-border-radius);
}

input,
select,
textarea {
    border-color: var(--dark-gray);
}

/* Buttons */
button {
    background-color: var(--medium-gray);
    border-color: var(--medium-gray);
    color: white;
    cursor: pointer;
}
/* Additional classes to enforce button-like styling for anchor tags */
a.button {
    display: inline-block;
    text-decoration: none; /* no underline */
    width: max-content;
    background-color: white;
    border-color: var(--dark-gray);
    color: var(--dark-gray);
}
button:hover,
a.button:hover {
    background-color: var(--medium-gray-shaded);
    border-color: var(--medium-gray-shaded);
    color: white;
}

/* Create button */
button.create,
a.button.create
{
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}
button.create:hover,
a.button.create:hover
{
    background-color: var(--success-shaded);
    border-color: var(--success-shaded);
}

/* Update button */
button.update,
a.button.update {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}
button.update:hover,
a.button.update:hover
{
    background-color: var(--success-shaded);
    border-color: var(--success-shaded);
}

/* Edit button */
button.edit,
a.button.edit
{
    background-color: var(--info);
    border-color: var(--info);
    color: black;
}
button.edit:hover,
a.button.edit:hover
{
    background-color: var(--info-shaded);
    border-color: var(--info-shaded);
    color: white;
}

/* Delete button */
button.delete,
a.button.delete
{
    background-color: var(--danger);
    border-color: var(--danger);
    color: white;
}
button.delete:hover,
a.button.delete:hover
{
    background-color: var(--danger-shaded);
    border-color: var(--danger-shaded);
}

/* Login button */
button.login,
a.button.login {
  background-color: var(--success);
  border-color: var(--success);
  color: white;
}
button.login:hover,
a.button.login:hover {
  background-color: var(--success-shaded);
  border-color: var(--success-shaded);
}

/* Publish button */
button.publish,
a.button.publish {
  background-color: var(--success);
  border-color: var(--success);
  color: white;
}
button.publish:hover,
a.button.publish:hover {
  background-color: var(--success-shaded);
  border-color: var(--success-shaded);
}


/* Form errors */
.errorlist {
    padding: 0;
    margin-top: .25em;
    color: var(--danger);
}
.errorlist li {
    padding: 0;
    list-style-type: none;
}
.errorlist li:before {
    content: '❗ ';
}

/* SAML Login Required notice */
.notice {
    margin: 0 auto;
    width: fit-content;
    border: 1px solid var(--medium-gray);
    border-radius: 5px;
    text-align: center;
}
.notice > h1 {
    font-size: 1.25em;
    margin: 0;
    padding: 0.25em;
    border-bottom: 1px solid var(--light-gray);
}
.notice > p {
    margin: 1em;
}