/**
 * @file
 * Theme styling for user module.
 */

/* Visual styling for the Password strength indicator */
.password-strength__meter {
  margin-top: 0.5em;
  background-color: #ebeae4;
}
.password-strength__indicator {
  -webkit-transition: width 0.5s ease-out;
  transition: width 0.5s ease-out;
  background-color: #77b259;
}
.password-strength__indicator.is-weak {
  background-color: #e62600;
}
.password-strength__indicator.is-fair {
  background-color: #e09600;
}
.password-strength__indicator.is-good {
  background-color: #0074bd;
}
.password-strength__indicator.is-strong {
  background-color: #77b259;
}

.password-confirm,
.password-field,
.password-strength,
.password-confirm-match,
.password-confirm-message {
  width: 55%;
}

.password-suggestions {
  max-width: 34.7em;
  margin: 0.7em 0;
  padding: 0.2em 0.5em;
  border: 1px solid #b4b4b4;
}
.password-suggestions ul {
  margin-bottom: 0;
}

.confirm-parent,
.password-parent {
  clear: left; /* LTR */
  overflow: hidden;
  max-width: 33em;
  margin: 0;
}
[dir='rtl'] .confirm-parent,
[dir='rtl'] .password-parent {
  clear: right;
}

/* Styling for the status indicator of the passwords match test.  */
.password-confirm .ok {
  color: #325e1c;
  font-weight: bold;
}
.password-confirm .error {
  color: #a51b00;
  font-weight: bold;
}
.page-node-type-people .node__content {
  @include xy-grid-container();
  @include xy-grid();
  img {
    @include thumbnail;
    margin-top: $global-margin;
  }
  .bio_left {
    @include xy-cell(2);
  }
  .group-bio-info-2 {
    @include xy-cell(10);
    border: 1px solid #ccc;
    padding: $global-padding;
  }
}
.field--name-field-subjects h2 a {
  font-size: 1rem;
  font-family: $button-font-family;
}
.field--name-field-subjects .field__label {
  background: #333;
  color: #fefefe;
  padding: 5px 1rem 0;
  margin: 0;
  border-radius: 4px 4px 0 0;
  border-bottom: 4px solid #517e1b;
}
.field--name-field-job-title {
  font-family: $button-font-family;
  color: #517e1b;
  font-size: 1.77687rem;
}

.group-bio-info-2 {
}
.page-node-type-people .node__content .bio_left {
  flex-flow: column;
  display: flex;
  margin-bottom: 1em;
  img {
    width: 100%;
  }
}
.bio_left .field--name-field-subjects .field__items {
  height: 100%;
  //border: 1px solid #ccc;
  padding: 0.5em;
}
.bio_right {
  legend {
    display: none;
  }
  .field--name-field-job-title {
    margin-bottom: calc($global-margin/2);
  }
  .field__label {
    width: 200px;
    font-family: $button-font-family;
  }
  .field--name-body {
  margin-top: $global-margin;}
}