/* Global Variables */

:root, [data-theme-dark], [data-theme-light], [data-theme-light-highcontrast], [data-theme-dark-highcontrast] {
  --default-grid-baseline: 6px;
  --header-height: 60px;
}

/* Header Styling */

header#header {
  padding: 0 12px;
}

#body-user header#header, #body-settings header#header {
  height: var(--header-height);
}

header#header > div.header-right {
  margin-inline: 0;
  margin-left: 20px;
}

#header > div.header-left > nav > ul > li > a > span.app-menu-entry__label {
  top: 56%;
}

/* Content Styling */

div#content-vue, main#content {
  margin: var(--header-height) 0 0 0;
  width: 100%;
  height: calc(var(--body-height) + var(--body-container-margin));
  border-radius: 0;
}

#contactsmenu {
  display: none;
}

.modal-wrapper--small>div.modal-container[data-v-cc9100bb] {
  width: min(800px, 75vw);
}

/* Collabora Editor CSS*/
div.viewer__file-wrapper > div.office-viewer.viewer__file.viewer__file--active {
  top: -60px !important;
}

/* Talk Message Spacing */
ul.messages {
  margin: 0.25em 0;
}
  

/* Login Styling */

#body-login {
  --default-clickable-area: 50px;
}

#body-login > div.wrapper > div > main > div > div > div:nth-child(1) > form > fieldset > button > span {
  flex-direction: row-reverse;
}

#body-login > div.wrapper > div > main > div > div > div:nth-child(1) > form > fieldset > button > span > span.button-vue__icon {
  min-width: min-content;
  min-height: min-content;
  width: min-content;
  height: min-content;
  margin-left: 1em;
  width: 25px;
  height: 25px;
}

#body-login > div.wrapper > div > main > div > div > div:nth-child(1) > form > fieldset > button {
  padding: 0 0.5em;
}

#body-login > div.wrapper > div > main > div > div > div:nth-child(1) > form > fieldset > button > span > span.button-vue__text {
  visibility: hidden;
  position:relative;
  width: 40px;
}

#body-login > div.wrapper > div > main > div > div > div:nth-child(1) > form > fieldset > button > span > span.button-vue__text::after {
  content: "Login";
  visibility: visible;
  position: absolute;
  left: 0;
}

/* Mobile Styling */

@media screen and (max-width: 768px) {
  header#header {
    padding: 0;
  }

  header#header a#nextcloud {
    display: none;
  }

  header#header > div.header-left > nav > ul {
    margin-inline: 0;
  }

  header#header > div.header-left > nav > ul > li, 
  header#header > div.header-left > nav > div > div,
  header#header > div.header-right > * {
    width: calc(var(--header-height) - 6px);
  }

  header#header > div.header-left > nav > div > div > button {
    margin: auto;
    width: calc(var(--header-height) - 20px) !important;
    height: calc(var(--header-height) - 20px);
  }

  header#header > div.header-right #notifications > button {
    width: calc(var(--header-height) - 6px) !important;
  }

  div.v-popper__wrapper > div.v-popper__inner > div > div > ul > li > a {
    padding: 0.5em 1em 0.5em 0.5em !important;
  }
}