/* MetaPDF stylesheet */
/* Note: keep the above comment as it is used when patching css-variables in
   older versions of Edge */

:root {
  /* variable used to hide the app until variables are loaded in IE */
  --flex: flex;
  --default-blue-500: #5998DA;
}

body {
  background: transparent;
  background-color: transparent;
}

/* Top level container. Everything of MetaPDF is within this container. */
.mp-app-container {
  display: none; /* fallback for browsers not supporting CSS variables */ /* hide on start - let light/dark css show it for cleaner start */
  flex-direction: column;
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--primary-color);
  position: relative;
}

/* Modal background */
#mp-overlay-container {
  width: 100vw;
  height: 100vh;
  top: 0;
  position: fixed;
  z-index: 999995;
  background: var(--overlay-bg-color);
}

.mp-modal-open #mp-overlay-container {
  background: transparent;
}

/* Top panel */
.mp-top-panel {
  position: initial;
  height: 48px;
  width: 100%;
  z-index: 999995;
  top: 0;
}

.mp-top-panel.mp-floating,
.mp-bottom-panel.mp-floating {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--float-primary-color);
  z-index: 999995;
}

.mp-bottom-panel.mp-floating {
  top: initial;
  bottom: 36px;
}

.mp-floating .mp-icon {
  fill: var(--float-primary-color);
}


/* Container that contains all other panels and the PDF viewer itself */
.mp-content-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: var(--background-color);
  height: 100%;
  overflow-y: hidden;
}


/* Left panel */
.mp-left-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 280px;
  background: var(--surface-color-2);
  border-right: var(--border-width) solid var(--border-color);
}

/* Right panel */
.mp-right-panel {
  /* flex + min-width + max-width to prevent horizontal scroll bar */
  flex: 1;
  min-width: 250px;
  max-width: 250px;
  padding-left:5px;
  position:relative;
  top: 0px;
}


/* Center panel containing PDF.js view */

.mp-center-panel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
}

.mp-center-panel:focus {
  outline: none;
}

/* Container for each page rendered by PDF.js */
.mp-page {
  margin: 24px;
  border: 1px solid var(--border-color);
  background-color: white;
  width: 800px;
  height: 1200px;
}

/* Misc page elements */

.mp-btn-comments-toggle {
  position: fixed;
  right: 32px;
  top: 76px;
}

.mp-btn-comments-toggle .mp-icon {
  width: 24px !important;
  height: 24px !important;
  fill: var(--line-color);
}

.mp-left-panel-button-toggle {
  position: absolute;
  top: 36px;
  right: 18px;
  cursor: pointer;
  height: 28px;
  width: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  z-index: 1;
}

.mp-left-panel-button-toggle:hover {
  background: var(--surface-color-3);
}

.mp-left-panel-button-toggle .mp-icon {
  width: 16px;
  height: 16px;
  fill: var(--primary-shade-2);
}

.mp-left-panel-button-toggle .mp-closed {
  background: var(--surface-color-2);
}

.mp-left-panel-toggle {
  cursor: col-resize;
  height: 100%;
  width: 5px;
  position: absolute;
  right: -3px;
}

.mp-closed .mp-left-panel-toggle {
  right: 0;
}

.mp-left-panel:not(.mp-open) {
  border-right: var(--border-width) solid var(--border-color);
  background: var(--surface-color-2);
}

.mp-left-panel-toggle-btn-container {
  z-index: 1;
  left: 1px;
  position: absolute;
  bottom: 40px;
  width: 12px;
  height: 24px;
  line-height: 24px;
  background-color: var(--surface-color-2);
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid solid solid none;
  border-radius: var(--border-radius);
  padding: 4px 0;
  cursor: pointer;
}

.mp-left-panel-toggle-btn-container{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.mp-open .mp-left-panel-toggle-btn {
  transform: rotate(180deg);
}

.mp-closed .mp-left-panel-toggle-btn-container{
  left: 5px;
}

.mp-closed .mp-left-panel-toggle-btn {
  margin-left: -8px;
}

.mp-closed:hover {
  background: var(--surface-color-3);
  cursor: pointer;
}

.mp-closed:hover .mp-left-panel-toggle {
  cursor: pointer;
}

.mp-closed:hover .mp-left-panel-toggle-btn-container {
  background: var(--surface-color-3);
}

.mp-closed .mp-left-panel-button-toggle {
  background: var(--surface-color-2);
  left: 15px;
  width: 5px;
  height: 22px;
  border-top: 1px solid var(--border-color);
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: 0;
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: 0;
  z-index: 2;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}
.mp-closed .mp-left-panel-button-toggle .mp-icon {
  transform: translateX(-8px);
  width: 16px;
  height: 16px;
  position: absolute;
}

.mp-closed .mp-left-panel-button-toggle:hover, .mp-closed .mp-left-panel-button-toggle.hover {
  right: -12px;
  background: var(--surface-color-3);
}

.mp-left-panel-toggle-btn .mp-icon {
  width: 16px;
  height: 16px;
}

.mp-profile-image-rounded {
  border-radius: var(--border-radius);
  max-height: 36px;
  margin-top: calc((48px - 36px)/2);
}


.mp-collaborators  li {
  display: inline-block;
  list-style: none;
}


.mp-collaborators img {
  height: 36px;
  border-radius: var(--border-radius);
  margin: 6px 3px;
}

.mp-page-indicator {
  position: fixed;
  bottom: 16px;
  right: 24px;
  background-color: var(--surface-color-3);
  border-radius: var(--border-radius);
  color: var(--primary-color);
  width: 56px;
  height: 26px;
  padding: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 14px;
}

.mp-page-widget  {
  line-height: 48px;
  padding: 0 4px;
}

.mp-status-menu {
  line-height: 48px;
  padding: 0 4px;
  cursor: default;
}

.mp-modal-table td {
  padding:5px;
}

.mp-modal-table td:first-child {
  width: 160px;
  color: var(--primary-shade-1);
  text-align: right;
}

.mp-form  {
  color: var(--primary-color);
  background: var(--surface-color-3);
  border: none;
  font-size: inherit;
  font-family: var(--font-family);
  outline: none;
  border-radius: var(--border-radius);
}

#mp-export-container {
  position:absolute;
  top:50%;
    background-color:  var(--surface-color-2);
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 933px;
  height: 514px;
  box-shadow: rgba(0, 0, 0, 0.50) 0px 5px 15px 0px;
  border-radius: 6px;
  z-index: 999996;
}

#mp-clipboard-container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  z-index: 100;
  display: none;
  opacity: 0;
}

#mp-clipboard {
  width: 1px;
  height: 1px;
  padding: 0px;
}


/* hack for fixing scrolling performance */
.textLayer {
  will-change: transform;
}

/* Generic classes */

.mp-hidden {
  display: none !important;
}

.mp-disabled {
  pointer-events: none;
  opacity: 0.4;
}

.mp-highlighted {
  background-color:var(--highlight-color);
  padding: 0px 1px;
  border-radius: 4px;
}

.mp-font-helv {
  font-family: Helvetica, Arial, sans-serif;
}

.mp-font-cour {
  font-family: Courier, monospace;
}

.mp-font-time {
  font-family: Times New Roman, serif;
}

.mp-font-bold {
  font-weight: bold;
}

.mp-font-italic {
  font-style: italic;
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/* Icons */

.mp-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: var(--primary-color);
  pointer-events: none; /* Necessary for context menus to function */
}

.mp-btn .mp-icon {
  width: 16px;
  height: 16px;
}

.mp-dropdown-toggle.mp-romode .mp-icon {
  width: 12px;
  height: 12px;
  fill: var(--primary-shade-1);
}

.mp-dropdown-toggle.mp-romode .mp-icon.mp-global-color-icon {
  fill: var(--border-color);
}

/* Sharing  Begin */
.mp-shared-button.mp-btn-group {
  display: flex;
}
.mp-shared-button.mp-btn-group.eligible {
  display: flex;
}
.mp-shared-button .mp-icon-right {
  width: 12px;
  height: 12px;
  fill: var(--primary-color);
}

.mp-shared-button > .mp-btn.mp-dropdown-toggle {
  width: auto !important;
  padding: 0 8px !important;
  border-radius: 4px;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-left-style: solid !important;
  display: flex;
    align-items: center;
    gap: 8px;

    color: var(--primary-shade-1);
    font-weight: 600;
    font-size: 14px;
}
.mp-shared-button > .mp-btn.mp-dropdown-toggle span {
  padding: 0;
}
.mp-shared-button > .mp-btn.mp-dropdown-toggle::before {
  display: none !important;
}
.mp-shared-button .mp-dropdown-toggle .mp-icon {
  width: 24px;
  height: 24px;
  fill: var(--primary-color);
}
.mp-toolbar .mp-btn.mp-viewonly-button {
  width: auto;
  padding: 0 12px;
  color: var(--primary-shade-1);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  pointer-events: none;
  gap: 8px;
}

.mp-toolbar .mp-btn.mp-viewonly-button svg {
  width: 20px;
  height: 20px;
  fill: var(--primary-shade-2);
}

.mp-shared-button .mp-dropdown-toggle svg:not(.mp-shared-angle) use {
  transform: translateX(2px) translateY(1px);
}

.mp-shared-button .mp-dropdown-toggle .mp-icon.mp-shared-angle {
  width: 12px;
  height: 12px;
  fill: var(--primary-shade-1);
}

.mp-shared-button ul.mp-dropdown-menu {
  width: 400px;
  padding: 20px;
  right: 0;
  left: initial;
}
.mp-shared-button.has-shared ul.mp-dropdown-menu {
  width: 500px;
}
.mp-shared-button .mp-shared-library {
  font-weight: 700;
}

.mp-shared-button li {
  display: flex;
}
.mp-shared-button .mp-menu-toggle  {
  width: 28px !important;
}

.mp-shared-button .mp-menu-toggle::after  {
  opacity: 0;
}

.mp-shared-button .mp-shared-title {
  padding: 8px;
  color: grey;
  opacity: 0.5;
}

.mp-shared-button .mp-shared-subtitle {
  opacity: 0.5;
  transform: translateY(-6px);
  position: relative;
}

.mp-shared-button .mp-shared-subtitle .mp-icon {
  left: 8px !important;
}

.mp-shared-button .mp-shared-subtitle-text {
  padding-left: 28px;
}
.mp-shared-button li a {
  height: 62px;
  padding: 0 12px 0 12px;
  border-radius: 4px;
}

/* Sharing End */

.mp-menu-toggle {
  border-right: none !important;
  width: 42px !important;
}

.mp-toolbar .mp-menu-toggle::after {
  content: '';
  position: absolute;
  top: 6px;
  height: 16px;
  right: 1px;
  background: var(--primary-shade-3);
  width: 1px;
}

.mp-font-menu {
  display: flex !important;
  align-items: center;
}
.mp-dropdown-toggle.mp-font-menu > span {
  padding-right: 4px;
}

