.del-conf-cnt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  display: none;
}
.del-conf-cnt:target { display: block; }

.del-conf-cnt:before {
  content: '';
  display: inline-block;
  height: 75%;
  vertical-align: middle;
}

.del-conf-back {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3);
  display: block;
  cursor: unset;
  z-index: 4;
}

.del-conf {
  position: relative;
  z-index: 5;
  display: inline-block;
  vertical-align: middle;
  padding: 0 10pt 15pt 10pt;
  color: &clr_conf_txt;;
  border: solid 1px &clr_conf_border;;
  background-color: &clr_bg;;
  font-size: 14pt;
  width: 220pt;
}

.del-conf__close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 218pt;
  top: -10pt;
  width: 20pt;
  height: 20pt;
  outline: 0;
  color: &clr_conf_close-btn;;
  border-radius: 50%;
  background-color: &clr_bg;;
  border: solid 1px &clr_conf_border;;
  z-index: 5;
  text-decoration: none;
}
.del-conf__close-btn:visited { color: &clr_conf_close-btn;; }

.del-conf__del-btn {
  position: relative;
  bottom: 0;
  height: 33pt;
  padding: 0 30pt;
  margin-top: 20pt;
  border-radius: 12pt;
  font-size: 13pt;
  border: 0;
  background-color: &clr_btn_bg;;
  color: &clr_btn_txt;;
  outline: 0;
  width: 100%;
  max-width: 300pt;
}
.del-conf__del-btn:hover, .del-conf__del-btn:focus {
  background-color: &clr_btn_hover;;
}


.main-area__checkitems-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4pt auto;
  padding: 5pt 0;
  border-bottom: solid 1px &clr_checkitems_border;;
  max-width: 600pt;
}


.checkitems-header__A { /* "All" switch container */
  flex-grow: 1;
  text-align: left;
}

.checkitems-header__A__select-all-cb { display: none; }
.checkitems-header__A__select-all-cb:checked ~ .checkitems-header__A__select-all {
  background-color: &clr_checkitems_btn_bg;;
}

.checkitems-header__A__select-all {
  display: inline-block;
  user-select: none;
  border-radius: 6pt;
  text-decoration: none;
  min-width: 40pt;
  width: 40pt;
  margin-left: 4pt;
  user-select: none;
  font-size: 12pt;
  text-align: center;
  color: &clr_checkitems_btn_txt;;
  border: solid 1px &clr_checkitems_btn_txt;;
  background-color: &clr_bg;;
}

.checkitems-header__B { /* "First Page", "Previous Page" buttons container */
  width: 80pt;
  text-align: right;
  flex-shrink: 0;
}
.checkitems-header__C { /* Page number container */
  min-width: 30pt;
  text-align: center;
  flex-shrink: 0;
}
.checkitems-header__D { /* "Next Page" button container */
  width: 80pt;
  flex-shrink: 0;
}
.checkitems-header__E { /* Right space */
  flex-grow: 1;
  display: flex;
  justify-content: end;
  margin-right: 4pt;
}

.checkitems-header__E__new {
}
.checkitems-header__E__new--hidden { display: none; }

.checkitems-header__E__new__svg {
  width: 16pt;
  height: 16pt;
  cursor: pointer;
  fill: &clr_checkitems_ctl_btn;;
}

.checkitems-header__E__del {
}
.checkitems-header__E__del--hidden { display: none; }

.checkitems-header__E__del__svg {
  width: 16pt;
  height: 16pt;
  margin-left: 10pt;
  fill: &clr_checkitems_ctl_btn;;
  cursor: pointer;
}

.checkitems-header__page-btn {
  display: inline-block;
  height: 17pt;
  width: 17pt;
  border-radius: 6pt;
  text-decoration: none;
  margin: 0 8pt;
  user-select: none;
  font-size: 14pt;
  text-align: center;
  color: &clr_checkitems_btn_txt;;
  border: solid 1px &clr_checkitems_btn;;
}
.checkitems-header__page-btn:visited {
  color: &clr_checkitems_btn;;
}
.checkitems-header__page-btn:focus, .checkitems-header__page-btn:hover {
  outline: unset;
  background-color: &clr_checkitems_btn_bg;;
}

.page-btn--first::before { content: "&#171;"; }
.page-btn--prev::before { content: "&#8249;"; }
.page-btn--next::before { content: "&#8250;"; }



.check-item-list {
}

.check-item-list__row {
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  border-bottom: solid 1px &clr_checkitem_border;;
  max-width: 600pt;
}
.check-item-list__row:hover {
  background-color: &clr_checkitem_bg;;
}


.check-item-list__new-cb { display: none; }
.check-item-list__new-cb:checked + .check-item-list__new { display: flex; }

.check-item-list__new { display: none; }
.check-item-list__new:hover {
  background-color: transparent;
}
.check-item-list__new__input-text {
  margin: 7pt 7pt 7pt 45pt;
  padding: 0 4pt;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 13pt;
  font-size: 12pt;
  color: &clr_checkitem_input;;
  background-color: &clr_checkitem_input_bg;;
  height: 20pt;
}
.check-item-list__new__input-text--number {
  margin-left: 0;
  width: 50%;
}
.check-item-list__new__btn {
  height: 20pt;
  padding: 0 7pt;
  margin: 0 5pt 0 0;
  border-radius: 12pt;
  border: 0;
  background-color: &clr_btn_bg;;
  color: &clr_btn_txt;;
  outline: 0;
}
.check-item-list__new__btn:hover, .check-item-list__new__btn:focus {
  border: 0;
  background-color: &clr_btn_hover;;
}


.row__cb {
  flex-shrink: 0;
  appearance: none;
  position: relative;
  width: 15pt;
  height: 15pt;
  margin: 0 15pt;
  border-radius: 4pt;
  border: 1px solid &clr_checkitems_btn;;
  color: &clr_checkitems_btn;;
}
.row__cb:disabled {
  background-color: &clr_checkitems_btn_bg;;
}
.row__cb::after {
  content: "\2714";
  position: absolute;
  top: -3pt;
  left: 0;
  width: 0px;
  height: 0px;
  font-size: 13pt;
  overflow: hidden;
  text-align: center;
}
.row__cb:checked::after {
  width: 15pt;
  height: 15pt;
}

.row__caption {
  flex-grow: 1;
  padding: 7pt 0;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  color: &clr_txt;;
}
.row__caption:visited {
  color: &clr_txt;;
}
.row__caption--disabled, .row__caption--disabled:visited {
  color: &clr_txt_disabled;;
}
