.part-icon--button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #a0a5bb;
  padding: 8px 8px;
  border-radius: 50px;
  width: 60px;
  height: 60px;
  margin-right: 35px;
  margin-bottom: 8px;
  overflow: visible;
  box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.3);
}

.part-icon--button.js {
  /*background: linear-gradient(to top, #e9d887 0%, #fff3d2 40%, #fff 100%);*/
  background: linear-gradient(to top, #f0cdae 0%, #fff0e3 40%, #fff 100%);
  box-shadow: 5px 5px 7px rgb(74 62 11 / 47%);
  border: 2px solid #e3d086;
  
}
.part-icon--button.cpp{
  /*background: linear-gradient(to top, #87a7e9 0%, #d2d8ff 40%, #fff 100%);*/
  background: linear-gradient(to top, #b8cbf0 0%, #e8ebff 40%, #fff 100%);
  box-shadow: 5px 5px 7px rgb(24 29 105 / 60%);
  border: 2px solid #a0a5bb;
}

.part-icon--button.js.noactive,
.part-icon--button.js.noactive,
.part-icon--button.cpp.noactive {
  background: linear-gradient(to top, #eaeaea 0%, #eee 40%, #fff 100%);
  border: 2px solid #b7b7b7;
  box-shadow: 5px 5px 7px rgba(119, 119, 119, 0.6);
  opacity: 0.7;
}

.part-icon--button-content{
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid #bec3d7;
  padding: 3px 3px;
  background: #fff;
  border-radius: 18px;
  width: 90px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.part-icon--button.js .part-icon--button-content{
  border: 1px solid #d1ce79;
}

.part-icon--button.cpp .part-icon--button-content{
  border: 1px solid #b7b7f5;
}

.part-icon--button.js.noactive .part-icon--button-content,
.part-icon--button.js.noactive .part-icon--button-content,
.part-icon--button.cpp.noactive .part-icon--button-content{
  border: 2px solid #b7b7b7;
}