:root {
  /* Color: Blue */
  --color-blue: #0061EB;
  --color-blue-light: #0069FF;

  /* Color: Red */
  --color-red: #CD2727;
  --color-red-light: #DB2323;

  /* Color: Orange */
  --color-orange: #F27014;
  --color-orange-light: #FD7B1F;

  /* Color: Yellow */
  --color-yellow: #E8BB00;
  --color-yellow-light: #EEC000;

  /* Color: Pink */
  --color-pink: #EC46DA;
  --color-pink-light: #F74FE5;

  /* Color: Purple */
  --color-purple: #9C6EE8;
  --color-purple-light: #AB7DF6;

  /* Color: Green */
  --color-green: #36AA27;
  --color-green-light: #40B630;

  /* Color: Grey */
  --color-grey: #6A7D95;
  --color-grey-light: #75869C;

  /* Color: Black */
  --color-black: #203148;
  --color-black-light: #2C405A;
}

body {
  background-color: transparent;
}

input,
textarea,
select {
  border: 1px solid rgba(0, 0, 0, 0.35);
  font-size: 15px;
  letter-spacing: -0.25px;
  padding: 10px 12px;
  border-radius: 1px;
  transition: border-color 100ms linear;
}

input + label,
textarea + label,
select + label {
  color: #000000;
  font-size: 13px;
  letter-spacing: -0.35px;
  transition: color 100ms linear;
  -webkit-text-size-adjust: none;
}

input:hover,
textarea:hover,
select:hover {
  border-color: rgba(0, 0, 0, 0.55);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--theme-accent);
}

input:focus + label,
textarea:focus + label,
select:focus + label {
  color: var(--theme-accent);
}

input::placeholder,
textarea::placeholder,
select[data-selected="false"] {
  color: rgba(0, 0, 0, 0.50);
}

input,
textarea,
select,
input:disabled,
textarea:disabled,
select:disabled {
  background-color: #FFFFFF;
}

input {
  height: auto;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.field-select {
  position: relative;
}

.field-select select,
.field-select::after {
  cursor: pointer;
}

.field-select select {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: block;
}

.field-select select::-ms-expand {
  display: none;
}

.field-select select:focus {
  outline: none;
}

.field-select select option {
  font-weight: normal;
}

.field-select::after {
  content: "";
  background-image: url('../../../../../urn-crisp.im-contact-form-0/assets/images/common/field-select-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 11px;
  height: 7px;
  position: absolute;
  top: 50%;
  right: 21px;
  transform: translateY(-50%);
  opacity: 0.35;
  z-index: 1;
  transition: opacity 100ms linear;
}

.field-select:hover::after {
  opacity: 0.6;
}

.button {
  color: #FFFFFF;
  border: 0 none;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: -0.15px;
  cursor: pointer;
  padding: 12px 22px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
  border-radius: 2px;
  transition: all 100ms linear;
  transition-property: color, background-color, box-shadow, transform;
}

.button,
.button:hover,
.button:focus,
.button:active {
  text-decoration: none;
}

.button:hover,
.button:focus {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.button:active {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(1px);
}

.button--blue {
  background-color: var(--color-blue);
}

.button--blue:hover,
.button--blue:active {
  background-color: var(--color-blue-light);
}

.button--red {
  background-color: var(--color-red);
}

.button--red:hover,
.button--red:active {
  background-color: var(--color-red-light);
}

.button--orange {
  background-color: var(--color-orange);
}

.button--orange:hover,
.button--orange:active {
  background-color: var(--color-orange-light);
}

.button--yellow {
  background-color: var(--color-yellow);
}

.button--yellow:hover,
.button--yellow:active {
  background-color: var(--color-yellow-light);
}

.button--pink {
  background-color: var(--color-pink);
}

.button--pink:hover,
.button--pink:active {
  background-color: var(--color-pink-light);
}

.button--purple {
  background-color: var(--color-purple);
}

.button--purple:hover,
.button--purple:active {
  background-color: var(--color-purple-light);
}

.button--green {
  background-color: var(--color-green);
}

.button--green:hover,
.button--green:active {
  background-color: var(--color-green-light);
}

.button--grey {
  background-color: var(--color-grey);
}

.button--grey:hover,
.button--grey:active {
  background-color: var(--color-grey-light);
}

.button--black {
  background-color: var(--color-black);
}

.button--black:hover,
.button--black:active {
  background-color: var(--color-black-light);
}

.button--icon {
  padding-left: 19px;
}

.button--icon svg {
  fill: #FFFFFF;
  height: 12px;
  margin-right: 12px;
  flex: 0 0 auto;
}

.button--icon.button--icon-lone {
  padding-left: 16px;
  padding-right: 16px;
}

.button--icon.button--icon-lone svg {
  margin-right: 0;
}

.button--disabled {
  opacity: 0.2;
  pointer-events: none;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-cut {
  hyphens: auto;
  word-break: break-word;
}

.text-select,
.text-select * {
  user-select: text;
  -webkit-user-select: text;
}

a {
  color: var(--theme-accent);
}

@-moz-document url-prefix() {
  select {
    text-indent: -2px;
  }
}