.container {
  position: relative;
  display: flex;
  justify-content: center; }
  .container:hover > .tooltipContainer {
    display: inline-block; }

.tooltipContainer {
  display: none;
  position: absolute;
  width: 190px;
  line-height: 1;
  z-index: var(--z-index-tooltip); }
  .tooltipContainer.top {
    bottom: calc(100% + 4px);
    left: calc(50%);
    transform: translateX(-50%);
    text-align: center; }
  .tooltipContainer.top-right {
    bottom: calc(100% + 4px);
    right: 0;
    text-align: right; }
  .tooltipContainer.top-left {
    bottom: calc(100% + 4px);
    left: 0;
    text-align: left; }
  .tooltipContainer.right {
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    text-align: left; }
  .tooltipContainer.bottom {
    top: calc(100% + 4px);
    left: calc(50%);
    transform: translateX(-50%);
    text-align: center; }
  .tooltipContainer.bottom-right {
    top: calc(100% + 4px);
    right: 0;
    text-align: right; }
  .tooltipContainer.bottom-left {
    top: calc(100% + 4px);
    left: 0;
    text-align: left; }
  .tooltipContainer.left {
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    text-align: right; }
  .tooltipContainer.auto-width {
    width: auto;
    white-space: nowrap; }

.tooltip {
  display: inline-block;
  max-width: 190px;
  line-height: 1.33;
  padding: 4px 8px;
  font-size: var(--size-font-s);
  font-weight: normal;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-dark);
  border-radius: 4px; }

.web-4-0 .tooltip {
  color: var(--color-4-0-white);
  background-color: var(--color-4-0-dark); }

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex: 1; }
  .wrapper .icon {
    fill: var(--color-primary);
    margin-left: 2px; }
  .wrapper .tooltip {
    display: flex;
    align-items: center;
    font-size: var(--size-font-xs);
    color: var(--color-primary);
    text-transform: capitalize;
    line-height: 1.27; }
  .wrapper .label {
    color: var(--color-dark-lighter);
    font-size: var(--size-font-xs);
    line-height: 1.27; }
  .wrapper.web-4-0 .icon {
    fill: var(--color-4-0-purple); }
  .wrapper.web-4-0 .tooltip {
    color: var(--color-4-0-purple); }
  .wrapper.web-4-0 .label {
    color: var(--color-4-0-dark); }

.icon {
  --icon-size-s: 16px;
  --icon-size-m: 20px;
  --icon-size-l: 24px;
  --icon-size-xl: 32px;
  --icon-size-xs: 12px; }

.btn {
  --icon-size-s: 16px;
  --icon-size-m: 20px;
  --icon-size-l: 24px;
  --icon-size-xl: 32px;
  --icon-size-xs: 12px;
  --btn-padding-xs: 0 12px;
  --btn-padding-s: 0 11px;
  --btn-padding-m: 0 16px;
  --btn-padding-l: 0 24px;
  --btn-height-xxs: 20px;
  --btn-height-xs: 32px;
  --btn-height-s: 40px;
  --btn-height-m: 48px;
  --btn-height-l: 56px;
  --btn-icon-margin: 16px;
  --btn-icon-size-s: 32px;
  --btn-icon-size-m: 40px;
  --btn-icon-size-l: 48px; }

.icon {
  --icon-size-s: 16px;
  --icon-size-m: 20px;
  --icon-size-l: 24px;
  --icon-size-xl: 32px;
  --icon-size-xs: 12px; }

.inputContainerWrapper {
  --btn-padding-xs: 0 12px;
  --btn-padding-s: 0 11px;
  --btn-padding-m: 0 16px;
  --btn-padding-l: 0 24px;
  --btn-height-xxs: 20px;
  --btn-height-xs: 32px;
  --btn-height-s: 40px;
  --btn-height-m: 48px;
  --btn-height-l: 56px;
  --btn-icon-margin: 16px;
  --btn-icon-size-s: 32px;
  --btn-icon-size-m: 40px;
  --btn-icon-size-l: 48px;
  --icon-size-s: 16px;
  --icon-size-m: 20px;
  --icon-size-l: 24px;
  --icon-size-xl: 32px;
  --icon-size-xs: 12px;
  --input-padding-xs: 0 10px;
  --input-padding-s: 12px;
  --input-padding-m: 14px 16px;
  --input-padding-l: 17px 24px;
  --input-height-xs: 32px;
  --input-height-s: 40px;
  --input-height-m: 48px;
  --input-height-l: 56px;
  --input-insertion-padding: 4px; }

