/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
 line-height: calc(1em + 0.5rem);
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  margin-block: 1em;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
 --primary-color: #832e32;
 --error-color: #dd461d;
 --space: 2rem;
}

.eama_form {
 background:#fafafa;
 box-shadow: 0px 0px 8px #dedddd;
 padding: 1.5rem;
}

.eama_form label,
.eama_form input {
 font-size: 16px;
}

.prose > * + * {
 margin-top: 1em;
}


.notice {
 width: 100%;
 padding: 0.75rem;
 overflow-wrap: break-word;
 border-left: 4px solid grey;
}

.notice-error {
 background: #fdebe7;
 border-left-color: var(--error-color);
}

.notice-warning {
 background: #fdf6e7;
 border-left-color: #dba617;
}

.notice-success {
 background: #e9fde7;
 border-left-color: #428348;
}

.eama_form input:not([type="radio"]):not([type='checkbox']):not([type='file']),
.eama_form select {
 width: 100%;
 max-width: 20rem;
 padding: 0.25rem;
 margin-block: 0.25rem;
}

.paypal-button-disabled {
 opacity: 0.4;
 /* Drastically grays out the button */
 pointer-events: none;
 /* Completely blocks clicks/hovers */
 cursor: not-allowed !important;
 /* Visual cue that it is unclickable */
}

input[type="file"] {
 position: relative;
 border-radius: 3px;
 padding: 0.5rem;
 outline: 1px solid grey;
 width: 100%;
}

input[type="file"]::before {
 position: absolute;
 pointer-events: none;
 top: 1.0em;
 left: 0.75em;
 height: 20px;
 width: 20px;
 content: "";
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23832e32'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}

input[type="file"]::after {
 position: absolute;
 pointer-events: none;
 top: 0.75em;
 left: 2.2rem;
 color: var(--primary-color);
 content: "Upload File";
}

input[type="file"]::file-selector-button {
 width: 14ch;
 font-weight: bold;
 color: transparent;
 padding: 0.5em;
 border: thin solid grey;
 border-radius: 3px;
}

input[type="file"]::file-selector-button:hover {
 background-color: #bbb;
 cursor: pointer;
}

.stack-tight > * + * {
 --space: 1rem;
}

.stack-wide > * + * {
 --space: 4rem;
}
.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

form hr {
 margin-block: 2rem !important;
}

h3 {
 font-size: 18px;
}

p,
label,
textarea,
tr,
td,
th,
li {
 font-size: 16px;
}

.eama_form textarea {
 padding: 0.5rem;
}

table label {
 display: block;
 margin-block: 0.25rem;
}

@media(min-width: 786px) {
 .eama-input-table {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.25rem 1rem;
  align-items: center;
 }
}

.eama-form-submit-btn {
 background: var(--primary-color);
 color: white;
 width: 100%;
 padding: 1rem;
 border: none;
 font-weight: bold;
 font-size: 16px;
 border-radius: 2px;
 margin-top: 2rem;
}


.eama-form-submit-btn:hover {
 cursor: pointer;
}

.button {
 display: inline-block;
 padding: 0.5rem 1rem;
 background: var(--primary-color);
 color: white;
 border: none;
 outline: none;
 font-size: 16px;
 border-radius: 5px;
}

.button:hover {
 cursor: pointer;
 text-decoration: underline;
}

.button:disabled {
  background: grey;
  text-decoration: none;
}


/* Recommender Form */

#eama_recommender_form input:not([type='file']):not([type='checkbox']) {
width: 100%;
max-width: 20rem;
padding: 0.25rem;
}

#eama_recommender_form {
padding: 1rem;
border: 1px solid black;
}

.eama-form-field {
margin-block: 0.5rem;
}

.eama-input-table {
 font-size: 16px; 
}

.eama-input-table--subgrid {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}

.error-shadow {
  outline: 3px solid var(--error-color);
}

.eama-input-table label {
 display: block;
 margin-block: 0.25rem;
}

@media(min-width: 786px) {
.eama-input-table {
display: grid;
grid-template-columns: max-content auto;
gap: 0.25rem 1rem;
align-items: center;
}
}

/* Student Dashboard */
.todo-cards {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
}

.todo-card {
 padding: 2rem 1.5rem;
 border-radius: 5px;
 box-shadow: 0px 4px 4px #ccc;
 outline: 1px solid #ccc;
 width: 100%;

 h3 {
  margin: 0;
 }
}

.button {
 text-decoration: none;
 background-color: var(--primary-color);
 color: white;
 font-weight: bold;
 padding: 0.5rem 1rem;
 border-radius: 5px;
 font-size: 16px;

 width: 100%;
 box-sizing: border-box;
 display: inline-block;
 text-align: center;
}

@media(min-width: 700px) {
 .button {
  width: max-content;
 }

 .todo-card {
  max-width: 300px;
 }
}

.inner-section {
 margin-block: 2rem;
}

a:hover {
 text-decoration: underline;
}


table {
 border: 1px solid #ccc;
 border-collapse: collapse;
 border-radius: 5px;

 th,
 td {
  padding: 0.5rem;
 }
}

.striped tr:nth-child(even) {
 background: #e8e8e8;
}

.striped {
 text-align: left;
}

/* Steps */

.onboarding-step {
 display: grid;
 font-size: 16px;
 color: #aaa;
}

.step-1 {
 grid-template-columns: 1fr 5fr;
}
.step-1::after { content: "15min est."; }

.step-2 {
 display: grid;
 grid-template-columns: 2fr 4fr;
}
.step-2::after { content: "12min est."; }

.step-3 {
 display: grid;
 grid-template-columns: 3fr 3fr;
}
.step-3::after { content: "8min est."; }

.step-4 {
 display: grid;
 grid-template-columns: 4fr 3fr;
}
.step-4::after { content: "4min est."; }

.step-5 {
 display: grid;
 grid-template-columns: 5fr 1fr;
}
.step-5::after { content: "2min est."; }