.input {
    width: 100%;
    margin-bottom: var(--space-half);
    position: relative;
}

.input label {
    display: block;
    margin: 0 0 var(--space-quarter) 0;
}

.align-left label {
    justify-self: flex-start;
}

.align-right label {
    flex-grow: 1;
    justify-self: flex-end;
    text-align: right;
}

.align-right input {
    text-align: right;
}

.input input {
    background-color: var(--background-secondary);
    border-color: var(--background-quaternary);
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    font-family: var(--font-family);
    font-size: var(--size-default);
    font-weight: 400;
    height: 52px;
    padding: 0 var(--space-half);
    width: 100%;
    transition: border-color .2s ease-out;
    will-change: border-color;
}

.input input:focus {
    border-color: var(--color-blue);
    outline: none;
}

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

.input input[disabled] {
    background-color: var(--background-secondary) !important;
    border-color: var(--background) !important;
    color: var(--color-secondary) !important;
    cursor: not-allowed;
}

.isTransparent input[disabled] {
    border-color: var(--background);
    color: var(--color-default) !important;
    cursor: default;
}

.errorText {
    color: var(--color-softred) !important;
}

.errorText > span > span {
    margin-left: 5px;
}

.input input[type=checkbox] {
    width: auto;
    height: auto;
}
