@import 'variables';
#page-content.users-edit,#page-content.users-update,#page-content.organizations-create,#page-content.organizations-update{
  font-family: $helvetica;
  #notice{
    background:$green;
    color:white;
    padding:40px 0px 40px;
    text-align:center;
    position:relative;
    top:60px;
    left:0px;
    right:0px;
    &.error-notice{
      background: rgba(255, 80, 80, 0.7);
    }
  }
  .user-settings-page {
    padding-top:10px;
    width:900px;
    max-width:94%;
    margin:40px auto;
    font-size:15px;
    .finish-notice {
      background:rgb(102, 93, 162);
      max-width:95%;
      padding:25px 0px;
      text-align:center;
      margin:0px 0px 25px;
      color:white;
      font-weight:bold;
      border-radius:2px;
      .small {
        font-size:13px;
        font-weight:300;
        padding:15px 5px 5px;
        line-height:19px;
      }
    }
    .field-notice {
      background: white;
      max-width:95%;
      padding:25px 0px;
      text-align:center;
      margin:0px 0px 25px;
      color:$black;
      font-weight:bold;
      border-radius:2px;
      border: 1px solid $light-medium-gray;
      box-shadow: $shadow;
      .small {
        font-size:13px;
        font-weight:300;
        padding:15px 5px 5px;
        line-height:19px;
      }
    }
    .settings-hub {
      border-radius: 3px;
      list-style: none;
      font-size: 20px;
      font-family: $helvetica-condensed;
      font-stretch:condensed;
      margin: 0px auto;
      line-height: 33px;
      padding-left: 4px;
      width: 90%;
      margin-bottom: 15px;
      @media screen and ( min-width: 835px ) {
        float: left;
        width: 250px;
      }
      .single-settings-tab {
        padding-left: 5px;
        width: 210px;
        display:inline-block;
        color: $black;
        &.selected {
          background: $purple;
        }
      }
    }
    .settings-form {
      margin: 0px auto 50px;
      width: 94%;
      max-width:700px;
      float: left;
      h2{
       font-size: 2.5em;
      }
      @media screen and ( min-width: 835px ) {
        width: 66%;
      }
    }
    #error_explanation {
      max-width:calc(95% - 18px);
      margin-bottom:25px;
    }
    .big-button {
      display:inline-block;
      width:561px;
      max-width:calc(100% - 18px);
      padding:10px 0px;
      padding-left:10px;
      border-radius:3px;
      font-size: 1.2em;
      img {
        vertical-align:-3px;
        height: 1.2em;
        width: 1.2em;
      }
    }
    label {
      display:inline-block;
      vertical-align:top;
      padding:14px 0px 8px;
    }
    .field {
      input[type="checkbox"] {
        margin-top: 15px;
        display: inline;
        width: 100px;
      }
      select {
        margin-top: 15px;
      }
      &.checkbox-label-first {
        label {
          width: auto;
        }
      }
      .field-notice {
        text-align:right;
        .field-notice-inner {
          width:550px;
          max-width:calc(100% - 2vw);
          background:$red;
          color:white;
          padding:1vw;
          border-radius:5px;
          display:inline-block;
          text-align:center;
          margin-right:10px;
          line-height:1.5em;
          margin-top:10px;
          a {
            color:white;
            text-decoration:underline;
          }
        }
      }
    }
    .checkbox-field {
      display: flex;
      flex-direction: column;
      padding:10px 0px 20px;
      max-width:750px;
      font-size:17px;
      .sub-field {
        display:inline-block;
      }
      label {
        width:auto;
        display:inline;
        padding:0px;
      }
      input {
        display:inline;
        width:30px;
      }
      .field-explainer {
        opacity:0.7;
        margin:8px auto;
        width:87%;
        font-size:0.9em;
      }
    }
    .field_with_errors {
      display:inline-block;
      vertical-align:top;
      max-width:100%;
      input {
        border:2px solid rgb(237, 65, 65);
        background:rgb(252, 241, 243);
      }
    }
    form {
      input {
        width:650px;
        max-width:calc(100% - 30px);
        padding:12px;
        font-size:19px;
        border:1px solid rgb(222, 230, 233);
        border-radius:3px;
        &[type="file"] {
          border:0px;
        }
        &[type="submit"] {
          width:255px;
          max-width:100%;
          padding:14px 0px;
          margin-top:20px;
          font-size:1.8em;
          cursor: pointer;
          &.danger-button {
            background:$red;
          }
          &:hover {
            opacity:0.88;
          }
        }
      }
      button.big-action {
        width: 130px;
        padding: 3px 0px;
        font-size: 1.2em;
        font-weight: bold;
        border-radius: 3px;
        border: 0;
        &:hover {
          opacity: 0.88;
        }
        cursor: pointer;
        &.danger-button {
          background-color: $red;
          color: $off-white;
        }
        &:disabled {
          background-color: $light-medium-gray;
          &:hover {
            opacity: 1.0;
            cursor: not-allowed;
          }
        }
        img {
          vertical-align:-3px;
          height: 1.2em;
          width: 1.2em;
        }
      }
      .image-present {
        @media screen and ( max-width: 700px ) {
          display:block;
        }
        img {
          height:48px;width:48px;border-radius:70px;
          &.nav-image-version {
            height:auto;
            border-radius:0px;
          }
        }
        input {
          width:497px;
          max-width:calc(100% - 84px);
          vertical-align:top;
        }
      }
      textarea {
        border:1px solid rgb(222, 230, 233);
        width:550px;
        max-width:calc(100% - 30px);
        padding:12px;
        border-radius:3px;
        height:120px;
        font-size:16px;
        resize:none;
      }
    }
    h2 {
      font-size:calc(40px + 1vw);
      font-family: $helvetica-condensed;
      font-stretch:condensed;
      a {
        color: $black;
        background: $yellow;
      }
    }
    .secret-field {
      margin:30px 0px;
    }
    hr {
      opacity: 0.3;
      margin-top: 20px;
      width: 70%;
    }
  }
  .default-billing-message {
    margin:10px 0px;
  }
  .stripe-button-wrapper {
    height:40px;
  }
  .credit-card-button {
    background: lighten($blue, 3%);
    color: white;
    padding: 12px 25px;
    border:1px solid darken($blue,8%);
    border-radius:3px;
    cursor:pointer;
    font-size:1.3em;
    box-shadow: inset 0 -5px 5px darken($blue,2%);
    &:hover {
      opacity:0.95;
    }
    .remove-card {
      background : lighten($red, 3%);
    }
  }
  .billing-history-header {
    margin-top:35px;
    font-size:2em;
    border-bottom: 5px solid $black;
    padding:5px;
    width:270px;
  }
  .billing-item {
    padding:10px 5px;
    border-bottom: 1px solid $light-medium-gray;
    margin-top:5px;
    font-size:1.3em;
    &:hover{
      background: $light-gray;
    }
    .billing-item-detail {
      display: inline-block;
      color: $medium-gray;
      font-size: 0.8em;
      margin-top: 6px;
      margin-right: 6px;
      background: $light-gray;
      padding: 3px 8px;
      border-radius: 8px;
      border: 1px solid $light-medium-gray;
      &.billing-item-green {
        color: $green;
      }
      &.billing-item-blue {
        color: $blue;
      }
      &.billing-item-red {
        color: $red;
      }
    }
    form {
      display:inline-block;
      button {
        cursor:pointer;
        &:hover {
          color:$blue;
          border: 1px solid $blue;
        }
      }
    }
  }
}