.mp-font-menu .mp-icon {
  width: 12px !important;
  height: 12px !important;
}

.mp-menu-toggle:hover::after {
  display: none;
}

.mp-menu-toggle.mp-active::after {
  display: none;
}

.mp-menu-toggle.mp-active + .mp-dropdown-toggle::before {
  display: none !important;
}

.mp-global-color-group .mp-dropdown-toggle::before {
  display: none !important;
}

.mp-toolbar .mp-dropdown-toggle::before {
  content: '';
  position: absolute;
  top: 6px;
  display: none;
  height: 16px;
  background: var(--surface-color-1);
  width: 3px;
  left: -3px;
}

.mp-dropdown-toggle:hover::before {
  display: block;
}

.mp-menu-toggle:hover + .mp-dropdown-toggle::before {
  display: none !important;
}

.mp-dropdown-toggle[aria-expanded=true]::before {
  display: block;
}

.mp-btn.mp-dropdown-toggle[aria-expanded=true] .mp-icon {
  fill: var(--inverse-color);
}

.mp-btn-comments-toggle:hover {
  background: var(--surface-color-3) !important;
}

.mp-menu-label a {
  cursor: default;
  padding: 8px 0 0px 16px !important;
  opacity: 0.4;
  pointer-events: none;
  max-height: 20px;
  display: flex !important;
  align-items: center;
}

.mp-menu-toggle .mp-icon {
  padding: 0 8px;
}

.mp-icon-outline {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 3px;
}

.mp-icon.mp-checkmark {
  display: none;
}

.mp-checked .mp-icon.mp-checkmark {
  display: block;
}

.mp-color-selection.mp-checked .mp-icon.mp-checkmark {
  fill: black;
}

.mp-draw-settings .mp-checked .mp-icon.mp-checkmark {
  display: none;
}

.mp-icon path, .mp-icon ellipse, .mp-icon polyline, .mp-icon polygon {
  stroke: inherit;
  stroke-width: inherit;
  fill: inherit;
}

.mp-icon.mp-global-color-icon {
  fill: var(--border-color);
  border-radius: 4px;
  height: 14px !important;
  width: 14px !important;
  margin-right: 4px;
  margin-left: 2px;
}

.mp-icon.mp-icon-export {
  width: 16px;
  height: 16px;
  fill: var(--surface-color-1);
}

.mp-tab-pane .mp-annotations-reply .mp-icon.mp-icon-export {
  width: 16px;
  height: 16px;
  fill: var(--primary-shade-2) !important;
}

.mp-annotations-comment .mp-icon.mp-icon-export {
  width: 16px;
  height: 16px;
  fill: var(--primary-shade-2);
}

/* Buttons */

.mp-btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.mp-toolbar .mp-btn-group {
  margin-left: 8px;
}

.mp-toolbar .mp-btn-group + .mp-btn-group {
  margin-left: 16px;
}

.mp-btn-group > .mp-btn {
  position: relative;
}

.mp-toolbar .mp-btn-group > .mp-btn {
  float: left;
}


.mp-btn {
  display: inline-block;
  font-weight: normal;
  height: 28px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background: transparent;
  outline: none;
}


.mp-btn-default, .mp-btn-primary {
  font-family: var(--font-family);
  font-size: 14px;
  text-decoration: none;
  border: none;
  display: inline-flex;
  margin-right: auto;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 4px;
}

.mp-btn-primary:hover {
  background-color: var(--accent-color);
}

.mp-btn-default:hover {
  background: var(--surface-color-4) !important;
  color: var(--primary-color) !important;
}

.mp-btn-default:hover .mp-icon {
  fill: var(--primary-color) !important;
}

.mp-btn-secondary {
  background-color: transparent;
  color: var(--primary-shade-1);
  display: inline-flex;
  margin-right: auto;
  align-items: center;
  padding: 0 16px;
}

.mp-btn-secondary:hover {
  background-color: var(--surface-color-3) !important;
  color: var(--primary-shade-1) !important;
}

.mp-btn-default {
  background-color: var(--surface-color-3);
  color: var(--primary-color);
}

.mp-btn-primary {
  background-color: var(--accent-color);
  color: var(--inverse-color);
}

.mp-btn-primary > .mp-icon {
  fill: var(--float-primary-color);
}

.mp-btn > span {
  pointer-events: none;
}

.mp-toolbar .mp-btn {
  width: 36px;
  border: var(--border-width) solid var(--border-color);
  padding: 4px;
}

.mp-floating .mp-toolbar .mp-btn {
  border: var(--border-width) solid var(--border-color);
}

.mp-toolbar .mp-btn.mp-menu-toggle.mp-active {
  background: var(--accent-color);
  color: var(--inverse-color);
  border-color: transparent;
}

.mp-toolbar .mp-btn.mp-menu-toggle.mp-active .mp-icon {
  fill: var(--inverse-color);
}

.mp-btn.mp-active, .mp-btn:active, .mp-btn:not(.mp-comment-menu-toggle):hover:not(.mp-viewonly-button):hover, .mp-btn-group.mp-open > .mp-btn.mp-dropdown-toggle:not(.mp-comment-menu-toggle):not(.mp-font-menu) {
  background: var(--accent-color);
  border-color: transparent;
  color: var(--inverse-color);
}

.mp-btn.mp-comment-menu-toggle.mp-active, .mp-btn.mp-comment-menu-toggle:hover  {
  background: rgba(0, 0, 0, 0.1);
}

.mp-comment-menu-toggle .mp-icon {
  fill: black !important;
}

.mp-btn-primary:hover {
  background: var(--accent-color) !important;
}

.mp-toolbar .mp-btn.mp-menu-toggle:hover {
  background: var(--accent-color);
  color: var(--inverse-color);
  border-color: transparent;
}

.mp-btn:active > .mp-icon , .mp-btn:not(.mp-btn-comments-toggle):hover:not(.mp-viewonly-button):hover > .mp-icon, .mp-btn-group.mp-open > .mp-icon {
  fill: var(--inverse-color);
}

.mp-btn-group > .mp-btn:first-child:not(:last-of-type) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: var(--line-color);
  border-right-width: var(--line-width);
}

.mp-floating .mp-btn-group > .mp-btn:first-child:not(:last-of-type) {
  border-right-color: var(--float-line-color);
  border-right-width: var(--line-width);
}

.mp-toolbar .mp-btn-group > .mp-btn.mp-dropdown-toggle:not(.mp-global-color-icon) {
  border-left-style: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: 24px;
  padding-left: 0px;
  padding-right: 0px;
}

.mp-toolbar .mp-btn-group > .mp-btn.mp-dropdown-toggle.mp-global-color-icon  {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  width: calc(18px*3);
  padding-left: 0px;
  padding-right: 0px;
}

.mp-dropdown-toggle > span {
  display: inline-flex;
  padding-right: 4px;
}

/* Dropdown menu */

.mp-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 0;
  text-align: left;
  list-style: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 3px 0 0 0;
  background: var(--surface-color-1);
  border: 1px solid #E8E8E9;
  box-sizing: border-box;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.mp-dropdown-menu.mp-sharing-dropdown {
  background: #FFFFFF;
}

ul.mp-dropdown-menu.mp-dropdown-menu-left {
  right: 0;
  left: initial;
}

ul.mp-dropdown-menu.mp-dropdown-menu-left.mp-print-settings {
  width: 338px;
}

.mp-open > .mp-dropdown-menu {
  display: block;
}

.mp-top-panel .mp-dropdown-menu {
  width: 300px;
  margin-top: -3px;
}

.mp-top-panel button + .mp-dropdown-menu {
  margin-top: -7px;
}

.mp-dropdown-menu.mp-dropdown-menu-context {
  width: 200px;
}

.mp-bottom-panel .mp-dropdown-menu {
  top: initial;
  bottom: 100%;
}

.mp-dropdown-submenu {
  position: relative;
}

.mp-dropdown-submenu>.mp-dropdown-menu {
  width: 200px;
  top: 0;
  bottom: initial;
  left: 100%;
  border-style: solid;
  margin-top: -1px;
  border-radius: 8px;
}

li.mp-dropdown-submenu > ul.mp-dropdown-menu-left {
  right: initial;
  left: -100%;
}

.mp-bottom-panel .mp-dropdown-submenu>.mp-dropdown-menu {
  top: initial;
  bottom: 0;
}


.mp-dropdown-submenu:hover>.mp-dropdown-menu {
  display: block;
}

.mp-dropdown-submenu > .mp-dropdown-menu.mp-keep-open {
  display: block;
}

.mp-floating .mp-dropdown-menu .mp-icon {
  fill: var(--primary-color);
}

a:hover > .mp-icon-outline,
.mp-open > .mp-icon-outline,
.mp-dropdown-menu a:hover .mp-icon-outline {
  fill: none;
  stroke: var(--inverse-color);
}

.mp-dropdown-menu li:first-child {
  margin-top: 8px;
}

.mp-dropdown-menu li:last-child {
  margin-bottom: 8px;
}

.mp-dropdown-menu li:last-child:first-child {
  margin-bottom: 0;
  margin-top:0;
}

