/**
 * Lomaketyylit
 * ============ */


.lohko-lomake {
    fieldset.InputfieldFieldset {
        padding-inline: 0;
        margin-block: 4%;
        border: 0;

        legend {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: #273756;
            font-family: 'Noto Serif', serif;
        }
    }

    .Inputfield {
        border: 0;
        padding: 0;
        margin-inline: 0;
        margin-block: 2%;

        &.InputfieldColumnWidth {
            padding-right: 1%;

            + .InputfieldColumnWidth {
                padding-right: 0;
            }
        }

        &.InputfieldCheckbox > .InputfieldHeader {
            display: none;
        }
    }

    .Inputfield.InputfieldStateRequired {
        label.InputfieldHeader::after,
        &.InputfieldCheckbox label > span::after {
            content: ' *';
            color: firebrick;
        }
    }

    .Inputfield > .InputfieldHeader,
    .Inputfield.InputfieldCheckbox label > span {
        font-family: 'Noto Serif', serif;
    }

    .Inputfield > .InputfieldContent {
        input, textarea, select {
            font-size: 14px;
            font-weight: 700;
            height: 50px;
            width: 100%;
            border-radius: 50px;
            border: 2px solid #EAE6DF;
            padding: 0 30px;
            background: #EAE6DF;
            -webkit-transition: background .3s;
            -o-transition: background .3s;
            transition: background .3s;
            outline: 0;
        }

        textarea {
            padding-block: 15px;
            min-height: 160px;
        }

        button {
            float: right;
            color: #8B5E20;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            padding: 14px 40px;
            min-width: 160px;
            border-radius: 50px;
            letter-spacing: .050em;
            text-decoration: none;
            background: #fff;
            border: 2px solid #8B5E20;
            -webkit-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s;

            &:hover {
                color: #fff;
                background-color: #273756;
                border: 2px solid #273756;
                -webkit-transform: translateY(-5px);
                -ms-transform: translateY(-5px);
                transform: translateY(-5px);
                -webkit-box-shadow: 0 20px 38px rgba(0, 0, 0, .16);
                box-shadow: 0 20px 38px rgba(0, 0, 0, .16);
            }
        }
    }

    .Inputfield.InputfieldCheckbox,
    .Inputfield.InputfieldCheckboxes,
    .Inputfield.InputfieldRadios {
        > .InputfieldContent {
            label {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 1rem;
            }
            input {
                width: 20px;
                height: 20px;
                margin-top: .2em;
                accent-color: #8B5E20;
            }
        }
    }

    p.alert {
        padding: 0;
        padding-left: 1em;
        background-color: transparent;
        border-left: 4px solid transparent;
        border-radius: 0;

        &.alert-success {
            border-left-color: forestgreen;
        }
        &.alert-error {
            border-left-color: firebrick;
        }
    }

    .FormBuilderErrors {
        > .alert {
            color: firebrick;

            &:not(:first-child) {
                display: none !important;
            }
        }
    }
}

h2 + .lohko-lomake,
.pw-edit + .lohko-lomake {
    margin-top: 2rem;
}