.settings-hr {
  opacity:0.3;
  width:570px;
  max-width:98%;
  margin:0;
}

.github-repos {
  max-height:400px;
  overflow-y: auto;
  background: white;
  box-shadow: $shadow;
  &.loading-repos {
    height: 400px;
    background: white url(image_path('loading-ellipsis.svg')) no-repeat center center;
    background-size: 50px;
  }
  &.github-repos-errored {
    height: 400px;
  }
  .github-repo-row {
    background:white;
    padding: 12px;
    margin:5px 0px;
    &.github-repo-row-selected {
      background: $light-green;
    }
    .github-repo-row-name {
      font-weight:bold;
      button {
        cursor:pointer;
        font-size:1.2em;
        font-weight: bold;
        width: 130px;
        background: white;
        border:0px solid;
        border-radius:3px;
        padding: 3px 0px;
        margin-top:-5px;
        float: right;
        min-height: 28.5px;
        &:hover, &:focus {
          background: $green;
        }
        &:disabled {
          cursor: wait;
          background: white url(image_path('loading-ellipsis.svg')) no-repeat center center;
          background-size: 75px;
        }
      }
    }
    .github-repo-fork {
      margin-left: 5px;
      font-weight:400;
      background: $purple;
      color:$bold-blue;
      border-radius: 3px;
      padding: 1px 6px;
      font-size:0.9em;
    }
    .github-repo-featured-indicator {
      display:inline-block;
      float:right;
      background:$green;
      color:white;
      border:0px;
    }
  }
}

