@charset "UTF-8";
#acpPageMenu, #acpPageSubMenu {
  z-index: 100;
}

.boxxerWarning {
  margin-top: 10px;
  font-weight: bold;
}
.boxxerWarning .icon {
  color: inherit;
}

.boxxerLayout {
  border: 1px solid #ecf1f7;
  /* -- sorting -- */
}
.boxxerLayout:not(.isSorting) .box:hover > .boxType .actions {
  opacity: 1;
}
.boxxerLayout.isSorting .boxxerAdd {
  opacity: 0 !important;
}
.boxxerLayout.isSorting:not(.allAvailable) .boxxerLayoutPosition:not(.isAvailable)::after {
  opacity: 1;
  display: block;
}
.boxxerLayout.isSorting:not(.allAvailable) .boxxerLayoutPosition:not(.isAvailable) > .boxList > .boxxerLayoutBox:not(.isAvailable), .boxxerLayout.isSorting:not(.allAvailable) .boxxerLayoutPosition:not(.isAvailable) > .header {
  opacity: 0.2;
}
.boxxerLayout[data-object-type="de.warly.plugin.boxxer.object.columnsBox"] .boxxerLayoutColumn {
  flex: 1 0 300px;
}
.boxxerLayout .boxxerLayoutRow {
  display: flex;
  border-color: inherit;
  overflow-x: auto;
  overflow-y: hidden;
}
.boxxerLayout .boxxerLayoutRow:last-child > .boxxerLayoutColumn > .boxxerLayoutPosition:last-child {
  border-bottom: 0 none;
}
.boxxerLayout .boxxerLayoutColumn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  border-color: inherit;
}
.boxxerLayout .boxxerLayoutColumn.isFlexible {
  max-width: none !important;
}
.boxxerLayout .boxxerLayoutColumn:not(.isEmpty) {
  min-width: 300px;
}
.boxxerLayout .boxxerLayoutColumn.isEmpty {
  min-width: 100px;
}
.boxxerLayout .boxxerLayoutColumn.isEmpty:not(.isFlexible) {
  flex: 0 0 auto !important;
}
.boxxerLayout .boxxerLayoutColumn:not(:last-child) {
  border-right: 1px solid;
  border-right-color: inherit;
}
.boxxerLayout .boxxerLayoutColumn > div:last-child {
  flex: 1;
}
.boxxerLayout .boxxerLayoutPosition {
  padding: 10px;
  position: relative;
  border-bottom: 1px solid;
  border-color: inherit;
  display: flex;
  flex-direction: column;
}
.boxxerLayout .boxxerLayoutPosition:not(.noLabel)::before {
  position: relative;
  top: -10px;
  left: -10px;
  transform: none;
  content: attr(data-title);
  font-size: 11px;
  background: #ecf1f7;
  padding: 3px 10px;
  border-bottom-right-radius: 10px;
  white-space: nowrap;
  display: inline-block;
  flex: 0;
  align-self: start;
}
.boxxerLayout .boxxerLayoutPosition::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: repeating-linear-gradient(45deg, #ffffff2b 0, #ffffff2b 5px, #eeeeee55 5px, #eeeeee55 10px) fixed;
  opacity: 0;
  display: none;
}
.boxxerLayout .boxxerLayoutPosition:not(.locked) .box .boxType {
  cursor: move;
}
.boxxerLayout .boxxerLayoutPosition .header {
  margin: -10px -10px 10px;
  padding: 10px;
  background: linear-gradient(to top, #ecf1f7, rgba(236, 241, 247, 0) 5px);
}
.boxxerLayout .boxxerLayoutPosition ul.boxList {
  list-style: none;
  min-height: 20px;
  flex: 1;
}
.boxxerLayout > .boxxerLayoutPosition:last-child {
  border-bottom: 0;
}
.boxxerLayout .boxxerLayoutBox {
  transition: opacity 0.15s ease-in-out;
  position: relative;
  z-index: 10;
}
.boxxerLayout .boxxerLayoutBox:hover {
  z-index: 15;
}
.boxxerLayout .boxxerLayoutBox.deleted .box {
  background: #f2dede;
  color: #a94442;
}
.boxxerLayout .boxxerLayoutBox.deleted .box .icon {
  color: inherit;
}
.boxxerLayout .boxxerLayoutBox.deleted .box .boxType {
  background: #ebcccc;
}
.boxxerLayout .boxxerLayoutBox.deleted .box .boxContent, .boxxerLayout .boxxerLayoutBox.deleted .box .boxType .actions {
  display: none;
}
.boxxerLayout .box {
  margin-bottom: 12px;
  background: #eee;
  border-radius: 4px;
}
.boxxerLayout .box.disabled {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(238, 238, 238, 0.5) !important;
}
.boxxerLayout .box.disabled .boxType {
  background: transparent !important;
}
.boxxerLayout .box.disabled .boxContent {
  display: none;
}
.boxxerLayout .box .boxType {
  position: relative;
  padding: 5px 10px;
  background: #ddd;
  border-radius: inherit;
  font-size: 0.9rem;
}
.boxxerLayout .box .boxTitle {
  padding: 5px 10px;
  font-size: 1rem;
}
.boxxerLayout .box .actions {
  position: absolute;
  right: 10px;
  top: 5px;
  opacity: 0;
  transition: all 0.15s ease-in-out;
}
.boxxerLayout .box .boxTitle + .boxContent {
  padding-top: 5px;
}
.boxxerLayout .box .boxContent {
  padding: 10px;
  font-size: 0.8rem;
  margin-top: 0 !important;
}
.boxxerLayout .box .boxContent img {
  max-width: 80px;
  max-height: 80px;
}
.boxxerLayout .box .boxContent .boxxerLayout {
  margin: -5px;
  background: #fff;
  border-radius: 4px;
  border-width: 0;
  border-color: #e2e2e2;
  position: relative;
}
.boxxerLayout .box .boxContent .boxxerLayout::after {
  position: absolute;
  z-index: 50;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.boxxerLayout .box .boxContent .boxxerLayout .boxxerLayoutPosition:not(.noLabel)::before {
  background: #e2e2e2;
}
.boxxerLayout .box .boxContent .boxxerLayout .boxxerLayoutPosition .header {
  background: linear-gradient(to top, #e2e2e2, rgba(226, 226, 226, 0) 5px);
}
.boxxerLayout .box .boxContent .placeholder {
  margin-top: 0;
  display: flex;
  align-items: center;
}
.boxxerLayout .box .boxContent .placeholder .icon {
  color: inherit;
}
.boxxerLayout .ui-sortable-helper {
  width: 200px !important;
  list-style: none;
}
.boxxerLayout .ui-sortable-helper .actions, .boxxerLayout .ui-sortable-helper .boxContent {
  display: none;
}
.boxxerLayout .ui-sortable-placeholder {
  margin-bottom: 12px;
  border: 1px dashed #9de09d;
  background: #e5f8e5;
  border-radius: 4px;
  visibility: visible !important;
}
.boxxerLayout .ui-sortable-placeholder.unsupported {
  display: none;
}
.boxxerLayout .ui-sortable-placeholder::before {
  /* this avoids the icon from being displayed, but will also
     enforce a matching height for the placeholder */
  visibility: hidden;
}
.boxxerLayout .horizontalLayout > ul {
  display: flex;
  flex-wrap: wrap;
  margin: -6px 0 6px -6px;
  width: 100%;
}
.boxxerLayout .horizontalLayout > ul > li {
  flex: 0 0 calc(25% - 12px);
  max-width: calc(25% - 12px);
  margin: 12px 0 0 12px;
  position: relative;
}
.boxxerLayout .horizontalLayout > ul > li > .box {
  margin-bottom: 0;
}

.boxxerLayoutContentPlaceholder {
  background-color: #ecf1f7;
  padding: 20px;
  text-align: center;
  box-shadow: inset 0 0 10px 0 #c3cbd4;
}

/* -- add -- */
.boxxerAdd {
  display: block;
  opacity: 0;
  position: relative;
  height: 12px;
  padding: 5px 0;
  z-index: 90;
  cursor: pointer;
}
.boxxerAdd::before {
  content: "";
  position: absolute;
  background: #4179ad;
  left: 0;
  top: 5px;
  right: 0;
  height: 2px;
}
.boxxerAdd::after {
  content: "";
  font-family: FontAwesome;
  font-size: 14px;
  height: 16px;
  line-height: 16px;
  width: 16px;
  color: #4179ad;
  padding: 1px 2px;
  position: relative;
  left: -2px;
  top: -9px;
  cursor: inherit !important;
  border-radius: 2px;
}
.boxxerAdd:hover {
  opacity: 1 !important;
}

.touch .boxxerAdd {
  opacity: 0.5;
  height: 22px;
}
.touch .boxxerAdd::before {
  top: 10px;
}
.touch .boxxerAdd::after {
  top: -4px;
}

.boxxerLayoutPosition .boxxerAdd::after {
  background: #fff;
}

.boxxerLayoutPosition.locked .boxxerAdd {
  visibility: hidden;
}

.boxxerLayoutBox > .boxxerAdd {
  margin-top: -12px;
}

.horizontalLayout:not(.isEmpty) > .boxxerAdd, .horizontalLayout:not(.isEmpty) > .boxList > .boxxerLayoutBox > .boxxerAdd {
  position: absolute;
  height: auto;
  width: 12px;
  top: 0;
  right: -12px;
  bottom: 0;
}
.horizontalLayout:not(.isEmpty) > .boxxerAdd::before, .horizontalLayout:not(.isEmpty) > .boxList > .boxxerLayoutBox > .boxxerAdd::before {
  left: 5px;
  top: 0;
  bottom: 0;
  right: auto;
  width: 2px;
  height: auto;
}
.horizontalLayout:not(.isEmpty) > .boxxerAdd {
  top: 38px;
  right: auto;
  left: 4px;
  bottom: auto;
}

.boxxerBoxTypeList .flexibleButtonGroup.optionTypeBoolean > li {
  margin-bottom: 5px;
  max-width: 100%;
}
.boxxerBoxTypeList .flexibleButtonGroup > li label:not(.boxOption) {
  cursor: default;
}
.boxxerBoxTypeList .flexibleButtonGroup > li label:not(.boxOption) > .icon {
  cursor: inherit !important;
}
.boxxerBoxTypeList .flexibleButtonGroup .flexibleButtonGroup {
  display: inline-flex;
  margin: -5px -10px -5px 5px;
}
.boxxerBoxTypeList .flexibleButtonGroup .flexibleButtonGroup > li:not(:last-child) {
  margin-right: 1px;
}
.boxxerBoxTypeList .flexibleButtonGroup .flexibleButtonGroup > li label {
  background: rgba(255, 255, 255, 0.5);
}
.boxxerBoxTypeList .flexibleButtonGroup .flexibleButtonGroup > li label.boxOption:hover, .boxxerBoxTypeList .flexibleButtonGroup .flexibleButtonGroup > li label.boxOption.active {
  background: rgba(255, 255, 255, 0.75);
}
.boxxerBoxTypeList .section {
  margin-top: 10px !important;
}

.boxxerBoxTypeList .flexibleButtonGroup :checked + .gray, .boxxerBoxTypeList .flexibleButtonGroup .gray:hover, .boxxerBoxTypeList .flexibleButtonGroup .gray.active, .boxxerColumnWidthContainer .flexibleButtonGroup :checked + .gray, .boxxerColumnWidthContainer .flexibleButtonGroup .gray:hover, .boxxerColumnWidthContainer .flexibleButtonGroup .gray.active {
  background: #555;
  color: #fff;
}

.boxxerColumnWidthContainer {
  margin: 20px 0 -10px;
}
.boxxerColumnWidthContainer > *:first-child {
  flex: 1 0 auto;
  margin-right: 10px;
}
.boxxerColumnWidthContainer > * {
  margin-bottom: 10px;
}

.boxxerColumnWidthCustomContainer {
  margin-left: 0;
  margin-right: 0;
  max-width: 300px;
}
.boxxerColumnWidthCustomContainer .col.deviceClass {
  flex: 1 0 60px;
  margin-left: 2px;
  margin-top: -2px;
}
.boxxerColumnWidthCustomContainer .col.deviceClass input, .boxxerColumnWidthCustomContainer .col.deviceClass dt {
  text-align: center;
}

.boxxerColumnWidthCustomDescription {
  margin-top: 0 !important;
}

.buttonDestruct {
  background: crimson !important;
  color: #fff !important;
}

html:not(.touch) .buttonDestruct:hover {
  background: #eb1f48 !important;
}

.boxxerBoxBadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 6px;
	margin: 4px;
}

@media screen and (min-width: 545px), print {
  .dialogFormSubmit.formSubmitFlex {
    display: flex;
  }
  .dialogFormSubmit.formSubmitFlex .spacer {
    flex: 1;
  }
}
/* -- menu switcher -- */
#boxxerMenuSwitcher {
  position: sticky;
  top: 0;
  background: #24425f;
  z-index: 10;
}
#boxxerMenuSwitcher ol {
  display: flex;
}
#boxxerMenuSwitcher ol li {
  flex: 1;
  padding: 7px;
  border-bottom: 1px solid #4c6884;
  cursor: pointer;
  text-align: center;
  color: #4c6884;
  transition: all 0.25s;
}
#boxxerMenuSwitcher ol li.active {
  border-bottom-color: #fff;
  color: #fff;
}
#boxxerMenuSwitcher ol li:hover {
  color: #fff;
}