.mp-dropdown-menu li:last-child:first-child a{
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.mp-dropdown-menu a {
  position: relative;
  padding: 0 0 0 44px;

  height: 32px;
  line-height: 32px;
  display: block;
  cursor: pointer;
  color: var(--primary-color)
}

.mp-dropdown-menu .mp-color-bar a {
  position: relative;
  padding: 0 0 0 0;
  height: 0;
  line-height: 0;
  display: block;
  cursor: pointer;
}

.mp-dropdown-menu .mp-icon {
  padding: 0;
  width: 16px;
  height: 16px;
  left: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.mp-dropdown-menu .mp-color-bar .mp-icon {
  left: 3px;
  position: absolute;
  top: 12px;
}

.mp-dropdown-menu.mp-global-color-settings {
  width: 200px;
}

.mp-box-styling {
  justify-content: center;
}

.mp-dropdown-menu kbd{
  float: right;
  padding-right: 12px;
  color: var(--primary-shade-2);
  font-family: Helvetica, Arial, sans-serif;
}

.mp-dropdown-header {
  line-height: 36px;
  padding-left: 12px;
}

.mp-dropdown-menu  .mp-divider {
  border-top: 1px solid var(--line-color);
}

.mp-global-color-settings .mp-divider, .mp-comment-menu .mp-divider {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Toolbar */

.mp-toolbar {
  background: var(--surface-color-1);
  height: 48px;
  width: fit-content;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mp-floating .mp-toolbar {
  background: var(--float-surface-color-1);
  border-radius: var(--border-radius);
}


.mp-toolbar .mp-icon~span {
  /*padding-left: 4px;*/
}

.mp-toolbar > li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  height: 48px;
  flex-shrink: 0;
  margin-left: 2px;
}

.mp-toolbar > li:first-child {
  margin-left: 12px;
  min-width: 42px;
}

.mp-toolbar > li:last-child {
  margin-right: 12px;
  margin-left: 8px;
}

.mp-toolbar > li.mp-stretcher {
  height: 48px;
  width:100%;
  flex-shrink: 1;
}

.mp-toolbar > li > a {
  display: inline-block;
  cursor: pointer;
  line-height: 36px;
  border-radius: 4px;
  height: 36px;
  padding: 0 8px;
  /*background: var(--surface-color-1);*/
  margin: 0;
}

.mp-toolbar > li > span {
  display: inline-block;
  line-height: 48px;
  height: 48px;
  padding: 0 12px;
  margin: 0;
}

.mp-floating .mp-toolbar > li > a {
  //background: var(--float-surface-color-1);
}


.mp-toolbar > li > a:hover, .mp-toolbar li.mp-open > a, .mp-dropdown-menu a:hover, .mp-dropdown-submenu:hover > a  {
  background: var(--surface-color-3);
}

.mp-toolbar > .mp-divider {
  margin: 0 12px;
  width: 1px;
  height: 100%;
  background: var(--line-color);
}

.mp-floating .mp-toolbar > .mp-divider {
  border-left: var(--line-width) solid var(--float-line-color);
}

.mp-toolbar  a.mp-textlink {
  float: right;
  padding: 0px 12px;
  background: none!important;
}

.mp-toolbar a.mp-textlink:hover,
.mp-toolbar  a.mp-textlink:focus {
  background: none!important;
}


/* Context menu */

.mp-context-menu {
  display: flex;
  width: auto;
  height: 32px;
  background-color: rgba(53, 53, 53, 0.95);
  border-radius: var(--border-radius);
  padding: 0px 12px;
  z-index: 999993;
}

.mp-context-menu .mp-btn {
  height: 100%;
  color: var(--float-primary-color);
  font-size: var(--font-size);
  width: 36px;
  padding: 0 4px;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-context-menu .mp-btn:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.mp-context-menu .mp-dropdown-menu {
  margin: 3px 0 0 0;
}

.mp-context-menu .mp-btn-group {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-context-menu .mp-btn.mp-color-menu .mp-icon {
  width: 18px !important;
  height: 18px !important;
}

.mp-context-menu .mp-btn > .mp-icon {
  fill: var(--float-primary-color);
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.context-menu-line {
  height: 16px;
  width: 1px;
  background: var(--float-line-color);
  right: 37px;
  margin-left: 8px;
  margin-right: 6px;
  margin-top: 8px;
}

.mp-context-menu .mp-btn.mp-active {
  background: var(--accent-color);
  color: var(--inverse-color);
}

.mp-icon-submenu {
  width: 12px;
  height: 12px;
  left: unset !important;
  right: 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Color and box styling menus */

.mp-color-icon {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 18px;
  height: 18px;
  border-radius: var(--border-radius);
}

.mp-box-styling {
  display: flex;
}

.mp-box-styling-column {
  text-align: center;
  width: 68px;
}

.mp-box-styling-head {
  font-size: calc(var(--font-size) - 2px);
  color: gray;
  margin-bottom: -4px;
  margin-top: 4px;
}

.mp-color-bar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: block;
  margin: 12px auto;
  position: relative;
}

.mp-color-bar:before {
  content: "";
  width: calc(24px + 8px);
  height: calc(24px + 8px);
  border: 1px solid #b9b9b9;
  display: none;
  position: absolute;
  top: -5px;
  left: -5px;
  border-radius: 4px;
}

.mp-color-bar:hover:before{
  display: block;
}

.mp-color-bar.mp-checked:before{
  display: block;
}

.mp-color-bar .mp-icon {
  display: none;
  padding:0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  fill: var(--primary-color);
}

.mp-color-bar .mp-checkmark {
  fill: black;
}

.mp-color-bar.mp-checked .mp-icon,
.mp-color-bar .mp-icon.mp-icon-stroke-width {
  display: block;
}

.mp-color-bar.mp-none .mp-icon,
.mp-color-bar.mp-line-0 .mp-icon {
  display: block;
  opacity: 0.6;
}

.mp-color-selection {
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.mp-line-selection {
  cursor: pointer;
}

.mp-color-selection .mp-color-icon {
  width: 24px;
  height: 24px;
  margin-top: -4px;
}


.mp-dropdown-menu .mp-color-selection a{
  padding: 0 0 0 44px;
}

.mp-color-remove {
  position: absolute;
  right: 0px;
  top: -2px;
  width: 36px;
  height: 36px;
}

.mp-icon-remove {
  width: 16px;
  height: 16px;
  right: 0;
  fill: var(--surface-color-4);
  transform: none !important;
  left: unset !important;
  top: unset !important;
}

/* Color picker */

.mp-color-picker {
  padding: 8px 0;
}

.mp-btn.mp-color-picker-btn {
  width: 120px;
  height: 24px;
  position: relative;
  margin: 0 0 0 12px;
  display: flex;
  justify-content: center;
  font-family: var(--font-family);
  color: var(--primary-color);
  font-size: var(--font-size);
  border: none;
}

.mp-btn.mp-color-picker-btn.with-plus .mp-icon {
  left: 8px;
}

.mp-color-picker-preview {
  width: 24px;
  height: 24px;
  margin-left: 24px;
  border-radius: var(--border-radius);
  line-height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.color-picker-colors-header {
  padding-left: 24px;
  margin-bottom: 4px;
  margin-top: 28px;
}
.mp-color-picker.mp-dropdown-menu a:hover {
  color: var(--primary-color);
  background: transparent;
}

.mp-color-picker.mp-dropdown-menu .mp-color-remove:hover .mp-icon {
  fill: var(--primary-color);
}

.mp-color-picker.mp-dropdown-menu a {
  cursor: default;
  padding-left: 60px;
  margin-bottom: 8px;
}

.mp-color-picker.mp-dropdown-menu .mp-color-icon {
  left: 25px;
}

.mp-color-picker.mp-dropdown-menu .mp-icon.mp-checkmark {
  display: none;
}


.mp-dropdown-menu .mp-color-remove {
  position: absolute;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 16px;
}

.mp-dropdown-menu.mp-dropdown-fix-right {
  left: 100% !important;
}

.sp-container {
  border: none;
  background: inherit;
}

/**** Modals ****/

.mp-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999997;
  display: none;
  overflow: auto;
  overflow-y: scroll;
}

.mp-modal-dialog {
  max-width: 800px;
  width: auto;
  position: relative;
  z-index: 1050;
  margin-right: auto;
  margin-left: auto;
  top: 10%;
  color: var(--primary-color);
  font-family: var(--font-family);
}


.mp-modal-plain-no-header {
  padding: 24px;
}

.mp-modal-plain-no-header .mp-modal-header {
  display: none;
}

.mp-modal-plain-no-header .mp-modal-footer {
  border: none;
  text-align: center;
  border-radius: unset;
}

.mp-modal-plain-no-header .mp-modal-body {
  display: flex;
  justify-content: center;
  font-size: 14px;
}

.mp-modal .mp-close {
  position: absolute;
  right: 12px;
}

.mp-modal a:hover > .mp-icon {
  fill: var(--primary-color);
}

.mp-modal-content {
  padding: 24px 32px;
  position: relative;
  background-color: var(--surface-color-2);
  outline: none;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-clip: padding-box;
  left: 50%;
  transform: translateX(-50%);
}

.waiting-modal {
  display: flex;
  width: 650px;
  align-items: center;
  max-height: 88px;
  z-index: 999999;
}

.waiting-modal .mp-modal-body {
  left: 48px;
}

.waiting-modal .mp-btn-primary {
  display: none;
}
.waiting-modal .mp-btn-default {
  height: 24px;
  padding: 0;
  width: 80px;
  display: flex;
  justify-content: center;
}

.waiting-modal .mp-modal-body::before {
  content: '';
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
  border: 4px solid;
  border-right-color: var(--accent-color);
  border-radius: 50%;

  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0.7;
  left: -44px;
  width: 14px;
  height: 14px;
}

.waiting-modal .mp-modal-footer {
  position: absolute;
  right: 32px;
}
.mp-modal-content .mp-close {
  right: 20px;
  top: 28px;
  cursor: pointer;
}

.mp-modal-content .mp-close .mp-icon {
  width: 16px;
  height: 16px;
  fill: var(--primary-shade-1);
}

.mp-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999996;
  background-color: var(--overlay-bg-color);
}

.mp-modal-header {
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}

.mp-modal-header h1 {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}

.mp-modal-body {
  position: relative;
  padding: 12px 0;
  font-size: 14px;
}

.mp-modal-footer {
  text-align: right;
}
.mp-modal-footer a:nth-child(2) {
  margin-left: 16px;
}

@media screen and (min-width: 768px) {
  .mp-modal-dialog {
    width: auto;
    max-width: 800px;
    max-height: 664px;
  }
}



/************* Left hand panel ***************/

/* Tabs */

.mp-tabs-wrapper {
  height: 72px;
  z-index: 1;
}

.mp-tabs {
  list-style-type: none;
  padding: 0;
  z-index: 1;
  margin: 36px 0 0 24px;
  height: 26px;
  width: 156px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.mp-tabs .mp-active .mp-icon {
  fill: var(--primary-color) !important;
}

.mp-tabs .mp-icon {
  width: 16px;
  height: 16px;
  fill: var(--primary-shade-2);
}

.mp-tabs li {
  float: left;
  margin-bottom: calc(-1*var(--border-width));
  display: flex;
  width: 36px;
  height: 26px;
}

.mp-tabs li:first-child, .mp-tabs li:last-child {
  width: 42px;
}

.mp-tabs li a {
  height: 26px;
  width: 48px;
  display: block;
  text-align: center;
  color: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-tabs li:first-child a, .mp-tabs li:last-child a {
  border-radius: 0 var(--border-radius) 0 var(--border-radius) 0 var(--border-radius)č
}

.mp-tabs li:first-child a, .mp-tabs li:last-child a {
  border-radius: 0 var(--border-radius) 0 var(--border-radius) 0 var(--border-radius);
}

.mp-tabs .mp-active a {
  cursor: default;
  background-color: var(--surface-color-3);
}

.mp-tabs li:not(.mp-active) a:hover {
  background: var(--surface-color-3);
}

.mp-tab-content {
  position: relative;
  height: 100%;
  border-top: var(--border-width) solid var(--border-color);
  border-top-right-radius: 4px;
  background: var(--surface-color-2);
  padding: 0 24px 0 24px;
  flex: 1;
  overflow-x:hidden;
  overflow-y:auto;
  border: none;
}

.mp-tab-content.scrollable {
  padding: 0 12px 0px 24px;
  overflow-x: hidden;
}

.mp-tab-content.scrolling .mp-search-box-container-wrapper {
  border-bottom: 1px solid var(--border-color);
}
.mp-tab-content.scrollable .mp-sidebar-bottom-buttons.with-border-top::before {
  border-top: 1px solid var(--border-color);
}

.mp-tab-content[name="mp-annotations-tab"] {
  margin-top: 50px;
  margin-bottom: 40px;
}

.mp-tab-content[name="mp-search-tab"].mp-tab-content.scrollable .mp-search-box-container-wrapper {
  border-bottom: 1px solid transparent;
}

.mp-tab-content[name="mp-search-tab"] {
  margin-top: 50px;
}

.mp-sidebar-bottom-buttons {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  bottom: 0;
  width: 308px;
  left: 0;
  background: var(--surface-color-2);
  height: 40px;
}

.mp-sidebar-bottom-buttons.with-border-top::before {
  content: '';
  position: absolute;
  height: 1px;
  top: -1px;
  width: calc(100% - 48px);
  border-top: 1px solid var(--surface-color-2);
}

.mp-sidebar-bottom-buttons button {
  margin: 0;
}

#mp-summary-annotations-button, #mp-export-annotations-button {
  color: var(--primary-color);
  background: var(--surface-color-3);
  border-radius: 4px;
  font-size: 14px;
  padding: 0 12px;
  height: 24px;
}

#mp-summary-annotations-button .mp-icon {
  margin-right: 8px;
}

#mp-export-annotations-button .mp-icon {
  margin-right: 8px;
}

#mp-export-annotations-button {
  margin-left: 12px;
}

.mp-tab-pane {
  display: none;
}

.mp-tab-pane.mp-active {
  display: block;
}

.mp-tab-pane .mp-annotations-annotation-group:hover {
  background: var(--surface-color-3);
  padding: 8px;
  border-radius: 4px;
  margin-top: 28px;
  margin-left: -8px;
  margin-bottom: -8px;
  margin-right: -8px;
}

.mp-tab-pane .mp-annotations-annotation-group:hover .mp-annotations-header-inner div {
  color: var(--primary-shade-1);
}

.mp-tab-pane .mp-annotations-annotation-group:first-of-type:hover {
  margin-top: -6px;
}

.mp-tab-pane .mp-annotations-annotation-group:last-of-type {
  margin-bottom: 8px;
}

.mp-tab-pane .mp-annotations-annotation-group:last-of-type:not(:first-child):hover {
  margin-bottom: 0;
  margin-top: 20px;
  transform: translateY(8px);
  margin-bottom: unset;
}

.mp-tab-pane .mp-annotations-annotation-group:hover::before {
  left: 8px;
  height: calc(100% - 16px);
  top: 50%;
  transform: translateY(-50%);
}

.mp-tab-empty {
  display: block;
  text-align: center;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.mp-tab-empty div {
  margin-top: 24px;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  user-select: none;
}

.mp-tab-empty p {
  margin: 0 0 4px 0;
  color: var(--primary-shade-2);
  line-height: 18px;
}

/* Search tab */

.mp-search-box-container {
  display: flex;
  position: relative;
  width: 100%;
  z-index: 1;
}


.mp-search-box-container-wrapper {
  display: flex;
  position: fixed;
  top: 120px;
  padding: 8px 0 12px 0;
  width: 260px;
  z-index: 1;
  flex-wrap: wrap;
  background: var(--surface-color-2);
}

.mp-search-box-container input::-webkit-input-placeholder{
  color: inherit;
  opacity: 0.3;
}

input {
  display: block;
  height: 30px;
  padding: 0 12px;
  background: var(--surface-color-3);
}

.mp-search-clear, .mp-search-spinner {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0.7;

  right: 8px;
  width: 16px;
  height: 16px;
}

.mp-search-spinner {
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
  border: 3px solid;
  border-right-color: var(--accent-color);
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.mp-search-clear.mp-icon {
  cursor: pointer;
  pointer-events: initial;
  fill: var(--primary-shade-2);
}

.mp-search-controls {
  top: 0px;
  background-color: var(--surface-color-2);
  display: flex;
  align-items: center;
  padding: 0 1px;
  margin-top: 8px;
  width: 100%;
}

.mp-search-status {
  flex:1;
  user-select: none;
  color: var(--primary-shade-1);
}

.mp-search-results {
  margin-bottom: 36px;
  list-style-type: none;
  padding-left: 0;
}

.mp-search-results li:not(.mp-search-results-header) {
  padding: 5px 5px 5px 16px;
  margin-top: 20px;
  cursor: pointer;
}

.mp-search-results-header + .mp-search-result {
  margin-top: 8px;
}

.mp-search-btn {
  background: var(--surface-color-3);
  width: 24px;
  height: 24px;
  margin-left: 8px;
}

.mp-search-btn .mp-icon {
  transform: translateX(-4px);
}

.mp-search-results-header {
  font-weight: bold;
  margin-top: 32px;
  user-select: none;
  color: var(--primary-shade-2);
}

.mp-search-results .mp-selected {
  background: var(--surface-color-3);
}

.mp-search-result {
  position: relative;
  padding-left: 16px;
  cursor: pointer;
  border-radius: 4px;
}

.mp-search-result:hover {
  background: var(--surface-color-3);
}

.mp-search-result::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  width: 6px;
  background: var(--surface-color-4);
}

/* Annotations list */

#mp-annotation-filter-box {
  display: none;
}

.mp-annotation-list {
  list-style-type: none;
  padding: 0;
  position: relative;
}

.mp-annotation-list::before {
  content: '';
}
.mp-annotation-list::after {
  content: '';
}

.mp-tab-pane input {
  width: 100%;
}

.mp-selected.mp-annotation-list-item{
  background: var(--surface-color-3);
}

.mp-annotation-list-item {
  padding: 4px;
  /*padding-right: 24px;*/
  margin-bottom: 12px;
}

.mp-annotation-list-item .mp-empty {
  opacity: 0.5;
}

.mp-annotation-list-item.mp-freetext {
  position: static;
  pointer-events: all;
}

.mp-annotation-list-item.mp-comment {
  width: auto;
}

.mp-annotation-list-item-header {
  cursor: pointer;
  color: var(--primary-shade-2);
  display: flex;
}

.mp-annotation-list-location {
  font-weight: bold;
  margin-right: 4px;
}

.mp-annotation-list-author {
  margin-left: 4px;
}

.mp-annotation-list-thumbnail {
  max-width: 100%;
  background-color: white;
}

.mp-annotation-list-item-header .mp-icon{
  fill: var(--primary-shade-2);
}


.mp-annotation-list-item-body {
  margin-top:4px;
  border-left: 4px solid;
  padding-left: 12px;
  margin-left: 4px;
  color: var(--primary-shade-1);
  line-height: 1.3;
}

.mp-strikethrough .mp-annotation-list-item-main {
  text-decoration: line-through;
}

.mp-underline .mp-annotation-list-item-main {
  text-decoration: underline;
}

.mp-annotations-content textarea {
  width: 100%;
  height: 10em;
  background: transparent;
  resize: vertical;
  color: var(--primary-color);
  padding: 4px;
  font-size: 14px;
  font-style: inherit;
  font-family: Helvetica, Arial, sans-serif;
  resize: none;
  outline: none;
  border: 2px dashed var(--accent-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
}

.mp-annotation-list-item-comment-body {
  border-color: var(--primary-shade-2)!important;
  border-left: 4px solid;
  padding-left: 12px;
  margin-left: 4px;
  margin-top: 4px;
  color: var(--primary-shade-1);
}

.mp-annotation-list-item-comment-body p:first-child,
.mp-annotation-list-item-body p:first-child {
  margin-top: 0;
}

.mp-annotation-list-item-comment-body p:last-child,
.mp-annotation-list-item-body p:last-child {
  margin-bottom: 0;
}

.mp-annotation-list-item-comment-header {
  margin-top: 12px;
  color: var(--primary-shade-2);
}

.mp-annotation-list-item-comment-header .mp-icon{
  fill: var(--primary-shade-2);
}

.mp-tab-content .mp-annotations-content-inner {
  color: var(--primary-color);
}

.mp-tab-content .mp-annotations-content-inner p {
  color: var(--primary-color) !important;
}

/* Outline view */

.mp-outline-container {
  margin: 24px;
}

.mp-outline {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.mp-outline a {
  color: var(--primary-color);
  text-decoration: none;
}

.mp-outline li {
  position: relative;
  margin-top: 8px;
}

.mp-outline  li > a {
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 16px;
  display: inline-block;
}

.mp-outline li > a:hover {
  background: var(--surface-color-4);
}

.outline-label {
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 20px;
}

.outline-label:hover {
  background: var(--surface-color-4);
}
.mp-outline li > a:before {
  content: " \25CF ";
  display: none;
  width: 15px;
  height: 15px;
  margin-left: -15px;
  line-height: 15px;
  font-size: 12px;
  color: var(--primary-shade-1);
}

ul.mp-outline {
  padding: 0;
}

.mp-outline li {
  list-style: none;
}

.mp-outline ul {
  padding-left: 20px;
}

.mp-outline ul ul{
  padding-left: 20px;
}

.mp-outline ul ul ul{
  padding-left: 30px;
}

/* Hide checkboxes */
.mp-outline  input{
  display: none;

}
/* Hide collapsed branches */
.mp-outline  input:checked ~ ul {
  display: none;
}

/* Show pointer on collapsible rows */
.mp-outline  input ~ label {
  cursor: pointer;
  font-weight:normal;
  margin-bottom: 0px;
  line-height: 24px;
}

.outline-arrow-container {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 3px;
  left: -25px;
  border-radius: 4px;
  z-index: 9999;
  cursor: pointer;
}

.outline-arrow-container:hover {
  background: var(--surface-color-4);
}
.mp-outline .outline-arrow {
  position: absolute;
  cursor: pointer;
  top: 4px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--primary-shade-1);
  border-left: 2px solid var(--primary-shade-1);
}

/* Expanded branch */
.mp-outline input:checked ~ .outline-arrow-container > .outline-arrow {
  transform: rotate(135deg) translateY(-1px) translateX(2px);
}
/* Collapsed branch */
.mp-outline input ~ .outline-arrow-container > .outline-arrow {
  transform: rotate(225deg);
}

/* Thumbnail tab */

.mp-tab-pane.mp-active.mp-thumbnails-tab {
  display: flex;
  flex-wrap: wrap;
  margin-left: 16px;
  position: absolute;
  left: 0;
  padding-top: 16px;
  width: calc(100% - 32px);
  margin-right: 16px;
}

.mp-tab-pane.mp-active.mp-thumbnails-tab.has-scroll {
  width: calc(100% - 20px);
  margin-right: 4px;
}

.mp-tab-pane.mp-active.mp-thumbnails-tab a {
  margin-left: 8px;
  margin-bottom: 8px;
}

.mp-thumbs-list {
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 0px;
  list-style-type: none;
}

.mp-thumbs-list a > div {
  display: inline-block;
  margin: 8px;
}

.mp-thumbs-list .mp-thumb {
  margin-top:20px;
  padding: 5px;
}

.mp-thumb img {
  width: 150px;
}

.mp-thumbnail {
  position:relative;
  padding: 8px;
  border-radius: var(--border-radius);
}

.mp-thumbnail.mp-selected {
  background-color: var(--highlight-color);
}


.mp-thumbnail div > img {
  display: block;
  width: 80px !important;
  height: 104px !important;
  border: 1px solid #E8E8E9;
}

.mp-thumb-page-number {
  position: absolute;
  background-color: #37393C;
  color: var(--float-primary-color);
  border-radius: var(--border-radius);
  bottom: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/********** Right side panel ***********/

.mp-comments-list {
  display: block;
}

.mp-comments-list .mp-comment {
  margin-left: 12px;
  border-radius: 4px;
  margin-bottom: 24px;
  width: 240px;
}

.mp-right-panel .mp-selected .mp-comment {
  margin-left: 0px;
}

.mp-comment-reply {
  background-color: var(--surface-color-2)!important;
  color: var(--primary-color)!important;
}

.mp-comment-reply textarea {
  background-color: var(--surface-color-2)!important;
  color: var(--primary-color)!important;
}

.mp-selected .mp-arrow-box:after,
.mp-selected .mp-arrow-box:before {
  display: inline-block;
	right: 100%;
  margin-right: -1px;
	top: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.mp-selected  .mp-arrow-box:after {
	border-color: rgba(213, 0, 0, 0);
	border-width: 10px;
	margin-top: -10px;
}

.mp-selected .mp-arrow-box:before {
	border-color: rgba(0, 0, 0, 0);
	border-width: 11px;
	margin-top: -11px;
}

.mp-comment-menu-plain {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  margin-top: 12px;
  position: absolute;
  right: 4px;
}

.mp-comment-menu .mp-icon {
  fill: black;
  fill-opacity: 0.5;
}

.mp-comment-menu .mp-dropdown-menu .mp-icon {
  fill: var(--primary-color);
  fill-opacity: 1;
}

.mp-comment-reply .mp-comment-menu .mp-icon {
  fill: var(--primary-color);
}

.mp-comment-header {
  cursor:pointer;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 12px;
}

.mp-comment-header.mp-comment-main {
  border-width: var(--border-width);
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
  border-style: solid solid none solid;
}

.mp-selected .mp-comment-header.mp-comment-main {
  border-top-style: solid!important;
  border-top-width: 3px!important;
}

.mp-comment-header.mp-comment-reply {
  border-color: var(--border-color);
  border-width: var(--border-width);
  border-style: none solid none solid;
}

.mp-comment-body {
  padding: 12px;
  padding-top:0;
}

.mp-comment-body.mp-comment-main {
  border-style: none solid solid solid;
  border-width: var(--border-width);
}

.mp-comment-body.mp-comment-reply {
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: none solid solid solid;

  border-bottom-color: var(--line-color);
  border-bottom-width: var(--line-width);

}

.mp-comment-plain .mp-comment-body {
  border-style: solid solid solid solid;
  border-radius: var(--border-radius);
  padding-top:12px;
}

.mp-selected .mp-comment-plain .mp-comment-body {
  border-top-style: solid!important;
  border-top-width: 3px!important;
}

.mp-comment-name {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

.mp-comment-profile-photo {
  height: 36px;
  width: 36px;
  border-radius: 4px;
}

.mp-comment-profile-photo.mp-icon{
  fill: black;
  fill-opacity:0.5;
}


.mp-comment-reply .mp-comment-profile-photo.mp-icon{
  fill: var(--primary-shade-1);
}


.mp-comment-profile-data {
  padding-left: 12px;
  flex: 1;
}

.mp-comment-date {
  font-size: calc(var(--font-size) - 2px);
}

.mp-comment-reply .mp-comment-date {
  color: var(--primary-shade-1);
}

.mp-comment textarea {
  width: 100%;
  min-height: 70px;
  border:0px solid!important;
  background: transparent;
  resize: none;
  overflow:hidden;
  font-size:inherit;
  font-family:inherit;
  padding: 0;
  margin:0;
  outline:0;
}

.mp-comment-reply textarea::-webkit-input-placeholder {
  opacity: 0.3;
}

.mp-comment-placeholder {
  opacity: 0.3;
}

.mp-comment-text {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 70px;
}

.mp-comment-text p{
  margin-top: 0px;
  word-break: break-word;
  margin-right: 16px;
}

.mp-comment-text p:last-child {
  margin-bottom:0px;
}


.mp-selected .mp-comment-add-reply {
//  display:block;
}

.mp-comment-add-reply {
  background-color: var(--surface-color-2);
  padding:12px;
  text-align: right;
  color: var(--primary-color);
  border: var(--border-width) solid var(--border-color);
  border-style: none solid solid solid;
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.mp-comment-add-reply a {
  cursor: pointer;
}

/********** Annotations *********/

.mp-markup {
  position: absolute;
  border: 1px solid transparent;
}

.mp-selected .mp-markup::before {
  content: '';
  position: absolute;
  border: 1px dashed var(--default-blue-500);
  border-radius: var(--border-radius);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -3px;
  top: -3px;
}

.mp-selected .mp-markup + div {
  transform: translateY(4px);
}

.mp-shape {
  position: absolute;
  pointer-events: none;
}

.mp-selected .mp-shape rect,
.mp-selected .mp-shape circle,
.mp-selected .mp-shape polyline,
.mp-selected .mp-shape polygon,
.mp-selected .mp-shape line {
  cursor: hand;
  pointer-events: painted;
}

.mp-freetext {
  position: absolute;
  pointer-events: none;
}

.mp-tab-pane .mp-freetext .mp-annotations-content-inner {
  padding-left: 2px;
}

.mp-selected .mp-freetext {
  cursor: hand;
  pointer-events: all;
}

.mp-selected .mp-freetext circle {
  pointer-events: painted;
}

.mp-comment-icon {
  position: absolute;
  background:transparent;
  font-size: 18px;
  cursor: default;
}

.mp-selected .mp-comment-icon {
  filter: brightness(90%);
}

.mp-freetext-container {
  border: 1px hidden;
}

.mp-freetext-handle-left {
  display:none;
}

.mp-freetext-handle-right {
  float:right;
  display:none;
}

.mp-selected .mp-freetext-element {
  z-index: 10;
  height: auto !important;
}


.mp-selected .mp-freetext-handle-left {
  float:left;
  position:relative;
  display:block;
  //top:-webkit-calc(50% - 5px);
  //top:   -moz-calc(50% - 5px);
  //top:        calc(50% - 5px);
  left:-6px;
  border-top-left-radius:50%;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-bottom-left-radius:50%;
  width:6px;
  height:8px;
  background: lightblue;
  cursor: pointer;
  margin-right: -8px;
}

.mp-selected .mp-freetext-handle-right {
  display: block;
  float:right;
  position:relative;
  display:block;
  //top:-webkit-calc(-50% - 5px);
  //top:   -moz-calc(-50% - 5px);
  //top:        calc(-50% - 5px);
  right:-6px;
  border-top-left-radius:0;
  border-top-right-radius:50%;
  border-bottom-right-radius:50%;
  border-bottom-left-radius:0;
  width:6px;
  height:8px;
  background: lightblue;
  cursor: pointer;
  margin-left: -8px;

}


/* Misc containers */


/* Progress bar */
.mp-progress-bar-container {
  position: absolute;
  top: 48px;;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: var(--surface-color-3);
  z-index: 1;
}

.mp-progress-bar {
  width: 0%;
  height: 100%;
  background-color: var(--accent-color);
}

.mp-no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mp-pen-panel {
  display: none
}

.mp-drag-zone {
  width: 400px;
  height: 400px;
  background-color: white;
}

.mp-drag-zone.mp-active {
  background-color: yellow;
}



.mp-save.mp-save-needs-sync:after, .mp-sync-status.mp-save-needs-sync:after {
  padding-left: 4px;
  content: "\25cb";
  font-family: Helvetica, Arial, sans-serif;
}

.mp-save.mp-save-synced:after, .mp-sync-status.mp-save-synced:after {
  padding-left: 4px;
  content: "\25cf";
  font-family: Helvetica, Arial, sans-serif;
}

.mp-save.mp-save-active:after, .mp-sync-status.mp-save-active:after {
  padding-left: 4px;
  content: "\25cf";
  opacity: 0.5;
  -webkit-animation: glow;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 1500ms;

  -moz-animation: glow;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-duration: 1500ms;


  font-family: Helvetica, Arial, sans-serif;
}

.mp-save.mp-save-empty:after, .mp-sync-status.mp-save-empty:after {
  padding-left: 4px;
  content: "";
}


.mp-sync-toggle {
  display:table-row;
}

.mp-sync-toggle p {
  position: relative;
  padding: 0 0 0 36px;
  height: 36px;
  line-height: 36px;
  display: block;
  cursor: pointer;
  color: var(--primary-color)
}

.mp-sync-toggle div.mp-switch-container {
  display:table-cell;
  width: 175px;
  text-align: right;
  position:relative;
}

.mp-sync-status span {
  color: var(--border-color);
  font-size: 12px;
  display: inline-block;

}

/* TODO proper styling */

.go-to-page-modal {
  padding: 0;
  display: flex;
  justify-content: center;
  width: 382px;
  height: 158px;
  border: 1px solid var(--surface-color-2);
}

.go-to-page-modal .mp-btn-default {
  display: none;
}
.go-to-page-modal tbody {
  display: flex;
  align-items: center;
}
.go-to-page-modal h1 {
  display: none;
}
.go-to-page-modal .mp-modal-body {
  width: 152px;
  display: flex;
  align-items: center;
}

.go-to-page-modal input {
  width: 80px !important;
}
.go-to-page-modal .mp-modal-footer {
  display: flex;
  align-items: center;
}
.mp-modal-keyboard-shortcuts {
  padding: 48px 32px 24px 32px;
  width: 836px;
  position: fixed;
  left: 50%;
  transform: translate(-50%,-50%);
  top: 50%;
  overflow-y: scroll;
  max-height: calc(100vh - 88px);
}

#win-shortcuts .mp-shortcuts-kbd-wrapper{
  display: inline-flex;
  width: 132px;
}

#win-shortcuts .mp-shortcuts-first-row .mp-shortcuts-kbd-wrapper,
#win-shortcuts .mp-shortcuts-second-row .mp-shortcuts-kbd-wrapper {
  width: 56px;
}

#win-shortcuts .mp-shortcuts-last-row .mp-shortcuts-kbd-wrapper {
  width: 82px;
}

#win-shortcuts .mp-modal-keyboard-shortcuts {
  width: 848px !important;
}

.mp-modal-keyboard-shortcuts .mp-btn-primary {
  display: none;
}

.mp-modal-keyboard-shortcuts .mp-btn-default {
  padding: 0 20px;
  transform: translateX(16px);
}

.mp-modal-keyboard-shortcuts h1 {
  display: none;
}
.mp-modal-keyboard-shortcuts .mp-modal-body {
  padding: 0;
}

.mp-shortcuts-header {}

.mp-shortcuts-row {
  display: flex;
  margin-top: 24px;
}

.mp-shortcuts-anno-subtitle {
  color: var(--primary-shade-2);
  font-size: 14px;
}

.mp-shortcuts-header h2 {
  margin: 0;
  font-size: 18px;
}
.mp-shortcuts-help {
  font-family: var(--font-family);
  font-size: 12px;
  color: var(--primary-color);
}

.mp-shortcuts-help kbd {
  color: var(--primary-color);
  height: 12px;
  background: var(--surface-color-3);
  text-transform: uppercase;
  min-width: 16px;
  display: inline-block;
  text-align: center;
  padding: 3px 8px;
  border-radius: var(--border-radius);
  line-height: 12px;
  font-family: Helvetica, Arial, sans-serif;
}

.mp-shortcuts-item-wrapper:not(:first-child) {
  margin-top: 16px;
}

.mp-shortcuts-column-wrapper {
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 33%;
}

.mp-shortcuts-items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.mp-shortcuts-items.direction-row {
  flex-direction: row;
}

.mp-shortcuts-item-wrapper {
  width: 100%;
  display: inline-block;
}

.mp-shortcuts-kbd-wrapper {
  width: 62px;
  display: inline-flex;
  margin-right: 4px;
}

.mp-shortcuts-items.direction-row:nth-of-type(3) {
  margin-top: 12px;
}

.direction-row > div {
  width: 30%;
}

/* Unused for now */

/*
.mp-stamp {
  position: absolute;
  border: 2px solid;
  border-color: transparent;
  resize: none;

  .tall {
    width: 'auto';
    height: 100%;
  }
  .wide {
    width: 100%;
    height: 'auto';
  }

  .free {
    width: 100% !important;
    height: 100% !important;
  }

  .selected {
    resize: both;
    z-index: 10;
    border: 2px solid;
    border-radius: 0px 0px 30px 0px;
    border-color: lightblue;
  }
}

.mp-settings-color-selection {
  margin-bottom: 10px;
}

.mp-settings-color-name {
  min-width: 100px;
  display:inline-block;
  vertical-align: center;
  height: 36px
}

.mp-settings-color-block {
  display: inline-block;
  width: 126px;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #FFF;
}

.mp-settings-color-block.selected {
  border: 3px solid #000000;
}

.mp-settings-color {
  width:30px;
  height:30px;
  display:block;
  float:left;
  margin: 0px;
}

.mp-settings-background-block {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 10px;
  border: 3px solid #FFF;
}

.mp-settings-background-block.selected {
  border: 3px solid #000000;
}


*/

/* Annotation Export */
/********** HTML view **********/
.mp-annotations-group {
  display: block;
}

span.dot {
  margin-left: 12px;
}
.dot::before {
  content: "\A";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  display: inline-block;
  background: var(--primary-shade-2);
  transform: translate(-6px, -2px);
}

.mp-annotations-group.mp-markup-comment {
  display: table;
  width: 100%;
  text-decoration: unset;
}

.mp-annotations-group-simple {
  clear: both;
  margin-bottom: 20px;
}

.mp-single-user-true .mp-annotations-author,
.mp-single-user-true .bullet,
.mp-single-user-true .mp-annotation-author-date,
.mp-single-user-true .mp-annotations-page.with-dot::before,
.mp-single-user-true .mp-markup-comment .mp-annotations-header{
  display: none;
}

.mp-annotation-has-comment .mp-annotation-author-date,
.mp-annotation-has-comment .bullet,
.mp-annotation-has-comment .mp-annotations-author,
.mp-annotation-has-comment .mp-annotations-page.with-dot::before {
  display: none;
}

.mp-annotations-group-simple::before {
  display: none;
}

.mp-annotations-header-simple {
    font-weight: bold;
}
.mp-highlight-comment .mp-annotations-header, .mp-comment-reply .mp-annotations-header {
  padding-top: 5px;
}

.mp-highlight .mp-annotations-header .mp-annotations-header-icon {
  margin: -1px 0px 0px 14px;
}

.mp-annotations-group.mp-annotations-reply .mp-annotations-header .mp-annotations-header-icon {
  margin: 0;
}

.mp-annotations-group.mp-freetext,
.mp-annotations-group-simple.mp-freetext {
  position: static;
  pointer-events: all;
}

.mp-annotations-header-inner {
  padding-right: 20px;
}

.mp-annotations-content {
  display: table-cell;
  vertical-align: top;
  max-width: 600px;
  border-left: 2px solid #cccccc;
  padding: 0px 0px 25px 30px;
}

.mp-highlight .mp-annotations-content, .mp-underline .mp-annotations-content, .mp-strikeout .mp-annotations-content {
  font-family: Cardo, serif;
  font-size: 18px;
  line-height: 24px;
}

.mp-comment .mp-annotations-content, .mp-comment-reply .mp-annotations-content {
  font-family: Lato, sans-serif;
  font-size: 16px;
  padding-top: 5px;
  word-break: break-word;
}

.mp-annotations-comment .mp-annotations-content {
  font-family: Lato, sans-serif;
  font-size: 16px;
  line-height: 22px;
  padding-top: 5px;
  word-break: break-all;
}

.mp-comment .mp-annotations-content p,
.mp-comment-reply .mp-annotations-content p,
.mp-freetext .mp-annotations-content p {
  margin-block-start: 0em;
}
.mp-freetext .mp-annotations-content p {
  width: 100%;
  padding: 5px;
}
/* .mp-highlight-comment .mp-annotations-content, .mp-comment-reply .mp-annotations-content {
  padding-top: 5px;
} */

.mp-strikeout .mp-annotations-markup-text,
.mp-strikeout .mp-annotations-markup-text > span {
  text-decoration: line-through;
}

.mp-underline .mp-annotations-markup-text,
.mp-underline .mp-annotations-markup-text > span {
  text-decoration: underline;
}

.mp-annotations-header-icon {
  width: 30px;
  height: 30px;
  font-family: 'Glyphicons Halflings';
  margin-right: -35px;
  color: white;
  font-size: 14px;
  float: right;
  font-style: normal;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  border-radius: 50%;
}

.mp-annotations-header-icon > svg{
  color: white;
}

.mp-annotations-title {
  margin-top: 50px;
}

.mp-annotations-indent .mp-annotations-header-icon {
  margin-right: -15px;
}

.mp-annotations-container {
  padding: 50px;
}
.mp-annotations-container h1 {
  font-size: 24px;
  width: 800px;
  margin: 0 0 20px 250px;
}

.mp-markdown-container {
  padding: 50px;
  white-space: pre-wrap;
}

.mp-title .mp-annotations-header-inner, .mp-title .mp-annotations-content-inner {
  padding-top: 10px;
}

.mp-title .mp-annotations-file {
  font-size: 24px;
  line-height: 30px;
  color: black;
  font-weight: bold;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.mp-annotations-reply .mp-annotations-header-icon {
  display: block;
  margin-right: 5px;
  margin-top: -1px;
  width: 20px;
  height: 20px;
  float: left;
}

.mp-tab-content .mp-annotations-reply .mp-annotations-author {
  display: inline-block;
  margin-top: 2px;
  margin-left: 8px !important;
  font-family: Lato, sans-serif;
}

.mp-annotations-reply .mp-annotations-content {
  display: block;
  border: none;
  padding: 5px 0px 5px 25px;
}

.mp-annotations-reply .mp-annotations-content p {
  margin-block-start: 0em;
  margin-block-end: 0.5em;
}

.mp-annotations-comment .mp-annotations-header-icon {
  display: inline;
  margin-right: 5px;
  margin-left: 0px;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  float: left;
  background-color: var(--surface-color-1) !important;
}

.mp-annotations-comment .mp-annotations-content {
  display: inline;
  border: none;
  padding: 5px 0px 5px 0px;
}

.mp-tab-content div {
  font-family: Helvetica, Arial, sans-serif;
}
.mp-tab-content span {
  font-family: Helvetica, Arial, sans-serif;
}
.mp-tab-content p {
  font-family: Helvetica, Arial, sans-serif;
}

.mp-annotations-group.mp-comment {
  background-color: transparent !important;
}

.mp-tab-content .mp-annotations-annotation-group .mp-annotations-content {
  display: block;
  padding: 0px 0px 0px 14px;
  border: none;
  font-family: Cardo !important;
  font-style: normal;
  font-weight: normal;
  font-size: 14px !important;
  line-height: 18px !important;
  color: rgb(0, 0, 0);
  max-width: unset;
}

.mp-tab-content .mp-markup-comment .mp-annotations-content {
  padding: 0;
}

/*.mp-tab-content .mp-markup-comment .mp-annotations-content > .mp-annotations-text {*/
  /*padding: 0px 0px 0px 38px;*/
/*}*/

.mp-annotations-header {
  width: 100%;
  text-align: left;
  display: flex;
  margin-top: 8px;
  align-items: center;
  vertical-align: top;
  font-size: 14px;
  line-height: 20px;
}

.mp-annotations-annotation-group {
  position: relative;
  margin-top: 36px;
  page-break-inside: avoid;
}

.mp-annotations-annotation-group:first-of-type {
  margin-top: 16px;
}

.mp-annotations-annotation-group::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  width: 6px;
}

.mp-tab-pane .mp-annotations-annotation-group.mp-theme0-color1::before {
  background-color: var(--surface-color-4);
}

.mp-annotations-header-inner {
  display: flex;
  font-size: 12px;
  line-height: 14px;
  color: var(--primary-shade-2);
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  margin: 0 0 0 8px;
}

.mp-annotations-header-inner div {
  margin: 0;
}

.mp-author, .mp-source {
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  color: #000000;
}

.mp-author {
  margin: 10px 0 0 0;
}
.mp-source {
  margin: 4px 0 0 0;
}

.mp-annotations-header-icon {
  margin: 0px 0px 0px 14px;
  background-color: unset !important;

  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-self: flex-start;
}


.mp-annotations-header-icon svg {
  fill: var(--primary-shade-2) !important;
  width: 16px;
  height: 16px;
}

.mp-annotations-content svg {
  fill: var(--primary-shade-2) !important;
  width: 16px;
  height: 16px;
}

.mp-edit-markup {
  visibility: hidden;
  display: inline-block;
  cursor: pointer;
  transform: translateX(4px);
}

.mp-annotations-content:hover .mp-edit-markup {
  visibility: visible;
}

#mp-export-content .mp-comment {
  background-color: unset !important;
}

.mp-annotations-reply::before {
  content: '';
  position: absolute;
  left: 0;
  border-radius: 4px;
  width: 6px;
  background: var(--surface-color-4);
}

.mp-annotations-header + .mp-annotations-reply::before {
  top: 0 !important;
  height: 100% !important;
}
.mp-comment + .mp-annotations-reply::before,
.mp-annotations-reply + .mp-annotations-reply::before,
.mp-annotations-comment + .mp-annotations-reply::before {
  top: -18px !important;
  height: calc(100% + 18px) !important;
}

.mp-tab-content .mp-annotations-reply .mp-annotations-header {
  padding: 0 8px 0 19px;
  display: block;
  text-align: left;
}

.mp-annotations-reply .mp-annotations-content {
  padding: 0 0 0 19px !important;
}

.mp-annotations-reply .mp-annotations-header-icon {
  display: flex;
  align-items:center;
  margin: 2px 0 0 0;
  width: 16px;
  height: 16px;
  float: left;
}

.mp-annotations {
  position: relative;
  width: 82%;
  height: 100%;
}

.mp-tab-content .mp-annotations-reply {
  margin-top: 8px;
  margin-left: 19px;
  position: relative;
  min-height: 44px;
  display: block;
  padding: 0;
}

.mp-annotations-reply::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  width: 6px;
  background: var(-surface-color-4);
}

.mp-tab-content .mp-annotations-content-inner p {
  margin: 0;
  padding: 0px 6px 0 0px !important;
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
}

.mp-annotations-stats p {
  font-size: 12px;
}
.mp-short-reference p {
  font-size: 12px;
}

.mp-tab-content .mp-markup-comment {
  position: relative;
  margin-top: 8px;
  padding: 0px 0px 0px 38px;
}

.mp-export-content .mp-markup-comment{
  padding-left: 38px;
}

.mp-markup-comment .mp-annotations-content .mp-annotations-header-icon {
  display: none;
}

.mp-markup-comment .mp-annotations-header .mp-annotations-header-icon {
  display: flex;
  margin: 2px 0 0 0;
  float: left;
  width: 16px;
  height: 16px;
  align-self: flex-start;
  background-color: unset !important;
}

.mp-markup-comment mp-annotations-content-inner p {
  padding: 0;
}

/********** Export panel **********/

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 4px 16px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: var(--surface-color-3);
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

.nav-pills > li {
  float: left;
  cursor: pointer;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 8px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--surface-color-3);
}

.mp-export-nav {
  padding-left: 48px;
  margin-top: 32px;
  user-select: none;
}

.mp-export-footer {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0px;
  width: calc(100% - 24px);
  padding: 12px;
  text-align: right;
  height: 60px;
}

#mp-copy-annotations .mp-icon{
  margin-right: 8px;
}

#mp-print-annotations .mp-icon {
  margin-right: 8px;
}

