$ibo-preferences--panel--margin-x: auto !default;

$ibo-preferences--user-preferences--picture-placeholder--image--diameter: 54px !default;
$ibo-preferences--user-preferences--picture-placeholder--image--border-radius: $ibo-border-radius-full !default;
$ibo-preferences--user-preferences--picture-placeholder--image--margin: 12px !default;
$ibo-preferences--user-preferences--picture-placeholder--image--background-color: $ibo-color-grey-300 !default;

$ibo-preferences--user-preferences--picture-placeholder--image--active--border-color: $ibo-color-blue-800;
$ibo-preferences--user-preferences--picture-placeholder--image--hover--border-color: $ibo-color-blue-600;

#ibo-main-content >.ibo-panel{
  margin-left: $ibo-preferences--panel--margin-x;
  margin-right: $ibo-preferences--panel--margin-x;
}

.ibo-preferences--user-preferences--picture-placeholder{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.ibo-preferences--user-preferences--picture-placeholder--image{
  height: $ibo-preferences--user-preferences--picture-placeholder--image--diameter;
  width: $ibo-preferences--user-preferences--picture-placeholder--image--diameter;
  border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius;
  margin: $ibo-preferences--user-preferences--picture-placeholder--image--margin;
  border: solid 3px $ibo-preferences--user-preferences--picture-placeholder--image--background-color;

  > img{
    border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius;
    background-color: $ibo-preferences--user-preferences--picture-placeholder--image--background-color;
  }
}
.ibo-preferences--user-preferences--picture-placeholder--image.ibo-is-active{
  border-color: $ibo-preferences--user-preferences--picture-placeholder--image--active--border-color;
}
.ibo-preferences--user-preferences--picture-placeholder--image:hover{
  border-color: $ibo-preferences--user-preferences--picture-placeholder--image--hover--border-color;
}