.settings-org-members {
  margin-bottom:50px;
  width:550px;
  max-width:92%;
  h3 {
    margin-bottom:18px;
  }
  .settings-org-member-row {
    padding:10px;
    font-size:20px;
    position:relative;
    width:100%;
    background: $light-gray;
    margin:3px 0px;
    border-left:5px solid darken($light-gray,5%);
    &.settings-org-admin-row {
      border-left:5px solid $green;
      background: $light-green;
    }
    .settings-org-member-actions {
      margin-top:5px;
    }
    form {
      display:inline-block;
    }
    .settings-org-member {
      background: $green;
      color:white;
      padding:3px 8px;
      border-radius:3px;
      font-size:0.7em;
      border:0px;
      cursor:pointer;
      &.settings-org-member-admin-self {
        cursor:default;
        background:$medium-gray;
      }
      &.settings-org-member-admin-other {
        background:$green;
        cursor:default;
      }
      &.settings-org-member-make-admin {
        color:$green;
        background: $light-green;
        border:1px solid $green;
      }
      &.settings-org-member-remove {
        color:$red;
        background:lighten($red,36%);
        border:1px solid $red;
      }
    }
  }
  h5 {
    color:$medium-gray;
    font-size:0.9em;
    margin-top:-18px;
    margin-bottom:10px;
  }
  .settings-org-secret {
    overflow-x:scroll;
    padding:7px;
    border:1px dashed $medium-gray;
    width:100%;
    border-radius:3px;
    font-size:1.1em;
  }
  .settings-generate-new-secret {
    margin-top:10px;
    background:$black;
    color:white;
    border:0px;
    padding:4px 14px;
    border-radius:3px;
    font-size: 15px;
    cursor:pointer;
    &:hover {
      background:lighten($black,14%);
    }
  }
}


.signout_confirm-wrapper {
  padding:calc(15% + 50px) 2% 30%;
  text-align:center;
}

.org-widget-preview .primary-sticky-nav{
  margin-top: 10px;
  position: initial;
  font-size: 1.2em;
}

ul.delete__account{
  li{
    padding-bottom: 5px;
  }
}

.api__secret {
  &__container {
    background-color: $off-white;
    height: 6.5rem;
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 3px;
    border: 1px solid $light-medium-gray;
    @media screen and ( min-width: 600px ){
      height: 5rem;
    }
  }

  &__desc {
    width: 70%;
    float: left;

    .title {
      font-weight: bold;
      margin: 0;
      padding-bottom: 0.25rem;
    }
    .content {
      margin: 0;
      color: $medium-gray;
      font-weight: bold;
      font-family: $monospace;
      padding: 5px 8px;
      border: 1px dashed $black;
      overflow: hidden;
      margin: 3px 0px;
    }
    .subtitle {
      margin: 0;
      color: $dark-medium-gray;
    }
  }

  &__revoke {
    text-align: right;
    margin: 1.6rem auto 0;
    display: block;
    @media screen and ( min-width: 600px ){
      float: left;
      width: 30%;
    }
  }
}
