.container{
    display: flex;
    flex-direction: column;
}

.split {
    display: flex;
}

.treeContainer {
    flex: 1 0 auto;
    min-width: 0;
    margin-left: -16px;
    margin-right: -16px;
    overflow-y: auto;
    background-color: #003873;
}

.contentContainer {
    flex: 2;
    padding: 50px;
    height: 100vh;
    overflow-y: auto;
}

.contentContainer section {
    margin-bottom: 25px;
}

.contentContainer button {
    color: white;
    background: rgb(20, 127, 250);
    border: none;
    box-shadow: 1px 1px 0 rgb(12, 105, 211),
    2px 2px 0 rgb(12, 105, 211),
    3px 3px 0 rgb(12, 105, 211),
    4px 4px 0 rgb(12, 105, 211),
    5px 5px 0 rgb(12, 105, 211)
    ;
    font-size: 20px;
    padding: 10px; 
    cursor: pointer;
    margin-bottom: 10px;
}

.contentContainer button:active {
    background:  rgb(12, 105, 211);
    box-shadow: none;
    position: relative;
    top: 3px;
    left: 3px;
}

.contentContainer input {
    border: 2px solid rgb(12, 105, 211);
    box-shadow: 1px 1px 0 rgb(12, 105, 211),
    2px 2px 0 rgb(12, 105, 211),
    3px 3px 0 rgb(12, 105, 211),
    4px 4px 0 rgb(12, 105, 211),
    5px 5px 0 rgb(12, 105, 211)
    ;
    font-size: 20px;
    padding: 10px; 
}

.contentContainer label,
.contentContainer button,
.contentContainer input {
    display: block;
    margin: 10px 0;
}

.statsgrid {
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
}

.infobox {
    width: 200px;
    height: 100px;
    background:rgb(20, 127, 250);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color:rgb(179, 211, 249);
    box-shadow: 1px 1px 0 rgb(12, 105, 211),
    2px 2px 0 rgb(12, 105, 211),
    3px 3px 0 rgb(12, 105, 211),
    4px 4px 0 rgb(12, 105, 211),
    5px 5px 0 rgb(12, 105, 211)
    ;
}

.stat {
    color: white;
    text-shadow: 0 1px 1px rgb(0 0 0 /0.4);
    font-size: 30px;
    justify-self: center;
    margin: auto 0;
    padding: 5px;
    text-align: center;
}

.row {
    white-space: nowrap;
    cursor: pointer;
}

.mistree {
    padding-bottom: 120px;
}

.mistree .node {
    position: relative;
    border-radius: 8px;
    display: flex;
    align-items: center;
    color: white;
    margin: 0 20px;
    height: 100%;
}

.mistree .node.isSelected {
    background: red;
    color: white;
}

.mistree .node:hover {
    cursor: pointer;
}

/*.mistree .node:global(.willReceiveDrop) {*/
/*    background: #bbb;*/
/*}*/

.mistree .node:global(.isSelected) {
    border-radius: 0;
}

.mistree .node:global(.isSelectedStart) {
    border-radius: 8px 8px 0 0 ;
}

.mistree .node:global(.isSelectedEnd) {
    border-radius: 0 0  8px 8px;
}

.node:global(.isSelectedStart.isSelectedEnd) {
    border-radius: 8px;
}

.tree:hover .indentLines {
    display: flex;
}

.indentLines {
    --indent-size: 15px;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: none;
    align-items: flex-start;
    height: 100%;
}

.indentLines > div {
    height: 100%;
    padding-left: 10px;
    border-right: 1px solid #ccc;
    margin-right: calc(var(--indent-size) - 10px - 1px);
}

.row:focus {
    outline: none;
}

.row:focus .node:global(.isSelected) {
    background: rgb(12, 105, 211);
}

.icon {
    margin: 0 10px;
    flex-shrink: 0;
}

.text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.node:global(.isInternal) {
    cursor: pointer;
}

.arrow {
    width: 20px;
    display: flex;
    font-size: 20px;
}

.buttonRow { 
    display: flex;
    gap: 20px;
}

.mobileWarning {
    background: var(--primaryColor);
    color: white;
    padding: 1em;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    display: none;
}

