/* Travel Reimbusement Request Form styles */
html, body {
  min-width: 30rem;
}

/* standardize border sizing for all fields */
* {
  box-sizing: border-box;
}

#container-frame {
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 20px;

  max-width: 95%;
  height: 100%;

  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 1;
}

#travel-form {
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  gap: 20px;
  
  width: 100%;
  max-width: 74.6875rem;
}

#duplicate-cust-error, #no-user-found-cust-error {
  display: none;
  flex-direction: column;
  flex: 1 0 auto;

  & h3 {
    color: red;
    margin-bottom: 0;
  }
}

input, textarea {
  touch-action: pan-x pan-y;
  width: 13.25rem;
}

/* Custom Radio buttons */
input[type="radio"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 0.75rem;
  width: 0.75rem;
  border: 2px solid #113f71;
  border-radius: 50%;
  justify-self: center;
}

input[type="radio"]:checked {
  background-color: #17A1FA;
}

/* Shadows, borders, and outlines for focused inputs */
:focus-visible {
  box-shadow:  0 4px 16px rgba(17, 63, 113, 0.5);
  outline: #113f71 solid 2px;
}

input[type="tel"]:focus, input[type="text"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, textarea:focus {
  box-shadow:  0 4px 16px rgba(17, 63, 113, 0.5);
  border: 1px solid #aaa;
  border-radius: 3px;
}

input[type="radio" i]:focus-visible {
  box-shadow: none;
  outline-offset: 2px;
  outline-color: #113f71;
  outline-width: 2px;
}

.select2-search__field:focus {
  box-shadow: none;
}

.select2-container--open, .select2-dropdown {
  box-shadow:  0 4px 16px rgba(17, 63, 113, 0.5);
}

input[type="checkbox"] {
  justify-self: center;
  /* Prevents checkbox from matching
   * height of containing line */
  width: 1rem;
}


textarea {
  resize: vertical;
}

/* Input and select width slightly different
 * to maintain standard visual width */
select {
  width: 13rem;
}

label {
  padding: 0 0.5rem;
  max-width: 21rem;
}

.travel-form-fields { 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex: 1;
}

/* Form section style */
.form-side {
  /* Auto layout */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  gap: 4px;

  width: 36.25rem;
  flex: 1;
}

/* Field style */
/* Puts label on left side */
.field {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.25rem;
  gap: 12px;

  /* Inside auto layout */
  order: 0;
  align-self: stretch;
}

/* Puts error beneath field, stacks multiple fields */
.field-set {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: space-between;
}

/* Fieldset style for radio buttons */
fieldset {
  display: flex;
  border: none;
  padding: 0;
  margin: 0;
  justify-content: space-between;
  flex-grow: 1;
}

legend {
  padding: 0 0.5rem;
  font-size: 1rem; /* Adjust the font size as needed */
  float: left;
}

p.error {
  line-height: 1rem;
  padding-right: 1rem;
  align-self: flex-end;
  text-align: right;
  font: 0.875rem;
  color: #aa2222;
}

.hiddenByTravelMode, .hiddenUnlessOtherDriver, .hiddenUnlessTransProvider {
  display: none;
}

.radio-buttons-wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 13.15rem;

  flex: none;
}

/* Submit/Cancel buttons style */
.buttons-area {
  position: relative;
  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 25px;

  width: 100%;
  height: 4.0625rem;


  /* Inside auto layout */
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}

.submit-button, .cancel-button {
  cursor: pointer;
  width: 10.9375rem;
  height: 4.0625rem;
  bottom: 2.625rem;

  font-size: 1.125rem;

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border-width: 0;

  &:disabled {
    background-color: black;
    color: #555;
    cursor: not-allowed;
  }
}

.submit-button {
  background: #17A1FA;
}

.cancel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000;
  background: #989898;
}

@media screen and (max-width: 1120px) {
  .travel-form-fields {
    flex-flow: column;
  }
  
  #travel-form {
    line-height: 2rem;
  }

  label {
    font-size: 1.5rem;
  }

  legend {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 755px) {
  #background {
    min-width: 34rem;
  }

  #travel-form {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .form-side {
    max-width: 32rem;
  }

  legend {
    font-size: 1.25rem;
  }

  p.error {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}


@media screen and (max-width: 680px) {
  #travel-form {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .form-side {
    max-width: 26rem;
  }

  legend {
    font-size: 1rem;
  }
}