.inputContainerWrapper {
  display: inline-block;
  position: relative; }
  .inputContainerWrapper .inputContainer {
    position: relative; }
  .inputContainerWrapper .message {
    font-size: var(--size-font-s);
    line-height: 16px; }
    .inputContainerWrapper .message-error {
      color: var(--color-danger); }
  .inputContainerWrapper .absoluteMessage {
    position: absolute; }
  .inputContainerWrapper .label {
    position: absolute;
    bottom: 100%;
    line-height: 1.27;
    margin-bottom: 4px;
    color: var(--color-dark-lighter);
    font-size: var(--size-font-s); }
  .inputContainerWrapper .prefix,
  .inputContainerWrapper .suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; }
    .inputContainerWrapper .prefix .loader,
    .inputContainerWrapper .suffix .loader {
      position: absolute; }
    .inputContainerWrapper .prefix .loader-standalone,
    .inputContainerWrapper .suffix .loader-standalone {
      width: 20px;
      height: 20px; }
    .inputContainerWrapper .prefix .icon,
    .inputContainerWrapper .suffix .icon {
      color: var(--color-dark-light);
      fill: var(--color-dark-light); }
    .inputContainerWrapper .prefix .text,
    .inputContainerWrapper .suffix .text {
      color: var(--color-dark-lighter); }
    .inputContainerWrapper .prefix .icon.insertion-error,
    .inputContainerWrapper .prefix .text.insertion-error,
    .inputContainerWrapper .suffix .icon.insertion-error,
    .inputContainerWrapper .suffix .text.insertion-error {
      color: var(--color-danger);
      fill: var(--color-danger); }
    .inputContainerWrapper .prefix .icon.insertion-success,
    .inputContainerWrapper .prefix .text.insertion-success,
    .inputContainerWrapper .suffix .icon.insertion-success,
    .inputContainerWrapper .suffix .text.insertion-success {
      color: var(--color-success);
      fill: var(--color-success); }
    .inputContainerWrapper .prefix .icon.insertion-warning,
    .inputContainerWrapper .prefix .text.insertion-warning,
    .inputContainerWrapper .suffix .icon.insertion-warning,
    .inputContainerWrapper .suffix .text.insertion-warning {
      color: var(--color-warning);
      fill: var(--color-warning); }
  .inputContainerWrapper .stepButton {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    border: 1px solid var(--color-alice-blue-lighter);
    padding: 1px;
    cursor: pointer; }
    .inputContainerWrapper .stepButton svg {
      fill: var(--color-primary); }
  .inputContainerWrapper .minusButton {
    left: 4px; }
  .inputContainerWrapper .plusButton {
    right: 4px; }
  .inputContainerWrapper .prefix {
    left: var(--input-insertion-padding); }
  .inputContainerWrapper .suffix {
    right: var(--input-insertion-padding); }
  .inputContainerWrapper.xsmall {
    font-size: var(--size-font-xs); }
    .inputContainerWrapper.xsmall .prefix,
    .inputContainerWrapper.xsmall .suffix {
      width: var(--btn-icon-size-xs);
      height: var(--btn-icon-size-xs); }
  .inputContainerWrapper.small {
    font-size: var(--size-font-s); }
    .inputContainerWrapper.small .prefix,
    .inputContainerWrapper.small .suffix {
      width: var(--btn-icon-size-s);
      height: var(--btn-icon-size-s); }
  .inputContainerWrapper.medium {
    font-size: var(--size-font-m); }
    .inputContainerWrapper.medium .prefix,
    .inputContainerWrapper.medium .suffix {
      width: var(--btn-icon-size-m);
      height: var(--btn-icon-size-m); }
  .inputContainerWrapper.large {
    font-size: var(--size-font-l); }
    .inputContainerWrapper.large .prefix,
    .inputContainerWrapper.large .suffix {
      width: var(--btn-icon-size-l);
      height: var(--btn-icon-size-l); }
  .inputContainerWrapper.full {
    font-size: var(--size-font-l);
    width: 100%; }
    .inputContainerWrapper.full .prefix,
    .inputContainerWrapper.full .suffix {
      width: var(--btn-icon-size-l);
      height: var(--btn-icon-size-l); }
  .inputContainerWrapper.web-4-0 .message-error {
    color: var(--color-4-0-danger); }
  .inputContainerWrapper.web-4-0 .prefix .icon,
  .inputContainerWrapper.web-4-0 .suffix .icon {
    color: var(--color-4-0-dark-lighter);
    fill: var(--color-4-0-dark-lighter); }
  .inputContainerWrapper.web-4-0 .prefix .text,
  .inputContainerWrapper.web-4-0 .suffix .text {
    color: var(--color-4-0-dark-lighter); }
  .inputContainerWrapper.web-4-0 .prefix .icon.insertion-error,
  .inputContainerWrapper.web-4-0 .prefix .text.insertion-error,
  .inputContainerWrapper.web-4-0 .suffix .icon.insertion-error,
  .inputContainerWrapper.web-4-0 .suffix .text.insertion-error {
    color: var(--color-4-0-danger);
    fill: var(--color-4-0-danger); }
  .inputContainerWrapper.web-4-0 .prefix .icon.insertion-success,
  .inputContainerWrapper.web-4-0 .prefix .text.insertion-success,
  .inputContainerWrapper.web-4-0 .suffix .icon.insertion-success,
  .inputContainerWrapper.web-4-0 .suffix .text.insertion-success {
    color: var(--color-4-0-success);
    fill: var(--color-4-0-success); }
  .inputContainerWrapper.web-4-0 .prefix .icon.insertion-warning,
  .inputContainerWrapper.web-4-0 .prefix .text.insertion-warning,
  .inputContainerWrapper.web-4-0 .suffix .icon.insertion-warning,
  .inputContainerWrapper.web-4-0 .suffix .text.insertion-warning {
    color: var(--color-4-0-accent);
    fill: var(--color-4-0-accent); }
  .inputContainerWrapper.web-4-0 .stepButton {
    border: 1px solid var(--color-4-0-chinese-white); }
    .inputContainerWrapper.web-4-0 .stepButton svg {
      fill: var(--color-4-0-purple); }

