:root {
  --ck-item-size: 1.4em;
  --ck-item-space-size: .3em;
  --ck-item-margin: .1em .1em .1em .1em;
  --ck-tx-padding: 0 .1em 0 .1em;
  --ck-item-border-radius: .2em;

  --ck-sky-bg-color: #ddd;/*should override to custom background color*/
  --ck-sky-tx-color: #2060a0;
  --ck-sky-bg-select-color: #0090d0;
  --ck-sky-checkmark-color: #f0f0f0;
  --ck-sky-bg-hover-color: var(--ck-sky-bg-select-color);/* #009fe6;*/
  --ck-sky-tx-hover-color: #f0f0f0;

  --ck-purple-bg-color: #ddd;
  --ck-purple-tx-color: #6020a0;
  --ck-purple-bg-select-color: #9000d0;
  --ck-purple-checkmark-color: #f0f0f0;
  --ck-purple-bg-hover-color: var(--ck-purple-bg-select-color);/*#9f00e6;*/
  --ck-purple-tx-hover-color: #f0f0f0;

  --ck-pink-bg-color: #ddd;
  --ck-pink-tx-color: #a02060;
  --ck-pink-bg-select-color: #d00090;
  --ck-pink-checkmark-color: #f0f0f0;
  --ck-pink-bg-hover-color: var(--ck-pink-bg-select-color);/* #ff30b0;*//*#e6009f;*/
  --ck-pink-tx-hover-color: #f0f0f0;

  --ck-green-bg-color: #ddd;
  --ck-green-tx-color: #20a060;
  --ck-green-bg-select-color: #00d090;
  --ck-green-checkmark-color: #f0f0f0;
  --ck-green-bg-hover-color: var(--ck-green-bg-select-color);/*#00e69f;*/
  --ck-green-tx-hover-color: #f0f0f0;

  --ck-dgreen-bg-color: #ddd;
  --ck-dgreen-tx-color: #007750;
  --ck-dgreen-bg-select-color: #009060;
  --ck-dgreen-checkmark-color: #f0f0f0;
  --ck-dgreen-bg-hover-color: var(--ck-dgreen-bg-select-color);/*#009f6f;*/
  --ck-dgreen-tx-hover-color: #f0f0f0;

  --ck-brown-bg-color: #ddd;
  --ck-brown-tx-color: #a06020;
  --ck-brown-bg-select-color: #d09000;
  --ck-brown-checkmark-color: #f0f0f0;
  --ck-brown-bg-hover-color: var(--ck-brown-bg-select-color);/*#e69f00;*/
  --ck-brown-tx-hover-color: #f0f0f0;
}
.ck-item {
    display: inline-block;
    margin: var(--ck-item-margin);
}
.ck-item > label {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: var(--ck-item-size);
    padding-left: calc(var(--ck-item-size) + var(--ck-item-space-size));
    border-width: 0;
    border-radius: var(--ck-item-border-radius);
    cursor: pointer;
    transition: color .05s, background-color .05s;
}
.ck-item > label:has(> input:first-child) {/*no text*/
    padding: 0;
    width: var(--ck-item-size);
}
.ck-item > label > span.tx {
    display: flex;
    flex: 1;
    align-items: center;
    user-select: none;
    padding: var(--ck-tx-padding);
    border-width: 0;
    border-radius: var(--ck-item-border-radius);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .05s, background-color .05s;
}

/* Hide default checkbox/radio */
.ck-item > label > input[type="checkbox"], .ck-item > label > input[type="radio"] {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* custom checkbox, radio */
.ck-item > label > span.ck, .ck-item > label > span.rd {
    position: absolute;
    box-sizing: border-box;
    border-width: 2px;/*0.16em;*/
    border-style: solid;
    transition: background-color .05s, border-color .05s;
}
.ck-item > label > span.ck {
    top: 0;
    left: 0;
    height: var(--ck-item-size);
    width: var(--ck-item-size);
}
.ck-item > label > span.rd {
    top: .1em;
    left: .1em;
    height: calc(var(--ck-item-size) - .2em);
    width: calc(var(--ck-item-size) - .2em);
}
.ck-item > label > span.ck {
    border-radius: var(--ck-item-border-radius);
}
.ck-item > label > span.rd {
    border-radius:50%;
}
/* checkmark */
.ck-item > label > span.ck:after {
    content:"";
    position:absolute;
    box-sizing: border-box;
    opacity: 0;
    left: .35em;
    top: .1em;
    width: .5em;
    height: .8em;
    border:solid;
    border-width: 0 .2em .2em 0;
    transform:rotate(45deg);
    transition: opacity .05s;
}
.ck-item label > input[type="checkbox"]:checked ~ span.ck:after {
    opacity: 1;
}

/* skinning, using alternative ways to select with theme name */
/* sky */
.ck-item.sky > label span.ck, .ck-item.sky > label span.rd,
.sky .ck-item > label span.ck, .sky .ck-item > label span.rd {
    border-color:var(--ck-sky-bg-select-color);
}
.ck-item.sky > label > input[type="checkbox"]:checked ~ span.ck,
.ck-item.sky > label > input[type="radio"]:checked ~ span.rd,
.sky .ck-item > label > input[type="checkbox"]:checked ~ span.ck,
.sky .ck-item > label > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-sky-bg-select-color);
}
.ck-item.sky > label:hover > input[type="radio"]:checked ~ span.rd,
.sky .ck-item > label:hover > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-sky-bg-color);
}
/* checkmark */
.ck-item.sky > label > span.ck:after, .sky .ck-item > label > span.ck:after {
    border-color:var(--ck-sky-checkmark-color);
}
.ck-item.sky > label > span.tx, .sky .ck-item > label > span.tx {
    color: var(--ck-sky-tx-color);
}
.ck-item.sky > label:hover > span.tx, .sky .ck-item > label:hover > span.tx {
    color: var(--ck-sky-tx-hover-color);
}
.ck-item.sky > label:hover, .sky .ck-item > label:hover {
    background-color:var(--ck-sky-bg-hover-color);
}
.ck-item.sky > label:hover > input[type="checkbox"] ~ span.ck,
.ck-item.sky > label:hover > input[type="radio"] ~ span.rd,
.sky .ck-item > label:hover > input[type="checkbox"] ~ span.ck,
.sky .ck-item > label:hover > input[type="radio"] ~ span.rd {
    border-color:var(--ck-sky-bg-hover-color);
}

