:root {
  --ms-purple: #7719aa;
  --ms-purple-dark: #5c117f;
  --ms-purple-soft: #f3e8ff;
  --ms-blue: #185abd;
  --ms-border: #e1dfdd;
  --ms-border-strong: #c8c6c4;
  --ms-bg: #faf9f8;
  --ms-panel: #ffffff;
  --ms-text: #201f1e;
  --ms-muted: #605e5c;
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --brand: var(--ms-purple);
  --brand-hover: var(--ms-purple-dark);
  --brand-light: var(--ms-purple-soft);
  --brand-border: #d0a7e8;
  --purple: var(--ms-purple);
}

html,
body {
  font-family: var(--font);
  background: var(--ms-bg);
}

.app-shell {
  background: var(--ms-bg) !important;
  color: var(--ms-text);
}

.topbar {
  background: linear-gradient(90deg, #5c117f, #7719aa 54%, #8a2bbe) !important;
  border-bottom: 1px solid #4d0d6b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.topbar-logo,
.topbar-title {
  letter-spacing: 0;
}

.topbar-search {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 4px !important;
}

.ribbon {
  background: var(--ms-panel) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.ribbon-tabs {
  background: var(--ms-panel) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  min-height: 36px;
}

.ribbon-tab,
.nbtab,
.stab {
  border-radius: 0 !important;
  color: var(--ms-muted) !important;
}

.ribbon-tab.active,
.nbtab.active,
.stab.active {
  color: var(--ms-purple) !important;
  border-bottom: 2px solid var(--ms-purple) !important;
  background: var(--ms-panel) !important;
  box-shadow: none !important;
}

.ribbon-body,
.free-canvas-toolbar {
  background: #fbfbfb !important;
  border-bottom: 1px solid var(--ms-border) !important;
}

.rdrop,
.fct-btn,
.btn-outline-sm,
.btn-purple-sm,
.mbtn,
.modal input,
.modal select,
.modal textarea,
.mfield input,
.mfield select,
.mfield textarea {
  border-radius: 2px !important;
  border-color: var(--ms-border-strong) !important;
  font-family: var(--font) !important;
}

.fct-btn:hover,
.btn-outline-sm:hover,
.btn-purple-sm:hover,
.mbtn-outline:hover {
  background: #f3f2f1 !important;
  border-color: #8a8886 !important;
  color: var(--ms-purple) !important;
}

.onenote-layout {
  background: var(--ms-bg) !important;
}

.onenote-sidebar,
.sections-col,
.pages-col {
  background: #f3f2f1 !important;
  border-color: var(--ms-border) !important;
}

.nb-header,
.sections-hdr,
.pages-hdr {
  background: #edebe9 !important;
  border-bottom: 1px solid var(--ms-border) !important;
}

.page-item,
.sec-item,
.nb-dropdown-item {
  border-radius: 2px !important;
}

.page-item:hover,
.sec-item:hover,
.nb-dropdown-item:hover {
  background: #e9e7e5 !important;
}

.page-item.active,
.sec-item.active {
  background: #fff !important;
  box-shadow: inset 3px 0 0 var(--ms-purple), 0 1px 2px rgba(0, 0, 0, .08) !important;
}

.page-item.active .page-item-title,
.sec-item.active .sec-name {
  color: var(--ms-purple) !important;
}

.section-tabs-row,
.nb-tabs {
  background: #edebe9 !important;
  border-bottom: 1px solid var(--ms-border) !important;
}

.canvas {
  background: #fff !important;
}

.canvas-title-bar {
  background: #fff !important;
  padding: 16px 32px 8px !important;
  border-bottom: 1px solid #f3f2f1 !important;
}

.canvas-title {
  font-family: var(--font) !important;
  font-size: 24px !important;
  color: #3b3a39 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.tags-bar {
  background: #fff !important;
  border-bottom: 1px solid #f3f2f1 !important;
}

.free-canvas-toolbar + div > div,
.canvas-body {
  background-color: #fffef8 !important;
  background-image:
    linear-gradient(#f0ecff 1px, transparent 1px),
    linear-gradient(90deg, #f0ecff 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

.modal {
  border-radius: 4px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22) !important;
}

.activity-panel,
.history-panel {
  border-left: 1px solid var(--ms-border) !important;
  background: #fff !important;
}

.activity-tab.active {
  color: var(--ms-purple) !important;
  border-bottom-color: var(--ms-purple) !important;
}

.tag-chip,
.sm-role,
.nb-dd-shared {
  border-radius: 999px !important;
}

.btn-save,
.mbtn-primary {
  background: var(--ms-purple) !important;
  border-radius: 2px !important;
}

.btn-save:hover,
.mbtn-primary:hover {
  background: var(--ms-purple-dark) !important;
}

.ql-container,
.ql-editor {
  font-family: "Segoe UI", Calibri, sans-serif !important;
}

.ql-editor {
  color: #201f1e !important;
  line-height: 1.55 !important;
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3 {
  color: #201f1e !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.login-card {
  border-radius: 4px !important;
}

.login-btn {
  background: var(--ms-purple) !important;
  border-radius: 2px !important;
}