#mp-download-annotations, #mp-copy-annotations, #mp-print-annotations {
  margin-left: 16px;
  width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#mp-download-annotations.mp-disabled, #mp-copy-annotations.mp-disabled, #mp-print-annotations.mp-disabled {
  display: none;
}
#mp-download-annotations .mp-icon {
  margin-right: 4px;
}

.mp-export-footer-left-div {
  position: absolute;
  left: 32px;
}
.mp-export-footer-right-div {
  position: absolute;
  right: 32px;
}
.mp-export-header {
  border-style: none;
  height: 48px;
}

.mp-overlay-close {
  position: absolute;
  cursor: pointer;
  top: 26px;
  right: 34px;
  z-index: 20;
}

.mp-overlay-close .mp-icon {
  width: 16px;
  height: 16px;
  fill: var(--primary-shade-1);
}

.mp-export-content {
  overflow: auto;
  border: 1px solid var(--surface-color-3);
  box-sizing: border-box;
  border-radius: 4px;
  position: absolute;
  top: 64px;
  bottom: 48px;
  height: 370px;
  padding: 0;
  width: 869px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
}

::-webkit-scrollbar-corner {
  background: white;
  border-radius: 16px;
}

.mp-export-content.pdf,
.mp-export-content.rich {
  background: white;
}

