/**
*  Header Variables
*/
/*
$font-family-sans-serif: 'Open Sans', Roboto,
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol' !default;
*/
/*
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;

$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;

$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;



$text-muted: $gray-700 !default;

$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;

$hr-border-color: rgba($black, 0.1) !default;
$hr-border-width: $border-width !default;

$mark-padding: 0.2em !default;
*/
/*
$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;

$list-inline-padding: 0.5rem !default;

$mark-bg: #fcf8e3 !default;

$hr-margin-y: $spacer !default;
*/
/* CONTAINER QUERIES */
.input-form-field [slot=before-input],
.input-form-field [slot=after-input] {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  height: 2.5rem;
  padding: 0.5rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: #353535;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #707070;
}
.input-form-field [slot=before-input] .btn-icon,
.input-form-field [slot=after-input] .btn-icon {
  height: 28px;
  width: 28px;
  font-size: 1.25rem;
}
.input-form-field [slot=before-input]:is(som-icon),
.input-form-field [slot=after-input]:is(som-icon) {
  display: inline-flex !important;
}
.input-form-field [slot=before-input]:is(som-badge),
.input-form-field [slot=after-input]:is(som-badge) {
  display: flex !important;
}
.input-form-field [slot=before-input] .form-group,
.input-form-field [slot=after-input] .form-group {
  margin-bottom: unset;
}
.input-form-field [slot=before-input] {
  margin-right: -1px;
  border-right: none;
  border-radius: 0.125rem 0 0 0.125rem;
  transition: all 0.3s;
}
.input-form-field [slot=before-input]:is(som-button-dropdown) {
  padding-inline: 0;
}
.input-form-field [slot=after-input] {
  margin-left: -1px;
  border-left: none;
  border-radius: 0 0.125rem 0.125rem 0;
  transition: all 0.3s;
}
.input-form-field [slot=after-input]:is(som-button-dropdown) {
  padding-inline: 0;
}
.input-form-field:has([slot=before-input]) input {
  border-left: none;
  border-radius: 0 0.125rem 0.125rem 0;
}
.input-form-field:has([slot=before-input]) input:disabled:hover {
  border-right: 1px solid #d0d0d0;
  box-shadow: none;
}
.input-form-field:has([slot=before-input]) input:disabled:focus {
  box-shadow: none;
}
.input-form-field:has([slot=before-input]) input:hover {
  border-right: none;
  box-shadow: inset 0 1px 0 0px #142d3e, inset 0 -1px 0 0px #142d3e, inset -2px 0 0 0px #142d3e;
}
.input-form-field:has([slot=before-input]) input:focus {
  box-shadow: inset 0 2px 0 0px #142d3e, inset 0 -2px 0 0px #142d3e, inset -2px 0 0 0px #142d3e;
}
.input-form-field:has([slot=before-input]) input.is-invalid:hover {
  box-shadow: inset -2px 1px 0 0 #990021, inset 0 -1px 0 0 #990021 !important;
}
.input-form-field:has([slot=before-input]) input.is-invalid:focus {
  box-shadow: inset -2px 2px 0 0 #990021, inset 0 -2px 0 0 #990021 !important;
}
.input-form-field:has([slot=after-input]) input {
  border-right: none;
  border-radius: 0.125rem 0 0 0.125rem;
}
.input-form-field:has([slot=after-input]) input:disabled:hover {
  border-right: none;
  box-shadow: none;
}
.input-form-field:has([slot=after-input]) input:disabled:focus {
  box-shadow: none;
}
.input-form-field:has([slot=after-input]) input:hover {
  border-right: none;
  box-shadow: inset 0 1px 0 0px #142d3e, inset 0 -1px 0 0px #142d3e, inset 1px 0 0 0px #142d3e;
}
.input-form-field:has([slot=after-input]) input:focus {
  box-shadow: inset 0 2px 0 0px #142d3e, inset 0 -2px 0 0px #142d3e, inset 2px 0 0 0px #142d3e;
}
.input-form-field:has([slot=after-input]) input.is-invalid:hover {
  box-shadow: inset 1px 1px 0 0 #990021, inset 0 -1px 0 0 #990021 !important;
}
.input-form-field:has([slot=after-input]) input.is-invalid:focus {
  box-shadow: inset 2px 2px 0 0 #990021, inset 0 -2px 0 0 #990021 !important;
}
.input-form-field:has([slot=before-input]):has([slot=after-input]) input:hover {
  box-shadow: inset 0 1px 0 0 #142d3e, inset 0 -1px 0 0 #142d3e;
}
.input-form-field:has([slot=before-input]):has([slot=after-input]) input:focus {
  box-shadow: inset 0 2px 0 0 #142d3e, inset 0 -2px 0 0 #142d3e;
}
.input-form-field:has([slot=before-input]):has([slot=after-input]) input.is-invalid:hover {
  box-shadow: inset 0 1px 0 0 #990021, inset 0 -1px 0 0 #990021 !important;
}
.input-form-field:has([slot=before-input]):has([slot=after-input]) input.is-invalid:focus {
  box-shadow: inset 0 2px 0 0 #990021, inset 0 -2px 0 0 #990021 !important;
}
.input-form-field:has([slot=before-input]):has([slot=after-input]) input {
  border-radius: 0;
}
.input-form-field:has(input:hover) [slot=before-input] {
  border: 1px solid #142d3e;
  border-right: none;
  box-shadow: inset 1px 0 0 0px #142d3e, inset 0px 1px 0 0px #142d3e, inset 0px -1px 0 0px #142d3e;
}
.input-form-field:has(input:hover) [slot=after-input] {
  border: 1px solid #142d3e;
  border-left: none;
  box-shadow: inset -1px 0 0 0px #142d3e, inset 0px -1px 0 0px #142d3e, inset 0px 1px 0 0px #142d3e;
}
.input-form-field:has(.is-invalid) [slot=before-input], .input-form-field:has(.is-invalid) [slot=after-input] {
  border-color: #b30518;
}
.input-form-field:has(.is-invalid:hover) [slot=before-input] {
  border: 1px solid #990021;
  border-right: none;
  box-shadow: inset 1px 0 0 0px #990021, inset 0px 1px 0 0px #990021, inset 0px -1px 0 0px #990021;
}
.input-form-field:has(.is-invalid:hover) [slot=after-input] {
  border: 1px solid #990021;
  border-left: none;
  box-shadow: inset -1px 0 0 0px #990021, inset 0px -1px 0 0px #990021, inset 0px 1px 0 0px #990021;
}
.input-form-field:has(input:focus) [slot=before-input] {
  border: 1px solid #142d3e;
  border-right: none;
  box-shadow: inset 2px 0 0 0px #142d3e, inset 0px 2px 0 0px #142d3e, inset 0px -2px 0 0px #142d3e;
}
.input-form-field:has(input:focus) [slot=after-input] {
  border: 1px solid #142d3e;
  border-left: none;
  box-shadow: inset -2px 0 0 0px #142d3e, inset 0px -2px 0 0px #142d3e, inset 0px 2px 0 0px #142d3e;
}
.input-form-field:has(.is-invalid:focus) [slot=before-input] {
  border: 1px solid #990021;
  border-right: none;
  box-shadow: inset 2px 0 0 0px #990021, inset 0px 2px 0 0px #990021, inset 0px -2px 0 0px #990021;
}
.input-form-field:has(.is-invalid:focus) [slot=after-input] {
  border: 1px solid #990021;
  border-left: none;
  box-shadow: inset -2px 0 0 0px #990021, inset 0px -2px 0 0px #990021, inset 0px 2px 0 0px #990021;
}
.input-form-field:has(input[disabled]) [slot=before-input],
.input-form-field:has(input[disabled]) [slot=after-input] {
  background-color: #f7f7f7;
  color: #aaaaaa;
  border-color: #d0d0d0;
  box-shadow: none;
  opacity: 1;
}
.input-form-field:has(input[readonly]) [slot=before-input],
.input-form-field:has(input[readonly]) [slot=after-input] {
  background-color: #e0e0e1;
  color: #353535;
  opacity: 1;
}

/**
*  Header Variables
*/
/*
$font-family-sans-serif: 'Open Sans', Roboto,
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol' !default;
*/
/*
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;

$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;

$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;



$text-muted: $gray-700 !default;

$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;

$hr-border-color: rgba($black, 0.1) !default;
$hr-border-width: $border-width !default;

$mark-padding: 0.2em !default;
*/
/*
$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;

$list-inline-padding: 0.5rem !default;

$mark-bg: #fcf8e3 !default;

$hr-margin-y: $spacer !default;
*/
/* CONTAINER QUERIES */
som-form-field .text-error,
.form-group .text-error {
  color: #b30518;
}
som-form-field .text-optional,
.form-group .text-optional {
  color: #707070;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  font-weight: 550;
  font-variation-settings: "wght" 550;
  line-height: 1.25rem;
}

som-input {
  /* Firefox puts a red shadow on required inputs. We remove it here. */
}
som-input input:required {
  box-shadow: none;
}