/* -- page tree -- */
#boxxerPageTreeContainer .optionContainer {
  position: sticky;
  top: 35px;
  padding: 10px 15px 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #24425f;
  z-index: 10;
  margin-bottom: -15px;
}
#boxxerPageTreeContainer .optionContainer > input {
  background: #ffffff2e;
  border: 0 none;
  border-radius: 2px;
  color: #fff;
  flex: 1 1 auto;
}
#boxxerPageTreeContainer .optionContainer > input.focus-visible + .dropdown .sortByLabel {
  width: 0 !important;
  opacity: 0;
}
#boxxerPageTreeContainer .optionContainer > :not(:first-child) {
  margin-left: 5px;
  flex: 0 0 auto;
}
#boxxerPageTreeContainer .optionContainer > .dropdown {
  overflow: hidden;
}
#boxxerPageTreeContainer .optionContainer .button {
  white-space: nowrap;
}
#boxxerPageTreeContainer .optionContainer .button .sortByLabel {
  display: inline-block;
  transition: width 0.12s linear, opacity 0.12s linear;
}

#boxxerPageTree {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 20px;
  display: block;
}
#boxxerPageTree.searchActive ol .toggle {
  display: none;
}
#boxxerPageTree:not(.searchActive) li.collapsed .acpPageSubMenuItemList {
  display: none;
}
#boxxerPageTree:not(.searchActive) li.collapsed > .acpPageSubMenuLinkWrapper .toggle::before {
  content: "";
}
#boxxerPageTree > li::before, #boxxerPageTree > li::after {
  display: none !important;
}
#boxxerPageTree > li:first-child {
  margin-top: 0;
}
#boxxerPageTree .acpPageSubMenuCategory > .acpPageSubMenuItemList > .pageTreeItem > .acpPageSubMenuLinkWrapper .toggle {
  margin-left: -31px;
}
#boxxerPageTree li {
  --indent: 0;
  position: relative;
}
#boxxerPageTree li::before {
  pointer-events: none;
  position: absolute;
  left: var(--indent);
  top: 0;
  content: "";
  display: block;
  border-left: 1px solid #4c6884;
  height: 1em;
  border-bottom: 1px solid #4c6884;
  width: 10px;
}
#boxxerPageTree li::after {
  pointer-events: none;
  position: absolute;
  left: var(--indent);
  bottom: -7px;
  content: "";
  display: block;
  border-left: 1px solid #4c6884;
  height: 100%;
}
#boxxerPageTree li:last-child::after, #boxxerPageTree li.last-child::after {
  display: none;
}
#boxxerPageTree li.dimmed:not(.active) > a, #boxxerPageTree li.dimmed:not(.active) > .acpPageSubMenuLinkWrapper > a, #boxxerPageTree li.disabled:not(.active) > a, #boxxerPageTree li.disabled:not(.active) > .acpPageSubMenuLinkWrapper > a {
  opacity: 0.5;
}
#boxxerPageTree li.active .toggle:hover {
  color: #4c6884 !important;
}
#boxxerPageTree li.collapsed .fa-folder-open::before {
  content: "";
}
#boxxerPageTree li .hidden {
  display: none;
}
#boxxerPageTree li .acpPageSubMenuLink {
  text-overflow: unset;
  white-space: unset;
}
#boxxerPageTree li .acpPageSubMenuTitleWrapper {
  display: flex;
  padding: 0;
}
#boxxerPageTree li .acpPageSubMenuTitleWrapper > span:first-child {
  padding: 5px 20px;
  flex: 1 1 auto;
}
#boxxerPageTree li .acpPageSubMenuTitleWrapper > span:first-child > .icon {
  margin-left: -28px;
  margin-right: 8px;
}
#boxxerPageTree li .toggle, #boxxerPageTree li .pageTreeItem .toggle {
  cursor: pointer;
}
#boxxerPageTree li .toggle:hover, #boxxerPageTree li .pageTreeItem .toggle:hover {
  color: #fff;
}
#boxxerPageTree li .pageTreeItem .toggle {
  margin: -3px 0 0 -26px;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  color: #688db1;
}
#boxxerPageTree li .pageTreeItem .toggle::before {
  content: "";
}
#boxxerPageTree li .dropdownOpen .acpPageSubMenuIcon.jsEditButton {
  background: #2b4f71;
  opacity: 1 !important;
}
@media screen and (min-width: 1025px), print {
  #boxxerPageTree li.active > .acpPageSubMenuLinkWrapper .jsEditButton:not(:hover) {
    background: linear-gradient(-90deg, #fafafa 50%, rgba(250, 250, 250, 0));
  }
  #boxxerPageTree li .jsEditButton {
    position: absolute;
    right: 0;
  }
  #boxxerPageTree li .jsEditButton:not(:hover) {
    background: linear-gradient(-90deg, #2b4f71 50%, rgba(43, 79, 113, 0));
  }
  #boxxerPageTree li :not(.dropdownOpen) .jsEditButton {
    opacity: 0 !important;
  }
  #boxxerPageTree li .acpPageSubMenuLinkWrapper:hover .jsEditButton, #boxxerPageTree li .acpPageSubMenuTitleWrapper:hover .jsEditButton {
    opacity: 1 !important;
  }
}