@media screen and (max-width: 720px) {
    .split {
        display: block;
    }
    .treeContainer {
        bottom: 0;
        left: 0;
        right: 0;
        /*height: 40vh;*/
        /*position: absolute;*/
        display: flex;
    }
    .tree {
        box-shadow: 0 -3px 6px rgb(0 0 0 / 0.15);
    }
    .contentContainer {
        padding-bottom: 50vh;
    }

    .mobileWarning {
        display: block;
    }
}
  
@media (prefers-color-scheme: dark) {
    .tree {
        background: #101010;
    }

    .row:focus-visible .node {
        color: black;
    }
}
@font-face {
  font-family: 'OpenSans-Light';
  src: url('/assets/OpenSans-Light-80d5513e.ttf') format('truetype');
}

@font-face {
  font-family: 'OpenSans-Regular';
  src: url('/assets/OpenSans-Regular-037236ed.ttf') format('truetype');
}

@font-face {
  font-family: 'OpenSans-Bold';
  src: url('/assets/OpenSans-Bold-f7916a37.ttf') format('truetype');
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  background-color: white;
}

body {
  margin: 0;
  font-family: sans-serif;
  font-family: 'OpenSans-Light', sans-serif;
  display: flex;
  flex-direction: column;
}

body.modal-open {
  overflow: hidden;
}

#sidebar-content-container {

}

.sidebar-transition {
  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
}

.content-transition {
  transition: padding-left 0.3s ease-in-out, width 0.3s ease-in-out;
}

.hover-cursor-pointer:hover {
  cursor: pointer;
}

.hover-cursor-underline:hover {
  color: blue;
  text-decoration: underline;
}

.root-inner-wrapper {
  padding-top: 131px;
}

.circle {
  border:1px solid red;    
  height:100px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  width:100px;
}

.main {
  display: flex;
}

button:focus,
a:focus {
  outline: none;
}

button:disabled:hover {
  cursor: not-allowed;
}

a {
  text-decoration: none;
  color: black;
}

input[type='checkbox' i] {
  margin: 0;
}

.item-on-sale {
  color: #f5393b;
  font-family: 'OpenSans-Bold';
}

.item-on-sale-break{
  font-family: 'OpenSans-Regular';
}

/* PDF viewer styles */
.pdf-modal{
  max-height: 90vh;
  max-width: 90vw;
}

.historyModal{
  max-height: 90vh;
  max-width: 90vw;
}


.image-modal {
  text-align: center;
  max-width: 80vw;
}

.image-modal img {
  width: auto;
  max-width: 80vw;
  max-height: 80vh;
}

.react-pdf__Page canvas {
  margin: 0 auto;
}

/* React-Burger-Menu
/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  right: 6px;
  top: 14px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Color/shape of burger icon bars on hover*/
.bm-burger-bars-hover {
  background: lighten(#373a47, 10%);
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  align-items: center;
  background: #0854a1;
  border: none;
  color: white;
  display: flex;
  height: auto !important;
  left: 0;
  min-width: 100%;
  min-height: 30px;
  padding: 0.75rem;
  top: 0 !important;
}

/* Color/shape of close button cross */
.bm-cross {
  background: transparent;
}

/*
Sidebar wrapper styles
Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
*/
.bm-menu-wrap {
  position: fixed;
  height: 100%;
  top: 0;
}

/* General sidebar styles */
.bm-menu {
  background: #063b71;
  border: none;
  box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.3);
  font-size: 1.15em;
  padding-top: 40px;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  background-color: #063b71;
  color: #b8b7ad;
  height: auto !important;
  padding: 0;
}

/* Individual item */
.bm-item {
  display: flex !important;
}

.bm-item:focus {
  outline: none;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
  top: 0;
}

@media screen and (min-width: 768px) {
  .bm-burger-button {
    display: none;
  }
}

.detail-item {
  display: none;
}
.detail-view {
  height: auto;
}

.detail-view .detail-item {
  display: flex;
}

.detail-view .detail-item select {
  font-size: 1rem;
  margin-top: 0.25rem;
  width: 220px;
}

.detail-view .item-header {
  border-bottom: 1px solid lightGray;
  padding: 1rem;
}

.adjust-scroll.vert-scroll {
  overflow: hidden;
  overflow-y: auto;
}

