:root {
    --disabled: #c5c5c5;
    --fld--border: #d4d5d9;
    --warning: #ff1158;
    --valid: #a4ff11;
}

.content {
    grid-area: content;
    padding: 3rem 1.5rem;
}

.input__examples-des {
    padding-top: 2rem;
}



.label {
    display: inline-block;
    padding: 1rem 0;
    box-sizing: border-box;
    color: var(--color--dark);
}

.label-required-field::after {
    content: "*";
    color: var(--primary-color);
}

.field {
    width: 100%;
    display: block;
    padding: .8rem;
    border: 1px solid var(--fld--border);
    border-radius: 0.5rem;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    font-size: 1.4rem;
}

.field-hover {
    width: 100%;
    display: block;
    padding: .8rem;
    border: 1px solid var(--fld--border);
    border-radius: 0.5rem;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    font-size: 1.4rem;
}

.field-hover:hover {
    border: 2px solid var(--primary-color);
}


.field:focus {
    border: 2px solid var(--primary-color);
}


.active-field {
    border: 2px solid var(--primary-color);
}

.field:disabled {
    color: var(--disabled);
}

.disabled {
    color: var(--disabled);
}

.field:required:invalid {
    border-color: var(--warning);
}

.warning {
    border-color: var(--warning);
}

.warning-lbl {
    color: var(--warning);
}

.valid {
    border-color: var(--valid);
}

.valid-lbl {
    color: var(--valid);
}

.field:required:valid {
    border-color: var(--valid);
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-items {
    margin: .8rem 1.6rem;
}

.form-checkbox-field {
    width: 1.8rem;
    height: 1.8rem;
    outline: none;
    display: inline-block;
    border-radius: 0.3rem;
    margin-right: .8rem;
    position: relative;
    top: 0.15rem;
}

.example-container {
    display: flex;
}

.example-container:hover label {
    color: var(--secondary-color);
}

.example-container:hover .disabled {
    color: #3b3b3b;
}

.example-container:hover .warning-lbl {
    color: var(--warning);
}