.form-field {
    margin: 20px 0;
    color: var(--blue-400);
    font-weight: 300;
    display: grid;
    gap: 4px;
}

.form-field input, 
.form-field textarea {
    color: var(--blue-400);
    display: block;
    width: 100% !important;
    font-weight: 400;
    line-height: 1.5;
    background-color: var(--white);
    background-clip: padding-box;
    appearance: none;
    padding: 0.5em 0.75em;
    border: 1px solid var(--grey-100);
    border-radius: 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    
    /* transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
}

.form-field input[type=date] {
	min-height: calc(/* border-block-width */ 1px * 2 + /* padding-block */ 0.5em * 2 + 1em * /* line-height */ 1.5);
    white-space: nowrap;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: 1px solid var(--blue-200);
}

.form-field input::placeholder, 
.form-field textarea::placeholder {
    color: var(--grey-200);
    font-size: inherit;
    font-weight: 300;
}

.form-field input:focus::-webkit-input-placeholder { opacity: 0; }
.form-field input:focus::-moz-placeholder { opacity: 0; }
.form-field input:focus:-moz-placeholder { opacity: 0; } 
.form-field input:focus:-ms-input-placeholder { opacity: 0; } 

.form-field textarea:focus::-webkit-input-placeholder { opacity: 0; }
.form-field textarea:focus::-moz-placeholder { opacity: 0; }
.form-field textarea:focus:-moz-placeholder { opacity: 0; } 
.form-field textarea:focus:-ms-input-placeholder { opacity: 0; }

.form-field input::placeholder { transition: opacity 0.3s; }
.form-field textarea::placeholder { transition: opacity 0.3s; }

.form-field label {
    font-size: 0.75em;
    font-weight: inherit;
    display: inline-block;
}

.form-field:has(output:not(:empty)) input {
    outline: 1px solid var(--red);
    color: var(--red);
}

.form-field:has(output:not(:empty)) textarea {
    outline: 1px solid var(--red);
    color: var(--red);
}

.form-field:has(output:not(:empty)) input:focus {
    outline: 1px solid var(--red);
}

.form-field:has(output:not(:empty)) textarea:focus {
    outline: 1px solid var(--red);
}

.form-field .form-txt-hint {
    color: var(--grey-200);
    font-size: 0.75em;
    margin: 0;
}

.form-field .form-txt-hint:empty {
    display: none;
}

.form-field output {
    color: var(--red);
    font-size: 0.75em;
    width: 100%;
    padding: 0;
}

.form-field output:empty {
    display: none;
}

.form-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.form-shell button {
    right: 15px;
    top: 50%;
    border: none;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin-left: -35px;
    background: none;
    padding: 0;
}

.form-shell button svg {
    width: 100%;
    height: 100%;
    fill: var(--grey-200);
}

.form-shell button svg:hover {
    fill: var(--blue-400);
}