.mp-export-content.rich p {
  margin: 0;
}

.mp-export-content pre {
    margin-left: 12px;
    border-style: none;
  }

/* Custom scrollbar */
/*div.mp-custom-scrollbar {*/
  /*overflow-y: scroll;*/
  /*height: calc(100% - 48px - 36px - 4*12px);*/
/*}*/

/*.mp-export-content.markdown {*/
  /*height: calc(100% - 48px - 36px - 4*12px - 2px);*/
/*}*/

/*.mp-custom-scrollbar::-webkit-scrollbar {*/
  /*width: 8px;*/
  /*height: 8px;*/
/*}*/

/*.mp-custom-scrollbar-wide::-webkit-scrollbar {*/
  /*width: 12px;*/
/*}*/

/*.mp-custom-scrollbar::-webkit-scrollbar-button:start:decrement,*/
/*.mp-custom-scrollbar::-webkit-scrollbar-button:end:increment {*/
  /*height: 0px;*/
  /*display: block;*/
  /*background-color: transparent;*/
/*}*/

/*.mp-custom-scrollbar::-webkit-scrollbar-track-piece {*/
  /*background-color: #e8e8e8;*/
  /*-webkit-border-radius: 0px;*/
/*}*/

/*.mp-custom-scrollbar::-webkit-scrollbar-thumb:vertical {*/
  /*height: 20px;*/
  /*background-color: #dbdbdb;*/
  /*-webkit-border-radius: 0px;*/
