/*other inputs*/
input, select {
  border: 1px solid var(--vel-color-form-border-default);
  padding: calc(var(--vel-fixed-spacing-01) + 2px) var(--vel-fixed-spacing-02);
  box-sizing: border-box;
  font: inherit;
  color: currentColor;
  height: auto;
  background: transparent;
  margin: 0;
  outline: none;
  border-radius: var(--vel-shape300-border_radius);
}

input:focus, select:focus {
  border: 1px solid var(--vel-color-misc-focused);
  box-shadow: 0px 0px 0px 4px var(--vel-color-misc-pressed);
}

/*Checkbox/radio*/
input[type=radio]:not([disabled]),
input[type=checkbox]:not([disabled]) {
  cursor: pointer;
}

input[type=radio],
input[type=checkbox] {
  display: inline;
  vertical-align: middle;
  margin-left: 4px;
}

/*input[type=radio] + label,
input[type=checkbox] + label
{
  margin-left:var(--vel-fixed-spacing-02);
}*/
/*textboxes*/
select, input[type=text], input[type=date],
input[type=tel], input[type=email],
input[type=number], input[type=password], input[type=search], textarea {
  width: 100%;
  box-sizing: border-box;
}

input[size] {
  width: auto;
}

input[type=text]:read-only, input[type=tel]:read-only, input[type=email]:read-only {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

/*switch*/
.switchContainer {
  overflow-wrap: anywhere;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  cursor: pointer;
  margin: calc(var(--vel-fixed-spacing-05) / 2 * -1);
  padding: calc(var(--vel-fixed-spacing-05) / 2);
}

.switchContainer > input[type=checkbox] {
  box-sizing: border-box;
  border-radius: 999px;
  appearance: none;
  outline: none;
  position: relative;
  vertical-align: top;
  isolation: isolate;
  cursor: pointer;
  display: inline-block;
  height: 24px;
  width: 48px;
  border: 2px solid transparent;
  padding: 0px;
  margin: 0px;
  transition: box-shadow 0.1s ease-out, background 0.1s ease-out;
  background: var(--vel-color-neutral-600);
}

.switchContainer > input[type=checkbox]:checked {
  transition: box-shadow 0.1s ease-out, background 0.1s ease-out;
  background: var(--vel-color-secondary-400);
}

.switchContainer > input[type=checkbox]::before {
  content: "";
  border-radius: 50%;
  display: block;
  height: 20px;
  width: 20px;
  background: var(--vel-color-neutral-white);
  transition: transform 0.1s ease-out;
}

.switchContainer > input[type=checkbox]:checked::before {
  transform: translateX(24px);
}