form {
    display: inline-block;
    margin-top: 0em;
    margin-block-end: 0em;
    box-sizing: border-box;
  }

  .form-container {
    display: table;
    margin: 1rem auto;
    clear: both;
  }
  
  .form-container > form {
    width: 100%;
  }

  .form-layout {
    display: flex;
    flex-flow: column nowrap;
    align-content: stretch;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -min-width: 300px;
    overflow: unset;
    padding: 0rem;
    margin: 0rem;
  }
  
  .form-layout-grid {
    display: grid;
    grid-template-areas: 'form-header'
                          'form-body'
                          'form-footer';
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
    gap: 0rem;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -min-width: 300px;
    overflow: unset;
    padding: 0rem;
    margin: 0rem;
  }

  .form-header {
    display: flex !important;
    flex-flow: row nowrap;
    grid-area: form-header;
    width: 100%;
    -min-width: 375px;
    padding: 1em 2em;
    box-sizing: border-box;
  }

  .form-body {
    display: block;
    grid-area: form-body;
    width: 100%;
    height: 100%;
    padding: 1rem;
    margin: 0rem;
    box-sizing: border-box;
  }
  
  .form-footer {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: end;
    grid-area: form-footer;
    bottom: 0;
    width: 100%;
    height: 4.5rem;
    padding: 1em 2em;
    margin: 0rem;
    box-sizing: border-box;
    white-space: nowrap;
  }
  
  .form-label {
    display: block;
    width: 0; /* this does all the magic in allowing a flex item to shrink */
    box-sizing: border-box;
    color: var(--default-form-font-color, #000);
    font-weight: 700;
    line-height: 2.5em;
  }

  .form-group {
    display: inline-flex;
    flex-flow: row nowrap;
    padding: 0.5em 0.5em; /* indents */
    box-sizing: border-box;
  }

  .form-container {
    display: inline-flex;
    flex-flow: column wrap;
    padding: 0.5em 0.5em; /* indents */
    box-sizing: border-box;
  }

  .form-content {
    display: inline-flex;
    flex-flow: row wrap;
    flex: 1 1 var(--flex-basis, min-content);
    width: 100%;
    height: fit-content;
    word-wrap: normal;
    -word-break: break-all; /* affects text alignments negatively */
    white-space: normal;
    padding: 0.5em 0.5em;
    gap: 0.25rem;
    box-sizing: border-box;
    text-overflow: ellipsis;
    line-height: 1.5em;
  }

  .form-column { /* synonym for .form-group */
    display: inline-flex;
    flex-flow: column nowrap;
    padding: 1em 1.5em; /* indents */
    box-sizing: border-box;
  }

  .form-row {
    display: inline-flex;
    width: 100%;
    flex-flow: row nowrap;
    box-sizing: border-box;
  }

  .form-section {
    display: inline-flex;
    width: 100%;
    flex-flow: column nowrap;
    margin: 0.5em 0em;
    padding: 1em 1.5em;
    box-sizing: border-box;
    background-color: var(--default-form-section-background-color, rgb(218, 218, 218));
    border-style: var(--default-form-section-border-style, solid);
    border-width: var(--default-form-section-border-width, 2px);
    border-color: var(--default-form-section-border-color, #888);
    border-radius: var(--default-form-section-border-radius, 0px);
  }

  .input-group {
    display: inline-flex;
    flex-direction: row;
    gap: var(--default-form-input-gap, 0.5em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-group-compound {
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-group-column {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-group-row {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-column {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-row {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-container {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    font-size: 100%;
  }

  .form-group > label,
  .form-group > .form-label,
  .form-section > label,
  .form-section > .form-label {
    display: block; /* allows text-ellipsis to function */
    width: 0; /* this does all the magic in allowing a flex item to shrink */
    min-width: 0;
    color: var(--default-form-font-color, #000);
    font-weight: 700;
    line-height: 2.5em;
  }

  /* This is to allow quick ad-hoc form building with no groupings, rows, etc. */
  .form-body > label, 
  .form-body > .form-label,
  form > label, 
  form > .form-label {
    display: block; /* allows text-ellipsis to function */
    width: 100%; /* with form-body, form, you lose side-by-sideness */
    min-width: 0;
    color: var(--default-form-font-color, #000);
    font-weight: 700;
    line-height: 2em;
  }

  .input-row > button,
  .input-row > select,
  .input-row > label,
  .input-row > div,
  .input-row > input[type=text],
  .input-row > input[type=password],
  .input-row > input[type=range] {
    padding:  0.5em 0.25em;
  }

  .input-group-row > button,
  .input-group-row > select,
  .input-group-row > label,
  .input-group-row > div,
  .input-group-row > input[type=text],
  .input-group-row > input[type=password],
  .input-group-row > input[type=range],
  .input-group-compound > button,
  .input-group-compound > select,
  .input-group-compound > label,
  .input-group-compound > div,
  .input-group-compound > input[type=text],
  .input-group-compound > input[type=password],
  .input-group-compound > input[type=range] {
    padding: 0.5em 0.25em;
  }

  .input-group-column > button,
  .input-group-column > select,
  .input-group-column > label,
  .input-group-column > div,
  .input-group-column > input[type=text],
  .input-group-column > input[type=password],
  .input-group-column > input[type=range],
  .input-column > button,
  .input-column > select,
  .input-column > label,
  .input-column > div,
  .input-column > input[type=text],
  .input-column > input[type=password],
  .input-column > input[type=range] {
    padding: 0.5em 0.25em;
  }

  /* makes an input-group-compound act like a row; and rows act like better rows */
  .input-row > label,
  .input-row > .form-label,
  .input-column > label,
  .input-column > .form-label {
    display: block; /* allows text-ellipsis to function */
    width: 0; /* this does all the magic in allowing a flex item to shrink (and not wrap) */
    min-width: 0;
    color: var(--default-form-font-color, #000);
    font-weight: 700;
    line-height: 2em;
  }

  /* a group promotes flexibility in scale and line - a form row is rigid; no line breaks */
  .input-group > label,
  .input-group > .form-label,
  .input-group-row > label,
  .input-group-row > .form-label,
  .input-group-column > label,
  .input-group-column > .form-label,
  .input-group-compound > label,
  .input-group-compound > .form-label {
    display: block; /* allows text-ellipsis to function */
    width: fit-content;
    min-width: 0;
    color: var(--default-form-font-color, #000);
    font-weight: 700;
    line-height: 2em;
  }

  .input-group > label,
  .input-group > .form-label,
  .input-group-row > label,
  .input-group-row > .form-label,
  .input-group-compound > label,
  .input-group-compound > .form-label {
    width: 100%;
    flex-basis: 33%;
  }

  .input-group-row.flex-row-item  > label,
  .input-group-row.flex-row-item  > .form-label,
  .input-row.flex-row-item  > label,
  .input-row.flex-row-item  > .form-label,
  .input-group-column.flex-row-item  > label,
  .input-group-column.flex-row-item  > .form-label,
  .input-column.flex-row-item  > label,
  .input-column.flex-row-item  > .form-label,
  .input-group.flex-row-item > label,
  .input-group-compound.flex-row-item > label,
  .input-group-compound > label,
  .form-body.flex-row-item > label,
  .form-section.flex-row-item > label { /* allows label to expand and use text ellipsis */
    flex-grow: 1;
    flex-shrink: 1;
  }

  .input-container > label,
  .input-container > .form-label {
    line-height: 2em;
  }

  /* This is to allow quick ad-hoc form building with no groupings */
  .form-body > select,
  .form-body > input[type=text],
  .form-body > input[type=password],
  .form-container > select,
  .form-container > input[type=text],
  .form-container > input[type=password],
  .form-section > select,
  .form-section > input[type=text],
  .form-section > input[type=password],
  .form-row > select,
  .form-row > input[type=text],
  .form-row > input[type=password],
  .form-column > select,
  .form-column > input[type=text],
  .form-column > input[type=password],
  form > select,
  form > input[type=text],
  form > input[type=password] {
    display: block; /* default by browser is inline-block */
    width: 100%;
    min-width: 0;
    border-style: var(--default-input-border-style, solid);
    border-width: var(--default-input-border-width, 1px);
    border-color: var(--default-input-border-color, #ccc);
    border-radius: var(--default-input-border-radius, 0px);
    font-size: var(--default-input-font-size, 1em);
    font-family: var(--default-input-font-family, 'Arial', Helvetica, san-serif);
    padding: var(--default-input-padding, 0.75em 0.25em);
    color: var(--default-input-font-color, #000);
  }

  /* This is to allow quick ad-hoc form building with no groupings for Base Data elements */
  .form-body > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-body > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-body > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-container > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-container > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-container > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-section > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-section > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-section > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-row > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-row > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-row > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-column > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-column > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-column > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  form > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  form > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  form > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-body > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-body > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-body > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-container > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-container > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-container > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-section > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-section > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-section > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-row > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-row > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-row > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  .form-column > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  .form-column > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  .form-column > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password],
  form > .flex-row-container .flex-row div[class*='flex-row-item'] select,
  form > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=text],
  form > .flex-row-container .flex-row div[class*='flex-row-item'] input[type=password] {
    display: block; /* default by browser is inline-block */
    width: 100%;
    min-width: 0;
    border-style: var(--default-input-border-style, solid);
    border-width: var(--default-input-border-width, 1px);
    border-color: var(--default-input-border-color, #ccc);
    border-radius: var(--default-input-border-radius, 0px);
    font-size: var(--default-input-font-size, 1em);
    font-family: var(--default-input-font-family, 'Arial', Helvetica, san-serif);
    padding: var(--default-input-padding, 0.75em 0.25em);
    color: var(--default-input-font-color, #000);
  }

  .input-group select,
  .input-group input[type=text],
  .input-group input[type=password] {
    width: fit-content; /* scale within its area; allows side-by-side */
    min-width: 0;
    border-style: var(--default-input-border-style, solid);
    border-width: var(--default-input-border-width, 1px);
    border-color: var(--default-input-border-color, #ccc);
    border-radius: var(--default-input-border-radius, 0px);
    font-size: var(--default-input-font-size, 1em);
    font-family: var(--default-input-font-family, 'Arial', Helvetica, san-serif);
    padding: var(--default-input-group-padding, 0.75em 0.25em);
    color: var(--default-input-font-color, #000);
  }

  .input-group-compound select,
  .input-group-compound input[type=text],
  .input-group-compound input[type=password] {
    width: fit-content; /* scale within its area; allows side-by-side */
    min-width: 0;
    border-style: var(--default-input-border-style, solid);
    border-width: var(--default-input-border-width, 1px);
    border-color: var(--default-input-border-color, #ccc);
    border-radius: var(--default-input-border-radius, 0px);
    font-size: var(--default-input-font-size, 1em);
    font-family: var(--default-input-font-family, 'Arial', Helvetica, san-serif);
    padding: var(--default-input-group-padding, 0.75em 0.25em);
    color: var(--default-input-font-color, #000);
  }
  
  .input-group select,
  .input-group input[type=text],
  .input-group input[type=password],
  .input-group-row select,
  .input-group-row input[type=text],
  .input-group-row input[type=password],
  .input-group-compound select,
  .input-group-compound input[type=text],
  .input-group-compound input[type=password] {
    width: 100%;
    flex-basis: 67%;
  }

  .form-body input[type=checkbox],
  .form-section input[type=checkbox],
  .input-group input[type=checkbox] {
    width: 20px;
    -margin: unset;
  }
  
  .input-sized {
    width: calc(var(--input-width, 3ch) * var(--sizing-factor, var(--default-input-sizing-factor, 2))) !important;
  }

  .form-value {
    padding: 0px 0px;
    color: var(--default-form-font-color, #000);
    font-weight: normal;
  }

/* validator support */

  .input-validate {
    display: table;
    height: 1px;
    clear: both;
    margin: 0px;
    padding: 0px;
    color: #921205;
  }
  
  .form-result-message {
    display: flex;
    width: 0; /* this does all the magic in allowing a flex item to shrink */
    min-width: 0;
    line-height: 2rem;
    margin: 0rem auto;
  }

  .field-validate span {
    background-color: #dfbbb4;
    padding: 2.5px;
  }
  
  .field-validate span[style*=hidden] {
    display: none;
  }

@media only screen and (max-width: 450px) {
  .form-body {
    padding: 1em 0.25em
  }

  .form-group {
    padding: 1em 0.25em
  }

  .form-group {
    padding: 1em 0.5em
  }

  .form-footer {
    padding: 1em 0.5em;
  }

  .input-group-compound {
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-group-column {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--default-form-input-gap, 0em 0.5em);
    padding: 0.25em 0em;
    box-sizing: border-box;
  }

  .input-group-row {
    gap: var(--default-form-input-gap-for-small-down, 0em 0.125em);
    padding: 0.125em 0em;
  }

  .input-column {
    gap: var(--default-form-input-gap-for-small-down, 0em 0.125em);
    padding: 0.125em 0em;
  }

  .input-row {
    gap: var(--default-form-input-gap-for-small-down, 0em 0.125em);
    padding: 0.125em 0em;
  }

  .input-group-row > button,
  .input-group-row > select,
  .input-group-row > label,
  .input-group-row > div,
  .input-group-row > input[type=text],
  .input-group-row > input[type=password],
  .input-group-row > input[type=range],
  .input-row > button,
  .input-row > select,
  .input-row > label,
  .input-row > div,
  .input-row > input[type=text],
  .input-row > input[type=password],
  .input-row > input[type=range],
  .input-group-compound > button,
  .input-group-compound > select,
  .input-group-compound > label,
  .input-group-compound > div,
  .input-group-compound > input[type=text],
  .input-group-compound > input[type=password],
  .input-group-compound > input[type=range]  {
    padding: 0em 0.20em;
  }
}

@media only screen and (max-width: 850px) {
  form {
    width: 100%;
    padding: 0em 0.25em;
  }

  .form-container {
    width: 100%;
    max-width: 100vw;
  }

  .form-body {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .form-row {
    flex-flow: column;
    gap: var(--default-form-input-gap-for-medium-down, 0.5em 0.5em);
  }

  .form-group > label {
    width: unset;
  }

  .form-body > .input-group,
  .form-group > .input-group,
  .form-row > .input-group,
  .form-section > .input-group {
    flex-flow: column;
  }

  .form-group,
  .input-group {
    width: 100%;
  }

  .input-group {
    flex-direction: column;
    gap: var(--default-form-input-gap-for-medium-down, 0.5em 0.5em);
  }

  .input-group > label,
  .input-group > .form-label {
    display: block;
    width: unset;
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
  }

  .input-group > select,
  .input-group > button,
  .input-group > input[type=text],
  .input-group > input[type=password],
  .input-group > input[type=button],
  .input-group > input[type=submit],
  .input-group > input[type=reset] 
  .input-group > .input-container {
    width: 100%;
    flex-basis: 100%;
  }

  .input-container > select,
  .input-container > button,
  .input-container > input[type=text],
  .input-container > input[type=password],
  .input-container > input[type=button],
  .input-container > input[type=range],
  .input-container > input[type=submit],
  .input-container > input[type=reset] 
  .input-container > div {
    width: 100%;
    flex-basis: 100%;
  }

  .form-header {
    justify-content: center;
  }

  .form-footer {
    justify-content: center;
  }

  .form-footer select,
  .form-footer button,
  .form-footer input[type=text],
  .form-footer input[type=password],
  .form-footer input[type=button],
  .form-footer input[type=submit],
  .form-footer input[type=reset] {
    width: 100%;
    clear: both;
  }
}

::-webkit-input-placeholder {
  /* Edge */
  padding: var(--placeholder-padding, var(--default-placeholder-padding, 0em 0em 0em 0.25em));
  color: var(--placeholder-color, var(--default-placeholder-font-color, #000));
  font-family: var(--placeholder-font-family, var(--default-placeholder-font-family, 'Arial', Helvetica, sans-serif));
  font-weight: var(--placeholder-font-weight, var(--default-placeholder-font-weight, normal));
  font-style: var(--placeholder-font-style, var(--default-placeholder-font-style, normal));
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  padding: var(--placeholder-padding, var(--default-placeholder-padding, 0em 0em 0em 0.25em));
  color: var(--placeholder-color, var(--default-placeholder-font-color, #000));
  font-family: var(--placeholder-font-family, var(--default-placeholder-font-family, 'Arial', Helvetica, sans-serif));
  font-weight: var(--placeholder-font-weight, var(--default-placeholder-font-weight, normal));
  font-style: var(--placeholder-font-style, var(--default-placeholder-font-style, normal));
}

::placeholder {
  padding: var(--placeholder-padding, var(--default-placeholder-padding, 0em 0em 0em 0.25em));
  color: var(--placeholder-color, var(--default-placeholder-font-color, #000));
  font-family: var(--placeholder-font-family, var(--default-placeholder-font-family, 'Arial', Helvetica, sans-serif));
  font-weight: var(--placeholder-font-weight, var(--default-placeholder-font-weight, normal));
  font-style: var(--placeholder-font-style, var(--default-placeholder-font-style, normal));
}

input[type="text"]:focus {
  background-color:var(--input-text-focus-background-color, var(--default-input-text-focus-background-color, #fff));
  outline-style: var(--input-text-focus-outline-style, var(--default-input-text-focus-outline-style, solid));
  outline-width: var(--input-text-focus-outline-width, var(--default-input-text-focus-outline-width, 2px));
  outline-color: var(--input-text-focus-outline-color, var(--default-input-text-focus-outline-color, #000));
}

input[type="text"] {
  width: 100%;
  max-width: 375px;
  font-family: var(--input-text-font-family, var(--default-input-text-font-family, 'Arial', Helvetica, sans-serif));
  font-weight: var(--input-text-font-weight, var(--default-input-text-font-weight, normal));
  font-style: var(--input-text-font-style, var(--default-input-text-font-style, bold));
  letter-spacing: var(--input-text-letter-spacing, var(--default-input-text-letter-spacing, normal));
  background-color: var(--input-text-background-color, var(--default-input-text-background-color, #fff));
  padding: var(--input-text-padding, var(--default-input-text-padding, initial));
  margin: var(--input-text-margin, var(--default-input-text-margin, initial));
  color: var(--input-text-color, var(--default-input-text-color, #777));
  outline-style: var(--input-text-outline-style, var(--default-input-text-outline-style, initial));
  outline-width: var(--input-text-outline-width, var(--default-input-text-outline-width, initial));
  outline-color: var(--input-text-outline-color, var(--default-input-text-outline-color, initial));
  border-style: var(--input-text-border-style, var(--default-input-text-border-style, initial));
  border-color: var(--input-text-border-color, var(--default-input-text-border-color, initial));
  border-width: var(--input-text-border-width, var(--default-input-text-border-width, initial));
  border-color: var(--input-text-border-color, var(--default-input-text-border-color, initial));
  border-radius: var(--input-text-border-radius, var(--default-input-text-border-radius, 0));
  box-sizing: border-box;
}

input[type="password"] {
  width: 100%;
  max-width: 375px;
  font-family: var(--input-password-font-family, var(--default-input-password-font-family, 'Arial', Helvetica, sans-serif));
  font-weight: var(--input-password-font-weight, var(--default-input-password-font-weight, normal));
  font-style: var(--input-password-font-style, var(--default-input-password-font-style, bold));
  letter-spacing: var(--input-password-letter-spacing, var(--default-input-password-letter-spacing, normal));
  background-color: var(--input-password-background-color, var(--default-input-password-background-color, #fff));
  padding: var(--input-password-padding, var(--default-input-password-padding, initial));
  margin: var(--input-password-margin, var(--default-input-password-margin, initial));
  color: var(--input-password-color, var(--default-input-password-color, #777));
  outline-style: var(--input-password-outline-style, var(--default-input-password-outline-style, initial));
  outline-width: var(--input-password-outline-width, var(--default-input-password-outline-width, initial));
  outline-color: var(--input-password-outline-color, var(--default-input-password-outline-color, initial));
  border-style: var(--input-password-border-style, var(--default-input-password-border-style, initial));
  border-color: var(--input-password-border-color, var(--default-input-password-border-color, initial));
  border-width: var(--input-password-border-width, var(--default-input-password-border-width, initial));
  border-color: var(--input-password-border-color, var(--default-input-password-border-color, initial));
  border-radius: var(--input-password-border-radius, var(--default-input-password-border-radius, 0));
  box-sizing: border-box;
}

input[type="radio"] {
  background-color: var(--input-radio-background-color, var(--default-input-radio-background-color, #fff));
  padding: var(--input-radio-padding, var(--default-input-radio-padding, initial));
  margin: var(--input-radio-margin, var(--default-input-radio-margin, initial));
  color: var(--input-radio-color, var(--default-input-radio-color, #777));
  outline-style: var(--input-radio-outline-style, var(--default-input-radio-outline-style, initial));
  outline-width: var(--input-radio-outline-width, var(--default-input-radio-outline-width, initial));
  outline-color: var(--input-radio-outline-color, var(--default-input-radio-outline-color, initial));
  border-radius: var(--input-radio-border-radius, var(--default-input-radio-border-radius, 0));
  box-sizing: border-box;
}

input[type="checkbox"] {
  background-color: var(--input-checkbox-background-color, var(--default-input-checkbox-background-color, #fff));
  padding: var(--input-checkbox-padding, var(--default-input-checkbox-padding, initial));
  margin: var(--input-checkbox-margin, var(--default-input-checkbox-margin, initial));
  color: var(--input-checkbox-color, var(--default-input-checkbox-color, #777));
  outline-style: var(--input-checkbox-outline-style, var(--default-input-checkbox-outline-style, initial));
  outline-width: var(--input-checkbox-outline-width, var(--default-input-checkbox-outline-width, initial));
  outline-color: var(--input-checkbox-outline-color, var(--default-input-checkbox-outline-color, initial));
  border-radius: var(--input-checkbox-border-radius, var(--default-input-checkbox-border-radius, 0));
  box-sizing: border-box;
}

select {
  width: 100%;
  max-width: 375px;
  font-family: var(--input-select-font-family, var(--default-input-select-font-family, 'Arial', Helvetica, sans-serif));
  font-weight: var(--input-select-font-weight, var(--default-input-select-font-weight, normal));
  font-style: var(--input-select-font-style, var(--default-input-select-font-style, bold));
  letter-spacing: var(--input-select-letter-spacing, var(--default-input-select-letter-spacing, normal));
  background-color: var(--input-select-background-color, var(--default-default-input-select-background-color, #fff));
  padding: var(--input-select-padding, var(--default-input-select-padding, initial));
  margin: var(--input-select-margin, var(--default-input-select-margin, initial));
  color: var(--input-select-color, var(--default-input-select-color, #777));
  outline-style: var(--input-select-outline-style, var(--default-input-select-outline-style, initial));
  outline-width: var(--input-select-outline-width, var(--default-input-select-outline-width, initial));
  outline-color: var(--input-select-outline-color, var(--default-input-select-outline-color, initial));
  border-style: var(--input-select-border-style, var(--default-input-select-border-style, initial));
  border-width: var(--input-select-border-width, var(--default-input-select-border-width, initial));
  border-color: var(--input-select-border-color, var(--default-input-select-border-color, initial));
  border-radius: var(--input-select-border-radius, var(--default-input-select-border-radius, 0));
  box-sizing: border-box;
}

select:focus {
  background-color:var(--input-select-focus-background-color, var(--default-input-select-focus-background-color, #fff));
  outline-style: var(--input-select-focus-outline-style, var(--default-input-select-focus-outline-style, solid));
  outline-width: var(--input-select-focus-outline-width, var(--default-input-select-focus-outline-width, 2px));
  outline-color: var(--input-select-focus-outline-color, var(--default-input-select-focus-outline-color, #000));
}