.adjust-scroll.hide-scroll::-webkit-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  width: 0 !important;
}

.centered {
  text-align: center;
}

/* react-table */
.ReactTable .rt-th,
.ReactTable .rt-td {
  white-space: normal;
}

.ReactTable .rt-tbody .featured .rt-td {
  border-right: transparent;
  font-size: 1.75rem;
  white-space: normal;
}

.ReactTable .rt-tbody .rt-td {
  border-right: transparent;
  font-size: 0.9rem;
  white-space: normal;
}

.ReactTable .rt-tbody .featured .rt-td.bold {
  font-family: 'OpenSans-Bold', 'OpenSans-Regular', sans-serif;
  font-weight: bold;
  font-size: 2rem;
}

.ReactTable .rt-th {
  color: white;
  background-color: #2d73c1;
  border-right: rgba(0, 0, 0, 0.2);
}

.ReactTable .-sort-desc {
  box-shadow: inset 0 -3px 0 0 rgba(255,0,0,0.8) !important;
}

.ReactTable .-sort-asc {
  box-shadow: inset 0 3px 0 0 rgba(255,0,0,0.8) !important;
}

.ReactTable .header-right {
  text-align: right;
  padding-right: 10px !important;
}

.ReactTable .header-right-hide {
  display:none;
}

.ReactTable .header-left {
  text-align: left;
  padding-left: 10px !important;
  font-size:0.8rem;
}

.ReactTable .header-left-bold {
  text-align: left;
  padding-left: 10px !important;
  font-weight: bold;
  min-height: 40px;
  font-family: OpenSans-Bold;
}

.ReactTable .header-left-hide{
  display: none;
}

.ReactTable .header-center {
  text-align: center;
}

.ReactTable .rt-td {
  padding: 7px;
  font-size: 1vw;
}

.ReactTable .rt-resizable-header-content {
  font-size: 1vw;
  font-weight: bold;
}

/* Maximum font size */
@media screen and (min-width: 1200px) {
  .ReactTable .rt-td {
    font-size: 1rem;
  }

  .ReactTable .rt-resizable-header-content {
    font-size: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .ReactTable .rt-tbody,
  .ReactTable .rt-thead {
    width: 100%;
    min-width: 100% !important;
  }

  .ReactTable .rt-tbody .featured .rt-td,
  .ReactTable .rt-tbody .featured .rt-td.bold {
    font-size: 1rem;
  }

  /* Minimum font size */
  .ReactTable .rt-resizable-header-content,
  .ReactTable .rt-td {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 500px) {
  /* Fix for right size padding on mobile */
  .ReactTable .rt-table::after {
    position: absolute;
    content: '';
    right: -10px;
    width: 10px;
    height: 100%;
    background-color: transparent;
  }

  .ReactTable .rt-th,
  .ReactTable .rt-td {
    flex: 1 0 auto !important;
    font-size: 0.5rem;
  }

  .ReactTable .rt-resizable-header-content {
    font-size: 0.5rem;
  }

  .shrink-30-on-mobile {
    max-width: 30% !important;
  }

  .shrink-50-on-mobile {
    max-width: 50% !important;
  }

  .shrink-60-on-mobile {
    max-width: 60% !important;
  }

  #sheet-info .item-heading svg {
    height: 15px;
    width: 15px;
  }
}

.MuiDataGrid-cell {
  font-size: 0.8rem;
}


.data-grid-header {
  font-weight: bold;
  font-size: 0.8rem;
}

.data-grid-wrap-cell {
  white-space: normal !important;
}

@media all {
  .page-break {
    display: none;
  }
}

@media print {
  html, body {
    height: initial !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
    width: fit-content;
  }
}

@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}

@page {
  size: auto;
  margin: 20mm;
}

@media print {

  .show-print-flex {
    display: flex !important;
  }

  .ReactTable .rt-thead.-header {
    box-shadow: none;
  }

  .ReactTable .rt-thead.-header.hide{
    display: none;
  }

  .ReactTable .rt-table {
    font-size: 12px;
    page-break-inside: avoid;
    max-width: 100%;
  }

  /* .mobile-sku-table {
    max-width: 99% !important;
  } */

  .mobile-sku-table .ReactTable .rt-th,
  .mobile-sku-table .ReactTable .rt-td {
    max-width: 89px;
  }
}

