:root {
  --ascn-border-color: #DFDFDF;
  --ascn-control-background-color-pressed: rgba(0, 0, 0, 0.1);
  --ascn-control-background-color: #EFEFEF;
  --ascn-control-color: #606161;
  --ascn-control-color-disabled: #D6D6D6;
  --ascn-white-color: #ffffff;
  --ascn-toolbar-height: 48px;
  --ascn-toolbar-container-height: 90px;
  --ascn-toolbar-icons-width: 24px;
  --ascn-toolbar-icons-height: 24px;
  --ascn-styles-outline-dark: #757575;
  --ascn-dialog-shadow-basic: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --ascn-dialog-border-basic: 1px solid var(--ascn-styles-outline-dark);
  --ascn-states-primary-overlay-selected: #E0E0E0;
  --ascn-scrollbar-color: #F5F5F5;
  --ascn-thumb-color: #BDBDBD;
  --ascn-styles-common-splitter: #C5C5C5;
  --ascn-dialog-min-width-basic: 405px;
  --ascn-dialog-min-width-small: 306px;
  --ascn-dialog-background: #ffffff;
  --ascn-dialog-min-height: 380px;

  --ascn-default-text-size: 14px;
}

:root[ascn-data-viewer-theme="ascn-light"] {
  --plt-viewer-toolbar-background: #F2F2F2;
  --plt-viewer-toolbar-active: rgba(160, 160, 160, 1);
  --plt-viewer-toolbar-hover: rgba(215, 215, 215, 1);
  --plt-secondary-icon-color: rgba(0, 0, 0, 0.54);
  --plt-viewer-dialog-control: rgba(96, 98, 98, 1);
  --plt-viewer-dialog-background: #fff;
  --plt-viewer-dialog-element-hover: var(--plt-viewer-toolbar-hover);
  --plt-viewer-dialog-group-head: #F2F2F2;
  --plt-bg-hover-controls: rgb(224, 224, 224);
  --plt-viewer-scene-background: #ffffff;
  --plt-viewer-control-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.20), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14);
  --plt-viewer-tree-selected: var(--plt-viewer-toolbar-active);
  --plt-viewer-dialog-thumb: #bdbdbd;
  --plt-viewer-dialog-scrollbar: #f5f5f5;
  --ascn-viewer-toolbar-disabled-icon: #D2D2D2;

  /* common */
  --plt-bg: #fff;
  --plt-bg-doc: #fff;
  --plt-text: rgba(black, 0.87);
  --plt-primary-color: rgba(134, 96, 155, 1);
  --ascn-border-outline: #9E9E9E;
  --ascn-border-outline-hover: #212121;
  --ascn-border-outline-focused: #86609B;
  --ascn-secondary-text: rgba(white, 0.5);
  --ascn-disabled-text: rgba(0, 0, 0, 0.38);
  --ascn-viewer-toolbar-disabled-icon-stroke: #C2C2C2;

  /* checkbox */
  --ascn-checkbox-disabled-fill: rgba(0, 0, 0, 0.38);
  --ascn-checkbox-border-color: rgba(0, 0, 0, 0.54);
  --ascn-checkbox-border-hover-color: #212121;

  /* menu */
  --ascn-menu-hover: #F5F5F5;
  --ascn-menu-select: #DCDCDC;
}

:root[ascn-data-viewer-theme="ascn-dark"] {
  --plt-viewer-toolbar-background: #282828;
  --plt-viewer-toolbar-hover: #383838;
  --plt-viewer-toolbar-active: #515151;
  --plt-secondary-icon-color: white;
  --plt-viewer-dialog-control: #D9D9D9;
  --plt-viewer-dialog-background: #212121;
  --plt-viewer-dialog-element-hover: var(--plt-viewer-toolbar-hover);
  --plt-viewer-dialog-group-head: #424242;
  --plt-bg-hover-controls: rgb(58, 58, 58);
  --plt-viewer-scene-background: #1E1E1E;
  --plt-viewer-control-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.20), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
  --plt-viewer-tree-selected: var(--plt-viewer-toolbar-active);
  --plt-viewer-dialog-thumb: var(--plt-viewer-toolbar-hover);
  --plt-viewer-dialog-scrollbar: var(--plt-viewer-toolbar-active);
  --ascn-viewer-toolbar-disabled-icon: #5E5E5E;

  /* common */
  --plt-bg: rgb(30, 30, 30);
  --plt-bg-doc: #fff;
  --plt-text: white;
  --plt-primary-color: rgba(134, 96, 155, 1);
  --ascn-border-outline: #757575;
  --ascn-border-outline-hover: #E2E2E2;
  --ascn-border-outline-focused: #86609B;
  --ascn-secondary-text: rgba(black, 0.6);
  --ascn-disabled-text: rgba(255, 255, 255, 0.5);
  --ascn-viewer-toolbar-disabled-icon-stroke: #4E4E4E;

  /* checkbox */
  --ascn-checkbox-disabled-fill: rgba(255, 255, 255, 0.38);
  --ascn-checkbox-border-color: rgba(255, 255, 255, 0.54);
  --ascn-checkbox-border-hover-color: #eeeeee;

   /* menu */
   --ascn-menu-hover: #515151;
   --ascn-menu-select: #626262;
}