/* purple */
.ck-item.purple > label span.ck, .ck-item.purple > label span.rd,
.purple .ck-item > label span.ck, .purple .ck-item > label span.rd {
    border-color:var(--ck-purple-bg-select-color);
}
.ck-item.purple > label > input[type="checkbox"]:checked ~ span.ck,
.ck-item.purple > label > input[type="radio"]:checked ~ span.rd,
.purple .ck-item > label > input[type="checkbox"]:checked ~ span.ck,
.purple .ck-item > label > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-purple-bg-select-color);
}
.ck-item.purple > label:hover > input[type="radio"]:checked ~ span.rd,
.purple .ck-item > label:hover > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-purple-bg-color);
}
/* checkmark */
.ck-item.purple > label > span.ck:after, .purple .ck-item > label > span.ck:after {
    border-color:var(--ck-purple-checkmark-color);
}
.ck-item.purple > label > span.tx, .purple .ck-item > label > span.tx {
    color: var(--ck-purple-tx-color);
}
.ck-item.purple > label:hover > span.tx, .purple .ck-item > label:hover > span.tx {
    color: var(--ck-purple-tx-hover-color);
}
.ck-item.purple > label:hover, .purple .ck-item > label:hover {
    background-color:var(--ck-purple-bg-hover-color);
}
.ck-item.purple > label:hover > input[type="checkbox"] ~ span.ck,
.ck-item.purple > label:hover > input[type="radio"] ~ span.rd,
.purple .ck-item > label:hover > input[type="checkbox"] ~ span.ck,
.purple .ck-item > label:hover > input[type="radio"] ~ span.rd {
    border-color:var(--ck-purple-bg-hover-color);
}

/* pink */
.ck-item.pink > label span.ck, .ck-item.pink > label span.rd,
.pink .ck-item > label span.ck, .pink .ck-item > label span.rd {
    border-color:var(--ck-pink-bg-select-color);
}
.ck-item.pink > label > input[type="checkbox"]:checked ~ span.ck,
.ck-item.pink > label > input[type="radio"]:checked ~ span.rd,
.pink .ck-item > label > input[type="checkbox"]:checked ~ span.ck,
.pink .ck-item > label > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-pink-bg-select-color);
}
.ck-item.pink > label:hover > input[type="radio"]:checked ~ span.rd,
.pink .ck-item > label:hover > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-pink-bg-color);
}
/* checkmark */
.ck-item.pink > label > span.ck:after, .pink .ck-item > label > span.ck:after {
    border-color:var(--ck-pink-checkmark-color);
}
.ck-item.pink > label > span.tx, .pink .ck-item > label > span.tx {
    color: var(--ck-pink-tx-color);
}
.ck-item.pink > label:hover > span.tx, .pink .ck-item > label:hover > span.tx {
    color: var(--ck-pink-tx-hover-color);
}
.ck-item.pink > label:hover, .pink .ck-item > label:hover {
    background-color:var(--ck-pink-bg-hover-color);
}
.ck-item.pink > label:hover > input[type="checkbox"] ~ span.ck,
.ck-item.pink > label:hover > input[type="radio"] ~ span.rd,
.pink .ck-item > label:hover > input[type="checkbox"] ~ span.ck,
.pink .ck-item > label:hover > input[type="radio"] ~ span.rd {
    border-color:var(--ck-pink-bg-hover-color);
}