/* React Toastify override */
.Toastify__toast--success {
  background: #00ae63;
}


summary::-webkit-details-marker {
  display: none;
  color: transparent;
}
summary:after {
  content: ">"; 
  padding-left: 5px;  
  list-style: none;
  font-weight: bold;
  border: 0px
}
details[open] summary:after {
  content: "v";
  border: 0px
}
summary {
  list-style: none;
  border: 0px
}

.fullscreen {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: inherit;
}

.fullscreen-enabled {
  background: #fff;
}

.book-history-modal {
  margin-top: 0px;
}

.TypeAheadDropDown{
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.73);
  position: relative;
  width: 100%;
 }
  
 .TypeAheadDropDown ul{
 list-style-type: none;
 text-align: left;
 margin: 0;
 padding: 0;
 border-top: 1px solid gray;
 position: relative;
 height: auto;
 width: 100%;
 background-color: rgba(0,0,0,0.2);
 -ms-overflow-style: none; /* for Internet Explorer, Edge */
 scrollbar-width: none;
 }
  
 .TypeAheadDropDown li{
  padding: 2px ;
  cursor: pointer;
  color: white;
 }
  
 .TypeAheadDropDown li:hover{
  background: lightgray;
  text-decoration: underline;
  color: black;
 }

 .Help {
  font-family: 'OpenSans-Light', sans-serif;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.73);
  position: relative;
  width: 100%;
  margin-top: 15px;
 }

 .question{
  text-decoration: underline;
 }
 .title {
  font-size: 20px;
  font-weight: bold;
 }

 .print-container {
  position: 'relative';
  height: '100%';
  overflow-x: auto;
 }

 .switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 100px;
	height: 34px;
	padding: 3px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	box-sizing:content-box;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	height: 30px;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #003873;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 74px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 
/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}

.switch-flat {
	padding: 0;
	background: #FFF;
	background-image: none;
}
.switch-flat .switch-label {
	background: #FFF;
	border: solid 2px #eceeef;
	box-shadow: none;
}
.switch-flat .switch-label:after {
	color: #003873;
}
.switch-flat .switch-handle {
	top: 6px;
	left: 6px;
	background: #dadada;
	width: 22px;
	height: 22px;
	box-shadow: none;
}
.switch-flat .switch-handle:before {
	background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
	background: #FFF;
	border-color: #003873;
}
.switch-flat .switch-input:checked ~ .switch-handle {
	left: 72px;
	background: #003873;
	box-shadow: none;
}

.pdf-preview {
  width: 27%;
}

.historyDialog {
  height: 100%
}

.excelIconst2 { 
  fill: #107c41
}
.excelIconst4 {
  opacity: .2;
  enable-background: new
}

.custom-image-gallery {
  width: 100%;
}

.custom-image-gallery .image-gallery-right-nav svg, .custom-image-gallery .image-gallery-left-nav svg {
  width: 30px;
  height: 60px;
}

/* intro js customizations */
.introjs-hint-pulse {
  background-color: rgba(255,0,0,.7);
}

.introjs-hint:hover > .introjs-hint-pulse {
  background-color: rgb(255,0,0);
}

@keyframes introjspulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}


