#clef-settings-container, #connect-clef-account {
    width: 100%;
    height: 100%;
    position: relative;

    * {
        box-sizing: border-box;
    }

    .message {
        margin-top: 20px;
        margin-left: 0;
        display: none;
    }
    #clef-settings {
        position: aboslute;
        top: 0;
        left: 0;
    }

    .settings-section {
        background: white;
        padding: 20px;
        margin: 20px 0;
        h3, h4 {
            margin: 0;
        }
        margin-left: 0 !important;
        @include outer-container();

        .error.form-error {
            float: left;
        }

        .inputs-container {
            @include span-columns(6);
            @include media($tablet) {
                @include span-columns(10 of 10);
            }
            .input-container {
                background: #EEE;
                padding: 10px;
                margin: 10px 0;
                @include span-columns(10 of 10);
                label {
                    @include span-columns(5);
                    @include media($tablet) {
                        @include span-columns(10 of 10);
                    }
                    margin-right: 0 !important;
                }
                input, select {
                    float: right;
                    @include media($tablet) {
                        clear: both;
                        float: none;
                        margin: 10px 0;
                    }
                    width: auto;
                    margin: 0;
                    margin-bottom: 5px;
                }
                input[type="checkbox"] {
                    @include media($tablet) {
                        width: 25px;
                    }
                }
            }

            .ajax-settings-msg {
                clear: both;
                margin:0; margin-bottom: 20px;
                position: relative; top: 10px;
            }
        }

        &.multisite {
            .inputs-container {
                @include span-columns(5);
                .input-container {
                    @include span-columns(5 of 5);
                }
            }
        }
    }

    .sync {
        .spinner-container {
            text-align: center;
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            height: 100%;
            .spinner {
                display: inline-block;
                float: none;
            }
        }

        iframe {
            display: none;
        }
    }

    .invite-users {
        .invite-users-message {
            margin: 10px 0 0 0;
            clear: both;
        }
        .header {
            h3, h4 {
                margin-top: 0;
                margin-bottom: 5px;
            }
        }
        .button {
            margin-top: 20px;
        }
    }
}