#boxxerPageTreeMobileToggle {
  order: 4;
  margin-left: -74px;
  margin-right: 42px;
}

#boxxerPageTreeMobile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #24425f;
  z-index: 95;
}
#boxxerPageTreeMobile #boxxerPageTree {
  overflow: scroll;
}
#boxxerPageTreeMobile .acpPageSubMenuCategoryList .acpPageSubMenuLinkWrapper {
  display: flex;
}
#boxxerPageTreeMobile .acpPageSubMenuCategoryList .acpPageSubMenuLinkWrapper > .acpPageSubMenuLink {
  flex: 1 1 auto;
}
#boxxerPageTreeMobile .acpPageSubMenuCategoryList .acpPageSubMenuLinkWrapper > .acpPageSubMenuIcon {
  flex: 0 0 auto;
}
#boxxerPageTreeMobile .acpPageSubMenuCategoryList > .acpPageSubMenuCategory {
  padding-left: 20px;
}
#boxxerPageTreeMobile .acpPageSubMenuTitleWrapper {
  color: rgba(255, 255, 255, 0.5);
}
#boxxerPageTreeMobile .acpPageSubMenuLink, #boxxerPageTreeMobile .acpPageSubMenuIcon {
  display: block;
  overflow: hidden;
  padding: 5px 20px;
  color: white;
}
#boxxerPageTreeMobile .acpPageSubMenuLink.active, #boxxerPageTreeMobile .acpPageSubMenuLink.active + .acpPageSubMenuIcon {
  background-color: #fafafa !important;
  color: #2c3e50 !important;
}
#boxxerPageTreeMobile .acpPageSubMenuLink.active .icon, #boxxerPageTreeMobile .acpPageSubMenuLink.active + .acpPageSubMenuIcon .icon {
  opacity: 1;
}
#boxxerPageTreeMobile .icon {
  color: inherit;
}
#boxxerPageTreeMobile .jsEditButton .icon {
  opacity: 0.5;
}

.jsBoxxerInit .acpPageSubMenu > .acpPageSubMenuCategoryList.active > li.acpPageSubMenuCategory {
  display: none;
}
