/* WARNING TO AL DEVELOPERS: Only use CSS _classes_ in our CSS unless you know for a fact that an ID is static. Most IDs are generated dynamically, so using them in the CSS will only work with our test files. */

/*---------------------------------------------------------*/
/* Isolated email send button
/*---------------------------------------------------------*/
/* Feedback from UI designers has been that email input field and
   send button should be on the same line. */

.al_send_section_alone {
  margin-bottom: 2rem;
}

.al_send_section_alone .al_email_address,
.al_send_section_alone .al_email_address label,
.al_send_section_alone .al_email_address input {
  display: inline;
  width: unset;
  margin: unset;
}

.al_send_section_alone .al_email_address input {
  max-width: 50%
}

.al_send_section_alone .al_send_email_button {
  flex-grow: 1;
}

.al_send_section_alone .al_send_editable {
  display: block;
  width: 100%;
}

.al_send_section_alone .al_email_container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.al_send_section_alone .al_email_address,
.al_send_section_alone .al_email_address label {
  max-width: 70%;
  padding-left: 0;
}

.al_send_section_alone .al_email_address input {
  max-width: 80%;
}

.al_send_section_alone .al_doc_email_header {
    margin-bottom: 0.2em;
}

/* al_email_container mobile version */
@media only screen and (max-width: 700px) {
  .al_email_container {
    display: block; 
  }
  .al_email_container > span > input {
    margin: 0 0 10px; 
  }
}

/*---------------------------------------------------------*/
/* Table rows
/*---------------------------------------------------------*/
.al_doc_table {
    margin-bottom: 2rem;
}

.al_doc_table_row {
  margin-top: 0.5em;
}

.al_doc_table .al_buttons {
    display: flex;
    justify-content: space-between;
}

.al_doc_table .al_buttons > * {
    flex-grow: 1;
}

.al_doc_table .al_buttons .al_button {
    margin-right: 4px;
}

.al_doc_table .al_buttons .al_button:last-child {
    margin-right: 0;
}

.al_doc_table_row .al_doc_title,
.al_doc_table_row .al_buttons,
.al_doc_table_row .al_email_send_col {
    text-align: right;
}

.al_doc_table_row .al_buttons,
.al_doc_table_row .al_email_send_col {
  padding-right: 0;
}

.al_doc_table_row .al_doc_title,
.al_doc_table_row .al_doc_email,
.al_doc_table_row .al_email_input_col {
  padding-left: 0;
}

.al_doc_table_row .al_doc_title {
  font-weight: bold;
}

.al_doc_table_row .al_email_input_container {
    display: flex;
    justify-content: space-between;
}

.al_doc_table_row .al_email_input_container label {
    width: unset;
    padding-right: 1em;
}

.al_doc_table .al_email_input_container {
  flex-wrap: wrap;
}

.al_doc_table_row .al_doc_email_field {
    width: 50%;
    flex-grow: 1;
}

@media (max-width: 575px) {
  .al_doc_table .col {
      padding-right: 0;
      padding-left: 0;
  }
  .al_doc_table .al_doc_title {
      text-align: left;
  }
  .al_doc_table .al_email_input_col {
      padding-bottom: 0.5em;
      padding-top: 0.25em;
  }
}
/* TODO: Should it be in here and this broad? This looks like it's for all pages */
.da-subquestion .daquestionbackbutton {
  background-color: #eee;
}