/**
 * Zen datacollector readonly (zen-dc-ro) styles
 * Use for type 400 (radio) and type 500 (checkbox) readonly output.
 * Import this file in any rendering system that displays the same HTML.
 */

/* Shared block */
.zen-dc-ro {
  margin-bottom: 15px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  color: #333;
}

/* ── Radio readonly ── */
.zen-dc-ro-radio-label {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.zen-dc-ro-radio-options {
  margin: 0;
  padding: 0;
}

.zen-dc-ro-radio-item {
  position: relative;
  display: block;
  min-height: 20px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
  color: #555;
  cursor: default;
}

.zen-dc-ro-radio-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}

.zen-dc-ro-radio-item.zen-dc-ro-radio-item-selected {
  color: #333;
}

.zen-dc-ro-radio-item.zen-dc-ro-radio-item-selected::before {
  border-color: #337ab7;
}

.zen-dc-ro-radio-item.zen-dc-ro-radio-item-selected::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #337ab7;
}

/* ── Checkbox readonly ── */
.zen-dc-ro-checkbox-label {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.zen-dc-ro-checkbox-options {
  margin: 0;
  padding: 0;
}

.zen-dc-ro-checkbox-item {
  position: relative;
  display: block;
  min-height: 20px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
  color: #555;
  cursor: default;
}

.zen-dc-ro-checkbox-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: #fff;
}

.zen-dc-ro-checkbox-item.zen-dc-ro-checkbox-item-checked {
  color: #333;
}

.zen-dc-ro-checkbox-item.zen-dc-ro-checkbox-item-checked::before {
  background-color: #337ab7;
  border-color: #337ab7;
}

.zen-dc-ro-checkbox-item.zen-dc-ro-checkbox-item-checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}