:root {

  --dynaui-panel-layout-span: rgba(0,0,0,0.05);

  --dynaui-panel-layout-placeholder: rgba(0,0,0,0.5);

  --dynaui-panel-layout-panel: rgba(255,255,255,0.3);

  --dynaui-panel-layout-panel-notice: rgba(255,255,255,0.7);

  --dynaui-panel-layout-panel-border: rgba(255,255,255,0.4);

  --dynaui-panel-layout-panel-content: rgba(255,255,255,0.97);

  --dynaui-panel-layout-panel-content-border: rgba(255,255,255,1);

  --dynaui-panel-layout-panel-btn: rgba(230,230,230,0.9);

  --dynaui-panel-layout-panel-btn-border: rgba(230,230,230,1);

  --dynaui-panel-layout-panel-btn-hover: rgba(220,220,220,0.9);

  --dynaui-panel-layout-panel-btn-hover-border: rgba(220,220,220,1);

}

.dark-mode{

  --dynaui-panel-layout-span: rgba(255,255,255,0.05);

  --dynaui-panel-layout-placeholder: rgba(255,255,255,0.5);

  --dynaui-panel-layout-panel: rgba(0,0,0,0.3);

  --dynaui-panel-layout-panel-notice: rgba(0,0,0,0.7);

  --dynaui-panel-layout-panel-border: rgba(0,0,0,0.2);

  --dynaui-panel-layout-panel-content: rgba(0,0,0,0.97);

  --dynaui-panel-layout-panel-content-border: rgba(0,0,0,1);

  --dynaui-panel-layout-panel-btn: rgba(25,25,25,0.9);

  --dynaui-panel-layout-panel-btn-border: rgba(25,25,25,1);

  --dynaui-panel-layout-panel-btn-hover: rgba(35,35,35,0.9);

  --dynaui-panel-layout-panel-btn-hover-border: rgba(35,35,35,1);

}

body:has(> * > .panel-layout),

body:has(> .panel-layout) {

  overscroll-behavior-x: none;

  overflow-x: hidden;

}

.panel-layout {

  width: calc(100% - 2em);

  height: calc(100% - 2em);

  display: inline-block;

  border-radius: 1em;

  margin: 1em;

  background-size: cover;

  position: relative;

  color: var(--dynaui-text);

  transition: all 0.4s ease-in-out;

  background-color: var(--dynaui-panel-layout-span);

}

.panel-layout.no-panel {

  width: 100%;

  height: 100%;

  border-radius: 0;

  margin: 0;

}

.panel-layout a {

  text-decoration: none;

  color: inherit;

}

.panel-layout div img,

.panel-layout div svg {

  width: 1em;

  height: 1em;

  display: inline-block;

}

.panel-layout .multiplace {

  position: relative;

  height: 100%;

  padding: 0 3.5em;

  overflow-y: hidden;

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  gap: 1em;

  z-index: 0;

  align-items: center;

  transition: all 0.4s ease-in-out;

}

.panel-layout.modern .navs div.top > div,

.panel-layout.modern .notifications > div > div,

.panel-layout.modern .multiplace > div.spaceholder .dropzone > div > .content,

.panel-layout.modern .place > div > .content,

.panel-layout.modern .multiplace > div > .content,

.panel-layout.modern .place > div > .menu,

.panel-layout.modern .multiplace > div > .menu,

.panel-layout.modern .menu nav,

.panel-layout.modern .multiplace > div.spaceholder .dropzone > div,

.panel-layout.modern .place > div,

.panel-layout.modern .multiplace > div {

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}

.panel-layout.modern .menu nav,

.panel-layout.modern .multiplace > div.spaceholder .dropzone > div,

.panel-layout.modern .place > div,

.panel-layout.modern .multiplace > div {

  background: var(--dynaui-panel-layout-panel);

  border: solid 1px var(--dynaui-panel-layout-panel-border);

}

.panel-layout.modern .multiplace > div.spaceholder .dropzone > div > .content,

.panel-layout.modern .place > div > .content,

.panel-layout.modern .multiplace > div > .content,

.panel-layout.modern .place > div > .menu,

.panel-layout.modern .multiplace > div > .menu {

  background: var(--dynaui-panel-layout-panel-content);

}

.panel-layout.modern .navs div.top > div,

.panel-layout.modern .notifications > div > div {

  background: var(--dynaui-panel-layout-panel-notice);



}

.panel-layout .navs div.top > div,

.panel-layout .multiplace > div.spaceholder .dropzone > div > .content,

.panel-layout .place > div > .content,

.panel-layout .multiplace > div > .content,

.panel-layout .place > div > .menu,

.panel-layout .multiplace > div > .menu,

.panel-layout .menu nav,

.panel-layout .multiplace > div.spaceholder .dropzone > div,

.panel-layout .place > div,

.panel-layout .multiplace > div,

.panel-layout .notifications > div > div {

  background: var(--dynaui-panel-layout-panel-content);

  border: solid 1px var(--dynaui-panel-layout-panel-border);

}

.panel-layout .navs div.top > div,

.panel-layout .menu nav,

.panel-layout .multiplace > div.spaceholder .dropzone > div,

.panel-layout .place > div,

.panel-layout .multiplace > div,

.panel-layout .notifications > div > div {

  box-shadow: 0 10px 15px rgb(0 0 0 / 20%);

}

.panel-layout .place > div,

.panel-layout .multiplace > div {

  border-radius: 1em;

  position: relative;

  margin: 0;

  flex: 0 0 auto;

  scroll-snap-align: center;

  z-index: 1;

}