.ascn-viewer-toolbar .ascn-control {
  display: flex;
  align-items: center;
}

.ascn-control.ascn-toolbar-button {
  position: relative;
}

.ascn-button-icon-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ascn-text {
  font-family: 'Roboto', sans-serif;
  line-height: 24px;
  color: var(--plt-text);
  font-size: var(--ascn-default-text-size);
}

.ascn-secondary-text {
  font-family: 'Roboto', sans-serif;
  line-height: 24px;
  color: var(--ascn-secondary-text);
}

.ascn-arrow-drop {
  position: absolute;
  top: calc(100% - 28px);
  left: calc(100% - 28px);
  width: 24px;
  height: 24px;
}

.ascn-none {
  display: none;
}

.ascn-flex {
  display: flex;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
}

.ascn-flex-space-between {
  justify-content: space-between;
}

.ascn-treeview .ascn-tree-node {
  height: 40px;
}

.ascn-w-100 {
  width: 100%;
}

.ascn-treeview .ascn-tree-node-text {
  color: var(--plt-text);
  margin-left: 10px;
}

.ascn-treeview .ascn-tree-control-icon-container {
  width: 16px;
  display: flex;
  align-items: center;
}

.ascn-treeview .mb-icon.ascn-tree-control-icon-container svg,
.ascn-treeview .mb-icon-empty.ascn-tree-control-icon-container svg {
  width: 16px;
  height: 16px;
  fill: var(--plt-viewer-dialog-control);
  cursor: pointer;
}

.ascn-treeview .ascn-tree-node:hover {
  background: var(--plt-viewer-dialog-element-hover);
}

.ascn-treeview .ascn-tree-node:active {
  background: var(--plt-viewer-toolbar-active);
}

.ascn-treeview .mb-node-content {
  display: flex;
  align-items: center;
  cursor: default;
  flex-grow: 1;
}

.ascn-treeview .mb-visibility {
  background-repeat: no-repeat;
  cursor: pointer;
}

.ascn-treeview .mb-icon.empty {
  width: 20px;
  background-image: none;
}

.ascn-treeview .selected {
  background-color: var(--plt-viewer-tree-selected);
}

.ascn-treeview .mb-visibility.visible {
  width: 24px;
  height: 24px;
}

.ascn-treeview .mb-visibility.hidden {
  width: 24px;
  height: 24px;
}

.ascn-treeview .mb-visibility svg {
  width: 24px;
}

.ascn-viewer-container {
  position: relative;
  max-height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--plt-bg);
  display: flex;
  flex-direction: column-reverse;
}

.ascn-viewer-container-top {
  flex-direction: column;
}

.ascn-viewer-container .ascn-toolbar-container {
  height: var(--ascn-toolbar-container-height);
  display: flex;
  justify-content: center;
  align-items: end;
}

.ascn-viewer-container .ascn-toolbar-position-fixed-top {
  height: var(--ascn-toolbar-height);
  background: var(--plt-viewer-toolbar-background);
  display: flex;
}

.ascn-viewer-container .ascn-toolbar-position-fixed-bottom {
  height: var(--toolbar-height);
  background: var(--plt-viewer-toolbar-background);
  display: flex;
}

.ascn-toolbar-content-center {
  justify-content: center;
}

.ascn-toolbar-content-start {
  justify-content: start;
}

.ascn-toolbar-content-end {
    justify-content: end;
}

.ascn-viewer-container .ascn-toolbar-default,
.ascn-viewer-container .ascn-toolbar-position-top {
  position: absolute;
  height: var(--ascn-toolbar-height);
  box-shadow: var(--plt-viewer-control-shadow);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  border-radius: 8px;
  z-index: 4;
  background: var(--plt-viewer-toolbar-background);
}

.ascn-viewer-container .ascn-toolbar-position-bottom { 
  position: absolute;
  height: var(--ascn-toolbar-height);
  box-shadow: var(--plt-viewer-control-shadow);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  bottom: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  border-radius: 8px;
  background: var(--plt-viewer-toolbar-background);
  z-index: 4;
}

.ascn-viewer {
  overflow: auto;
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
}

.ascn-viewer .ascn-viewer-page {
  position: relative;
}

