.extra-field--qr-code {
  display: none;
}

.user-logged-in .extra-field--qr-code {
  display: block;
}

.qr-download-wrapper {
  position: relative;
  margin-top: 6px;
  display: inline-block;
}

.qr-download-button {
  cursor: pointer;
  font-weight: 600;
}

.qr-dropdown {
  display: none;
  position: absolute;
  z-index: 100;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  min-width: 180px;
}

.qr-download-wrapper.is-open .qr-dropdown {
  display: block;
}

.qr-actions div {
  cursor: pointer;
  margin-top: 6px;
}

.qr-color-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qr-hint {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 6px;
}


.extra-field--qr-code {
  border-radius: 12px;
  padding: 6px 12px 12px 12px;
  border: 2px solid;
  height: 80px;
}
.qrcode-container img {
  max-height: 60px;
  margin-top: 3px;
  position: absolute;
}

.qrcode-container button {
  border-radius: 12px;
  font-size: 14px;
  border: none;
  position: relative;
  background: none !important;
  line-height: 110%;
  padding: 0px;;
  font-weight: 600;
  border-radius: 0px;
  margin-left: 72px;
  text-align: left;
  display: flex;
  padding-bottom: 4px;
  height: 32px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.qrcode-container img {
  float: left;
  margin-right: 10px;
}

.qr-compact {
  margin-left: -35px !important;
  margin-top: 5px;
}

.qr-compact button {
  font-size: 14px;
  border: 1px solid;
  background: none;
}

.qr-compact .pickr .pcr-button {
  width: 25px !important;
  height: 25px !important;
  border: none;
  border-radius: 0px;
}