.wizard-head:not([data-first-step="true"])
{
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: steps(3);
}

fieldset.submission.selected,
.field.registration-type,
.field.driver-type
{
    margin-bottom: 0;
}

.field.registration.selected,
fieldset.driver
{
    margin-top: steps(3);
    margin-bottom: 0;
}


.submission.photos
{
    padding-top: steps(3);
    border-top: 1px solid $color-border-normal;
    margin-top: steps(4) - 1px;
    margin-bottom: steps(-1);

    @include for-at-most-small-tablets
    {
        margin-left: -$gutter;
        margin-right: -$gutter;
    }

    .views
    {
        @include page-container;
        @include column-container("li");

        counter-reset: list;

        > li
        {
            @include one-quarter-column;
            @include content-padding;

            margin-bottom: steps(3);
        }

        img
        {
            border: solid 1px $color-border-normal;
            margin-bottom: steps(2);
        }

        .name
        {
            @include baseline-box(16px, 25px, 0.7px);

            padding-left: steps(5);

            font-weight: bold;
            color: $color-text-darker;

            &::before
            {
                @include font-dimensions(14px, steps(3), 0.6px);

                counter-increment: list;
                content: counter(list);

                box-sizing: border-box;
                display: inline-block;
                width: steps(3);
                height: steps(3);
                border: solid 1px $color-text-darker;
                border-radius: 50%;
                margin-right: steps(2);
                margin-left: steps(-5);

                font-weight: normal;
                text-align: center;
            }
        }
    }
}

.panel.collision
{
    margin-bottom: steps(3);

    background: $color-background-dark;

    > .heading
    {
        @include small-heading;

        @include for-at-least-normal-tablets
        {
            @include page-content;

            text-align: center;
        }
    }

    .damages
    {
        padding: steps(3) 0 steps(4);
        border: solid $color-border-normal;
        border-width: 1px 0;
        margin-top: steps(4);
        margin-bottom: steps(3);

        @include for-at-most-small-tablets
        {
            padding-left: $gutter;
            padding-right: $gutter;
            margin-left: -$gutter;
            margin-right: -$gutter;
        }

        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(4);
        }

        > .note
        {
            @include for-at-most-small-tablets
            {
                margin-left: -$gutter;
                margin-right: -$gutter;
            }
        }

        .js & .fields,
        html:not(.js) & .scheme
        {
            display: none;
        }

        .selection
        {
            counter-reset: selection-list;

            margin: steps(3) steps(-1) steps(-1);

            @include for-at-least-normal-tablets
            {
                text-align: center;

                @include page-content;
            }

            &:empty
            {
                display: none;
            }

            > li
            {
                @include baseline-box(16px, steps(3), 0.5px, steps(1), steps(1));
                @include transition("border");

                position: relative;

                padding-left: steps(2);
                padding-right: steps(1);
                border: 1px solid $color-border-normal;
                margin: steps(1);

                background: $color-background-lighter;

                &::before
                {
                    counter-increment: selection-list;
                    content: counter(selection-list) ". ";
                }

                &:hover
                {
                    border-color: $color-border-darker;
                }

                @include for-phones
                {
                    padding-right: steps(6);

                    &:not(:last-child)
                    {
                        margin-bottom: steps(2);
                    }
                }

                @include for-at-least-tablets
                {
                    display: inline-block;
                    vertical-align: top;
                }
            }

            .remove
            {
                margin-left: steps(2);

                color: $color-text-inverted-lighter;
                background: $color-text-lightest;

                @include for-phones
                {
                    position: absolute;
                    top: steps(1);
                    right: steps(1);
                }

                &:hover,
                &:focus
                {
                    background-color: $color-text-lighter;
                }

                &::before
                {
                    content: svg-image-data-url("x", $color-background-lightest);

                    display: inline-block;
                    overflow: hidden;
                    width: steps(2);
                    height: steps(2);
                    padding: steps(0.5);

                    line-height: steps(2);
                    text-align: center;
                    vertical-align: top;
                }

                .text
                {
                    @include visually-hidden;
                }
            }
        }
    }

    .scheme
    {
        overflow-x: auto;
        padding: 0;

        svg
        {
            width: 631px;
            height: 450px;

            display: block;
            margin: 0 auto;
        }

        path
        {
            fill: none;
            stroke: $color-background-inverted-lightest;
        }

        .part
        {
            @include transition("fill");

            fill: $color-background-normal;

            &[id]
            {
                cursor: pointer;

                &:hover
                {
                    fill: darken($color-background-normal, 8%);
                }
            }

            $part-fills: (
                taillight: $color-text-lighter,
                headlight: $color-background-lightest,
                window: $color-chart-1-normal,
                tire: $color-background-inverted-lightest,
                selected: $color-brand-darker,
            );

            @each $part, $fill in $part-fills
            {
                &.#{$part}
                {
                    $hover-fill: darken($fill, 8%);

                    fill: $fill;

                    &:hover
                    {
                        fill: $hover-fill;
                    }
                }
            }
        }
    }
}

main
{
    .action.extra,
    .field.later,
    > .links
    {
        @include page-content;

        @include for-at-least-normal-tablets
        {
            text-align: center;
        }
    }

    > .links
    {
        @include list-links;

        margin-top: steps(3);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(5);
        }
    }

    .field.attachments
    {
        @include dropzone;
    }
}

.panels
{
    border-bottom: 1px solid $color-border-normal;
    margin-bottom: steps(3) - 1px;

    @include for-at-least-normal-tablets
    {
        margin-bottom: steps(5) - 1px;
    }

    .panel
    {
        margin: 0;

        &:nth-child(even)
        {
            background: none;
        }

        > .heading
        {
            @include baseline-box(16px, steps(3), 0.5px);

            margin-bottom: steps(2);

            font-weight: normal;

            @include for-at-least-normal-tablets
            {
                text-align: center;
            }
        }
    }

    hr
    {
        border: none;
        border-top: 1px solid $color-border-normal;
        margin-top: steps(3);
        margin-bottom: steps(3);
    }
}