/*}*/

/*.mp-custom-scrollbar::-webkit-scrollbar-thumb:horizontal {*/
  /*width: 20px;*/
  /*background-color: #dbdbdb;*/
  /*-webkit-border-radius: 0px;*/
/*}*/

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  background-color: var(--half-gray-400);
}

/********** Sync Toggle **********/
.mp-switcher-label {
  width: 30px;
  height: 12px;
  background: #e0e0e0;
  border-radius: 30px;
  display: block;
  top: var(--font-size);
  right: 0px;
  position: absolute;
  z-index: 1;
  transition: all 300ms ease-in 0s;
  opacity: 0.7; }

.mp-switcher-label:before {
  content: "Off";
  display: block;
  position: absolute;
  left: -30px;
  top: -3px;
  opacity: 0.5; }

.mp-switcher-input {
  visibility: hidden; }

.mp-switcher {
  top: 8px;
  position: absolute;
  right: 10px;
  visibility: hidden; }

.mp-switcher:before {
  content: "";
  visibility: visible;
  position: absolute;
  top: 3px;
  left: -20px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: block;
  z-index: 2;
  background: #e0e0e0;
  border: 1px solid #d4d4d4; }

.mp-switcher.mp-checked:before {
  left: -5px;
  top: 3px;
  background: #2ab27b;
  border: 1px solid #259d6d; }

.mp-switcher.mp-checked + label {
  background: #2ab27b; }

.mp-switcher.mp-checked + label:before {
  content: "On";
  color: #2ab27b;
  opacity: 0.9; }



/********** Tooltips **********/

.mp-tooltip-el {
  position: absolute;
  background: var(--float-surface-color-1);
  font-size: 12px;
  color: var(--float-primary-color);
  width: auto;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  padding: 6px 8px;
  text-align: center;
  z-index: 999995;
}

.mp-tooltip-el .tooltip-inner {
  visibility: visible;
  white-space: nowrap;
}

.mp-tooltip-el .tooltip-arrow {
  display: none;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.mp-tooltip-el .tooltip-arrow{
  border-color: var(--primary-color);
}

.mp-tooltip-el[x-placement^="top"] {
  margin-bottom: 5px;
}

.mp-tooltip-el[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}

.mp-tooltip-el[x-placement^="bottom"] {
    margin-top: 5px;
}

.mp-tooltip-el[x-placement^="bottom"] .tooltip-arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 10px);
    margin-top: 0;
    margin-bottom: 0;
}

.mp-tooltip-el[x-placement^="right"] {
    margin-left: 5px;
}

.mp-tooltip-el[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

.mp-tooltip-el[x-placement^="left"] {
    margin-right: 5px;
}

.mp-tooltip-el[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

/* Print view */

@media print {

  body {
    margin: 0 0 0 0;
    visibility: visible;
    height: auto;
    width: auto;
    overflow: hidden;
  }

  body *:not(.mp-annotations-container div) {
    height: auto;
    width: auto;
    margin: 0 0 0 0;
  }

  #mountpoint {
    border: none;
    height: auto;
    width: auto;
    margin: 0 0 0 0;
    position:absolute;
    top: 0;
    left: 0;
  }

  .mp-app-container {
    height: auto;
    width: auto;
    margin: 0 0 0 0;
    position:absolute;
    top: 0;
    left: 0;
  }

  #mp-top-panel,
  #mp-content-container,
  #mp-clipboard-container,
  #mp-overlay-container,
  #mp-loading-msg,
  #mp-loading-img,
  #mp-outer-container,
  #mp-file-input,
  #mp-bottom-panel,
  #mp-open-panel {
    display: none;
  }

  body[data-pdfjsprinting] #mp-print-container {
    visibility: visible;
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 999;
    -webkit-print-color-adjust: exact !important;
  }

  #mp-print-container * {
    height: auto;
    width: auto;
  }

  #mp-print-container pre {
    border: 0px;
    color: #FFFFFF;
  }

  #mp-print-container > div {
    position: relative;
    top: 0;
    left: 0;
    page-break-after: always;
    page-break-inside: avoid;
  }

  #mpid-print-container .mp-annotations-container div {
    page-break-after: initial;
    page-break-inside: initial;
  }

  #mp-print-container canvas {
    position: relative;
    top: 0;
    left: 0;
    display: block;
  }

  #mp-print-container img {
    display: block;
  }

  /* Annotations printing */
  #mp-print-container .mp-annotations-header-icon {
    width: 30px;
    height: 30px;
  }

  #mp-print-container .mp-annotations-header {
    width: 200px !important;
  }

  #mp-print-container .mp-icon.mp-icon-export {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    fill: var(--surface-color-1);
  }

  #mp-print-container .mp-annotations-reply .mp-icon.mp-icon-export,
  #mp-print-container .mp-annotations-comment .mp-icon.mp-icon-export {
    fill: var(--primary-shade-2) !important;
  }

  #mp-print-container .mp-annotations-reply .mp-annotations-header-icon,
  #mp-print-container .mp-annotations-comment .mp-annotations-header-icon {
    display: block;
    margin-left: 0px;
    margin-right: 5px;
    margin-top: -1px;
    width: 20px;
    height: 20px;
    float: left;
    background-color: var(--surface-color-1) !important;
  }

  #mp-print-container .mp-annotations-group.mp-markup-comment,
  #mp-print-container .mp-annotations-reply {
    display: table;
    width: 95%;
    background-color: var(--surface-color-1) !important;
  }

  #mp-print-container .mp-annotations-reply .mp-annotations-header {
    display: table-row;
    text-align: left;
    padding: 0px 20px 0px 20px;
  }

  #mp-print-container .mp-annotations-reply .mp-annotations-content p {
    margin-block-start: 0em;
    margin-block-end: 0.5em;
  }

  #mp-print-container .mp-annotations-annotation-group {
    page-break-inside: avoid;
  }
}

