.cui-users__main-container {
  padding: 0 em(15) em(13);
  position: relative;
  min-height: 400px;

  @media screen and (min-width: 701px) {
    padding: em(15) em(55) 0 em(65);
  }

  .cui-media__image-container {
    margin-right: 15px;
  }
}

.cui-users__profile-media {
  @extend %flex-row-vert;
  max-width: 50%;

  @media screen and (max-width: 700px) {
    border-bottom: 1px solid $secondary-background;
    max-width: none;
  }
}

.cui-users__field {
  @extend %flex-row;
  align-items: baseline;
}

.cui-users__profile {
  @extend %flex-row;

  @media screen and (max-width: 700px) {
    flex-direction: column;
    margin-top: em(25);
  }
}

.cui-users__profile-info {
  @extend %flex-row-vert;
  flex: 0.5;
  justify-content: flex-start;
}

.cui-users__profile-info:first-of-type {
  @media screen and (min-width: 701px) {
    margin-right: 15.5%;
  }
}

.cui-users__address-container {
  @extend %flex-row-vert;
  flex: 1;

  &.show-address {
    background-color: $tertiary-background;
    padding: em(16) em(16) em(30);

    @media screen and (max-width: 700px) {
      margin: 0 -15px;
    }

    .cui-users__field {
      margin-bottom: em(25);
    }
  }
}

.cui-users__contact-info {
  margin: em(35) 0 em(88);
}

.cui-users__address-submit {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.cui-users__info-block {
  margin-bottom: em(35);
}

.cui-users__inline-edit {
  display: flex;
  justify-content: space-between;
}

.cui-users__item {
  margin-bottom: em(10);
}

.cui-users__address-info {
  margin-bottom: em(5);

  &:first-of-type {
    margin-top: em(5);
  }
}

.cui-users__password-success {
  color: $cui-input-border--valid;
  margin: 5px 0;

  &.ng-enter {
    animation: appear-and-slide-down 0.5s linear;
  }

  &.ng-leave {
    animation: appear-and-slide-down 0.5s linear reverse;
  }
}

@keyframes appear-and-slide-down {
  0% {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }

  50% {
    max-height: 22px;
    opacity: 0;
    margin: 5px 0;
  }

  100% {
    max-height: 22px;
    opacity: 1;
    margin: 5px 0;
  }
}
.cui-star-password{
    vertical-align: top;
    font-size: xx-large;
}
.cui-breadcrumb{
  .cui-breadcrumb__link--alt{
    color:$cui-greyscale--dark;
    border-right:2px solid $cui-greyscale--dark;
    a {
        color: $cui-greyscale--dark;

        &.active {
          color: $breadcrumb-link-color--active;
        }
    }
  }
  .cui-breadcrumb__link--current a{
    color:$breadcrumb-link-color--active;
  }
}

@media screen and (min-width:701px){
  .cui-breadcrumb__link--alt{
    font-size:em(20);
  }
}
.user-profile__breadcrumb{
  @media screen and (max-width:700px){
    .cui-breadcrumb{
      display:flex;
    }
  }
  
}

.cui-users__info-block{
  .cui-radio{
    display:flex;
    flex-direction:column
  }
  .cui-radio--basic-ltr .cui-radio__label::before {
    background:$cui-white;
  }
  .cui-radio--basic-ltr .cui-radio__input:checked + .cui-radio__label::before{
    border: 4px solid $cui-white;
  }
  .cui-radio__label{
    padding-bottom:0.5em;
  }
}
.cui-button__social{
  color:$cui-white;
  display:flex;
  justify-content:flex-start;
  transition: 0.2s ease all;
  width:185px;
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
  }
  .social-icon{
    flex:0.2;
    max-width:15%;
  }
  .social-label{
    padding-left:1em;
    padding-right:1em;
    &::before{
      content:'';
      width:1px;
      height:100%;
      position:absolute;
      background:$cui-white;
      left:20%;
      top:0;
    }
  }
  .cui-action__icon {
    fill:$cui-white;
  }
  &_facebook{
    background-color:#3b5998;
    &:hover{
      background-color: #2d4373;
    }
  }
  &_twitter{
    background-color:#55acee;
    &:hover{
      background-color: #2795e9;
    }
  }
  &_linkedin{
    background-color:#007bb6;
    &:hover{
      background-color: #005983;
    }
  }
  &_google{
    background-color:#dd4b39;
    &:hover{
      background-color: #c23321;
    }
  }
}