#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;
    }

    .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 {
      h3 {
        margin-bottom: 20px;
      }

      .invite-users-message {
          margin: 10px 0 0 0;
          clear: both;
      }

      .invite-users__img {
        width: 50%;
        float: left; 
      }

      .invite-users__individually-container {
        padding-bottom: 25px;
        margin-top: 10px;
        margin-bottom: 25px;
        border-bottom: 1px solid #eee;
      }

      .invite-users__individually {
        float: left;
        width: 50%;
        padding-left: 20px;
        .button {
          margin-top: 0;
        }
        p {
          margin-top: 5px;
        }
      }

      .invite-role-button {
        margin-top: 15px;
      }

      .next {
        float: right;
        cursor: pointer;
      }
    }
}

.clef-settings__buttons p.submit {
  margin-top: 0;
  margin-right: 10px;
  float: left;
}