/* green */
.ck-item.green > label span.ck, .ck-item.green > label span.rd,
.green .ck-item > label span.ck, .green .ck-item > label span.rd {
    border-color:var(--ck-green-bg-select-color);
}
.ck-item.green > label > input[type="checkbox"]:checked ~ span.ck,
.ck-item.green > label > input[type="radio"]:checked ~ span.rd,
.green .ck-item > label > input[type="checkbox"]:checked ~ span.ck,
.green .ck-item > label > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-green-bg-select-color);
}
.ck-item.green > label:hover > input[type="radio"]:checked ~ span.rd,
.green .ck-item > label:hover > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-green-bg-color);
}
/* checkmark */
.ck-item.green > label > span.ck:after, .green .ck-item > label > span.ck:after {
    border-color:var(--ck-green-checkmark-color);
}
.ck-item.green > label > span.tx, .green .ck-item > label > span.tx {
    color: var(--ck-green-tx-color);
}
.ck-item.green > label:hover > span.tx, .green .ck-item > label:hover > span.tx {
    color: var(--ck-green-tx-hover-color);
}
.ck-item.green > label:hover, .green .ck-item > label:hover {
    background-color:var(--ck-green-bg-hover-color);
}
.ck-item.green > label:hover > input[type="checkbox"] ~ span.ck,
.ck-item.green > label:hover > input[type="radio"] ~ span.rd,
.green .ck-item > label:hover > input[type="checkbox"] ~ span.ck,
.green .ck-item > label:hover > input[type="radio"] ~ span.rd {
    border-color:var(--ck-green-bg-hover-color);
}

/* dark green */
.ck-item.dgreen > label span.ck, .ck-item.dgreen > label span.rd,
.dgreen .ck-item > label span.ck, .dgreen .ck-item > label span.rd {
    border-color:var(--ck-dgreen-bg-select-color);
}
.ck-item.dgreen > label > input[type="checkbox"]:checked ~ span.ck,
.ck-item.dgreen > label > input[type="radio"]:checked ~ span.rd,
.dgreen .ck-item > label > input[type="checkbox"]:checked ~ span.ck,
.dgreen .ck-item > label > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-dgreen-bg-select-color);
}
.ck-item.dgreen > label:hover > input[type="radio"]:checked ~ span.rd,
.dgreen .ck-item > label:hover > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-dgreen-bg-color);
}
/* checkmark */
.ck-item.dgreen > label > span.ck:after, .dgreen .ck-item > label > span.ck:after {
    border-color:var(--ck-dgreen-checkmark-color);
}
.ck-item.dgreen > label > span.tx, .dgreen .ck-item > label > span.tx {
    color: var(--ck-dgreen-tx-color);
}
.ck-item.dgreen > label:hover > span.tx, .dgreen .ck-item > label:hover > span.tx {
    color: var(--ck-dgreen-tx-hover-color);
}
.ck-item.dgreen > label:hover, .dgreen .ck-item > label:hover {
    background-color:var(--ck-dgreen-bg-hover-color);
}
.ck-item.dgreen > label:hover > input[type="checkbox"] ~ span.ck,
.ck-item.dgreen > label:hover > input[type="radio"] ~ span.rd,
.dgreen .ck-item > label:hover > input[type="checkbox"] ~ span.ck,
.dgreen .ck-item > label:hover > input[type="radio"] ~ span.rd {
    border-color:var(--ck-dgreen-bg-hover-color);
}

/* brown */
.ck-item.brown > label span.ck, .ck-item.brown > label span.rd,
.brown .ck-item > label span.ck, .brown .ck-item > label span.rd {
    border-color:var(--ck-brown-bg-select-color);
}
.ck-item.brown > label > input[type="checkbox"]:checked ~ span.ck,
.ck-item.brown > label > input[type="radio"]:checked ~ span.rd,
.brown .ck-item > label > input[type="checkbox"]:checked ~ span.ck,
.brown .ck-item > label > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-brown-bg-select-color);
}
.ck-item.brown > label:hover > input[type="radio"]:checked ~ span.rd,
.brown .ck-item > label:hover > input[type="radio"]:checked ~ span.rd {
    background-color:var(--ck-brown-bg-color);
}
/* checkmark */
.ck-item.brown > label > span.ck:after, .brown .ck-item > label > span.ck:after {
    border-color:var(--ck-brown-checkmark-color);
}
.ck-item.brown > label > span.tx, .brown .ck-item > label > span.tx {
    color: var(--ck-brown-tx-color);
}
.ck-item.brown > label:hover > span.tx, .brown .ck-item > label:hover > span.tx {
    color: var(--ck-brown-tx-hover-color);
}
.ck-item.brown > label:hover, .brown .ck-item > label:hover {
    background-color:var(--ck-brown-bg-hover-color);
}
.ck-item.brown > label:hover > input[type="checkbox"] ~ span.ck,
.ck-item.brown > label:hover > input[type="radio"] ~ span.rd,
.brown .ck-item > label:hover > input[type="checkbox"] ~ span.ck,
.brown .ck-item > label:hover > input[type="radio"] ~ span.rd {
    border-color:var(--ck-brown-bg-hover-color);
}

/* optional containers */
.ck-item-container-column {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}
.ck-item-container-column.wrap {
    flex-wrap: wrap;
}
.ck-item-container-row {
    display: flex;
/*    align-items: stretch;*/
    flex-direction: row;
}