/* ---- button-group ---- */

.button-group {
    margin-bottom: 10px;
    display: inline-block;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

p.label {
    margin: 4px 0;
    padding: 0;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- button ---- */

.button {
    border: none;
    padding: 0.5em 1.0em;
    background: #EEE;
    background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
}

.button:hover {
  background-color: #ddd;
}

.button.is-checked {
  background-color: #28F;
  color: white;
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.2);
}


/* ---- grid ---- */

.grid {
    display: flex;
    flex-direction: row;
}

/* ---- .element-item ---- */

.element-item {
  width: 200px;
  margin: 5px;
  padding: 30px 0;
  background: #888;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item p {
   color:white;
   font-size: .9em;
   line-height: 1.1em;
   text-align: center;
}

.element-item .name {
   font-weight: 700;
}

.element-item .picture {
    margin: 0 0 20px 0;
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:50%;
}