/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light;
  --pane-background: #fff;
  --pane-text: #323130;
  --pane-muted: #605e5c;
  --pane-link: #005a9e;
  --pane-button-background: #f3f2f1;
  --pane-button-hover: #edebe9;
  --pane-button-active: #d2d0ce;
  --pane-border: #8a8886;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-office-theme="light"]) {
    color-scheme: dark;
    --pane-background: #1b1a19;
    --pane-text: #f3f2f1;
    --pane-muted: #c8c6c4;
    --pane-link: #71afe5;
    --pane-button-background: #323130;
    --pane-button-hover: #484644;
    --pane-button-active: #605e5c;
    --pane-border: #797775;
  }
}

:root[data-office-theme="dark"] {
  color-scheme: dark;
  --pane-background: #1b1a19;
  --pane-text: #f3f2f1;
  --pane-muted: #c8c6c4;
  --pane-link: #71afe5;
  --pane-button-background: #323130;
  --pane-button-hover: #484644;
  --pane-button-active: #605e5c;
  --pane-border: #797775;
}

body.ms-Fabric {
  background: var(--pane-background);
  color: var(--pane-text);
}

a {
  text-decoration: none !important;
  color: var(--pane-link);
}

/* a:hover,
a:active,
a:hover button
{
  color: #00307d;
} */

ul {
  margin: 0;
  padding: 0;
}

.ms-welcome__header {
  padding: 20px;
  padding-bottom: 30px;
  padding-top: 100px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  align-items: center;
}

.ms-welcome__main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  padding: 10px 20px;
}

.ms-welcome__main>h2 {
  width: 100%;
  text-align: center;
}

.ms-welcome__features {
  list-style-type: none;
  margin-top: 20px;
}

.ms-welcome__features.ms-List .ms-ListItem {
  padding-bottom: 20px;
  display: -webkit-flex;
  display: flex;
}

.ms-welcome__features.ms-List .ms-ListItem>.ms-Icon {
  margin-right: 10px;
}

.ms-welcome__action.ms-Button--hero {
  margin-top: 30px;
}

.ms-Button.ms-Button--hero .ms-Button-label {
  color: var(--pane-link);
}

.ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label {
  color: var(--pane-link);
  cursor: pointer;
}

b {
  font-weight: bold;
}

.olms-button-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.olms-button-grid .ms-Button {
  width: 100%;
}

.olms-main {
  padding: 10px;
  font-family: "Segoe UI", Arial, sans-serif;
}

.olms-title {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 600;
}

.olms-description {
  margin: 0 0 12px 0;
  font-size: 12px;
  line-height: 1.3;
}

.olms-outline-grid 
{
  display: grid;
  grid-template-columns: repeat(6, 1fr); ;
  gap: 10px;
  width: 100%;
}

.olms-img-btn-container
{
  display: inline-block;
  position: relative;
  height: 19px;
  width: 19px;
  text-align: center;
  padding: 3px;
  border: 1px solid var(--pane-border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.olms-img-btn
{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

:root[data-office-theme="dark"] .olms-img-btn {
  filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-office-theme="light"]) .olms-img-btn {
    filter: brightness(0) invert(1);
  }
}

.olms-btn {
  height: 24px;
  padding: 1px 6px;
  font-size: 12px;
  border: 1px solid var(--pane-border);
  border-radius: 3px;
  background: var(--pane-button-background);
  color: var(--pane-text);
  cursor: pointer;
  white-space: nowrap;
}

.olms-img-btn-container:hover, .olms-btn:hover {
  background: var(--pane-button-hover);
}

.olms-img-btn-container:active, .olms-btn:active {
  background: var(--pane-button-active);
}

.olms-level-btn {
  font-weight: 600;
}

.olms-indent-btn {
  font-weight: 400;
}

.olms-wide-btn {
  grid-column: 1 / -1;
}

.olms-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--pane-muted);
}

.exhibits-section {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--pane-border);
}

.olms-section-title {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.taskpane-button,
#template-diagnostics-section button {
  display: block;
  width: 100%;
  min-height: 32px;
  margin: 6px 0;
  padding: 6px 8px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  border: 1px solid var(--pane-border);
  border-radius: 3px;
  background: var(--pane-button-background);
  color: var(--pane-text);
  cursor: pointer;
}

.pdf-merge-section[hidden],
#populate-case-status[hidden],
#developer-mode-status[hidden] {
  display: none !important;
}

.taskpane-button[hidden] {
  display: none !important;
}

.taskpane-button:hover,
#template-diagnostics-section button:hover {
  background: var(--pane-button-hover);
}

.taskpane-button:active,
#template-diagnostics-section button:active {
  background: var(--pane-button-active);
}

.taskpane-button:disabled {
  color: var(--pane-muted);
}

.pdf-merge-section input {
  color: var(--pane-text);
}

.bookmark-link {
  color: var(--pane-link);
}

.bookmark-preview,
.bookmark-empty {
  color: var(--pane-muted);
}

.hint,
.help-details {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
}

.help-details ol {
  padding-left: 20px;
}

.help-details summary {
  cursor: pointer;
  font-weight: 600;
}

.pdf-merge-section input {
  display: block;
  max-width: 100%;
  margin: 8px 0;
}