/* 
changes the second page's actions button (Save Draft, Previous Page, Submit, Reset) 
html pattern:
container (div class = "form-actions-container")
  container (div class = "form-actions-child")
    Other Buttons | Submit Button(s) Element - (Save Draft, Previous Page)
    Submit | Submit Button(s) Element - (Submit) (Separate element allows submit button to only be shown if FDM criteria's are met [driver worktag is a GR, GF, CC, PG)
  container
    Restart | Submit Button(s) Element (Restart)
*/

#webform-submission-demo-travel-and-field-advance-add-form > #edit-service-transaction > #edit-field-advance > #edit-field-advance-reason--wrapper > .description{
  margin-bottom: -9rem;
}

#webform-computed-notification_tuition_transfer_computed-wrapper input{
  display: none !important;
}

.form-actions-container{
  width: inherit;
  max-width: 51.5rem;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}

.form-actions-child{
  display: flex;
  gap: 4px;
}


/* changes the first page's actions button (Save Draft, Next Page, Submit, Reset */
.form-actions-single-row{
  max-width: 51.5rem;
  margin-top: 50px;
}

.webform-button--reset{
  border: 1px solid #ED4337 !important;
  background-color: transparent !important;
  color: #ED4337 !important;
  float: right;
}

/**** Site Wide CSS Styles *****/
.description a{
  text-decoration: underline !important;
}

/* reduces margin between the label (legend) and the input field */
.webform-select2 legend{
  margin-bottom: -0.5rem !important;
}

/* reduces margin between label and the input field */
.js-form-type-datetime label{
  margin-bottom: 0rem !important;
}

/* reduces description margin, description overlaps with label for dropdowns in composite table */
.webform-multiple-table .description {
  margin-top:.25rem !important;
}

/**** CSS Styles ****/
/* Travel: Other */
.form-item-select-the-expenses-you-are-claiming-other{
  display: flex;
  align-items: baseline;
}

.form-item-select-the-expenses-you-are-claiming-travel-essentials{
  display: flex;
  align-items: baseline;
}

/* Banner Help Text */
.banner {
  padding:10px !important;
}

.banner--blue{
  background-color:#c8e8fa;
}

.banner--notification {
  padding: 1rem !important;
  border-radius: 4px !important; 
  border: solid 1px #ccd5e4 !important;
  background-color: #e6f3fb !important;
}

.banner--notification p:last-child {
  margin-bottom: 0 !important;
}

.banner--error {
  padding: 1rem !important;
  border: 1px solid #d09b9b !important;
  border-radius: 4px !important;
  background-color: #ffc3c3 !important;
}

.banner--error p:last-child {
  margin-bottom: 0 !important;
}

div.banner a{
  text-decoration: underline !important;
}

div.banner--notification a {
    text-decoration: underline !important;
}

/* Containers */
.decorated-container{
  padding:24px 32px 40px 32px; 
  margin-top:40px;
  max-width:824px; 
  border: 1px solid #a09f9f; 
  box-shadow:4px 4px 10px 0px rgb(230, 230, 230);
}

.decorated-container--flex-spaced{
  display: flex !important;
  justify-content: space-between; 
  column-gap: 25px;
}

.container__date{
  /* format 2 consecutive dates to be vertical. Drupal automatically formats 2 dates into a horizontal layout */
  display: flex !important;
  flex-direction: column;
  max-width: fit-content;
}

/** Section Worktags  **/
.section-worktags{
  border: 1px solid #bfbfbf !important;
  border-radius: 4px !important;
  /* box-shadow: 2px 2px 8px 0px rgb(230, 230, 230) !important; */
  padding: 1.5rem !important;
  margin-top: 40px !important;
  width: fit-content !important;
  max-width: 824px !important;
}

.section-optional-worktags{
  border-bottom: none !important;
  padding: 0rem !important;
  margin-top: 2rem !important;
}

.section-worktags--grid {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem;
}

/* Labels, Texts */
.label--large{
  font-size: 1.4rem;
  font-weight: bolder;
}

/* Utility Classes */
.margin-top--md{
  margin-top: 2rem !important;
}

.margin-top--none{
  margin-top: 0px;
}

.padding-none{
  padding: 0px !important;
}

.textbox__amount input{
  text-align:left !important;
}

.textbox--half-width{
  width: 50%;
}

.text-align-left{
  text-align:left !important;
}