#pdf-frame {
  position: fixed;
  margin-left: -9999px;
}

.switch-theme-menu-item.visible {
  display: block;
}
.switch-theme-menu-item.hidden {
  display: none;
}

.switch-theme-menu-item .mp-icon {
  width: 20px;
  height: 20px;
}

.switch-theme-menu-item.on .mp-icon {
  fill: #5CD1A6;
}

.switch-theme-menu-item.off .mp-icon {
  fill: var(--primary-shade-2);
}

.color-picker-colors-header {
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  color: var(--primary-shade-2);
}

.mp-thumbnail-image {
  border-radius: 4px;
}

.mp-thumbnail-image-container {
  width: auto !important;
  height: auto !important;
}

.mp-annotations-thumbnail {
  zoom: 34%;
  border-radius: var(--border-radius);
  max-width: 100%;
  position: relative;
  float: left;
}

.mp-annotations-thumbnail-wrapper {
  display: inline-block;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.mp-markup-comment::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0;
  height: 100%;
  border-radius: 4px;
  width: 6px;
  background: var(--surface-color-4);
}

/* illustrations in side panel */
.mp-illustration {
  width: 120px;
}
.mp-illustration.mp-illustration-search {
  height: 100px;
}
.mp-illustration.mp-illustration-outline {
  height: 136px;
}
.mp-illustration.mp-illustration-annotations {
  height: 142px;
}
.mp-illustration.mp-illustration-noMatch {
  height: 126px;
}
.mp-comment-number {
  display: none;
}