.panel-layout .multiplace > div.spaceholderx {

  width: 90vw;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div {

  border-radius: 1em;

  position: relative;

  margin: 0 0.5em 0.5em 0;

  z-index: 1;

  float: left;

  box-shadow: none;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div:last-child {

  margin: 0 0 0.5em;

}

.panel-layout .multiplace > div.spaceholder .dropzone:empty  {

  border: dotted 3px var(--dynaui-form-default-text);

  margin: 0 0.5em 0.5em;

  padding: 0.5em 3em;

  height: 20em;

  width: calc(100% - 7em - 6px);

  border-radius: 0.7em;

  position: relative;

  float: left;

  transition: all 0.4s ease-in-out;

}

.panel-layout .multiplace > div.spaceholder .dropzone:empty:before  {

  content: 'Drop panel here';

  line-height: 21em;

  width: 100%;

  position: absolute;

  text-align: center;

  left: 0;

  top: 0;

}

.panel-layout .multiplace > div.spaceholder .dropzone:not(:empty)  {

  border: none;

  margin: 0 0.5em 0.5em;

  padding: 0;

  width: auto;

  border-radius: 0;

  position: relative;

  max-height: calc(100vh - 14em);

  display: block;

  z-index: 0;

  transition: all 0.4s ease-in-out;

}

.panel-layout .multiplace.being-dragged > div.spaceholder .dropzone:not(:empty)  {

  display: inline-block;

}

.panel-layout .multiplace > div.spaceholder .dropzone:has(> .placeholder) {

 border: dotted 3px var(--dynaui-form-default-text);

  margin: 0 0.5em 0.5em;

  padding: 0.5em;

  width: calc(100% - 2em - 6px);

  border-radius: 0.7em;

}

.panel-layout .multiplace > div.placeholder {

  background: transparent;

  box-shadow: none;

  backdrop-filter:initial;

  border: 3px dashed var(--dynaui-panel-layout-placeholder);

}

.panel-layout .multiplace > div.smaller {

  margin: 10% 1%;

  height: 70%;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div > .title,

.panel-layout .place > div > .title,

.panel-layout .multiplace > div > .title {

  position: relative;

  padding: 0.4em 0.5em 0.5em;

  margin: 0 0.3rem;

  width: calc(100% - 1.6em);

  float: left;

}

.panel-layout .title .button {

  margin: 0 -0.3em 0 0.6em;

  line-height: 1.5em;

  padding: 0 0.8em;

  font-size: 0.9em;

  float: right;

}

.panel-layout .title img,

.panel-layout .title svg {

  display: inline-block;

  margin: 0 0.4em 0 0;

  vertical-align: sub;

  width: 1.2em;

  height: 1.2em;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div > .title > .handle,

.panel-layout .place > div > .title > .handle,

.panel-layout .multiplace > div > .title > .handle {

  width: auto;

  float: left;

  cursor: move;

  text-overflow: ellipsis;

  max-width: 80%;

  white-space: nowrap;

  overflow: hidden;

}

.panel-layout .place > div > .menu,

.panel-layout .multiplace > div > .menu {

  border-radius: 0.7em;

  position: relative;

  border: none;

  padding: 0.5em;

  margin: 0 0.3em 0.3em;

    margin-top: 0px;

  width: calc(100% - 1.7em);

  max-height: calc(100vh - 14em);

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: thin;

  float: left;

}

.panel-layout .place > div > .menu.selected,

.panel-layout .multiplace > div > .menu.selected {

  padding: 0.5em 0.5em 0.5em 1.3em;

  width: calc(100% - 2.5em);

  position: relative;

}

.panel-layout .place > div > .menu.selected::after,

.panel-layout .multiplace > div > .menu.selected::after {

  content: '';

  background-color: var(--dynaui-text);

  border-radius: 0.12em;

  position: absolute;

  right: calc(100% - 1em);

  height: 20%;

  width: 0.25em;

  top: 38%;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div > .content,

.panel-layout .place > div > .content,

.panel-layout .multiplace > div > .content {

  border-radius: 0.7em;

  position: relative;

  border: solid 1px var(--dynaui-panel-layout-panel-content-border);

  padding: 1em;

  margin: 0 0.3em 0.3em;

  width: calc(100% - 2.7em);

  max-height: calc(100vh - 16em);

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: thin;

  float: left;

  position: relative;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div > .content {

  max-height: calc(100vh - 17em) !important;

}

.panel-layout .place > div > .content .buttons,

.panel-layout .multiplace > div > .content .buttons,

.panel-layout .place > div > .content nav,

.panel-layout .multiplace > div > .content nav {

  float: left;

}

.panel-layout .place > div::before,

.panel-layout .multiplace > div::before {

  content: "";

  pointer-events: none;      /* so it doesn’t block clicks/scrolls */

  position: absolute;

  left: 0.7em;

  right: 0.7em;

  bottom: 0.5em;

  height: 4em;             /* how tall the fade is */

  background: linear-gradient(

    to bottom,

    rgba(255,255,255, 0) 0%,  /* transparent at top */

    rgba(255,255,255, 1) 100% /* solid at bottom */

  );

  z-index: 1;

  display: none;

}

.panel-layout.hover-options .place > div > .content .showhide-hover,

.panel-layout.hover-options .multiplace > div > .content .showhide-hover {

  display: none;

  transition: all 0.4s ease-in-out;

}

.panel-layout.hover-options .place > div:hover > .content .showhide-hover,

.panel-layout.hover-options .multiplace > div:hover > .content .showhide-hover {

  display:inline-block;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div > .content.transperent,

.panel-layout .place > div > .content.transperent,

.panel-layout .multiplace > div > .content.transperent {

  padding: 0;

  background: none;

  border: none;

  width: calc(100% - 0.7em);

  backdrop-filter: initial;

  -webkit-backdrop-filter: initial;

}

.panel-layout .place > div > .content.transperent .buttons:only-child,

.panel-layout .multiplace > div > .content.transperent .buttons:only-child

.panel-layout .place > div > .content.transperent .buttons:last-child,

.panel-layout .multiplace > div > .content.transperent .buttons:last-child {

  margin-bottom: 0;

  padding-bottom: 0 !important;

}

.panel-layout .place > div > .content form,

.panel-layout .multiplace > div > .content form {

  margin: 0;

  padding: 0;

}

.panel-layout .navs nav {

  position: absolute;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 100;

  transition: all 0.4s ease-in-out;

}

.panel-layout .navs nav.top ul::before,

.panel-layout .navs nav.right ul::before,

.panel-layout .navs nav.bottom ul::before,

.panel-layout .navs nav.left ul::before {

  content: "";

  position: absolute;

  background-color: transparent;

  height: 2em;

  width: 1em;

  box-shadow: 0 -1em 0 0 var(--dynaui-bg);

}

.panel-layout .navs nav.top ul::after,

.panel-layout .navs nav.right ul::after,

.panel-layout .navs nav.bottom ul::after,

.panel-layout .navs nav.left ul::after {

  content: "";

  position: absolute;

  background-color: transparent;

  height: 2em;

  width: 1em;

  box-shadow: 0 -1em 0 0 var(--dynaui-bg);

}

.panel-layout.no-panel .navs nav ul::before,

.panel-layout.no-panel .navs nav ul::after {

  display: none;

}

.panel-layout .navs nav.top {

  left: 0;

  top: 0;

  width: 100%;

  opacity: 0;

  animation: slideTop 0.4s ease-out forwards;

}

.panel-layout .navs nav.bottom ul.floating li {

  margin: 0 0 -0.5em;

}

.panel-layout .navs nav.top li a small,

.panel-layout .navs nav.bottom li a small {

  line-height: 1.5em;

  float: right;

  margin-left: 0.3em;

}

.panel-layout .navs nav.top ul::before {

  border-top-right-radius: 1em;

  top: 0;

  right: 100%;

}

.panel-layout .navs nav.top ul::after {

  border-top-left-radius: 1em;

  top: 0;

  left: 100%;

}

.panel-layout .navs nav.bottom {

  left: 0;

  bottom: 0;

  width: 100%;

  opacity: 0;

  animation: slideBottom 0.4s ease-out forwards;

}

.panel-layout .navs nav.bottom ul::after,

.panel-layout .navs nav.bottom ul::before {

  bottom: 0.51em;

}

.panel-layout .navs nav.bottom ul::before {

  border-top-right-radius: 1em;

  right: calc(100% + 0.51em);

  transform: rotate(90deg);

}

.panel-layout .navs nav.bottom ul::after {

  border-top-left-radius: 1em;

  left: calc(100% + 0.51em);

  transform: rotate(270deg);

}

.panel-layout .navs nav.left ul::after,

.panel-layout .navs nav.left ul::before {

  left: 0.51em;

  transform: rotate(270deg);

}

.panel-layout .navs nav.left ul::before {

  border-top-right-radius: 1em;

  top: calc(100% - 0.51em);

}

.panel-layout .navs nav.left ul::after {

  border-top-left-radius: 1em;

  bottom: calc(100% - 0.51em);

}

.panel-layout .navs nav.right ul::after,

.panel-layout .navs nav.right ul::before {

  right: 1.51em;

  transform: rotate(90deg);

}

.panel-layout .navs nav.right ul::before {

  border-top-right-radius: 1em;

  bottom: calc(100% - 0.51em);

}

.panel-layout .navs nav.right ul::after {

  border-top-left-radius: 1em;

  top: calc(100% - 0.51em);

}

.panel-layout .navs nav.left {

  left: -10em;

  top: 0;

  width: 3.3em;

  height: 100%;

  opacity: 0;

  animation: slideLeft 0.4s ease-out forwards;

}

.panel-layout .navs nav.right {

  right: 0;

  top: 0;

  width: 3.3em; 

  height: 100%;

  opacity: 0;

  animation: slideRight 0.4s ease-out forwards;

}

@keyframes slideTop {

  from { top: -10em; opacity: 0; }

  to   { top: 0; opacity: 1; }

}

@keyframes slideRight {

  from { right: -10em; opacity: 0; }

  to   { right: 0; opacity: 1; }

}

@keyframes slideBottom {

  from { bottom: -10em; opacity: 0; }

  to   { bottom: 0; opacity: 1; }

}

@keyframes slideLeft {

  from { left: -10em; opacity: 0; }

  to   { left: 0; opacity: 1; }

}

.panel-layout .navs nav ul {

  display: inline-block;

  background-color: var(--dynaui-bg);

  padding: 0.5em;

  position: relative;

  transition: all 0.2s ease-in, all 0.3s ease-out;

}

.panel-layout .navs nav ul li {

  padding: 0;

  width: auto;

  margin: 0;

  transition: all 0.1s ease-in-out, all 0.2s ease-out;

  z-index: 1;

  position: relative;

}

.panel-layout .navs nav.top ul li,

.panel-layout .navs nav.bottom ul li {

  float:left;

}

.panel-layout .navs nav.top ul li.selected:before,

.panel-layout .navs nav.right ul li.selected:before,

.panel-layout .navs nav.bottom ul li.selected:before,

.panel-layout .navs nav.left ul li.selected:before {

  content: '';

  background-color: var(--dynaui-text);

  border-radius: 0.125em;

  position: absolute;

}

.panel-layout .navs nav.top ul li.selected:before,

.panel-layout .navs nav.bottom ul li.selected:before {

  width: 20%;

  height: 0.25em;

  left: 40%;

}

.panel-layout .navs nav.right ul li.selected:before,

.panel-layout .navs nav.left ul li.selected:before {

  height: 20%;

  width: 0.25em;

  top: 40%;

}

.panel-layout .navs nav.top ul li.selected:before {

  top: calc(100% + 0.125em);

}

.panel-layout .navs nav.right ul li.selected:before {

  right: calc(100% + 0.125em);

}

.panel-layout .navs nav.bottom ul li.selected:before {

  bottom: calc(100% + 0.125em);

}

.panel-layout .navs nav.left ul li.selected:before {

  left: calc(100% + 0.125em);

}

.panel-layout .navs nav.top ul {

  border-radius: 0 0 2em 2em;

  padding: 1em 0.5em 0.5em;

  margin: -1em 0 0;

}

.panel-layout .navs nav.bottom ul {

  border-radius: 2em 2em 0 0;

  padding: 0.5em 0.5em 1em;

  margin: 0 0 -1em;

}

.panel-layout .navs nav.left ul {

  border-radius: 0 2em 2em 0;

  padding: 0.7em 0.5em 0.7em 1em;

  margin: 0 0 0 -1em;

}

.panel-layout .navs nav.right ul {

  border-radius: 2em 0 0 2em;

  padding: 0.7em 1em 0.7em 0.5em;

  margin: 0 -1em 0 0;

}

.panel-layout .navs nav.right ul li,

.panel-layout .navs nav.left ul li {

  padding: 0;

  display: block;

}

.panel-layout .navs nav ul li a {

  padding: 0.7em 0.8em 0.5em;

  display: inline-block;

  border-radius: 1.5em;

  margin: 0.05em;

  transition: all 0.3s ease-in-out;

  cursor: pointer;

  color: var(--dynaui-text);

  position: relative;

}

.panel-layout .navs nav ul li.selected a,

.panel-layout .navs nav ul li a:hover {

  background-color: var(--dynaui-panel-layout-panel-btn-hover);

}

.panel-layout .navs nav ul li a span {

  border-radius: 50%;

  position: absolute;

  background-color: var(--dynaui-text);

  font-size: 60%;

  width: 0.8rem;

  height: 0.8rem;

  text-align: center;

  top: -0.2em;

  right: -0.2em;

  padding: 0;

  display: flex;

  color: var(--dynaui-bg);

  transition: all 0.3s ease-in-out;

}

.panel-layout .navs nav ul li a span.show,

.panel-layout .navs nav ul li a:hover span {

  width: 1.4rem;

  height: 1.4rem;

}

.panel-layout .navs nav ul li a span i {

  font-style: normal;

  display: none;

}

.panel-layout .navs nav ul li a span.show i,

.panel-layout .navs nav ul li a:hover span i {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

}

.panel-layout .navs nav.top ul.left,

.panel-layout .navs nav.bottom ul.left {

  left: 4.7em;

  position: absolute;

}

.panel-layout .navs nav.top ul.right,

.panel-layout .navs nav.bottom ul.right {

  right: 4.7em;

  position: absolute;

}

.panel-layout .navs nav.right ul.top,

.panel-layout .navs nav.left ul.top {

  top: 4.7em;

  position: absolute;

}

.panel-layout .navs nav.right ul.bottom,

.panel-layout .navs nav.left ul.bottom {

  bottom: 4.7em;

  position: absolute;

}

.panel-layout .navs nav ul.hover li {

  visibility: hidden;

}

.panel-layout .navs nav ul.hover:hover li {

  visibility: inherit;

}

.panel-layout .navs nav.top ul.hover {

  top: -2em;

}

.panel-layout .navs nav.top ul.hover:hover {

  top: 0;

}

.panel-layout .navs nav.bottom ul.hover.right,

.panel-layout .navs nav.bottom ul.hover.left,

.panel-layout .navs nav.bottom ul.hover {

  bottom: -2em;

}

.panel-layout .navs nav.bottom ul.right,

.panel-layout .navs nav.bottom ul.left,

.panel-layout .navs nav.bottom ul.hover:hover {

  bottom: 0;

}

.panel-layout .navs nav.right ul.hover {

  right: -2em;

}

.panel-layout .navs nav.right ul.hover:hover {

  right: 0;

}

.panel-layout .navs nav.left ul.hover {

  left: -2em;

}

.panel-layout .navs nav.left ul.hover:hover {

  left: 0;

}

.panel-layout .navs nav ul.floating {

  border-radius: 1.2em;

  padding: 0.3em;

}

.panel-layout .navs nav ul.floating::before,

.panel-layout .navs nav ul.floating::after {

  display: none;

}

.panel-layout .navs nav.right ul.floating {

  right: 1em;

}

.panel-layout .navs nav ul.floating.right {

  right: 0.5em;

}

.panel-layout .navs nav.left ul.floating {

  left: 1em;

}

.panel-layout .navs nav ul.floating.left {

  left: 0.5em;

}

.panel-layout .navs nav.top ul.floating {

  top: 1.5em;

}

.panel-layout .navs nav ul.floating.top {

  top: 0.5em;

}

.panel-layout .navs nav.bottom ul.floating {

  bottom: 1.5em;

}

.panel-layout .navs nav ul.floating.bottom {

  bottom: 0.5em;

}

.panel-layout .navs nav.right ul.floating.top,

.panel-layout .navs nav.right ul.floating.bottom {

  right: 1.5em;

}

.panel-layout .navs nav.left ul.floating.top,

.panel-layout .navs nav.left ul.floating.bottom {

  left: 1.5em;

}

.panel-layout .navs nav.top ul.floating.right {

  border-radius: 1.2em 1.2em 0.8em 1.2em;

}

.panel-layout .navs nav.bottom ul.floating.right {

  border-radius: 1.2em 1.2em 1.2em 0.8em;

}

.panel-layout .navs nav ul li a.profile {

  background-size: cover;

  width: 2em;

  height: 2em;

  padding: 0;

  margin: 0.35em;

  transition: all 0.2s ease-in-out;

}

.panel-layout .navs nav ul li a.profile.selected {

  width: 2.5em;

  height: 2.5em;

  margin: 0.1em;

  transition: all 0.1s ease-in-out;

}

.panel-layout .navs nav ul li.selected a.profile,

.panel-layout .navs nav ul li a.profile:hover {

  width: 2.7em;

  height: 2.7em;

  margin: 0;

}

.panel-layout .menu {

  margin: 0;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: inherit;

}

.panel-layout .menu > span,

.panel-layout .wallpapers > span,

.panel-layout .place > span {

  background: var(--dynaui-panel-layout-span);

  margin: 0;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  cursor: alias;

  z-index: 0;

  border-radius: inherit;

  backdrop-filter: blur(1px);

  -webkit-backdrop-filter: blur(1px);

}

.panel-layout.no-panel .menu > span,

.panel-layout.no-panel .wallpapers > span,

.panel-layout.no-panel .place > span {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.panel-layout .menu nav {

  border-radius: 1.2em;

  max-height: 90%;

  margin: 0;

  scroll-snap-align: center;

  position: absolute;

  padding: 0.5em 0.5em 0;

  z-index: 10;

}

.panel-layout .menu nav.top-right,

.panel-layout .menu nav.top-left {

  top: 1.5em;

}

.panel-layout .menu nav.bottom-right,

.panel-layout .menu nav.bottom-left {

  bottom: 1.5em;

}

.panel-layout .menu nav.top-left,

.panel-layout .menu nav.bottom-left {

  left: 1.5em;

}

.panel-layout .menu nav.top-right,

.panel-layout .menu nav.bottom-right {

  right: 1.5em;

}

.panel-layout .menu nav.floating.top-right,

.panel-layout .menu nav.floating.top-left {

  top: 5em;

}

.panel-layout .menu nav.floating.bottom-right,

.panel-layout .menu nav.floating.bottom-left {

  bottom: 5em;

}

.panel-layout .menu nav.floating.top-left,

.panel-layout .menu nav.floating.bottom-left {

  left: 5em;

}

.panel-layout .menu nav.floating.top-right,

.panel-layout .menu nav.floating.bottom-right {

  right: 5em;

}

.panel-layout .menu nav.floating.bottom {

  bottom: 5em;

  left: calc(50% - 1em - 6.5em);

}

.panel-layout .menu nav ul:not(:empty) {

  margin: 0 0 0.5em;

  display: inline-block;

  width: 100%;

}

.panel-layout .menu nav ul:last-child {

  margin: 0;

}

.panel-layout .place > div > .content nav.menu-panel,

.panel-layout .multiplace > div > .content nav.menu-panel {

  display: inline-block;

  margin: 0;

}

.panel-layout .place > div > .content nav.menu-panel li,

.panel-layout .multiplace > div > .content nav.menu-panel li,

.panel-layout .menu nav li {

  margin: 0;

  float: left;

  height: 2.4em;

  width: 100%;

}

.panel-layout .place > div > .content nav.menu-panel li a,

.panel-layout .multiplace > div > .content nav.menu-panel li a,

.panel-layout .menu nav li a {

  background: transparent;

  border-radius: 0;

  border: 1px solid transparent;

  padding: 0.3em 0.7em;

  font-size: 1em;

  margin: 0;

  width: calc(100% - 1.4em - 2px);

  color: inherit;

  transition: all 0.4s ease-in-out;

  float: left;

  cursor: pointer;

}

.panel-layout .place > div > .content nav.menu-panel li a,

.panel-layout .multiplace > div > .content nav.menu-panel li a,

.panel-layout .menu nav li a {

  background: var(--dynaui-form-button);

  border-radius: 1em;

  border: solid 1px var(--dynaui-form-button);

}

.panel-layout .menu nav li a {

  border-radius: 0.5em;

  margin: 0.1em 0;

  height: auto;

}

.panel-layout .menu nav li:not(.hide):first-child a {

  border-top-left-radius: 1em;

  border-top-right-radius: 1em;

}

.panel-layout .menu nav li:not(.hide):last-child a {

  border-bottom-left-radius: 1em;

  border-bottom-right-radius: 1em;

}

.panel-layout .place > div > .content nav.menu-panel li a.solid,

.panel-layout .multiplace > div > .content nav.menu-panel li a.solid,

.panel-layout .menu nav li a.solid {

  background: transparent;

  border: solid 1px var(--dynaui-form-button);

}

.panel-layout .place > div > .content nav.menu-panel li a.dashed,

.panel-layout .multiplace > div > .content nav.menu-panel li a.dashed,

.panel-layout .menu nav li a.dashed {

  background: transparent;

  border: dashed 1px var(--dynaui-form-button);

}

.panel-layout .place > div > .content nav.menu-panel li a.dotted,

.panel-layout .multiplace > div > .content nav.menu-panel li a.dotted ,

.panel-layout .menu nav li a.dotted {

  background: transparent;

  border: dotted 1px var(--dynaui-form-button);

}

.panel-layout .place > div > .content nav.menu-panel li a:hover,

.panel-layout .multiplace > div > .content nav.menu-panel li a:hover,

.panel-layout .menu nav li a:hover {

  background: var(--dynaui-form-button-one);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  border-color: var(--dynaui-form-button-one);

}

.panel-layout .place > div > .content nav.menu-panel li a.solid:hover,

.panel-layout .multiplace > div > .content nav.menu-panel li a.solid:hover,

.panel-layout .menu nav li a.solid:hover,

.panel-layout .place > div > .content nav.menu-panel li a.dashed:hover,

.panel-layout .multiplace > div > .content nav.menu-panel li a.dashed:hover,

.panel-layout .menu nav li a.dashed:hover,

.panel-layout .place > div > .content nav.menu-panel li a.dotted:hover,

.panel-layout .multiplace > div > .content nav.menu-panel li a.dotted:hover ,

.panel-layout .menu nav li a.dotted:hover {

  background: transparent;

  border-color: var(--dynaui-form-button-one);

}

.panel-layout .menu nav li a img,

.panel-layout .menu nav li a svg {

  width: 0.8em;

  height: 0.8em;

  margin-right: 0.2em;

}

.panel-layout .place > div > .content nav.menu-panel li:empty,

.panel-layout .multiplace > div > .content nav.menu-panel li:empty,

.panel-layout .menu nav li:empty {

  margin: .2em;

  padding: 0;

  background: transparent;

  border: none;

  height: 0;

}

.panel-layout .place > div > .content nav.menu-panel li a svg,

.panel-layout .multiplace > div > .content nav.menu-panel li a svg,

.panel-layout .menu nav nav.menu-panel a svg,

.panel-layout .place > div > .content nav.menu-panel li a img,

.panel-layout .multiplace > div > .content nav.menu-panel li a img,

.panel-layout .menu nav li a img {

  margin-right: 0.5em;

}

.panel-layout .notifications {

  z-index: 99999;

  position: relative;

  top: -100%;

  left: 0;

}

.panel-layout .notifications .top-right {

  top: 4.8em;

  right: 4em;

  position: absolute;

  z-index: 1;

}

.panel-layout .notifications > div > div {

  border-radius: 1em;

  position: relative;

  min-height: 6em;

  max-height: 6em;

  margin: 0 0 0.5em;

  padding: 1em;

  width: 22rem;

  transition: all 0.2s ease-in-out;

  font-size: 0.9em;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div > .title > span.config,

.panel-layout .notifications > div > div > span.config,

.panel-layout .multiplace > div.spaceholder .dropzone > div > .title > span.close,

.panel-layout .notifications > div > div > span.close {

  position: absolute;

  top: 0.3em;

  right: 0.3em;

  transition: all 0.2s ease-in-out;

}

.panel-layout .multiplace > div.spaceholder:has(> .dropzone:not(:empty)) > .title > span.config,

.panel-layout .multiplace > div.spaceholder:has(> .dropzone:not(:empty)) > .title > span.close {

  display: none;

}

.panel-layout .multiplace > div.spaceholder .dropzone > div > .title > span.config,

.panel-layout .multiplace > div.spaceholder .dropzone > div > .title > span.close {

  top: 0.6em;

}

.panel-layout span.config,

.panel-layout span.close {

  background-color: var(--dynaui-text);

  width: 1em;

  height: 1em;

  border-radius: 50%;

  cursor: pointer;

  position: relative;

}

.panel-layout span.config::before,

.panel-layout span.close::before {

  color: var(--dynaui-bg);

  width: 1em;

  content: '\00D7';

  top: 0;

  left: 0;

  position: absolute;

  transition: all 0.2s ease-in-out;

  font-size: 1em;

  line-height: 1.1em;

  text-align: center;

  opacity: 0.8;

}

.panel-layout span.config::before {

  content: "\2699";

  line-height: 0.84em;

  width: 0.95em;

}

.panel-layout span.config:hover:before,

.panel-layout span.close:hover:before {

  opacity: 1;

}

.panel-layout .multiplace > div > .title > span.config,

.panel-layout .multiplace > div > .title > span.close {

  float: right;

  margin: 0.25em -0.3em 0 0.6em;

}

.panel-layout .notifications h1,

.panel-layout .notifications p {

  padding: 0;

  margin: 0;

  font-size: inherit;

}

.panel-layout .notifications small {

  float: right;

}

.panel-layout .notifications > div.stack > div {

  position: absolute;

  opacity: 0;

}

.panel-layout .notifications > div.stack > div:nth-last-child(1) {

  top: 0;

  right: 0;

  opacity: 1;

  z-index: 10;

}

.panel-layout .notifications > div.stack > div:nth-last-child(2) {

  top: 0.5em;

  right: 0.5em;

  opacity: 0.7;

  z-index: 9;

  width: calc(22rem - 1em);

}

.panel-layout .notifications > div.stack > div:nth-last-child(3) {

  top: 1em;

  right: 1em;

  opacity: 0.4;

  z-index: 8;

  width: calc(22rem - 2em);

}

.panel-layout .notifications > div.stack > div:nth-last-child(4) {

  top: 1.5em;

  right: 1.5em;

  opacity: 0.1;

  z-index: 7;

  width: calc(22rem - 3em);

}

.panel-layout .button {

  background: var(--dynaui-panel-layout-panel-btn);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  border-radius: 0.8em;

  border: solid 1px var(--dynaui-panel-layout-panel-btn-border);

  margin: 1em 0.5em 0 0;

  padding: 0 2em;

  transition: all 0.4s ease-in-out;

}

.panel-layout .button:hover {

  background: var(--dynaui-panel-layout-panel-btn-hover);

  border: solid 1px var(--dynaui-panel-layout-panel-btn-hover-border);

}

.panel-layout .button.right {

  margin: 1em 0 0 0.5em;

}

.panel-layout .place {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  position: absolute;

  z-index: 10;

  border-radius: inherit;

  top: 0;

  left: 0;

}

.panel-layout .wallpapers {

  width: 100%;

  height: 100%;  

  z-index: 10;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: inherit;

}

.panel-layout .wallpapers > div {

  position: absolute;

  bottom: 0;

  left: 0;

  width: calc(100% - 10em);

  overflow-y: hidden;

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  gap: 0;

  align-items: center;

  padding: 5em 5em 6em;

  background-color: rgba(0,0,0,0.3);

}

.panel-layout .wallpapers > div > div {

  width: 30em;

  height: 20em;

  display: inline-block;

  background-size: cover;

  border-radius: 2em;

  margin: 0 5em 0 0;

  transition: all 0.4s ease-in-out;

  flex: 0 0 auto;

  opacity: 0.9;

}

.panel-layout .wallpapers > div > div:hover {

  opacity: 1;

}

.panel-layout .dragging {

  opacity: 0.6;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  transition: none;

}

.panel-layout.no-panel .navs nav ul li a span {

  top:-0.1em;

  right:0;

}

.panel-layout .multiplace > div.spaceholder.locked .dropzone > div {

  background-color: transparent;

  border: none;

}

.panel-layout .multiplace > div.spaceholder.locked .dropzone > div > .title{

  display: none;

}

.panel-layout .multiplace > div.spaceholder.locked .dropzone > div > .content {

  margin: 0;

  width: calc(100% - 2em);

  max-height: initial;

  overflow: hidden;

}

.panel-layout .multiplace > div.spaceholder.locked .dropzone > div > .content.transperent {

  margin: 0;

  width: 100%;

  max-height: initial;

  overflow: hidden;

}

.panel-layout .multiplace > div.spaceholder:has(> .dropzone:not(:empty)) span.lockset {

  background-color: var(--dynaui-form-button);

  width: 2em;

  height: 1em;

  border-radius: 0.5em;

  cursor: pointer;

  position: absolute;

  top: 0.6em;

  right: 0.2em;

  opacity: 0.5;

}

.panel-layout .multiplace > div.spaceholder.locked:has(> .dropzone:not(:empty)) span.lockset {

  opacity: 1;

}

.panel-layout h2 .button,

.panel-layout h3 .button,

.panel-layout h4 .button {

  margin: 0 0.5em 0 0;

  font-size: 0.6em;

  line-height: 2em !important;

  padding: 0 1em !important;

}

.panel-layout h2 a svg,

.panel-layout h2 a img {

  width: 0.8em;

  height: 0.8em;

}

.panel-layout h2 a span {

  margin-left: 0.2em;

}

.panel-layout h2 .button.right,

.panel-layout h3 .button.right,

.panel-layout h4 .button.right {

  margin: 0 0 0 0.5em;

}

.hide-button-helpers.panel-layout h2 .button span,

.hide-button-helpers .panel-layout h2 .button span,

.hide-button-helpers.panel-layout h3 .button span,

.hide-button-helpers .panel-layout h3 .button span,

.hide-button-helpers.panel-layout h4 .button span,

.hide-button-helpers .panel-layout h4 .button span {

  display: none;

}

.panel-layout .forms fieldset {

  padding: 0.5em;

  width: calc(100% - 1em - 2px);

}

.panel-layout .forms fieldset .radios.menu {

  margin: 0 0 0.4em;

  padding: 0.1em 0.5em;

  width: calc(100% - 1em - 2px);

  font-size: 86%;

}

.panel-layout .content {

  container: content / inline-size;

}

@container content (max-width: 19em) {

  .panel-layout .content form.absolute {

    position: relative !important;

  }

}

@container content (min-width: 20em) {

  .panel-layout .content form.absolute {

    position: absolute;

    right: -0.5em;

    top: -0.5em;

    width: 12em;

  }

}

.panel-layout .content > div {

  position: relative;

}

.panel-layout .content > form {

  background: var(--dynaui-form-tre);

  padding: 0.5em !important;

  border-radius: 0.6em 0.6em 0 0 !important;

  margin: -1em -1em 1em !important;

  border: none;

  width: calc(100% + 1em);

}

.panel-layout .content.transperent > form {

  padding: 0.5em !important;

  border-radius: 0.7em !important;

  margin: 0 0 0.2em !important;

  width: calc(100% - 1em);

}

.panel-layout .content > form > fieldset:only-child {

  margin: 0;

}

.panel-layout .navs nav ul li a span:has(> i:empty) {

  display: none !important;

}



.panel-layout .notifications .button {

  margin: 0;

  position: absolute;

  bottom: 1em;

  left: 1em;

  font-size: inherit;

  line-height: 2.4em;

  padding: 0 1.5em;

}

.panel-layout .notifications .button.right {

  left: unset;

  right: 1em;

}

.panel-layout .entry {

  border: solid 1px var(--dynaui-form-border);

  border-radius: var(--dynaui-form-border-radius);

  padding: 0;

  margin: 0 0 0.5em;

}

.panel-layout .entry > div {

  display: inline-block;

  width: 100%;

}

.panel-layout .entry .title small {

  float: right;

}

.panel-layout .entry .inbox > span {

  background-color: var(--dynaui-bg-tre);

  width: 3em;

  float: left;

  line-height: 3em;

  text-align: center;

  margin: 0.2em 0.5em 0;

  border-radius: 50%;

}

.panel-layout .entry .inbox > div {

  float: left;

  margin-left: 0.3em;

  line-height: 1em;

  margin-top: 0.7em;

}

.panel-layout .entry .inbox > div > small {

  display: inline-block;

  width: 100%;

}

.panel-layout .entry:has(> .note) {

  border-left: solid 0.3em #ffd15c;

}

.panel-layout .entry .title {

  line-height: 2em;

  padding: 0 0.5em;

  border-radius: inherit;

  text-transform: uppercase;

  font-size: 0.8em;

  width: calc(100% - 1em);

}

.panel-layout .entry .note {

  background: #fff;

  background: -webkit-gradient(linear,0 0,0 100%,from(#d9eaf3),color-stop(4%,#fdf3b6)) 0 4px;

  background: -webkit-linear-gradient(top,#d9eaf3 0,#fff 8%) 10px 4px;

  background: -moz-linear-gradient(top,#d9eaf3 0,#fff 8%) 0 0.2em;

    background-size: auto;

  background-size: auto;

  background: -ms-linear-gradient(top,#d9eaf3 0,#fff 8%) 0 4px;

  background: -o-linear-gradient(top,#d9eaf3 0,#fff 8%) 0 4px;

  background: linear-gradient(top,#d9eaf3 0,#fff 8%) 0 4px;

  -webkit-background-size: 100% 1.5em;

  -moz-background-size: 100% 1.5em;

  -ms-background-size: 100% 1.5em;

  -o-background-size: 100% 1.5em;

  background-size: 100% 1.4em;

  line-height: 1.4em;

  padding: 0.5em;

  font-weight: 200;

  border-radius: inherit;

  position: relative;

    width: calc(100% - 1em);

}

.panel-layout .entry .note span {

  position: absolute;

  bottom: 0;

  right: 0;

  padding: 0.3em;

}

.panel-layout .entry .note small {

  position: absolute;

  top: 0;

  right: 0;

  padding: 0.3em;

}

.panel-layout .navs div.top {

  position: absolute;

  top: 0;

  right: 0;

  z-index: 10000000;

  padding: 0.5em;

  width: calc(100% - 14em);

  display: flex;

  justify-content: flex-end;

  overflow-y: hidden;

  overflow-x: auto;

}

.panel-layout .navs div.top > div {

  border-radius: 0.8em;

  position: relative;

  margin: 0 0 0 0.5em;

  padding: 0 0 0.2em;

  width: 8em;

  transition: all 0.2s ease-in-out;

  text-align: center;

  flex: 0 0 auto;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

}

.panel-layout .navs div.top > div.timezone > small {

  width: 100%;

  display: inline-block;

  text-transform: uppercase;

  font-size: 0.7em;

  -webkit-user-select: none;

  user-select: none;

  line-height: 1em;

}

.panel-layout .navs div.top > div.timezone > span {

  font-size: 1.8em;

  -webkit-user-select: none;

  user-select: none;

  line-height: 1em;

  display: inline-block;

  width: 100%;

}

.panel-layout .navs div.top > div.timezone::after {

  content: '';

  position: absolute;

  background-color: var(--dynaui-text);

  border-radius: 2px;

  opacity: 0.1;

  left: 0.125em;

  height: 30%;

  width: 0.25em;

  top: 35%;

}

.panel-layout .navs div.top > div.timezone:has(> .daytime)::after {

  opacity: 1

}

.panel-layout .navs div.top > div .close {

  position: absolute;

  width: 1em;

  height: 1em;

  background-color: var(--dynaui-text);

  border-radius: 50%;

  top: -0.2em;

  right: -0.2em;

  visibility: hidden;

  cursor: pointer;

}

.panel-layout .navs div.top > div:hover .close {

  visibility: inherit;

}

.button {

  position: relative;

}

.button nav {

  position: absolute;

  z-index: 1000000000000;

  background-color: var(--dynaui-panel-layout-panel-btn);

  top: 0;

  border-radius: 0.5em;

  right: 0;

  width: 200%;

  visibility: hidden;

}

.button:hover nav {

  visibility: visible;

}

.button nav ul li {

  margin: 0;

  position: relative;

  text-align: right;

  padding: 0 1em;

  width: calc(100% - 2em);

  border-bottom: 1px solid var(--dynaui-form);

  font-size: 0.9em;

}

.button nav ul li a:hover {

  color: inherit;

}

.button nav ul li:last-child {

  border-bottom: none;

}

.panel-layout h2 {

  z-index: 1;

  position: relative;

}

.panel-layout .timezone-list {

  width: 100%;

}

.panel-layout .timezone-list li {

  padding: 0.3em 0.7em;

  width: calc(100% - 1.4em);

  border-radius: var(--dynaui-form-border-radius);

  border: solid 1px var(--dynaui-form-border);

  margin: 0.2em 0;

}

.panel-layout .timezone-list li:hover {

  border: solid 1px var(--dynaui-form-border-one);

}

.panel-layout .timezone-list li > span {

  float: right;

}

.panel-layout .widgets .placeholder {

  background: transparent !important;

  box-shadow: none !important;

  backdrop-filter: initial !important;

  border: 1px dashed var(--dynaui-panel-layout-placeholder) !important;

}

.panel-layout .handle {

  cursor: move;

}

.panel-layout .widgets .contact {

  width: auto !important;

}

.panel-layout .widgets .contact > span {

  font-size: 1em;

  margin: 0.4em 0.4em 0;

  line-height: 2.6em;

  width: 2.6em;

  height: 2.6em;

  text-align: center;

  float: left;

  background-color: var(--dynaui-form-button);

  border: solid 1px var(--dynaui-form-button);

  border-radius: 50%;

  background-size: cover;

}

.panel-layout .widgets .contact > span.bg span {

  display: none;

}

.panel-layout .widgets .contact > div {

  margin: 0 1em 0 0;

  font-size: 0.8em;

  width: 7em;

  text-align: left;

  height: 4.2em;

  line-height: 1.3em;

  display: flex;

  justify-content: center;

  align-items: center;

}

.panel-layout .widgets .contact.open::before {

  left: 0.125em;

  height: 30%;

  width: 0.25em;

  top: 35%;

  content: '';

  background-color: var(--dynaui-text);

  border-radius: 0.125em;

  position: absolute;

}

.panel-layout .worker {

  visibility: hidden;

  position: absolute;

}