:root {
    --react-pdf-annotation-layer: 1;
    --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
    --input-focus-border-color: Highlight;
    --input-focus-outline: 1px solid Canvas;
    --input-unfocused-border-color: transparent;
    --input-disabled-border-color: transparent;
    --input-hover-border-color: black
   }
   @media (forced-colors: active) {
    :root {
     --input-focus-border-color: CanvasText;
     --input-unfocused-border-color: ActiveText;
     --input-disabled-border-color: GrayText;
     --input-hover-border-color: Highlight
    }
    .annotationLayer .textWidgetAnnotation input:required,
    .annotationLayer .textWidgetAnnotation textarea:required,
    .annotationLayer .choiceWidgetAnnotation select:required,
    .annotationLayer .buttonWidgetAnnotation.checkBox input:required,
    .annotationLayer .buttonWidgetAnnotation.radioButton input:required {
     outline:1.5px solid selectedItem
    }
   }
   .annotationLayer {
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
    transform-origin:0 0;
    --scale-factor: 1
   }
   .annotationLayer section {
    position:absolute;
    text-align:initial;
    pointer-events:auto;
    box-sizing:border-box;
    transform-origin:0 0
   }
   .annotationLayer .linkAnnotation>a,
   .annotationLayer .buttonWidgetAnnotation.pushButton>a {
    position:absolute;
    font-size:1em;
    top:0;
    left:0;
    width:100%;
    height:100%
   }
   .annotationLayer .buttonWidgetAnnotation.pushButton>canvas {
    width:100%;
    height:100%
   }
   .annotationLayer .linkAnnotation>a:hover,
   .annotationLayer .buttonWidgetAnnotation.pushButton>a:hover {
    opacity:.2;
    background:rgba(255,255,0,1);
    box-shadow:0 2px 10px #ff0
   }
   .annotationLayer .textAnnotation img {
    position:absolute;
    cursor:pointer;
    width:100%;
    height:100%
   }
   .annotationLayer .textWidgetAnnotation input,
   .annotationLayer .textWidgetAnnotation textarea,
   .annotationLayer .choiceWidgetAnnotation select,
   .annotationLayer .buttonWidgetAnnotation.checkBox input,
   .annotationLayer .buttonWidgetAnnotation.radioButton input {
    background-image:var(--annotation-unfocused-field-background);
    border:2px solid var(--input-unfocused-border-color);
    box-sizing:border-box;
    font:calc(9px * var(--scale-factor)) sans-serif;
    height:100%;
    margin:0;
    vertical-align:top;
    width:100%
   }
   .annotationLayer .textWidgetAnnotation input:required,
   .annotationLayer .textWidgetAnnotation textarea:required,
   .annotationLayer .choiceWidgetAnnotation select:required,
   .annotationLayer .buttonWidgetAnnotation.checkBox input:required,
   .annotationLayer .buttonWidgetAnnotation.radioButton input:required {
    outline:1.5px solid red
   }
   .annotationLayer .choiceWidgetAnnotation select option {
    padding:0
   }
   .annotationLayer .buttonWidgetAnnotation.radioButton input {
    border-radius:50%
   }
   .annotationLayer .textWidgetAnnotation textarea {
    resize:none
   }
   .annotationLayer .textWidgetAnnotation input[disabled],
   .annotationLayer .textWidgetAnnotation textarea[disabled],
   .annotationLayer .choiceWidgetAnnotation select[disabled],
   .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
   .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
    background:none;
    border:2px solid var(--input-disabled-border-color);
    cursor:not-allowed
   }
   .annotationLayer .textWidgetAnnotation input:hover,
   .annotationLayer .textWidgetAnnotation textarea:hover,
   .annotationLayer .choiceWidgetAnnotation select:hover,
   .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
   .annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
    border:2px solid var(--input-hover-border-color)
   }
   .annotationLayer .textWidgetAnnotation input:hover,
   .annotationLayer .textWidgetAnnotation textarea:hover,
   .annotationLayer .choiceWidgetAnnotation select:hover,
   .annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
    border-radius:2px
   }
   .annotationLayer .textWidgetAnnotation input:focus,
   .annotationLayer .textWidgetAnnotation textarea:focus,
   .annotationLayer .choiceWidgetAnnotation select:focus {
    background:none;
    border:2px solid var(--input-focus-border-color);
    border-radius:2px;
    outline:var(--input-focus-outline)
   }
   .annotationLayer .buttonWidgetAnnotation.checkBox :focus,
   .annotationLayer .buttonWidgetAnnotation.radioButton :focus {
    background-image:none;
    background-color:transparent
   }
   .annotationLayer .buttonWidgetAnnotation.checkBox :focus {
    border:2px solid var(--input-focus-border-color);
    border-radius:2px;
    outline:var(--input-focus-outline)
   }
   .annotationLayer .buttonWidgetAnnotation.radioButton :focus {
    border:2px solid var(--input-focus-border-color);
    outline:var(--input-focus-outline)
   }
   .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
   .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
   .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
    background-color:CanvasText;
    content:"";
    display:block;
    position:absolute
   }
   .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
   .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
    height:80%;
    left:45%;
    width:1px
   }
   .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
    transform:rotate(45deg)
   }
   .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
    transform:rotate(-45deg)
   }
   .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
    border-radius:50%;
    height:50%;
    left:30%;
    top:20%;
    width:50%
   }
   .annotationLayer .textWidgetAnnotation input.comb {
    font-family:monospace;
    padding-left:2px;
    padding-right:0
   }
   .annotationLayer .textWidgetAnnotation input.comb:focus {
    width:103%
   }
   .annotationLayer .buttonWidgetAnnotation.checkBox input,
   .annotationLayer .buttonWidgetAnnotation.radioButton input {
    appearance:none
   }
   .annotationLayer .popupTriggerArea {
    height:100%;
    width:100%
   }
   .annotationLayer .popupWrapper {
    position:absolute;
    font-size:calc(9px * var(--scale-factor));
    width:100%;
    min-width:calc(180px * var(--scale-factor));
    pointer-events:none
   }
   .annotationLayer .popup {
    position:absolute;
    max-width:calc(180px * var(--scale-factor));
    background-color:#ff9;
    box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #888;
    border-radius:calc(2px * var(--scale-factor));
    padding:calc(6px * var(--scale-factor));
    margin-left:calc(5px * var(--scale-factor));
    cursor:pointer;
    font:message-box;
    white-space:normal;
    word-wrap:break-word;
    pointer-events:auto
   }
   .annotationLayer .popup>* {
    font-size:calc(9px * var(--scale-factor))
   }
   .annotationLayer .popup h1 {
    display:inline-block
   }
   .annotationLayer .popupDate {
    display:inline-block;
    margin-left:calc(5px * var(--scale-factor))
   }
   .annotationLayer .popupContent {
    border-top:1px solid rgba(51,51,51,1);
    margin-top:calc(2px * var(--scale-factor));
    padding-top:calc(2px * var(--scale-factor))
   }
   .annotationLayer .richText>* {
    white-space:pre-wrap;
    font-size:calc(9px * var(--scale-factor))
   }
   .annotationLayer .highlightAnnotation,
   .annotationLayer .underlineAnnotation,
   .annotationLayer .squigglyAnnotation,
   .annotationLayer .strikeoutAnnotation,
   .annotationLayer .freeTextAnnotation,
   .annotationLayer .lineAnnotation svg line,
   .annotationLayer .squareAnnotation svg rect,
   .annotationLayer .circleAnnotation svg ellipse,
   .annotationLayer .polylineAnnotation svg polyline,
   .annotationLayer .polygonAnnotation svg polygon,
   .annotationLayer .caretAnnotation,
   .annotationLayer .inkAnnotation svg polyline,
   .annotationLayer .stampAnnotation,
   .annotationLayer .fileAttachmentAnnotation {
    cursor:pointer
   }
   .annotationLayer section svg {
    position:absolute;
    width:100%;
    height:100%
   }
   .annotationLayer .annotationTextContent {
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    color:transparent;
    user-select:none;
    pointer-events:none
   }
   .annotationLayer .annotationTextContent span {
    width:100%;
    display:inline-block
   }
   :root {
    --react-pdf-text-layer: 1
   }
   .textLayer {
    position:absolute;
    text-align:initial;
    left:0;
    top:0;
    right:0;
    bottom:0;
    overflow:hidden;
    line-height:1;
    text-size-adjust:none;
    forced-color-adjust:none
   }
   .textLayer span,
   .textLayer br {
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%
   }
   .textLayer span.markedContent {
    top:0;
    height:0
   }
   .textLayer .highlight {
    margin:-1px;
    padding:1px;
    background-color:#b400aa;
    border-radius:4px
   }
   .textLayer .highlight.appended {
    position:initial
   }
   .textLayer .highlight.begin {
    border-radius:4px 0 0 4px
   }
   .textLayer .highlight.end {
    border-radius:0 4px 4px 0
   }
   .textLayer .highlight.middle {
    border-radius:0
   }
   .textLayer .highlight.selected {
    background-color:#006400
   }
   .textLayer br::selection {
    background:transparent
   }
   .textLayer .endOfContent {
    display:block;
    position:absolute;
    left:0;
    top:100%;
    right:0;
    bottom:0;
    z-index:-1;
    cursor:default;
    user-select:none
   }
   .textLayer .endOfContent.active {
    top:0
   }