:root {
    --input-bg: hsl(298, 63%, 31%);
    --input-txt: white;
    --button-bg: hsl(298, 63%, 31%);
    --button-txt: white;
    --button-grey-bg: hsl(0, 0%, 90%);
    --button-grey-txt: black;
    --button-light-bg: hsl(298, 63%, 75%);
    --button-light-txt: black;
}

date-field-material {
    background-color: lightgray;
    border-bottom: 1px solid gray;
    font-size: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

date-field-material>icon {
    padding: 0.75rem;
}

date-field-material>input {
    flex-grow: 1;
    line-height: 1;
    padding: 0.75rem;
}

password-field-material {
    background-color: lightgray;
    border-bottom: 1px solid gray;
    font-size: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

password-field-material>icon {
    padding: 0.75rem;
}

password-field-material>row {
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
}

password-field-material>row>input {
    flex-grow: 1;
    line-height: 1;
    padding: 0.75rem;
}

password-field-material>row>text {
    pointer-events: none;
    opacity: 0.5;
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    transition: 0.1s font-size, 0.1s top;
}

password-field-material>row>input:not(:placeholder-shown)+text {
    font-size: 0.5em;
    top: 0.25rem;
}

password-field-material>row>icon {
    cursor: pointer;
    padding: 0.75rem;
}

password-field-material>row>input:placeholder-shown+text+icon {
    visibility: hidden;
    pointer-events: none;
}

text-area-material {
    background-color: lightgray;
    border-bottom: 1px solid gray;
    font-size: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

text-area-material {
    position: relative;
    align-items: center;
}

text-area-material>textarea {
    flex-grow: 1;
    line-height: 1;
    padding: 0.75rem;
}

text-area-material>text {
    pointer-events: none;
    opacity: 0.5;
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    transition: 0.1s font-size, 0.1s top;
}

text-area-material>textarea:not(:placeholder-shown)+text {
    font-size: 0.5em;
    top: 0.25rem;
}

text-field-material {
    background-color: lightgray;
    border-bottom: 1px solid gray;
    font-size: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

text-field-material>icon {
    padding: 0.75rem;
}

text-field-material>row {
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
}

text-field-material>row>input {
    flex-grow: 1;
    line-height: 1;
    padding: 0.75rem;
}

text-field-material>row>text {
    pointer-events: none;
    opacity: 0.5;
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    transition: 0.1s font-size, 0.1s top;
}

text-field-material>row>input:not(:placeholder-shown)+text {
    font-size: 0.5em;
    top: 0.25rem;
}

text-field-material>row>icon {
    cursor: pointer;
    padding: 0.75rem;
}

text-field-material>row>input:placeholder-shown+text+icon {
    visibility: hidden;
    pointer-events: none;
}