* { margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix {
  clear:both;
}

.login-form{
  padding:20px;
}

body {
  font-family: 'Akzidenz',sans-serif;
  color: $gray1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > br {
  display: none;
}

.apps-home{
  padding: 20px;

  .apps-home-applist{
    list-style:none;
    width:200px;
  }

}

.apps-home-applistitem{
  vertical-align: middle;
  padding:10px;
  border:1px solid $gray5;
  &:nth-child(n+2) {
    margin-top: -1px;
  }

  .applistitem-links {
    float:right;
    .applistitem-name {
      font-size:1.2em;
    }

    .applistitem-edit {
      padding-right:5px;
      font-size:.8em;
    }
    .applistitem-remove {
      cursor:pointer;
      font-weight:bold;
      font-size:.8em;
    }
  }
}

.active {
  font-weight:bold;
}

.apphome{
  padding:20px;
  .title{
    font-size:2em;
    font-weight:bold;
  }
  .apptabs{
    margin-top:20px;
    .tab{
      padding:8px;
      margin-right:5px;
      border-left:1px solid $gray6;
      border-right:1px solid $gray6;
      border-top:1px solid $gray6;
    }

  }
 .svcs-list{
   margin:10px;
   width:300px;
   .svc-list-item{
     vertical-align: middle;
     padding:10px;
     border:1px solid $gray5;
     /*j.
       <span>{this.props.serviceName} ({this.props.service.type})</span>
       <span onClick={this.remove}>&times;</span>
     */
     &:nth-child(n+2) {
       margin-top: -1px;
     }
   }
    .svc-list-item-name{
      display:inline-block;
      float:left;
    }
    .svc-list-item-links{
      float:right;
      .svc-list-item-remove{
        cursor:pointer;
        font-weight:bold;
      }
    }
 }
}
.svcs-tab{
  .svc-add-button{
    padding:5px;
  }
}

.edit-auth{
  .auth-provider{
    border:1px solid $gray5;
    width:500px;
    margin-bottom:8px;
    border-radius:5px;
    &-header{
      padding:8px;
      display: flex;
      flex-direction: row;
      border-radius:5px;
      justify-content: flex-end;
      align-items: center;
      background-color: $gray8;
      &-title{
        margin-right: auto;
        font-weight: bold;
        font-size: 1.1em;
      }
      &-toggle{
        label{
          font-size: 12px;
          margin: 5px;
        }
      }
    }

    &-settings{
      margin:5px;
      &:empty {
        display:none;
      }
      &-is-disabled {
        margin:0px;
        display:none;
      }
    }
	&-inputs{
	  margin: 8px;
	}

  }

  .auth-provider-settings-enter{
    max-height:0;
    transition: all .3s ease-out;
  }
  .auth-provider-settings-enter.auth-provider-settings-enter-active{
    max-height:1000px;
  }
  .auth-provider-settings-leave{
    max-height:1000px;
    transition: all .3s ease-out;
  }
  .auth-provider-settings-leave.auth-provider-settings-leave-active{
    max-height:0px;
  }
}

.service-edit{
  margin-top:20px;
  margin-left:20px;
  .service-name{
    font-weight:bold;
    font-size:1.3em;
    margin-bottom:10px;
  }
  .service-edit-menu{
    width:150px;
    float:left;
    .service-edit-menu-item{
      padding:5px;
      border:1px solid $gray5;
      &:nth-child(n+2) {
        margin-top: -1px;
      }
    }
  }

}
.clearfix {
  overflow: auto;
  zoom: 1;
}

///////////////////
// BEM-ish stuff //
///////////////////
.auth-group,
.variables-table-wrapper,
.edit-rules {
  width: 100%;
  max-width: 850px;
  margin: auto;

  h3 {
    margin-bottom: 15px;
  }
  table {
    border: 1px solid $gray6;
    box-shadow: 0 2px 1px rgba(0,0,0,0.1);

    th {
      background-color: $gray8;
    }
    tr {
      &:hover {
        td {
          background-color: $gray8;
        }
      }
    }
  }
  .auth-provider-input {
    input {
      display: inline-block;
    }
  }
  button, input {
    margin-left: 5px;
  }
}

.variables-table-wrapper,
.edit-rules {
  table td {
    vertical-align: top;
  }
}

.tabs-content {
  // padding: 45px 25px;
}

.service-type{
  font-size:.8em;
  color: $gray4;
}

.main-content{
  // for correct alignment, this value should equal (2 * topnav_logo_margin + topnav_logo_height)
  // see topnav.scss
  padding-top: 37px;
}

.edit-config{
  max-width:600px;
  .edit-config-controls{
    margin-top: 10px;
  }
}

.facebook-signin-logo{
  height: 18px;
  width: 18px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAMAAABhTZc9AAAAM1BMVEU7V53////7/P33+Pvm6vPe4++erM9HYaPs7/bY3uu8xd6uutiXpstfd7BNZ6dGYKM+Wp8D8PpVAAAAS0lEQVQoz2MYIoCfh5OZkZkFuyQvCyMYYJVk52DEI8vGiE+WFSjBzY7LTUxAWT6cLgYbSnVZRiTAJIBPlhWvXi68smz4XTUqS6IsADRcAScdHoCmAAAAAElFTkSuQmCC);
  background-size:18px 18px;
}

.down-arrow{
  font-size: 12px;
}

// See https://dl.dropboxusercontent.com/u/3892745/icon/grab.svg
// https://github.com/FortAwesome/Font-Awesome/issues/816
// https://dl.dropboxusercontent.com/u/3892745/icon/License.txt
.drag-handle{
  background: url('./grab.svg') no-repeat;
  background-size: 100%;
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  width:10px;
  height:30px;
  display:inline-block;
  &:active{
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }
}

.indent{
  white-space: pre;
}

.pull-right{
  float:right;
}

.pull-left{
  float:left;
}

.row {
  display: flex;
  flex-direction: row;
  &-is-aligned {
    align-items: center;
  }
}
.column {
  display: flex;
  flex-direction: column;
}
.input-wrapper {
  label{
    font-size: 12px;
    text-transform: uppercase;
  }
}

.pointer {
  cursor:pointer;
}

.confirm-text{
  margin:30px;
  font-size: 1.3em;
  font-weight: bold;
}