/* Site-wide custom styles */

/* Generic circular avatar base */
.avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

/* Common sizes */
.avatar-28 { width: 28px; height: 28px; }
.avatar-32 { width: 32px; height: 32px; }
.avatar-40 { width: 40px; height: 40px; }

/* Convenience spacing when placed before text */
.avatar + .avatar-text,
.avatar + a,
.avatar + span,
.avatar + strong {
  margin-left: 8px;
}

/* Spacing and layout for multi-select checkboxes and radio buttons */
.checkbox-select-wrapper,
.radio-select-wrapper {
  display: flow-root;
  width: 100%;
  clear: both;
}

/* Ensure the row inside the wrapper doesn't collapse */
.checkbox-select-wrapper .row,
.radio-select-wrapper .row {
  margin-right: 0;
  margin-left: 0;
}

.checkbox-select-wrapper .col,
.radio-select-wrapper .col {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Marketing landing page team directory */
.team-list-scroll {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.team-list-scroll::-webkit-scrollbar {
  width: 6px;
}

.team-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.team-list-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.placeholder-light::placeholder {
  color: rgba(255, 255, 255, 0.55);
}