.gadget-container{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:flex-start;
}
.gadget-container.three-cols .gadget-box{
  flex: 0 0 calc((90% - 20px) / 3);
}

.gadget-container.two-cols .gadget-box{
  flex: 0 0 calc((75% - 10px) / 2);
}

.gadget-container.two-cols .gadget-box-big{
  flex: 0 0 calc((85% - 10px) / 2);
}

.gadget-container.one-col .gadget-box{
  flex: 0 0 90%;
}
.gadget-box{
  display:flex;
  flex-direction:column;
  margin-left: 0px;
  margin-bottom: 8px;
  box-sizing:border-box;
  border:1px solid #d6b786;
  padding:8px;
  justify-self: baseline;
}
.gadget-box-big{
  display:flex;
  flex-direction:column;
  margin-left: 0px;
  margin-bottom: 8px;
  box-sizing:border-box;
  border:1px solid #d6b786;
  padding:8px;
  justify-self: baseline;
}
.show-code,
.copy-code{
  cursor:pointer;
  margin-top:4px;
  user-select:none;
  color: #737c1c;
}
.show-code:hover,
.copy-code:hover{
  text-decoration:underline;
}
.code-area{
  display:none;
  margin-top:10px;
}
.code-area.open{
  display:block;
}
pre{
  background:#f5f5f5;
  padding:12px;
  border:1px solid #ddd;
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  text-align: left;
}
.copy-btn{
  margin-top:4px;
  padding:6px 10px;
  cursor:pointer;
}
.testo_edit {
  background: #fce1e9ff;
  padding:0 4px;
  border-radius: 3px;
}
.small{
  display: inline-block;
  border:1px solid #ddd;
  background:#f5f5f5;
  padding:4px;
  margin-top: 6px;
  text-align:left;
  font-size: 12px;
  overflow-wrap:break-word;
  width: 550px;

}