.mp-tab-pane .mp-illustration {
  transform: translateX(-1000px);
  position: absolute;
}

.mp-tab-pane.mp-active .mp-illustration {
  transform: none;
  overflow: visible;
  position: static;
}

/********** PDF.js *********/

.page *::selection {  background:rgba(0,0,255,0.3); }
.page *::-moz-selection  {  background:rgba(0,0,255,0.3); }

.canvasWrapper {
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #DEDEDE;
}

canvas {
  margin: 0;
  display: block;
}


.page {
  padding: 0px;
  direction: ltr;
  width: 816px;
  height: 1056px;
  position: relative;
  overflow: visible;
  background-clip: content-box;
  background-color: white;
  border: 9px solid transparent;
  margin: 1px auto -8px auto;
  border-radius: 12px;
}

.annotationLayer section {
  position: absolute;
}

.annotationLayer .linkAnnotation > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer .linkAnnotation > a /* -ms-a */  {
  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
}

.annotationLayer .linkAnnotation > a:hover {
  opacity: 0.2;
  background: #ff0;
  box-shadow: 0px 2px 10px #ff0;
}

.page .loadingIcon:after {
  position: absolute;
  top:0;
  left:-40px;
  display: block;
  margin:50%;
  height: 30px;
  width: 120px;
  content:"Loading ...";
  color: black;
  font-size: 18px;
  opacity:0.2;
  text-align: center;
}


.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.textLayer > span {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: rgba(0, 0, 200, 0.2);
  border-radius: 4px;
}

.textLayer .highlight.begin {
  border-radius: 4px 0px 0px 4px;
}

.textLayer .highlight.end {
  border-radius: 0px 4px 4px 0px;
}

.textLayer .highlight.middle {
  border-radius: 0px;
}

.textLayer .highlight.selected {
  background-color: #3fe1a5;
  opacity: 0.4;
}

.annotText > img {
  position: absolute;
  cursor: pointer;
}

.annotTextContentWrapper {
  position: absolute;
  width: 20em;
}

.annotTextContent {
  z-index: 200;
  float: left;
  max-width: 20em;
  background-color: #FFFF99;
  box-shadow: 0px 2px 5px #333;
  border-radius: 2px;
  padding: 0.6em;
  cursor: pointer;
}

.annotTextContent > h1 {
  font-size: 1em;
  border-bottom: 1px solid #000000;
  padding-bottom: 0.2em;
}

.annotTextContent > p {
  padding-top: 0.2em;
}

#mp-viewer.textLayer-visible .textLayer > div,
#mp-viewer.textLayer-hover .textLayer > div:hover {
  background-color: white;
  color: black;
}

#mp-viewer.textLayer-shadow .textLayer > div {
  background-color: rgba(255,255,255, .6);
  color: black;
}

.thumbnailSelectionRing {
  border-radius: 2px;
}

.thumbnail.selected {
  background-color: rgba(152, 190, 151, 1);
}

.thumbnail.selected > .thumbnailSelectionRing {
  background-color: rgba(152, 190, 151, 1);
}

.thumbnailImage {
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  z-index: 99;
  background-color: white;
  background-clip: content-box;
}

#mp-print-container {
  display: none;
}

.page .loadingIcon:after {
  display: none !important;
}








/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
    position:absolute;
    height: 148px;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
  position:relative;
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    height: 100%;
}

.sp-color, .sp-hue, .sp-sat, .sp-val {
    border-radius: 4px;
}
.sp-hue {
    width: 23px;
    height: 122px;
}
.sp-color {
    width: 123px;
    height: 123px;
    margin-left: 14px;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -14px;
    right: 0;
    left: 0;
    height: 8px;
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    display: none !important;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color { right: 40%; }
    .sp-hue { left: 63%; }
    .sp-fill { padding-top: 60%; }
}
.sp-dragger {
   border-radius: 5px;
   height: 5px;
   width: 5px;
   border: 1px solid #fff;
   background: #000;
   cursor: pointer;
   position:absolute;
   top:0;
   left: 0;
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: 0;
    padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: solid 1px var(--primary-shade-1);
}

/* Input */
.sp-input-container {
    float:right;
    width: 100px;
    margin-bottom: 4px;
}
.sp-initial-disabled  .sp-input-container {
    width: 100%;
}
.sp-input {
   font-size: 12px !important;
   border: 1px inset;
   padding: 4px 5px;
   margin: 0;
   width: 100%;
   background:transparent;
   border-radius: 3px;
   color: #222;
}
.sp-input:focus  {
    border: 1px solid orange;
}
.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    float:left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}
.sp-picker-container {
    width: 172px;
}

/* Palettes */
.sp-palette-container {
    border-right: solid 1px #ccc;
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 25px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
.sp-palette-button-container,
.sp-button-container {
    float: right;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    border: solid 1px #91765d;
    background: #eee;
    color: #333;
    vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
}
.sp-preview {
    position:relative;
    width:25px;
    height: 20px;
    border: solid 1px #222;
    margin-right: 5px;
    float:left;
    z-index: 0;
}

.sp-palette {
    *width: 220px;
    max-width: 220px;
}
.sp-palette .sp-thumb-el {
    width:16px;
    height: 16px;
    margin:2px 1px;
    border: solid 1px #d0d0d0;
}

.sp-container {
    padding-bottom:0;
}


/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
  background-color: #eeeeee;
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 5px 4px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  vertical-align: middle;
}
.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}


.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}

.sp-preview, .sp-alpha, .sp-thumb-el {
    position:relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    top:0;left:0;bottom:0;right:0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}

.toast-title {
  font-weight: bold;
}

.toast-message {
  word-wrap: break-word;
  line-height: 18px;
  width: 100%;
  text-align: left;
}

#toast-container.toast-title-bar > div {
  height: 48px;
  min-width: unset;
  color: black;
  padding: 0;
  background: transparent;
}
#toast-container.toast-title-bar {
  z-index: 999999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100% - 12px);
  position: absolute;
  height: 100%;
  top: 0;
  transform: none;
  box-shadow: none;
  left: 22px;
  margin: 0;
  max-width: unset;
  min-width: unset;
}

.toast-title-bar .toast-message {
  position: absolute;
  right: 0;
  width: 100%;
  color: black;
  line-height: 48px;
  background: transparent;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.toast-message a,
.toast-message label {
  color: #ffffff;
}
.toast-message a:hover {
  color: #cccccc;
  text-decoration: none;
}
.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  position: absolute;
  top: 8px;
  right: 8px;
}
.toast-top-center {
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}
#toast-container {
  position: fixed;
  z-index: 999999;
  bottom: 32px;
  top: unset;
  max-width: 700px;
  min-width: 386px;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.15);
  user-select: none;
}

#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#toast-container > div {
  position: relative;
  overflow: hidden;
  padding: 8px 36px 8px 16px;
  min-height: 36px;
  min-width: 386px;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
#toast-container > div.toast-error {
  padding: 8px 36px 8px 40px;
}
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  min-width: 386px;
  margin: auto;
}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin: auto;
}

.toast {
  color: #F4F4F4;
  font-size: var(--font-size-default);
  font-family: sans-serif;
  background-color: rgba(53, 53, 53, 0.95);
  font-size: 14px;
}

.toast svg {
  position: absolute;
}
.toast svg.close {
  right: 8px;
  width: 16px;
  height: 16px;
  top: 10px;
  cursor: pointer;
  fill: #8F918F;
  pointer-events: auto;
}

.toast svg.warning {
  display: none;
  position: absolute;
  left: 16px;
  top: 10px;
  fill: #F28C8C;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.toast-success {

}
.toast-error svg.warning {
  display: block;
}
.toast-info {

}
.toast-warning {

}

.toast-progress {
  display: none;
}

/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}


/* Overrides */
@media print {
  #mpid-toast-container {
    display:none;
  }
}

#mpid-toast-container.toast-top-center > div {
  width: 500px;
  padding:20px 20px;
}

.toast-top-center {
  top: 10px;
}


/*.toast-error {*/

  /*.btn-custom {*/
    /*color: white;*/
    /*background: darken(#bd362f,10%);*/
    /*border: 1px solid darken(#bd362f,15%);*/
    /*font-weight:bold;*/
  /*}*/

  /*.btn-custom:hover {*/
    /*background: darken(#bd362f,15%);*/
    /*color: white;*/
  /*}*/
/*}*/


#mpid-toast-container > div,
#mpid-toast-container > :hover {
  opacity:0.7!important;
  -moz-box-shadow: 0 0 3px #999999;
  -webkit-box-shadow: 0 0 3px #999999;
  box-shadow: 0 0 3px #999999;
  p {
      margin: 8px 0px;
  }
}


.toast-info {
  //background:darken($default-color,10%);

}

.toast-close-button {
  opacity:0.5;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color:white;
  opacity:0.9;
}

.toast-title {
  margin-bottom: 2px;
  display: none;
}



/*# sourceMappingURL=metapdf.css.map */