.input {
  width: 100%;
  border-radius: 2px;
  border: none;
  font-weight: normal;
  border: solid 1px transparent;
  transition: border var(--anim-transition-time), background-color var(--anim-transition-time); }
  .input.masked {
    letter-spacing: 5px; }
  .input:active, .input:focus {
    outline: none; }
  .input:disabled {
    color: var(--color-black-disabled-text);
    fill: var(--color-black-disabled-text);
    background-color: var(--color-black-tr-lighter);
    border: solid 1px transparent;
    cursor: not-allowed; }
    .input:disabled::placeholder {
      color: var(--color-black-disabled-text); }
  .input .steppedInput .input {
    padding: 0 30px; }
  .input.xsmall {
    height: var(--input-height-xs);
    padding: var(--input-padding-xs);
    font-size: var(--size-font-xs); }
    .input.xsmall.withPrefix {
      padding-left: var(--btn-height-xs); }
    .input.xsmall.withSuffix {
      padding-right: var(--btn-height-xs); }
  .input.small {
    height: var(--input-height-s);
    padding: var(--input-padding-s);
    font-size: var(--size-font-m); }
    .input.small.withPrefix {
      padding-left: var(--btn-height-s); }
    .input.small.withSuffix {
      padding-right: var(--btn-height-s); }
  .input.medium {
    height: var(--input-height-m);
    padding: var(--input-padding-m);
    font-size: var(--size-font-m); }
    .input.medium.withPrefix {
      padding-left: var(--btn-height-m); }
    .input.medium.withSuffix {
      padding-right: var(--btn-height-m); }
  .input.large, .input.full {
    height: var(--input-height-l);
    padding: var(--input-padding-l);
    font-size: var(--size-font-l); }
    .input.large.withPrefix, .input.full.withPrefix {
      padding-left: var(--btn-height-l); }
    .input.large.withSuffix, .input.full.withSuffix {
      padding-right: var(--btn-height-l); }
  .input::-ms-reveal {
    display: none; }

