input {
  border-color: #bfbfbf;
  border-width: 1px;
  border-style: solid;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
textarea:focus-visible {
  border-color: #14acff;
}
textarea::placeholder {
  color: rgba(0, 0, 0, 0.376);
}
.PrintingPreviewView {
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  position: fixed; /* Fixed position to cover the whole viewport */
  top: 0;
  left: 0;
  justify-content: center;
  z-index: 9999;
  display: flex;
  overflow: hidden;
}
ui-row > textarea {
  flex-grow: 1;
}

ui-column > textarea {
  align-self: stretch;
}

ui-column > ui-wrap {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
textarea {
  border-color: #bfbfbf;
  border-width: 1px;
  border-style: solid;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
.tinymce {
  border: 0px none;
  width: 100%;
  height: 100%;
}
input:focus-visible {
  border-color: #14acff;
}
input::placeholder {
  color: rgba(0, 0, 0, 0.376);
}
*[data-hide] {
  display: none;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#root {
  height: 100%;
}
ui-overlay-root {
  height: 100%;
}

ui-row.max {
  width: 100%;
}

ui-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  flex: none;
  width: initial;
}
.ma-e {
  justify-content: end;
}
.ma-s {
  justify-content: start;
}
.ma-c {
  justify-content: center;
}
.ma-sa {
  justify-content: space-around;
}
.ma-sb {
  justify-content: space-between;
}
.ma-se {
  justify-content: space-evenly;
}
.jc-fe {
  justify-content: flex-end;
}
.cr-s {
  align-items: flex-start;
}
.cr-e {
  align-items: flex-end;
}
.cr-c {
  align-items: center;
}
.cr-st {
  align-items: stretch;
}
.cr-b {
  align-items: baseline;
}
ui-column {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  width: initial;
}
/* ui-row > .expanded {
  flex-grow: 1;
}
ui-column > .expanded {
  flex-grow: 1;
} */
ui-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

ui-wrap {
  display: flex;
  flex-wrap: wrap;
}
.checkbox {
  background-color: #bfbfbf;
  cursor: pointer;
  width: fit-content;
}
.button {
  cursor: pointer;
}

ui-stack {
  display: grid;
  position: relative;
}

ui-stack > * {
  grid-area: 1/1/2/2;
  z-index: 1;
}

ui-overlay-root > ui-page-router {
  height: 100%;
}

ui-overlay-root > ui-page-router > * {
  height: 100%;
}

ui-page-router {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

ui-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

ui-container > ui-column {
  align-self: stretch;
}
ui-column > table {
  align-self: stretch;
}
ui-column > ui-scroll {
  align-self: stretch;
}
ui-row > ui-row {
  /* align-self: stretch; */
}

ui-column > ui-list-view {
  align-self: stretch;
}

.RootPage {
  align-self: stretch;
}

ui-layout-aware {
  display: flex;
  align-self: stretch;
  align-items: stretch;
}

ui-container > ui-column.max {
  height: 100%;
}

ui-page-router {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
ui-page-router > * {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ui-popup {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  z-index: 1;
  position: fixed;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
}

ui-popup.Top {
  align-items: start;
}
ui-popup.Buttom {
  align-items: end;
}
ui-popup.Center {
  align-items: center;
}
ui-popup.Left {
  justify-content: start;
}
ui-popup.Right {
  justify-content: end;
}
ui-popup.Positioned {
  display: block;
}

ui-popup-content {
  background-color: white;
  height: fit-content;
  width: fit-content;
}

/* ui-row > ui-column.max {
  align-self: stretch;
} */
ui-container > .v {
  flex-grow: 1;
}
ui-center > .h {
  width: 100%;
}
ui-container > input {
  height: inherit;
}
ui-container > .h {
  align-self: stretch;
}
ui-row > * {
  max-height: 100%;
  max-width: 100%;
}
ui-column > * {
  /* max-height: 100%;
  max-width: 100%; */
}
ui-container > * {
  max-width: 100%;
  max-height: 100%;
}

ui-container > ui-row {
  height: 100%;
}

ui-column.v > * {
  flex-shrink: 0;
}

ui-detector {
  display: flex;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}

.Button > ui-center {
  flex-grow: 1;
}

.RootPage {
  align-items: start;
}
label {
  display: block;
  white-space: pre-line;
}

ui-popup-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #2223;
  position: initial;
}
ui-popup.Center {
  position: initial;
}
ui-popup.Top {
  position: initial;
}
ui-popup.Right {
  position: initial;
}
ui-popup.Bottom {
  position: initial;
}
ui-popup.Left {
  position: initial;
}
ui-popup-wrapper.Center {
  align-items: center;
  justify-content: center;
}
ui-popup-wrapper.Top {
  align-items: center;
  justify-content: start;
}
ui-popup-wrapper.Right {
  align-items: end;
  justify-content: center;
}
ui-popup-wrapper.Button {
  align-items: center;
  justify-content: end;
}
ui-popup-wrapper.Left {
  align-items: start;
  justify-content: center;
}

ui-overlay-entry.show {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}
ui-overlay-entry > * {
  pointer-events: all;
}
ui-icon {
  font-size: 24px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
label {
  word-wrap: anywhere;
  cursor: inherit;
}
table {
  border-spacing: 0px;
  table-layout: fixed;
}

ui-row > input {
  flex-grow: 1;
}

ui-column > input {
  align-self: stretch;
}
ui-container > ui-layout-aware {
  width: 100%;
  height: 100%;
}

ui-list-view.sv {
  overflow-y: auto;
}
ui-list-view.sh {
  overflow-x: auto;
}
ui-column.v > ui-list-view.sv {
  flex-shrink: inherit;
}
ui-row.h > ui-list-view.sh {
  flex-shrink: inherit;
}
ui-positioned {
  position: absolute;
}

ui-wrap.jd-col {
  flex-direction: column;
}

ui-loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

canvas {
  width: 100%;
  height: 100%;
}
/* extra iframs which mostly need for user*/
@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateCounterClockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}