.ascn-viewer .ascn-viewer-doc {
  border: 1px solid var(--ascn-border-color);
  background: var(--plt-bg-doc);
  margin: 10px 20px 10px 20px;
  max-height: 80vh;
}

.ascn-context-menu-absolutely-anchor {
  position: absolute;
  top: 0;
  left: 0;
}

.ascn-context-absolutely-menu .ascn-control-button,
.ascn-viewer-toolbar .ascn-toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ascn-toolbar-height);
  height: var(--ascn-toolbar-height);
  cursor: pointer;
  box-sizing: border-box;
}

.ascn-context-absolutely-menu .ascn-control-button.disabled,
.ascn-viewer-toolbar .ascn-toolbar-button.disabled {
  cursor: default;
}

.ascn-context-absolutely-menu .ascn-control-button .ascn-button-inner-container,
.ascn-viewer-toolbar .ascn-button-inner-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ascn-context-absolutely-menu .ascn-control-button:not(.disabled).active,
.ascn-viewer-toolbar .ascn-toolbar-button:not(.disabled).active {
  background: var(--plt-viewer-toolbar-active);
}

.ascn-viewer-toolbar .ascn-toolbar-button:not(.disabled):not(.ascn-dropdown-menu-trigger) .ascn-button-inner-container:hover {
  background: var(--plt-viewer-toolbar-hover);
}

.ascn-viewer-toolbar .ascn-toolbar-button:not(.disabled):not(.ascn-dropdown-menu-trigger) .ascn-button-inner-container:hover:active {
  background: var(--plt-viewer-toolbar-active);
}

.ascn-viewer-toolbar.ascn-toolbar-position-top .ascn-control:first-child,
.ascn-viewer-toolbar.ascn-toolbar-position-bottom .ascn-control:first-child {
  border-radius: 8px 0px 0px 8px;
}

.ascn-viewer-toolbar.ascn-toolbar-position-top .ascn-control:last-child,
.ascn-viewer-toolbar.ascn-toolbar-position-bottom .ascn-control:last-child  {
  border-radius: 0px 8px 8px 0px;
}

.ascn-context-absolutely-menu .ascn-control-button .ascn-button-inner-container,
.ascn-viewer-toolbar .ascn-toolbar-button .ascn-button-inner-container {
  height: 100%;
  border-radius: inherit;
  border: inherit;
}

.ascn-context-absolutely-menu .ascn-toolbar-button-icon,
.ascn-viewer-toolbar .ascn-toolbar-button-icon {
  width: var(--ascn-toolbar-icons-width);
  height: var(--ascn-toolbar-icons-height);
  background-repeat: no-repeat;
  background-position: center;
}

.ascn-toolbar-default .ascn-toolbar-button:first-child,
.ascn-toolbar-position-top .ascn-toolbar-button:first-child,
.ascn-toolbar-position-bottom .ascn-toolbar-button:first-child {
  border-radius: 8px 0px 0px 8px;
}
.ascn-control .ascn-toolbar-button-icon svg .st-primary {
  fill: var(--plt-primary-color);
}

.ascn-toolbar-default .ascn-toolbar-button:last-child,
.ascn-toolbar-position-top .ascn-toolbar-button:last-child,
.ascn-toolbar-position-bottom .ascn-toolbar-button:last-child {
  border-radius: 0px 8px 8px 0px;
}
.ascn-control .ascn-toolbar-button-icon svg .st-secondary {
  fill: var(--plt-secondary-icon-color);
}

.ascn-control.disabled .ascn-text {
  color: var(--ascn-viewer-toolbar-disabled-icon);
}

.ascn-control.disabled .ascn-toolbar-button-icon svg * {
  fill: var(--ascn-viewer-toolbar-disabled-icon);
}

.ascn-toolbar-button-icon svg .st-primary {
  fill: var(--plt-primary-color);
}

.ascn-toolbar-button-icon svg .st-secondary {
  fill: var(--plt-secondary-icon-color);
}