.web-4-0 {
  color: var(--color-4-0-dark); }
  .web-4-0 input {
    color: var(--color-4-0-dark) !important; }
    .web-4-0 input:focus, .web-4-0 input:placeholder-shown:focus {
      background-color: var(--color-4-0-white) !important;
      color: var(--color-4-0-dark) !important; }
    .web-4-0 input::placeholder {
      color: var(--color-4-0-dark-lighter) !important; }
  .web-4-0:disabled {
    color: var(--color-4-0-dark-lighter);
    fill: var(--color-4-0-dark-lighter);
    background-color: var(--color-black-tr-lighter); }
  .web-4-0 .default,
  .web-4-0 .info {
    background-color: var(--color-4-0-purple-lighter);
    color: var(--color-dark);
    fill: var(--color-dark); }
    .web-4-0 .default::placeholder,
    .web-4-0 .info::placeholder {
      color: var(--color-dark-lighter); }
    .web-4-0 .default:placeholder-shown:not(:disabled),
    .web-4-0 .info:placeholder-shown:not(:disabled) {
      border: solid 1px var(--color-black-outline); }
    .web-4-0 .default:hover:not(:disabled),
    .web-4-0 .info:hover:not(:disabled) {
      border: solid 1px var(--color-purple-tr-light); }
    .web-4-0 .default:focus, .web-4-0 .default:placeholder-shown:focus,
    .web-4-0 .info:focus,
    .web-4-0 .info:placeholder-shown:focus {
      background-color: var(--color-white);
      border: solid 1px var(--color-purple); }
  .web-4-0 .error {
    background-color: var(--color-4-0-light-red);
    color: var(--color-dark);
    fill: var(--color-dark); }
    .web-4-0 .error::placeholder {
      color: var(--color-dark-lighter); }
    .web-4-0 .error:placeholder-shown:not(:disabled) {
      border: solid 1px var(--color-black-outline); }
    .web-4-0 .error:hover:not(:disabled) {
      border: solid 1px var(--color-danger-tr-light); }
    .web-4-0 .error:focus, .web-4-0 .error:placeholder-shown:focus {
      background-color: var(--color-white);
      border: solid 1px var(--color-danger); }
  .web-4-0 .success {
    background-color: var(--color-4-0-light-green);
    color: var(--color-dark);
    fill: var(--color-dark); }
    .web-4-0 .success::placeholder {
      color: var(--color-dark-lighter); }
    .web-4-0 .success:placeholder-shown:not(:disabled) {
      border: solid 1px var(--color-black-outline); }
    .web-4-0 .success:hover:not(:disabled) {
      border: solid 1px var(--color-success-tr-light); }
    .web-4-0 .success:focus, .web-4-0 .success:placeholder-shown:focus {
      background-color: var(--color-white);
      border: solid 1px var(--color-success); }
  .web-4-0 .warning {
    background-color: var(--color-4-0-light-red);
    color: var(--color-dark);
    fill: var(--color-dark); }
    .web-4-0 .warning::placeholder {
      color: var(--color-dark-lighter); }
    .web-4-0 .warning:placeholder-shown:not(:disabled) {
      border: solid 1px var(--color-black-outline); }
    .web-4-0 .warning:hover:not(:disabled) {
      border: solid 1px var(--color-warning-tr-light); }
    .web-4-0 .warning:focus, .web-4-0 .warning:placeholder-shown:focus {
      background-color: var(--color-white);
      border: solid 1px var(--color-warning); }
  .web-4-0 .default-white {
    background-color: var(--color-4-0-white);
    color: var(--color-dark);
    fill: var(--color-dark); }
    .web-4-0 .default-white::placeholder {
      color: var(--color-dark-lighter); }
    .web-4-0 .default-white:placeholder-shown:not(:disabled) {
      border: solid 1px var(--color-black-outline); }
    .web-4-0 .default-white:hover:not(:disabled) {
      border: solid 1px var(--color-purple-tr-light); }
    .web-4-0 .default-white:focus, .web-4-0 .default-white:placeholder-shown:focus {
      background-color: var(--color-white);
      border: solid 1px var(--color-purple); }
  .web-4-0::placeholder {
    color: var(--color-4-0-dark-lighter); }

