.label {
  color: #363636;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.help {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

.field {
  margin-bottom: 1rem;
}

.checkbox {
  cursor: pointer;
}

/* ################################# Input ################################# */

/* ----- number ----- */

input[type="number"] {
  width: 100px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="number"]:hover,
input[type="number"]:focus {
  border-color: #999;
}

input[type="number"]:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* clears the 'X' from Internet Explorer */
/* input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
  display: none; width : 0; height: 0;
} */

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.control {
  position: relative;
  display: flex;
}

.input {
  height: var(--input-height);
  max-height: var(--input-height);
  width: 100%;
  outline: none;
  border: 1px var(--gray-300) solid;
  border-radius: 5px;
  background-color: #fff;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--font-color);
  transition: border-color .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.input ~ .icon {
  font-size: 16px;
}

.input::placeholder {
  color: var(--gray-400);
}

/* ------ rounded ------ */

.input.rounded {
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
}

.input.medium.rounded {
  padding: 0.3rem 1rem;
}

.input.small.rounded {
  padding: 0.3rem 0.9rem;
}

/* ------ medium and small ------ */

.input.medium {
  height: 35px;
  max-height: 35px;
  font-size: 0.9rem;
  padding: 0.3rem 0.65rem;
}

.input.medium + .icon {
  font-size: 0.9rem;
}

.input.small {
  height: 30px;
  max-height: 30px;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
}

.input.small + .icon {
  font-size: 0.75rem;
}

/* ------ icon Left ------- */

.control.icon-left > .input {
  padding-left: 38px;
}

.control.icon-left > .icon {
  position: absolute;
  left: 12px;
  top: 8px;
  color: var(--gray-400);
  transition: all .2s ease-in-out;
  z-index: 3;
}

.control.icon-left > .input.small {
  padding-left: 28px;
}

.control.icon-left > .input.medium {
  padding-left: 34px;
}

.control.icon-left > .input.small + .icon {
  top: 6px;
  left: 10px;
}

.control.icon-left > .input.medium + .icon {
  top: 7px;
  left: 12px;
}

/* ------ addon right ------- */

.control.addon-right > .input {
  z-index: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.control.addon-right > .button {
  z-index: 1;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.control.addon-right > .input:hover,
.control.addon-right > .input:focus  {
  z-index: 2;
}

.control.addon-right > .input.small ~ .button {
  height: 30px;
}

.control.addon-right > .input.medium ~ .button {
  height: 35px;
}

/* ------ hover and focus ------- */

.input:hover {
  border-color: var(--gray-400);
}

.input:hover ~ .icon {
  color: var(--gray-500);
}

.input:focus {
  border-color: var(--blue-600);
  box-shadow: var(--input-focus-shadow-size) var(--blue-100);
}

.input:focus ~ .icon {
  color: var(--blue-700);
}

/* ------ Colored inputs ------ */

.input.cyan:focus {
  box-shadow: var(--input-focus-shadow-size) var(--cyan-100);
}

.input.cyan:focus + .icon {
  color: var(--cyan-600);
}

.input.teal:focus {
  border-color: var(--teal-500);
  box-shadow: var(--input-focus-shadow-size) var(--teal-100);
}

.input.teal:focus + .icon {
  color: var(--teal-600);
}

.input.emerald:focus {
  box-shadow: var(--input-focus-shadow-size) var(--emerald-100);
}

.input.emerald:focus + .icon {
  color: var(--emerald-600);
}

.input.red {
  border-color: var(--red-300);
}

.input.red:hover {
  border-color: var(--red-400);
}

.input.red:focus {
  box-shadow: var(--input-focus-shadow-size) var(--red-100);
  border-color: var(--red-500);
}


/* ################################ Textarea ################################ */

.textarea {
  display: block;
  max-width: 100%;
  min-width: 100%;
  padding: 0.75rem;
  resize: vertical;
  width: 100%;
  background-color: #fff;
  border: 1px #dbdbdb solid;
  border-radius: 5px;
  color: #363636;
  font-family: var(--font-family);
  font-size: var(--font-size);
  transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.textarea:hover {
  border-color: var(--gray-400);
}

.textarea:focus {
  outline: 0;
  border-color: var(--blue-600);
  box-shadow: var(--input-focus-shadow-size) var(--blue-100);
}

.textarea[rows] {
  height: initial;
}

/* ################################# select ################################# */

.select {
  position: relative;
  max-width: fit-content;
}

.select select {
  appearance: none;
  width: 100%;
  font-size: 1rem;
  padding: 0.675rem 3rem 0.675rem 1rem;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  cursor: pointer;
  color: var(--font-color);
  outline: none;
}

.select select:hover {
  border-color: var(--gray-400);
}

.select::before,
.select::after {
  --size: 0.35rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid var(--blue-700);
  top: 40%;
}

.select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid var(--blue-700);
  top: 55%;
}


.select.small select {
  font-size: 0.85rem;
  padding: 0.575rem 2.5rem 0.575rem 0.8rem;
}

.select.small::before {
  top: 35%;
}

.select.small.rounded select {
  border-radius: 20px;
  padding: 0.575rem 2.5rem 0.575rem 0.95rem;
}

/* ############################### File input ############################### */

/* input[type=file] {
  background-color: #fff;
  border: 1px solid var(--gray-200);
  color: var(--font-color);
  padding-right: 5px;
  border-radius: 4px;
  max-width: 100%;
}

input[type=file]:focus-visible {
  outline: var(--blue-700) auto 1px;
}

input[type=file]::file-selector-button {
  margin-right: 8px;
  border: none;
  background-color: var(--blue-500);
  padding: 8px 12px;
  color: #fff;
  cursor: pointer;
} */

.file {
  align-items: stretch;
  display: flex;
}

.file-label {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.file-label:hover .file-cta {
  /* background-color: var(--blue-500); */
  background-color: hsl(207, 61%, 50%);
}

.file-label:hover .file-name {
  border-color: var(--gray-300);
}

.file-input {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  outline: 0;
  position: absolute;
}

.file-cta,
.file-name {
  font-size: 1rem;
  padding: .45rem .75rem .45rem .75em;
  position: relative;
  border-radius: 4px;
  padding-left: 1em;
  padding-right: 1em;
  white-space: nowrap;
}

.file-cta {
  /* background-color: var(--blue-500); */
  background-color: hsl(207, 61%, 53%);
  color: #fff;
  border-radius: 4px 0 0 4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
}

.file-icon {
  margin-right: .5em;
}

.file-name {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 1px solid #dbdbdb;
  border-left-width: 0;
  display: block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--white);
  transition: border-color 0.2s ease-in-out;
}