.ascn-dialog {
  position: fixed;
  top: 140px;
  background-color: var(--plt-viewer-dialog-background);
  left: calc(50% - var(--ascn-dialog-min-width-basic) / 2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  z-index: 10;
  height: 380px;
  width: 550px;
  min-width: var(--ascn-dialog-min-width-basic);
  min-height: var(--ascn-dialog-min-height);
  border: var(--ascn-dialog-border-basic);
  box-shadow: var(--ascn-dialog-shadow-basic);
}

.ascn-dialog-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.ascn-dialog-wrapper .ascn-dialog-content-wrapper {
  height: calc(100% - 48px - 16px - 28px);
}

.ascn-actions-dialog-wrapper {
  display: flex;
  height: 56px;
  justify-content: space-between;
  padding: 4px 4px 4px 24px;
  align-items: center;
}

.ascn-dialog-footer {
  position: relative;
  height: 28px;
  margin-top: auto;
}

.ascn-actions-dialog-wrapper .ascn-header-dialog-icon {
  width: 24px;
  height: 24px;
}

.ascn-actions-dialog-wrapper .ascn-header-dialog-icon svg .st-secondary {
  fill: var(--plt-secondary-icon-color);
}

.ascn-actions-dialog-wrapper .ascn-header-dialog-icon svg .st-primary {
  fill: var(--plt-primary-color);
}

.ascn-actions-dialog-wrapper .ascn-header-dialog-text {
  width: 90%;
  margin-left: 8px;
  color: var(--plt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ascn-actions-dialog-wrapper .ascn-close-dialog-button-container svg {
  height: 24px;
}

.ascn-dialog-header {
  display: flex;
  text-transform: uppercase;
  font-size: var(--ascn-default-text-size);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  width: calc(100% - 56px);
}

.ascn-close-dialog-button-container {
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 8px;
}

.ascn-dialog-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0px 24px;
  box-sizing: border-box;
}

.ascn-close-dialog-button-container {
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ascn-close-dialog-button-container:hover {
  border-radius: 48px;
  background: var(--plt-viewer-dialog-element-hover);
}

.ascn-actions-dialog-wrapper .ascn-close-dialog-button-container svg {
  width: 24px;
  height: 24px;
  fill: var(--plt-viewer-dialog-control);
}

.ascn-viewer-resizable-container-right-corner {
  background-color: transparent;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  cursor: nwse-resize;
  position: absolute;
  right: 4px;
  bottom: 4px;
}

.ascn-viewer-resizable-container-right-corner svg {
  fill: var(--plt-viewer-dialog-control);
}

.ascn-draggable-element {
  cursor: move;
}

.ascn-dialog-content::-webkit-scrollbar {
  width: 8px;
  height: 7px;
  background: var(--plt-viewer-dialog-scrollbar);
}

.ascn-dialog-content::-webkit-scrollbar-thumb {
  background: var(--plt-viewer-dialog-thumb);
}

.ascn-icon-zoom-in {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24' height='24' fill='none' version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .st-secondary%7Bfill:%23606262;%7D %3C/style%3E%3Cpath class='st-secondary' d='m12 2a10 10 0 00-10 10 10 10 0 0010 10 10 10 0 0010-10 10 10 0 00-10-10zm0 1.5a8.5 8.5 0 018.5 8.5 8.5 8.5 0 01-8.5 8.5 8.5 8.5 0 01-8.5-8.5 8.5 8.5 0 018.5-8.5zm-1 2.5v5h-5v1.5h5v5h1.5v-5h5v-1.5h-5v-5h-1.5z' /%3E%3C/svg%3E%0A");
}

.ascn-icon-zoom-out {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24' height='24' fill='none' version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .st-secondary%7Bfill:%23606262;%7D %3C/style%3E%3Cpath class='st-secondary' d='m12 2a10 10 0 00-10 10 10 10 0 0010 10 10 10 0 0010-10 10 10 0 00-10-10zm0 1.5a8.5 8.5 0 018.5 8.5 8.5 8.5 0 01-8.5 8.5 8.5 8.5 0 01-8.5-8.5 8.5 8.5 0 018.5-8.5zm-6 7.5v1.5h11.5v-1.5h-11.5z' /%3E%3C/svg%3E%0A");
}

.ascn-close-btn-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50001 6.75C7.30091 6.74951 7.10979 6.82821 6.96876 6.96875C6.67464 7.26185 6.67464 7.73815 6.96876 8.03125L10.9376 12.0001L6.96876 15.9689C6.67464 16.262 6.67464 16.7383 6.96876 17.0314C7.26186 17.3255 7.73816 17.3255 8.03126 17.0314L12.0001 13.0626L15.9689 17.0314C16.262 17.3255 16.7383 17.3255 17.0314 17.0314C17.3255 16.7383 17.3255 16.262 17.0314 15.9689L13.0626 12.0001L17.0314 8.03125C17.3255 7.73815 17.3255 7.26185 17.0314 6.96875C16.8903 6.82821 16.6992 6.74951 16.5001 6.75C16.301 6.74951 16.1099 6.82821 15.9689 6.96875L12.0001 10.9376L8.03126 6.96875C7.89023 6.82821 7.69911 6.74951 7.50001 6.75Z' fill='%23606262'/%3E%3C/svg%3E");
}

.ascn-text-trim {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ascn-display-block {
  display: block;
}

.ascn-display-flex {
  display: flex;
}

.ascn-display-none {
  display: none;
}