.default,
.info {
  background-color: var(--color-white-dark);
  color: var(--color-dark);
  fill: var(--color-dark); }
  .default::placeholder,
  .info::placeholder {
    color: var(--color-dark-lighter); }
  .default:placeholder-shown:not(:disabled),
  .info:placeholder-shown:not(:disabled) {
    border: solid 1px var(--color-black-outline); }
  .default:hover:not(:disabled),
  .info:hover:not(:disabled) {
    border: solid 1px var(--color-primary-tr-light); }
  .default:focus, .default:placeholder-shown:focus,
  .info:focus,
  .info:placeholder-shown:focus {
    background-color: var(--color-white);
    border: solid 1px var(--color-primary); }

.error {
  background-color: var(--color-danger-tr-lighter);
  color: var(--color-dark);
  fill: var(--color-dark); }
  .error::placeholder {
    color: var(--color-dark-lighter); }
  .error:placeholder-shown:not(:disabled) {
    border: solid 1px var(--color-black-outline); }
  .error:hover:not(:disabled) {
    border: solid 1px var(--color-danger-tr-light); }
  .error:focus, .error:placeholder-shown:focus {
    background-color: var(--color-white);
    border: solid 1px var(--color-danger); }

.success {
  background-color: var(--color-success-tr-lighter);
  color: var(--color-dark);
  fill: var(--color-dark); }
  .success::placeholder {
    color: var(--color-dark-lighter); }
  .success:placeholder-shown:not(:disabled) {
    border: solid 1px var(--color-black-outline); }
  .success:hover:not(:disabled) {
    border: solid 1px var(--color-success-tr-light); }
  .success:focus, .success:placeholder-shown:focus {
    background-color: var(--color-white);
    border: solid 1px var(--color-success); }

.warning {
  background-color: var(--color-warning-tr-lighter);
  color: var(--color-dark);
  fill: var(--color-dark); }
  .warning::placeholder {
    color: var(--color-dark-lighter); }
  .warning:placeholder-shown:not(:disabled) {
    border: solid 1px var(--color-black-outline); }
  .warning:hover:not(:disabled) {
    border: solid 1px var(--color-warning-tr-light); }
  .warning:focus, .warning:placeholder-shown:focus {
    background-color: var(--color-white);
    border: solid 1px var(--color-warning); }

.default-white {
  background-color: var(--color-white);
  color: var(--color-dark);
  fill: var(--color-dark); }
  .default-white::placeholder {
    color: var(--color-dark-lighter); }
  .default-white:placeholder-shown:not(:disabled) {
    border: solid 1px var(--color-black-outline); }
  .default-white:hover:not(:disabled) {
    border: solid 1px var(--color-primary-tr-light); }
  .default-white:focus, .default-white:placeholder-shown:focus {
    background-color: var(--color-white);
    border: solid 1px var(--color-primary); }

.left {
  text-align: left; }

.center {
  text-align: center; }

.right {
  text-align: right; }

.edgeFont {
  font-family: initial; }

.labelContainer {
  display: flex;
  flex: 1;
  justify-content: space-between; }

input.container.masked {
  font-size: 25px;
  letter-spacing: 5px; }