.wizard-create-project {
    @include lightbox;
    .close {
        @include svg-size(2rem);
    }
    form {
        width: 700px;
    }
    header {
        margin-bottom: 3rem;
        .title {
            margin-bottom: 0;
        }
        .subtitle {
            @include font-size(small);
            color: $gray-light;
            text-align: center;
        }
    }
    .template-selector-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    .template-selector {
        display: flex;
        margin-bottom: 1rem;
        input {
            display: none;
        }
        fieldset {
            &:first-child {
                margin-right: .5rem;
            }
        }
    }
    input {
        &:checked+label {
            background: $primary-light;
            color: $white;
            transition: background .2s ease-in;
            &:hover {
                background: $primary-light;
            }
        }
        +label {
            background: rgba($whitish, .7);
            cursor: pointer;
            display: block;
            padding: 2rem 1rem;
            text-align: center;
            transition: background .2s ease-in;
            &:hover {
                background: rgba($primary-light, .3);
                transition: background .2s ease-in;
            }
            .icon {
                @include svg-size(1.5rem);
                fill: currentColor;
                margin-right: .3rem;
                vertical-align: text-top;
            }
            .template-name {
                @include font-size(large);
                text-transform: uppercase;
            }
        }
    }
    input[disabled]+label {
        background: lighten($whitish, 5%);
        box-shadow: none;
        color: lighten($gray-light, 20%);
        cursor: not-allowed;
        opacity: .65;
        &:hover {
            background: lighten($whitish, 5%);
            color: lighten($gray-light, 20%);
        }
    }
    .template-data {
        legend {
            display: block;
            margin-bottom: .5rem;
        }
        input,
        textarea {
            background: none;
            border: 1px solid $whitish;
            color: $gray-light;
            @include placeholder {
                color: darken($whitish, 20%);
            }
        }
        textarea {
            height: 7rem;
            min-height: 7rem;
        }
    }
    .template-privacity {
        display: flex;
        fieldset {
            margin-bottom: 0;
            &:first-child {
                margin-right: .5rem;
            }
        }
        input {
            display: none;
        }
        label {
            display: block;
            text-align: center;
            text-transform: uppercase;

        }
        input+label {
            padding: 1rem;
        }
        svg {
            @include svg-size(.7rem);
        }
    }
    .create-warning {
        @include font-size(small);
        padding: 1rem;
        text-align: center;
        .icon-exclamation {
            fill: $red-light;
            margin-right: .5rem;
            vertical-align: middle;
        }
        a {
            color: $primary;
            display: inline-block;
            margin-left: .25rem;
        }
    }
    .button-green {
        display: block;
        margin: 1rem 5rem;
        width: calc(100% - 10rem);
    }
}