/* 

@media break-point: 30rem;

*/

main {
  justify-content: center;
  align-items: center;
}

lmnhq-panel {
  width: 100%;
  display: none;
  box-shadow: 0 0 0.1rem 0 var(--color-box-shadow);
}

lmnhq-panel[name="login"] {
  overflow: hidden;
}

lmnhq-panel[name="login"]::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  opacity: 0.1;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  margin: 0;
}

@media screen and (min-width: 30rem) {
  lmnhq-panel {
    max-width: 30rem;
    border-radius: var(--container-border-radius);
  }
  lmnhq-panel.loading:after {
    border-radius: var(--container-border-radius);
  }
}

lmnhq-panel form > * {
  flex-basis: calc(100% - (var(--padding-panel) * 2));
  margin-top: var(--padding-panel);
}

lmnhq-panel form > textarea {
  margin-top: 0;
  flex-basis: calc(100% - (var(--padding-panel) * 2) - (var(--padding-input-x) * 2));
}


form > input {
  flex-basis: calc(
    100% - (var(--padding-panel) * 2) - (var(--width-input-border) * 2) -
      (var(--padding-input-x) * 2)
  );
}

lmnhq-panel img:first-child {
  width: calc(100% - (var(--padding-panel) * 2));
  margin-top: var(--padding-panel);
}

lmnhq-panel:not([name="login"]):not([name="confirm"]) img:first-child {
  cursor: pointer;
}

lmnhq-panel:not([name="confirm"]) p {
  width: calc(100% - (var(--padding-panel) * 2));
}

lmnhq-panel[name="confirm"] p {
  margin-bottom: var(--padding-panel);
}

[name="register"] [data-bind="invitation"] {
  display: none;
  padding: var(--padding-panel);
  padding-bottom: 0;
  width: calc(100% - (var(--padding-panel) * 2));
}

[data-bind="invitation"] img {
  display: none;
  width: 100px !important;
  height: 100px;
  border-radius: 50%;
  display: block;
  float: left;
  margin: 0 !important;
}

[data-bind="invitation"] h1, [data-bind="invitation"] p {
  float: right;
  width: calc(100% - var(--padding-panel) - 100px) !important;
  margin: 0 !important;
}