@import '~office-ui-fabric-react/dist/sass/References.scss';

.personaContainer {

  //https://blog.hubspot.com/website/css-fade-in
  opacity: 1;
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;

}

.personaContainerNormal {
  @extend .personaContainer;
  display: inline-block;
  margin-top: 15px;
  margin-right: 15px;
  vertical-align: top;

}

.personaContainerSmall {
  @extend .personaContainer;
  display: contents;
  margin-right: 15px;
  background: gray;
  border: 0px transparent solid;
  :hover {
    background: #ddd;
    border: 0px transparent solid;
  }
}

//https://blog.hubspot.com/website/css-fade-in
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }

.documentCard {
  width: 100%;
  max-width: 350px;
  // height: 120px; //Removed this for various sizes
}

.documentCardBorder {
  border-top-width: 5px;
}

.documentCardNoBorder {
  border: 0px transparent solid;
}


.documentCardDefault {
  @extend .documentCard;
  border-color: $ms-color-themeDark;
}

.inlineFlex {
  display: inline-flex;
  padding-top: 5px;
}

.inlineFlexWBPadding {
  display: inline-flex;
  padding-top: 5px;
  padding-bottom: 8px;

}

.inlineFlexSpaceBetween {
  display: inline-flex;
  padding-top: 4px;
  padding-bottom: 8px;
  width: 275px;
  justify-content: space-between;
  opacity: 1;
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
}

.documentCardAdmin {
  @extend .documentCard;
  border-color: 'darkgreen';
}

.documentCardGuest {
  @extend .documentCard;
  border-color: 'saddlebrown';
}

.persona {
  padding-left: 15px;
  padding-right: 15px;

}

.flexDirRow {
  [class*="ms-Persona-details"] {
    flex-direction: row !important;
    width: 300px;
  }

  border: 0px transparent solid;
  padding-top: 0px;
  padding-bottom: 0px
}

.bottomColor {
  background-color: $ms-color-themeDark;
  height: 5px;
  margin-top: 10;
  width: 100%;
}

.textOverflow {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}