button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

input[type="text"], input[type="number"] {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    height: 38px;
    padding-left: 8px;
    border: solid 1px #c6c7c3;
    transition: all 0.2s ease-in-out;
    border-radius: 0 !important;
    outline: none !important;
}

    input[type="text"]:hover,
    input[type="number"]:hover,
    input[type="text"]:focus
    input[type="number"]:focus {
        border: solid 1px var(--brandcolor);
    }

label > span {
  display: block;
  color: var(--label-text);
  padding-bottom: 4px;
}

.checkbox-group {
  display: flex;
  justify-content: start;
  align-items: center;
}

.checkbox-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.checkbox-group span {
  position: relative;
  cursor: pointer;
}

.checkbox-group span:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #c6c7c3;
  padding: 8px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  transform: translateY(-1px);
}

.checkbox-group:hover span:before {
  border-color: var(--brandcolor);
}

.checkbox-group input:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--brandcolor);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.w-full {
  width: 100%;
}