@charset "UTF-8";
/* basic style */
html {
  height: 100%;
  margin: 0;
}

body {
  background: #000;
  background: var(--background);
  color: #FFF;
  color: var(--text);
  font-family: Meiryo, "MS UI Gothic";
  font-family: var(--font-family);
  font-size: 12px;
  font-size: var(--font-size-regular);
  font-weight: normal;
  font-weight: var(--font-weight);
  letter-spacing: inherit;
  letter-spacing: var(--letter-spacing);
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

a:link, a:visited, a:hover, a:active {
  color: inherit;
  color: currentColor;
  text-decoration: none;
  cursor: pointer;
}

a.blockLink {
  display: block;
}

div, ul, input, textarea, img {
  box-sizing: border-box;
}

:after, :before {
  box-sizing: border-box;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

th {
  font-weight: inherit;
}

h1 {
  margin: 5px;
  margin: var(--margin);
  font-size: 200%;
  font-size: var(--font-size-large);
  font-weight: normal;
  font-weight: var(--font-weight);
}

h2 {
  margin: 5px;
  margin: var(--margin);
  font-size: 150%;
  font-size: var(--font-size-midium);
  font-weight: normal;
  font-weight: var(--font-weight);
}

p {
  margin: 5px;
  margin: var(--margin);
  font-size: inherit;
  font-weight: normal;
  font-weight: var(--font-weight);
}
p.noteText {
  color: #CCC;
  color: var(--note-text);
  margin-bottom: 0;
}

div.htmlBlock p {
  margin: 0;
}

img {
  vertical-align: top;
  border: 0;
}

dt {
  font-weight: inherit;
}

/* outline */
input, select, button, textarea, *[tabindex], [contenteditable=true], .scrollShadowTarget,
.noOutline {
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input, textarea, select, button {
  letter-spacing: normal;
  letter-spacing: var(--letter);
}

/* selectable */
*:not(input):not(textarea),
.specificSelecting > .selectable,
.specificSelecting > .selectable * {
  -ms-user-select: none; /* IE 10+ */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.selectable,
.selectable * {
  -ms-user-select: text;
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

a .selectable,
a .selectable * {
  cursor: pointer;
}

/* cleaner */
.cleaner:after, .cleaner:before {
  content: "";
  display: table;
  clear: both;
}

td .cleaner:before, td .cleaner:after, th .cleaner:before, th .cleaner:after {
  display: block;
}

/* helper class */
.fitParent {
  width: 100%;
  height: 100%;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.nowrap {
  white-space: nowrap;
}

.margin-left {
  margin-left: 5px;
  margin-left: var(--margin);
}

.margin-left-thin {
  margin-left: 1px;
  margin-left: var(--gap);
}

.margin-left-thick {
  margin-left: 1em;
}

.margin-right {
  margin-right: 5px;
  margin-right: var(--margin);
}

.margin-right-thin {
  margin-right: 1px;
  margin-right: var(--gap);
}

.margin-right-thick {
  margin-right: 1em;
}

.margin-top {
  margin-top: 5px;
  margin-top: var(--margin);
}

.margin-top-thin {
  margin-top: 1px;
  margin-top: var(--gap);
}

.margin-top-thick {
  margin-top: 1em;
}

.margin-bottom {
  margin-bottom: 5px;
  margin-bottom: var(--margin);
}

.margin-bottom-thin {
  margin-bottom: 1px;
  margin-bottom: var(--gap);
}

.margin-bottom-thick {
  margin-bottom: 1em;
}

.top-align {
  vertical-align: top;
}

.middle-align {
  vertical-align: middle;
}

.bottom-align {
  vertical-align: baseline;
}

.left-align {
  text-align: left;
}

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

.right-align {
  text-align: right;
}

.margin-side {
  margin-left: 5px;
  margin-left: var(--margin);
  margin-right: 5px;
  margin-right: var(--margin);
}

.margin-side-thin {
  margin-left: 1px;
  margin-left: var(--gap);
  margin-right: 1px;
  margin-right: var(--gap);
}

.margin-all {
  margin: 5px !important;
  margin: var(--margin) !important;
}

.margin-all-thin {
  margin: 1px !important;
  margin: var(--gap) !important;
}

.inner-margin {
  padding: 5px !important;
  padding: var(--margin) !important;
}

.hasPadding {
  padding: 3px !important;
  padding: var(--padding) var(--padding-horz) !important;
}

.one-line-height {
  line-height: 1em;
}

.border-right {
  border-right: var(--control-edge) !important;
}

.border-left {
  border-left: var(--control-edge) !important;
}

.border-side {
  border-left: var(--control-edge) !important;
  border-right: var(--control-edge) !important;
}

.border-top {
  border-top: var(--control-edge) !important;
}

.border-bottom {
  border-bottom: var(--control-edge) !important;
}

.border-top-bottom {
  border-top: var(--control-edge) !important;
  border-bottom: var(--control-edge) !important;
}

.border-all {
  border: var(--control-edge) !important;
}

/* prefix / suffix */
.prefix {
  font-weight: normal;
  font-weight: var(--font-weight);
  color: #CCC;
  color: var(--prefix);
  margin-right: 3px;
  margin-right: var(--prefix-margin);
}

[data-prefix]:before {
  content: attr(data-prefix);
  vertical-align: top;
  font-weight: normal;
  font-weight: var(--font-weight);
  color: #CCC;
  color: var(--suffix);
  margin-right: 3px;
  margin-right: var(--prefix-margin);
}

.suffix {
  font-size: 70%;
  font-size: var(--font-size-small);
  font-weight: normal;
  font-weight: var(--font-weight);
  color: #CCC;
  color: var(--suffix);
  margin-left: 3px;
  margin-left: var(--suffix-margin);
}

[data-suffix]:after {
  content: attr(data-suffix);
  font-size: var(--font-size-small);
  font-weight: normal;
  font-weight: var(--font-weight);
  color: #CCC;
  color: var(--suffix);
  margin-left: 3px;
  margin-left: var(--suffix-margin);
}

/* ellipsis */
.ellipsis-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis-block {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*-webkit-line-clamp: 3;*/
  overflow: hidden !important;
}
.ellipsis-block:before, .ellipsis-block:after {
  position: absolute;
}
.ellipsis-block:before {
  content: "...";
  bottom: 0;
  right: 0;
}
.ellipsis-block:after {
  content: "";
  height: 0;
  width: 100%;
}
.ellipsis-block.clamp3 {
  -webkit-line-clamp: 3;
}
.ellipsis-block.clamp5 {
  -webkit-line-clamp: 5;
}
.ellipsis-block.clamp10 {
  -webkit-line-clamp: 10;
}

.windowCaption {
  background: #333;
  background: var(--window-caption-background);
  color: #FFF;
  color: var(--window-caption-text);
  padding: 5px;
  padding: var(--margin);
  position: relative;
}
.windowCaption > span.captionIcon {
  margin-right: 0.5em;
}
.windowControlBox {
  position: absolute;
  top: 0;
  right: var(--margin);
}
.windowControlBox > span {
  float: left;
  padding: 0 6px;
  padding: 0 var(--padding-horz);
  background: rgba(0, 0, 0, 0.3);
  margin-right: 5px;
  margin-right: var(--margin);
  cursor: pointer;
}
.windowControlBox > span:hover {
  background: #360;
  background: var(--highlight-background);
  color: #FFF;
  color: var(--highlight-text);
}
.windowControlBox > button {
  float: left;
  width: 2em;
  border-radius: 0;
  background: transparent;
  color: #DDC;
  color: var(--window-caption-text);
  padding: var(--padding) 0;
  font-size: 70%;
  box-shadow: none;
  border-radius: 0 !important;
}
.windowControlBox > button.closeBtn {
  width: 3em;
  background: #833;
  background: var(--button-cancel-background);
  color: #FFF;
  color: var(--button-cancel-text);
  font-family: "WebHostingHub-Glyphs";
}
.windowControlBox > button.closeBtn:before {
  /* whhgicon-remove */
  content: "×";
}
.windowControlBox > button.closeBtn:hover {
  background: #A44;
  background: var(--button-cancel-hover-background);
  color: #FFF;
  color: var(--button-cancel-hover-text);
}
.windowControlBox > button.closeBtn:focus {
  background: #A44;
  background: var(--button-cancel-active-background);
  color: #FFF;
  color: var(--button-cancel-active-text);
}
.windowControlBox > button.closeBtn:active, .windowControlBox > button.closeBtn.active {
  background: #622;
  background: var(--button-cancel-pushed-background);
  color: #CCC;
  color: var(--button-cancel-pushed-text);
}
.windowControlBox > button.restoreBtn:before {
  /* wwhgicon-restore */
  font-family: "WebHostingHub-Glyphs";
  content: "\f30d";
}
.windowControlBox > button.minimizeBtn:before {
  /* wwhgicon-minimize */
  font-family: "WebHostingHub-Glyphs";
  content: "\f30e";
}
.windowControlBox > button.maximizeBtn:before {
  /* wwhgicon-maximize */
  font-family: "WebHostingHub-Glyphs";
  content: "\f30f";
}

.windowBody {
  background: #000;
  background: var(--window-body-background);
  color: #FFF;
  color: var(--window-body-text);
  padding: 5px;
  padding: var(--margin);
}
.windowBody > div {
  margin: 5px 0;
  margin: var(--margin) 0;
}
.windowBody + .statusBar {
  border: none;
}

div.splitParent > div {
  margin: 0;
  position: relative;
}
div.splitParent > div > div.splitGripper {
  display: none;
}
div.splitParent.divided {
  position: relative;
  --split-margin: var(--gap);
  --split-margin: var(--split-margin);
}
div.splitParent.divided > div {
  position: absolute;
}
div.splitParent.divided > div > div.splitGripper {
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s;
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: var(--margin);
}
div.splitParent.divided > div:hover > div.splitGripper {
  opacity: 1;
}
div.splitParent.divided > div.maximize {
  float: none;
  width: 100%;
  height: 100%;
}
div.splitParent.divided > div.maximize > div.splitGripper {
  display: none;
}
div.splitParent.divided > div.background {
  display: none;
}
div.splitParent.divided > div.margeDragging {
  z-index: 100;
}
div.splitParent.horizon > .splitter {
  width: 5px;
  width: var(--margin);
  cursor: ew-resize;
}
div.splitParent.vertical > .splitter {
  height: 5px;
  height: var(--margin);
  cursor: ns-resize;
}

.contents {
  position: relative;
}

.contentsHeader {
  background: #333;
  background: var(--contents-header-background);
  color: #DDE;
  color: var(--contents-header-text);
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  border: none;
  border: var(--contents-edge);
  position: relative;
}

.contentsHeaderControlBox {
  float: right;
}

.contentsBody {
  position: relative;
  background: #222;
  background: var(--contents-background);
  color: #FFF;
  color: var(--contents-text);
  padding: 5px;
  padding: var(--margin);
  overflow: auto;
  border: none;
  border: var(--contents-edge);
  margin-top: 1px;
}
.contentsBody > div {
  margin: 5px 0;
  margin: var(--margin) 0;
}
.contentsBody > :first-child {
  margin-top: 0;
}
.contentsBody > :last-child {
  margin-bottom: 0;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.contentsInner {
  background: #334;
  background: var(--contents-inner-background);
  color: #DDE;
  color: var(--contents-inner-text);
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  border-radius: 3px;
  border-radius: var(--padding);
}

.maximizeFrameBlock {
  position: relative;
}
.maximizeFrameBlock > .stretchWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
}
.maximizeFrameBlock > .stretchWrapper > div {
  position: absolute !important;
}

body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-button, body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-button {
  width: 1em;
  height: 1em;
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-button,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-thumb, body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-button,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-thumb {
  box-shadow: var(--scrollbar-shadow);
}
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar:vertical,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-button:vertical,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-thumb:vertical, body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar:vertical,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-button:vertical,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-thumb:vertical {
  border-left: var(--contents-edge);
}
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar:horizontal,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-button:horizontal,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-thumb:horizontal, body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar:horizontal,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-button:horizontal,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-thumb:horizontal {
  border-top: var(--contents-edge);
}
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar {
  background: var(--scrollbar-background);
}
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-button,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-button,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-corner {
  background: var(--scrollbar-color);
}
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-thumb:hover,
body:not([screen-mode=MOBILE]).win ::-webkit-scrollbar-button:hover, body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-thumb:hover,
body:not([screen-mode=MOBILE]).linux ::-webkit-scrollbar-button:hover {
  background: var(--scrollbar-hover);
}
body:not([screen-mode=MOBILE]).win select::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux select::-webkit-scrollbar {
  background: var(--scrollbar-edit-background);
}
body:not([screen-mode=MOBILE]).win select:hover::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux select:hover::-webkit-scrollbar {
  background: var(--scrollbar-edit-hover-background);
}
body:not([screen-mode=MOBILE]).win select:focus::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux select:focus::-webkit-scrollbar {
  background: var(--scrollbar-edit-focus-background);
}
body:not([screen-mode=MOBILE]).win select:disabled::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux select:disabled::-webkit-scrollbar {
  background: var(--scrollbar-disabled-background);
}
body:not([screen-mode=MOBILE]).win select::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win select::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win select::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux select::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux select::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux select::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-color);
}
body:not([screen-mode=MOBILE]).win select:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win select:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win select:hover::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux select:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux select:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux select:hover::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-hover-color);
}
body:not([screen-mode=MOBILE]).win select:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win select:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win select:focus::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux select:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux select:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux select:focus::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-focus-color);
}
body:not([screen-mode=MOBILE]).win select:disabled::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win select:disabled::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win select:disabled::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux select:disabled::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux select:disabled::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux select:disabled::-webkit-scrollbar-corner {
  background: var(--scrollbar-disabled-color);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap::-webkit-scrollbar {
  background: var(--scrollbar-edit-background);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:hover::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:hover::-webkit-scrollbar {
  background: var(--scrollbar-edit-hover-background);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:focus::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:focus::-webkit-scrollbar {
  background: var(--scrollbar-edit-focus-background);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap[disabled]::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap[disabled]::-webkit-scrollbar {
  background: var(--scrollbar-disabled-background);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-color);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:hover::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:hover::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-hover-color);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap:focus::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap:focus::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-focus-color);
}
body:not([screen-mode=MOBILE]).win ul.listBoxWrap[disabled]::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap[disabled]::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win ul.listBoxWrap[disabled]::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux ul.listBoxWrap[disabled]::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap[disabled]::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux ul.listBoxWrap[disabled]::-webkit-scrollbar-corner {
  background: var(--scrollbar-disabled-color);
}
body:not([screen-mode=MOBILE]).win textarea::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux textarea::-webkit-scrollbar {
  background: var(--scrollbar-edit-background);
}
body:not([screen-mode=MOBILE]).win textarea:hover::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux textarea:hover::-webkit-scrollbar {
  background: var(--scrollbar-edit-hover-background);
}
body:not([screen-mode=MOBILE]).win textarea:focus::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux textarea:focus::-webkit-scrollbar {
  background: var(--scrollbar-edit-focus-background);
}
body:not([screen-mode=MOBILE]).win textarea:disabled::-webkit-scrollbar, body:not([screen-mode=MOBILE]).linux textarea:disabled::-webkit-scrollbar {
  background: var(--scrollbar-disabled-background);
}
body:not([screen-mode=MOBILE]).win textarea::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win textarea::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win textarea::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux textarea::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux textarea::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux textarea::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-color);
}
body:not([screen-mode=MOBILE]).win textarea:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win textarea:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win textarea:hover::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux textarea:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux textarea:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux textarea:hover::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-hover-color);
}
body:not([screen-mode=MOBILE]).win textarea:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win textarea:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win textarea:focus::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux textarea:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux textarea:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux textarea:focus::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-focus-color);
}
body:not([screen-mode=MOBILE]).win textarea:disabled::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win textarea:disabled::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win textarea:disabled::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux textarea:disabled::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux textarea:disabled::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux textarea:disabled::-webkit-scrollbar-corner {
  background: var(--scrollbar-disabled-color);
}
body:not([screen-mode=MOBILE]).win div.ritchEdit::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win div.ritchEdit::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win div.ritchEdit::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux div.ritchEdit::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux div.ritchEdit::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux div.ritchEdit::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-color);
}
body:not([screen-mode=MOBILE]).win div.ritchEdit:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win div.ritchEdit:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win div.ritchEdit:hover::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux div.ritchEdit:hover::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux div.ritchEdit:hover::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux div.ritchEdit:hover::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-hover-color);
}
body:not([screen-mode=MOBILE]).win div.ritchEdit:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win div.ritchEdit:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win div.ritchEdit:focus::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux div.ritchEdit:focus::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux div.ritchEdit:focus::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux div.ritchEdit:focus::-webkit-scrollbar-corner {
  background: var(--scrollbar-edit-focus-color);
}
body:not([screen-mode=MOBILE]).win div.ritchEdit:disabled::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).win div.ritchEdit:disabled::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).win div.ritchEdit:disabled::-webkit-scrollbar-corner, body:not([screen-mode=MOBILE]).linux div.ritchEdit:disabled::-webkit-scrollbar-piece,
body:not([screen-mode=MOBILE]).linux div.ritchEdit:disabled::-webkit-scrollbar-thumb,
body:not([screen-mode=MOBILE]).linux div.ritchEdit:disabled::-webkit-scrollbar-corner {
  background: var(--scrollbar-disabled-color);
}

label {
  margin: 0;
  font-weight: normal;
  padding: 3px 0;
  padding: calc(var(--edge-gap) + var(--padding)) var(--padding-horz);
  display: inline-block;
}
label + label {
  padding-left: 0;
}
label .hasControl {
  padding: 0;
}
label .disabled {
  color: #555;
  color: var(--disabled-text);
}
label .blockLabel {
  display: block;
  padding: 3px;
  padding: var(--padding) var(--padding-horz);
  margin: 0;
}

.selectWrap,
textarea,
input[type=text],
input[type=tel],
input[type=time],
input[type=email],
input[type=password],
input[type=number],
input[type=url].number,
input[type=text].number,
input[type=date],
ul.listBoxWrap,
ul.control {
  background: #136;
  background: var(--control-background);
  color: #FFF;
  color: var(--control-text);
  font-family: Meiryo, "MS UI Gothic";
  font-family: var(--font-family-control);
  font-size: inherit;
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  border: none;
  border: var(--control-edge);
  box-shadow: none;
  box-shadow: var(--control-shadow);
  border-radius: 0;
}

textarea,
input[type=text],
input[type=tel],
input[type=time],
input[type=email],
input[type=password],
input[type=number],
input[type=url].number,
input[type=text].number,
input[type=date],
ul.listBoxWrap,
ul.control {
  box-shadow: var(--input-shadow);
}

div.ritchText,
div.ritchEdit {
  background: #FFF;
  color: #000;
  font-family: Meiryo, "MS UI Gothic";
  font-family: var(--font-family-control);
  font-size: inherit;
  padding: 5px;
  padding: var(--margin);
}

div.ritchEdit {
  border: none;
  border: var(--control-edge);
}

div.ritchText {
  border-radius: 5px;
  border-radius: var(--margin);
  border: none;
  border: var(--contents-edge);
}

div.ritchEdit b, div.ritchEdit strong, div.ritchText b, div.ritchText strong {
  color: #F00;
  color: var(--ritch-highlight-color1);
  font-weight: normal;
}
div.ritchEdit i, div.ritchEdit em, div.ritchText i, div.ritchText em {
  color: #0F0;
  color: var(--ritch-highlight-color2);
  font-style: normal;
}
div.ritchEdit ul, div.ritchText ul {
  margin: 0;
  padding: 0;
}
div.ritchEdit h1, div.ritchText h1 {
  border-bottom: 1px solid #FFF;
  border-bottom: 1px solid var(--contents-text);
  margin: 0;
  padding: 0;
}
div.ritchEdit p, div.ritchEdit div, div.ritchText p, div.ritchText div {
  padding: 0;
  margin: 0;
}

input::-webkit-input-placeholder {
  color: var(--placeholder-text);
}
input::-ms-input-placeholder {
  color: #36F;
  color: var(--placeholder-text);
}
input::-moz-placeholder {
  color: var(--placeholder-text);
}
input[type=date] {
  padding: 2px 6px;
  padding: calc(var(--padding) - 1px) var(--padding-horz);
}
input + button {
  margin-left: 1px;
  margin-left: var(--gap);
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
input + .selectWrap {
  margin-left: 1px;
  margin-left: var(--gap);
}

.inlineDate + button {
  margin-left: 1px;
  margin-left: var(--gap);
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.selectWrap.changed, .selectWrap[changed],
textarea.changed,
textarea[changed],
div.ritchEdit.changed,
div.ritchEdit[changed],
input[type=text].changed,
input[type=text][changed],
input[type=tel].changed,
input[type=tel][changed],
input[type=time].changed,
input[type=time][changed],
input[type=email].changed,
input[type=email][changed],
input[type=password].changed,
input[type=password][changed],
input[type=number].changed,
input[type=number][changed],
input[type=url].number.changed,
input[type=url].number[changed],
input[type=text].number.changed,
input[type=text].number[changed],
input[type=date].changed,
input[type=date][changed],
ul.listBoxWrap.changed,
ul.listBoxWrap[changed],
ul.control.changed,
ul.control[changed] {
  background: #383;
  background: var(--control-changed-background);
  color: #FFF;
  color: var(--control-changed-text);
}
.selectWrap.error, .selectWrap[error],
textarea.error,
textarea[error],
div.ritchEdit.error,
div.ritchEdit[error],
input[type=text].error,
input[type=text][error],
input[type=tel].error,
input[type=tel][error],
input[type=time].error,
input[type=time][error],
input[type=email].error,
input[type=email][error],
input[type=password].error,
input[type=password][error],
input[type=number].error,
input[type=number][error],
input[type=url].number.error,
input[type=url].number[error],
input[type=text].number.error,
input[type=text].number[error],
input[type=date].error,
input[type=date][error],
ul.listBoxWrap.error,
ul.listBoxWrap[error],
ul.control.error,
ul.control[error] {
  background: #B30;
  background: var(--control-error-background);
  color: #FFF;
  color: var(--control-error-text);
}
.selectWrap.warn, .selectWrap[warn],
textarea.warn,
textarea[warn],
div.ritchEdit.warn,
div.ritchEdit[warn],
input[type=text].warn,
input[type=text][warn],
input[type=tel].warn,
input[type=tel][warn],
input[type=time].warn,
input[type=time][warn],
input[type=email].warn,
input[type=email][warn],
input[type=password].warn,
input[type=password][warn],
input[type=number].warn,
input[type=number][warn],
input[type=url].number.warn,
input[type=url].number[warn],
input[type=text].number.warn,
input[type=text].number[warn],
input[type=date].warn,
input[type=date][warn],
ul.listBoxWrap.warn,
ul.listBoxWrap[warn],
ul.control.warn,
ul.control[warn] {
  background: #882;
  background: var(--control-warning-background);
  color: #FFF;
  color: var(--control-warning-text);
}
.selectWrap:hover,
textarea:hover,
div.ritchEdit:hover,
input[type=text]:hover,
input[type=tel]:hover,
input[type=time]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=url].number:hover,
input[type=text].number:hover,
input[type=date]:hover,
ul.listBoxWrap:hover,
ul.control:hover {
  background: #248;
  background: var(--control-hover-background);
  color: #FFF;
  color: var(--control-hover-text);
  transition: background 0.5s, color 0.5s;
}
.selectWrap.active, .selectWrap:focus,
textarea.active,
textarea:focus,
div.ritchEdit.active,
div.ritchEdit:focus,
input[type=text].active,
input[type=text]:focus,
input[type=tel].active,
input[type=tel]:focus,
input[type=time].active,
input[type=time]:focus,
input[type=email].active,
input[type=email]:focus,
input[type=password].active,
input[type=password]:focus,
input[type=number].active,
input[type=number]:focus,
input[type=url].number.active,
input[type=url].number:focus,
input[type=text].number.active,
input[type=text].number:focus,
input[type=date].active,
input[type=date]:focus,
ul.listBoxWrap.active,
ul.listBoxWrap:focus,
ul.control.active,
ul.control:focus {
  background: #248;
  background: var(--control-active-background);
  color: #FFF;
  color: var(--control-active-text);
}
.selectWrap.disabled, .selectWrap:disabled,
textarea.disabled,
textarea:disabled,
div.ritchEdit.disabled,
div.ritchEdit:disabled,
input[type=text].disabled,
input[type=text]:disabled,
input[type=tel].disabled,
input[type=tel]:disabled,
input[type=time].disabled,
input[type=time]:disabled,
input[type=email].disabled,
input[type=email]:disabled,
input[type=password].disabled,
input[type=password]:disabled,
input[type=number].disabled,
input[type=number]:disabled,
input[type=url].number.disabled,
input[type=url].number:disabled,
input[type=text].number.disabled,
input[type=text].number:disabled,
input[type=date].disabled,
input[type=date]:disabled,
ul.listBoxWrap.disabled,
ul.listBoxWrap:disabled,
ul.control.disabled,
ul.control:disabled {
  background: #334;
  background: var(--control-disabled-background);
  color: #FFF;
  color: var(--control-disabled-text);
  box-shadow: none;
}

div.inputWithBtn {
  display: table;
}
div.inputWithBtn > input {
  display: table-cell;
  width: 100% !important;
}
div.inputWithBtn > span.inputBtn {
  position: relative;
  display: table-cell;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  float: none;
}
div.inputWithBtn > span.inputBtn > button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 1px;
  margin-left: var(--gap);
}

.selectWrap {
  position: relative;
  cursor: pointer;
  display: flex !important;
}
.selectWrap > .clearBtn {
  padding-right: 3px;
  padding-right: var(--padding-horz);
  cursor: pointer;
}
.selectWrap > select {
  padding: 0px 9px 0px 0px;
  padding: 0px calc(1em + var(--padding)) 0px 0px;
  border: none;
  font: inherit;
  background: transparent;
  cursor: pointer;
  color: inherit;
  color: currentColor;
  width: 100%;
  flex-grow: 1;
}
.selectWrap > select:focus::-ms-value {
  background: none;
  color: #000;
  color: var(--control-text);
}
.selectWrap > select::-ms-expand {
  display: none;
}
.selectWrap:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3px;
  right: var(--padding-horz);
  /* glyphicon-triangle-bottom */
  content: "\e252";
  font-family: "Glyphicons Halflings";
  pointer-events: none;
  color: #FFF;
  color: var(--control-text);
}
.selectWrap[disabled]:after {
  color: #888;
  color: var(--control-disable-text);
}
.selectWrap + button {
  margin-left: 1px;
  margin-left: var(--gap);
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.selectWrap.unitCombo {
  margin-left: 1px !important;
  margin-left: var(--gap) !important;
}
.selectWrap.block {
  display: table;
  width: 100%;
}
.selectWrap.block > span.icon {
  display: table-cell;
  vertical-align: middle;
  width: 1em;
}
.selectWrap.block > select {
  display: table-cell;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th > .selectWrap.block, td > .selectWrap.block {
  display: block;
}

ul.listBoxWrap {
  overflow-y: scroll;
  padding: 0 !important;
  position: relative;
  margin: 0;
}
ul.listBoxWrap > li {
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  margin: 0;
  cursor: pointer;
}
ul.listBoxWrap > li.active {
  background: #360;
  background: var(--highlight-background);
  color: #FFF;
  color: var(--highlight-text);
}
ul.listBoxWrap[disabled] > li {
  cursor: not-allowed;
}
ul.listBoxWrap[disabled] > li.active {
  background: #333;
  background: var(--disabled-background);
  color: #555;
  color: var(--disabled-text);
}

.checkboxWrap,
.radioWrap,
.switchWrap {
  cursor: pointer;
  padding: 3px;
  padding: calc(var(--padding) + var(--edge-gap)) calc(var(--padding-horz) / 2);
}
.checkboxWrap.hasControl,
.radioWrap.hasControl,
.switchWrap.hasControl {
  padding: 0;
}
.checkboxWrap:hover,
.radioWrap:hover,
.switchWrap:hover {
  background: var(--control-hover-background);
  border-radius: var(--padding);
}
.checkboxWrap:focus, .checkboxWrap:focus:hover,
.radioWrap:focus,
.radioWrap:focus:hover,
.switchWrap:focus,
.switchWrap:focus:hover {
  background: var(--control-active-background);
  border-radius: var(--padding);
}

.radioWrap.hasControl > label {
  padding: var(--edge-gap) 0;
}
.radioWrap.hasControl > label > label {
  padding: var(--padding) 0 var(--padding) var(--gap);
}

.cleaner:not(.block) > .checkboxWrap,
.cleaner:not(.block) > .radioWrap {
  float: left;
}

.cleaner.block > .checkboxWrap,
.cleaner.block > .radioWrap {
  display: block;
  float: none !important;
  margin: 0 !important;
}

.cleaner.block > .checkboxWrap + .checkboxWrap,
.cleaner.block > .radioWrap + .radioWrap {
  margin-top: var(--gap) !important;
}

.cleaner.block > .checkboxWrap > label,
.cleaner.block > .radioWrap > label {
  display: block;
  float: none !important;
}

.checkboxWrap > input[type=checkbox],
.checkboxWrap > label > input[type=checkbox],
.radioWrap > input[type=radio],
.radioWrap > label > input[type=radio],
.switchWrap > input[type=checkbox],
.switchWrap > label > input[type=checkbox] {
  display: none;
}

.checkboxWrap > label,
.radioWrap > label {
  width: auto;
  position: relative;
  display: block;
  margin-left: 15px;
  margin-left: calc(1em + 3px);
  margin-left: calc(1em + var(--padding));
  cursor: pointer;
  color: #FFF;
  color: var(--contents-text);
  padding: 0;
  word-break: break-all;
  float: left;
}

.checkboxWrap.rightCheck > label {
  margin-left: 0;
  margin-right: 15px;
  margin-right: calc(1em + 3px);
  margin-right: calc(1em + var(--padding));
}

.checkboxWrap.tite > label,
.radioWrap.tite > label {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.checkboxWrap > label:after,
.radioWrap > label:after {
  position: absolute;
  top: 0;
  top: calc(50% - 0.5em);
  left: -15px;
  left: calc(-1em - 3px);
  left: calc(-1em - var(--padding));
  display: block;
  width: 1em;
  height: 1em;
  content: "";
  background: #136;
  background: var(--control-background);
  border: none;
  border: var(--control-edge);
  box-shadow: none;
  box-shadow: var(--input-shadow);
}

.checkboxWrap.rightCheck > label:after {
  left: auto;
  right: -15px;
  right: calc(-1em - 3px);
  right: calc(-1em - var(--padding));
}

.radioWrap > label:after {
  border-radius: 1em;
}

.checkboxWrap:hover > label,
.radioWrap:hover > label {
  color: #FFF;
  color: var(--control-hover-text);
}

.checkboxWrap:hover > label:after,
.radioWrap:hover > label:after {
  background: #248;
  background: var(--control-hover-background);
}

.checkboxWrap:focus > label,
.radioWrap:focus > label {
  color: #FFF;
  color: var(--control-active-text);
}

.checkboxWrap:focus > label:after,
.radioWrap:focus > label:after {
  background: #248;
  background: var(--control-active-background);
}

.checkboxWrap > input[type=checkbox]:disabled + label,
.radioWrap > input[type=radio]:disabled + label {
  color: #555;
  color: var(--disabled-text);
}

.checkboxWrap > input[type=checkbox]:disabled + label:after,
.radioWrap > input[type=radio]:disabled + label:after {
  background: #334;
  background: var(--control-disabled-background);
  box-shadow: none;
}

.checkboxWrap > label:before,
.radioWrap > label:before {
  position: absolute;
  top: 50%;
  display: block;
  opacity: 0;
  visibility: hidden\9 ;
  z-index: 1;
}

.checkboxWrap > label:before {
  left: -15px;
  left: calc(-1em - 3px);
  left: calc(-1em - var(--padding));
  color: #FFF;
  color: var(--control-text);
  position: absolute;
  top: 0;
  top: calc(50% - 0.5em);
  height: 1em;
  width: 1em;
}

.checkboxWrap.rightCheck > label:before {
  right: 15px;
  right: calc(-1em - 3px);
  right: calc(-1em - var(--padding));
  left: auto;
}

.radioWrap > label:before {
  left: -12.6px;
  left: calc(-0.8em - 3px);
  left: calc(-0.8em - var(--padding));
  top: 0;
  top: calc(50% - 0.3em);
  content: "";
  width: 0.6em;
  height: 0.6em;
  background: #FFF;
  background: var(--control-text);
  border-radius: 1em;
}

.checkboxWrap.checked > label:before {
  opacity: 1;
  visibility: visible\9 ;
}

.radioWrap > input[type=radio]:checked + label:before {
  opacity: 1;
  visibility: visible\9 ;
}

.checkboxWrap > input[type=checkbox]:disabled + label:before,
.radioWrap > input[type=radio]:disabled + label:before {
  color: #888;
  color: var(--control-disabled-text);
}

.checkboxWrap > label > input[type=text],
.checkboxWrap > label > input[type=number],
.checkboxWrap > label > input[type=url].number,
.checkboxWrap > label > input[type=text].number,
.radioWrap > label > input[type=text],
.radioWrap > label > input[type=number],
.radioWrap > label > input[type=url].number,
.radioWrap > label > input[type=text].number {
  margin-right: 3px;
  margin-right: var(--padding);
}

.switchWrap > label {
  position: relative;
  cursor: pointer;
}

.switchWrap > label:before {
  content: "OFF";
  height: 1.5em;
  border-radius: 1em;
  background: #555;
  background: var(--switch-off-background);
  color: #FFF;
  color: var(--switch-off-text);
  padding: 0 6px 0 21px;
  padding: 0 6px 0 calc(3px + 1em + 3px + 3px);
  padding: 0 var(--padding-horz) 0 calc(var(--padding) + 1em + var(--padding) + var(--padding));
}

.switchWrap > input[type=checkbox]:checked + label:before {
  content: "ON";
  background: #06D;
  background: var(--switch-on-background);
  color: #FFF;
  color: var(--switch-on-text);
  padding: 0 21px 0 6px;
  padding: 0 calc(3px + 1em + 3px + 3px) 0 6px;
  padding: 0 calc(var(--padding) + 1em + var(--padding) + var(--padding)) 0 var(--padding-horz);
}

.switchWrap > label:after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  top: 3px;
  top: var(--padding);
  border-radius: 1em;
  z-index: 1;
}

.switchWrap > input[type=checkbox] + label:after {
  left: 3px;
  left: var(--padding);
  right: auto;
  background: #FFF;
  background: var(--switch-off-text);
}

.switchWrap > input[type=checkbox]:checked + label:after {
  right: 3px;
  right: var(--padding);
  left: auto;
  background: #FFF;
  background: var(--switch-on-text);
}

.switchWrap > input[type=checkbox]:disabled + label:after {
  background: #888;
  background: var(--switch-disabled-text);
}

.switchWrap > input[type=checkbox]:disabled + label:before {
  background: #334;
  background: var(--switch-disabled-background);
  color: #888;
  color: var(--switch-disabled-text);
}

.switchWrap:hover > input[type=checkbox] + label:after {
  background: #FFF;
  background: var(--switch-off-hover-text);
}

.switchWrap:hover > input[type=checkbox] + label:before {
  background: #555;
  background: var(--switch-off-hover-background);
  color: #FFF;
  color: var(--switch-off-hover-text);
}

.switchWrap:hover > input[type=checkbox]:checked + label:after {
  background: #FFF;
  background: var(--switch-on-hover-text);
}

.switchWrap:hover > input[type=checkbox]:checked + label:before {
  background: #06D;
  background: var(--switch-on-hover-background);
  color: #FFF;
  color: var(--switch-on-hover-text);
}

.switchWrap:focus > input[type=checkbox] + label:after {
  background: #FFF;
  background: var(--switch-off-active-text);
}

.switchWrap:focus > input[type=checkbox] + label:before {
  background: #555;
  background: var(--switch-off-active-background);
  color: #FFF;
  color: var(--switch-off-active-text);
}

.switchWrap:focus > input[type=checkbox]:checked + label:after {
  background: #FFF;
  background: var(--switch-on-active-text);
}

.switchWrap:focus > input[type=checkbox]:checked + label:before {
  background: #06D;
  background: var(--switch-on-active-background);
  color: #FFF;
  color: var(--switch-on-active-text);
}

textarea,
div.ritchEdit {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  display: block;
  line-height: 1.5em;
  line-height: var(--line-height);
  resize: none;
  padding: 3px;
  padding: var(--padding) var(--padding-horz);
  border: none;
  border: var(--contents-edge);
  box-shadow: var(--contents-shadow);
}

.scrollShadow.control > textarea,
textarea.control,
div.ritchEdit.control {
  border: none;
  border: var(--control-edge);
  box-shadow: var(--input-shadow);
  resize: vertical;
}

textarea[readonly] {
  background: #222;
  background: var(--contents-background);
  color: #FFF;
  color: var(--contents-text);
}

div.multiTextBlock > .scrollShadow.hasCustomScrollBar > textarea,
div.multiTextBlock > textarea {
  height: 100%;
}

textarea[data-font=fixed] {
  font-family: var(--font-family-fixed);
  font-size: var(--font-size-fixed);
  line-height: var(--line-height-fixed);
}

div.progress {
  background: #334;
  background: var(--progress-background);
  padding: 3px;
  padding: var(--padding);
  border-radius: 3px;
  border-radius: var(--padding);
}

div.progress > div.bar {
  float: left;
  overflow: hidden;
  text-align: center;
}

div.progress > div.bar.bar1 {
  background: #383;
  background: var(--progress-bar1-background);
  color: #FFF;
  color: var(--progress-bar1-text);
}

div.progress > div.bar.bar2 {
  background: #55C;
  background: var(--progress-bar2-background);
  color: #FFF;
  color: var(--progress-bar2-text);
}

.contentsFooter {
  background: #333;
  background: var(--contents-footer-background);
  color: #FFF;
  color: var(--contents-footer-text);
  padding: 5px;
  padding: var(--margin);
  text-align: right;
  border: none;
  border: var(--contents-edge);
  border-top: none;
}

.contentsFooter > * {
  font-size: inherit;
}

.contentsFooter > * + * {
  margin-left: 5px;
  margin-left: var(--margin);
}

.contentsBody hr {
  margin: 5px;
  margin: var(--margin);
  border: 0.5px solid #333;
  border: 0.5px solid var(--separator);
  border-style: solid;
}

button,
.likeButton {
  position: relative;
  font-family: Meiryo, "MS UI Gothic";
  font-family: var(--font-family-control);
  font-size: inherit;
  font-weight: normal;
  font-weight: var(--font-weight);
  white-space: nowrap;
  margin: 0;
  margin: calc(var(--edge-gap) - var(--button-edge-gap)) 0;
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  background: #555;
  background: var(--button-background);
  color: #FFF;
  color: var(--button-text);
  border: none;
  border: var(--button-edge);
  box-shadow: none;
  box-shadow: var(--button-shadow);
  cursor: pointer;
}
button.expand,
.likeButton.expand {
  text-overflow: ellipsis;
  overflow: hidden;
}
button.fullSize,
.likeButton.fullSize {
  width: 100%;
  border-radius: var(--padding-horz) !important;
}
button:first-of-type,
.likeButton:first-of-type {
  border-top-left-radius: 3px;
  border-top-left-radius: var(--padding-horz);
  border-bottom-left-radius: 3px;
  border-bottom-left-radius: var(--padding-horz);
}
button:last-of-type,
.likeButton:last-of-type {
  border-top-right-radius: 3px;
  border-top-right-radius: var(--padding-horz);
  border-bottom-right-radius: 3px;
  border-bottom-right-radius: var(--padding-horz);
}
button:focus,
.likeButton:focus {
  background: #666;
  background: var(--button-active-background);
  color: #FFF;
  color: var(--button-active-text);
}
button:hover,
.likeButton:hover {
  background: #666;
  background: var(--button-hover-background);
  color: #FFF;
  color: var(--button-hover-text);
  transition: background 0.5s, color 0.5s;
}
button:active, button.active,
.likeButton:active,
.likeButton.active {
  background: #444;
  background: var(--button-pushed-background);
  color: #CCC;
  color: var(--button-pushed-text);
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5) inset;
}
button:active > span:not(.caret),
button:active > img.cooperationsIcon, button:active:before, button.active > span:not(.caret),
button.active > img.cooperationsIcon, button.active:before,
.likeButton:active > span:not(.caret),
.likeButton:active > img.cooperationsIcon,
.likeButton:active:before,
.likeButton.active > span:not(.caret),
.likeButton.active > img.cooperationsIcon,
.likeButton.active:before {
  position: relative;
  top: 1px;
  left: 1px;
}
button:active > span.icon, button.active > span.icon,
.likeButton:active > span.icon,
.likeButton.active > span.icon {
  top: 2.2px;
  top: calc(0.1em + 1px);
  top: calc(var(--webicon-offset) + 1px);
}
button:active > span.caret, button.active > span.caret,
.likeButton:active > span.caret,
.likeButton.active > span.caret {
  right: 0;
  margin-top: -5px;
  margin-top: calc(0px - (0.5em - 1px));
}
button:disabled, button.disabled,
.likeButton:disabled,
.likeButton.disabled {
  background: transparent;
  background: var(--button-disabled-background);
  color: #888 !important;
  color: var(--button-disabled-text) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
button + button,
.likeButton + button {
  margin-left: 1px;
  margin-left: var(--gap);
}
button.dropdown,
.likeButton.dropdown {
  position: relative;
  border: var(--control-edge);
  box-shadow: var(--control-shadow);
}
button.dropdown:after,
.likeButton.dropdown:after {
  position: relative;
  /* glyphicon-triangle-down */
  content: "\e252";
  font-family: "Glyphicons Halflings";
  pointer-events: none;
  margin-left: var(--padding);
  top: var(--webicon-offset);
  font-size: var(--font-size-small);
}
button.dropdown:active:after, button.dropdown.active:after,
.likeButton.dropdown:active:after,
.likeButton.dropdown.active:after {
  top: 2.2px;
  top: calc(0.1em + 1px);
  top: calc(var(--webicon-offset) + 1px);
  left: 1px;
}
button.dropdown[disabled]:after,
.likeButton.dropdown[disabled]:after {
  color: #888;
  color: var(--control-disable-text);
}
button > span + span,
.likeButton > span + span {
  margin-left: 3px;
  margin-left: var(--padding);
}
button > span.caret,
.likeButton > span.caret {
  position: absolute;
  top: 50%;
  right: 1px;
  margin: 0;
  margin-top: -0.5em;
  color: #FFF;
  color: var(--button-text);
  font-size: initial;
  font-size: var(--font-size-regular);
}
button > img.cooperationsIcon,
.likeButton > img.cooperationsIcon {
  margin-right: 3px;
  margin-right: var(--padding-horz);
  position: relative;
  top: 1px;
  left: 1px;
}
button.btnOk, button.btnSearch,
.likeButton.btnOk,
.likeButton.btnSearch {
  background: #383;
  background: var(--button-submit-background);
  color: #FFF;
  color: var(--button-submit-text);
  border: var(--button-submit-edge);
  box-shadow: var(--button-submit-shadow);
}
button.btnOk:focus, button.btnSearch:focus,
.likeButton.btnOk:focus,
.likeButton.btnSearch:focus {
  background: #4A4;
  background: var(--button-submit-active-background);
  color: #FFF;
  color: var(--button-submit-active-text);
}
button.btnOk:hover, button.btnSearch:hover,
.likeButton.btnOk:hover,
.likeButton.btnSearch:hover {
  background: #4A4;
  background: var(--button-submit-hover-background);
  color: #FFF;
  color: var(--button-submit-hover-text);
}
button.btnOk:active, button.btnOk.active, button.btnSearch:active, button.btnSearch.active,
.likeButton.btnOk:active,
.likeButton.btnOk.active,
.likeButton.btnSearch:active,
.likeButton.btnSearch.active {
  background: #262;
  background: var(--button-submit-pushed-background);
  color: #FFF;
  color: var(--button-submit-pushed-text);
}
button.btnOk.disabled, button.btnOk:disabled, button.btnSearch.disabled, button.btnSearch:disabled,
.likeButton.btnOk.disabled,
.likeButton.btnOk:disabled,
.likeButton.btnSearch.disabled,
.likeButton.btnSearch:disabled {
  background: transparent;
  background: var(--button-submit-disabled-background);
  color: #888;
  color: var(--button-submit-disabled-text);
}
button.btnCancel,
.likeButton.btnCancel {
  background: #833;
  background: var(--button-cancel-background);
  color: #FFF;
  color: var(--button-cancel-text);
}
button.btnCancel:focus,
.likeButton.btnCancel:focus {
  background: #A44;
  background: var(--button-cancel-active-background);
  color: #FFF;
  color: var(--button-cancel-active-text);
}
button.btnCancel:hover,
.likeButton.btnCancel:hover {
  background: #A44;
  background: var(--button-cancel-hover-background);
  color: #FFF;
  color: var(--button-cancel-hover-text);
}
button.btnCancel.active, button.btnCancel:active,
.likeButton.btnCancel.active,
.likeButton.btnCancel:active {
  background: #622;
  background: var(--button-cancel-pushed-background);
  color: #CCC;
  color: var(--button-cancel-pushed-text);
}
button.btnCancel.disabled, button.btnCancel:disabled,
.likeButton.btnCancel.disabled,
.likeButton.btnCancel:disabled {
  background: transparent;
  background: var(--button-cancel-disabled-background);
  color: #888;
  color: var(--button-cancel-disabled-text);
}
button.btnHold,
.likeButton.btnHold {
  background: #860;
  background: var(--button-hold-background);
  color: #FFF;
  color: var(--button-hold-text);
}
button.btnHold:focus,
.likeButton.btnHold:focus {
  background: #A80;
  background: var(--button-hold-active-background);
  color: #FFF;
  color: var(--button-hold-active-text);
}
button.btnHold:hover,
.likeButton.btnHold:hover {
  background: #A80;
  background: var(--button-hold-hover-background);
  color: #FFF;
  color: var(--button-hold-hover-text);
}
button.btnHold.active, button.btnHold:active,
.likeButton.btnHold.active,
.likeButton.btnHold:active {
  background: #640;
  background: var(--button-hold-pushed-background);
  color: #CCC;
  color: var(--button-hold-pushed-text);
}
button.btnHold.disabled, button.btnHold:disabled,
.likeButton.btnHold.disabled,
.likeButton.btnHold:disabled {
  background: transparent;
  background: var(--button-hold-disabled-background);
  color: #888;
  color: var(--button-hold-disabled-text);
}
button.btnRequest,
.likeButton.btnRequest {
  background: #C0C;
  background: var(--button-request-background);
  color: #FFF;
  color: var(--button-request-text);
}
button.btnRequest:focus,
.likeButton.btnRequest:focus {
  background: #E0E;
  background: var(--button-request-active-background);
  color: #FFF;
  color: var(--button-request-active-text);
}
button.btnRequest:hover,
.likeButton.btnRequest:hover {
  background: #E0E;
  background: var(--button-request-hover-background);
  color: #FFF;
  color: var(--button-request-hover-text);
}
button.btnRequest.active, button.btnRequest:active,
.likeButton.btnRequest.active,
.likeButton.btnRequest:active {
  background: #C0C;
  background: var(--button-request-pushed-background);
  color: #CCC;
  color: var(--button-request-pushed-text);
}
button.btnRequest.disabled, button.btnRequest:disabled,
.likeButton.btnRequest.disabled,
.likeButton.btnRequest:disabled {
  background: transparent;
  background: var(--button-request-disabled-background);
  color: #888;
  color: var(--button-request-disabled-text);
}

.likeButton {
  border-radius: 3px;
  border-radius: var(--padding-horz);
}
.likeButton > span + span {
  margin-left: var(--padding);
}

div[data-btnSize=midium] button,
button.midium {
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  font-size: 110%;
  font-size: var(--button-midium-size);
}

div[data-btnSize=midium] button > img.cooperationsIcon,
button.midium > img.cooperationsIcon {
  height: var(--icon-size-midium);
  min-width: var(--icon-size-midium);
}

div[data-btnSize=large] button,
button.large {
  padding: 6px 12px;
  padding: calc(var(--padding) + var(--padding)) calc(var(--padding-horz) + var(--padding-horz));
  font-size: 120%;
  font-size: var(--button-large-size);
}

div[data-btnSize=large] button + button,
button.large + button.large {
  margin-left: 5px;
  margin-left: var(--margin);
}

div[data-btnSize=large] button > img.cooperationsIcon,
button.large > img.cooperationsIcon {
  height: 18px;
  width: 18px;
}

input[type=color].colorButton {
  background: #000;
  background: var(--background);
  border: 1px solid #333;
  border: 1px solid var(--separator);
  padding: 0;
  font-size: inherit;
  font-family: Meiryo, "MS UI Gothic";
  font-family: var(--font-family-control);
  font-weight: normal;
  font-weight: var(--font-weight);
  height: 2em;
}

.toolBar {
  background: #333;
  background: var(--toolbar-background);
  padding: 5px;
  padding: var(--margin);
}

.toolBar button {
  background: transparent;
  color: #CCC;
  color: var(--toolbar-text);
  padding: 3px;
  padding: var(--padding);
  min-width: 2em;
  height: 2em;
  float: left;
  box-shadow: none;
  border-radius: 3px;
  border-radius: var(--padding);
}

.toolBar button:hover {
  background: rgba(255, 255, 255, 0.2);
  background: var(--toolbar-hover-background);
  color: #FFF;
  color: var(--toolbar-hover-text);
}

.toolBar button:disabled {
  background: transparent;
  background: var(--toolbar-disabled-background);
  color: #556;
  color: var(--toolbar-disabled-text);
}

.toolBar button > span {
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.searchEditWrap {
  position: relative;
}

.searchEditWrap input[type=text] {
  transition: width 0.3s ease;
  padding-left: 21.8px;
  padding-left: calc(3px + 1.4em + 3px);
  padding-left: calc(var(--padding) + 1.4em + var(--padding));
  border-radius: 0.5em;
  width: 5em;
}

.searchEditWrap input[type=text]:focus {
  width: 10em;
}

.searchEditWrap span {
  position: absolute;
  left: 5.4px;
  left: calc(3px + 0.2em);
  left: calc(var(--padding) + 0.2em);
  top: 5.4px;
  top: calc(3px + 0.2em);
  top: calc(var(--padding) + 0.2em);
}

ul.treeView {
  padding: 0 !important;
  position: relative;
  margin: 0;
}

ul.treeView > li {
  list-style: none;
  overflow: hidden;
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  margin: 0;
  cursor: pointer;
}

ul.treeView > li.active {
  background: #360 !important;
  background: var(--highlight-background) !important;
  color: #FFF !important;
  color: var(--highlight-text) !important;
}

ul.treeView > li:hover {
  background: #555;
  background: var(--hover-background);
  color: #FFF;
  color: var(--hover-text);
  transition: background 0.5s, color 0.5s;
}

ul.treeView > li > span {
  float: left;
}

ul.treeView > li > span.treeSpace {
  width: 1em;
  height: 1em;
  content: " ";
}

ul.treeView > li > span.treeLabel {
  padding: 0 3px;
  padding: 0 var(--padding);
}

div.listView {
  overflow-y: auto;
  background: #222;
  background: var(--list-contents-background);
  color: #FFF;
  color: var(--list-contents-text);
  border: var(--control-edge);
}

div.listView > div {
  background: transparent;
  background: var(--list-contents-even-background);
}

div.listView > div:nth-child(odd) {
  background: transparent;
  background: var(--list-contents-odd-background);
}

div.listView > div.active {
  background: #360 !important;
  background: var(--highlight-background) !important;
  color: #FFF !important;
  color: var(--highlight-text) !important;
}

div.listView > div:hover {
  background: #555;
  background: var(--hover-background);
  color: #FFF;
  color: var(--hover-text);
}

.tabFrame {
  padding: 0 3px;
  padding: 0 var(--padding);
  margin-bottom: var(--padding);
  position: relative;
  overflow: hidden;
}

.tabFrame:after {
  position: absolute;
  height: 0;
  width: 100%;
  border-bottom: none;
  border-bottom: var(--button-edge);
  bottom: 0px;
  left: 0px;
}

.tabFrame > button {
  float: left;
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  border-radius: 3px;
  border-radius: var(--padding);
  margin: var(--padding) 0;
  z-index: 1;
}

.tabFrame > button.active {
  background: #000;
  background: var(--background);
  color: #FFF;
  color: var(--text);
  box-shadow: none;
  border-radius: 3px 3px 0 0;
  border-radius: var(--padding) var(--padding) 0 0;
  border-bottom: 1px solid #222;
  border-bottom: 1px solid var(--background);
  margin-top: 4px;
  margin-top: calc(var(--padding) + 1px);
  margin-bottom: 0;
  padding-bottom: 5px;
  padding-bottom: calc(var(--padding) + var(--padding) - 1px);
}

.tabFrame > button + button {
  margin-left: 3px;
  margin-left: var(--padding);
}

.tabContents {
  background: #222;
  background: var(--tab-contents-background);
  color: #FFF;
  color: var(--tab-contents-text);
  border: none;
  border: var(--contents-edge);
}

.tabContents > div {
  height: 100%;
  overflow: auto;
  padding: 5px;
  padding: var(--margin);
}

.statusBar {
  background: #333;
  background: var(--contents-footer-background);
  color: #FFF;
  color: var(--contents-footer-text);
  border: var(--contents-edge);
  margin-top: var(--gap);
  box-shadow: var(--contents-shadow);
  position: relative;
}

.splitParent.divided > div > div.statusBar {
  padding-right: 2em;
}

.statusBar > div {
  padding: 5px;
  padding: var(--margin);
}

.statusBar > div.expand {
  width: 100%;
}

.statusBar > div.padding {
  padding: 3px;
  padding: var(--padding);
}

div.updateInfo span.userName {
  font-weight: bold;
}

div.updateInfo span.timestamp {
  color: #CCC;
  color: var(--note-text);
}

div.updateInfo span + span {
  margin-left: 5px;
  margin-left: var(--margin);
}

.sex-female {
  background: #ED1E79;
  background: var(--female-background);
  color: #FFF;
  color: var(--female-text);
  padding: 0 3px;
  padding: 0 var(--padding);
  border-radius: 3px;
  border-radius: var(--padding);
}

.sex-male {
  background: #0071BC;
  background: var(--male-background);
  color: #FFF;
  color: var(--male-text);
  padding: 0 3px;
  padding: 0 var(--padding);
  border-radius: 3px;
  border-radius: var(--padding);
}

.status-current {
  background: #532;
  background: var(--current-background);
  color: #FFF;
  color: var(--current-text);
}

.status-referrence {
  background: #253;
  background: var(--referrence-background);
  color: #FFF;
  color: var(--referrence-text);
}

.status-hold {
  background: #550;
  background: var(--hold-background);
  color: #FFF;
  color: var(--hold-text);
}

.status-emargency {
  background: transparent;
  background: var(--emargency-background);
  color: #FFF;
  color: var(--emargency-text);
}

.status-semi-emargency {
  background: transparent;
  background: var(--semi-emargency-background);
  color: #FFF;
  color: var(--semi-emargency-text);
}

/*@media screen and (min-height: 600px) {*/
.font-extra,
[data-fontSize=extra] {
  font-size: 200%;
  font-size: var(--font-size-extra);
}

.font-large,
[data-fontSize=large] {
  font-size: 200%;
  font-size: var(--font-size-large);
}

.font-midium,
[data-fontSize=midium] {
  font-size: 150%;
  font-size: var(--font-size-midium);
}

.font-small,
[data-fontSize=small] {
  font-size: 70%;
  font-size: var(--font-size-small);
}

.font-regular,
[data-fontSize=regular] {
  font-size: 100%;
  font-size: var(--font-size-regular);
}

/*}*/
[data-lookfeel=label] {
  padding: 0 5px;
  padding: 0 var(--margin);
  border-radius: 1em;
  background: #860;
  background: var(--label-background);
  color: #FFF;
  color: var(--label-text);
  white-space: nowrap;
}

span.badge {
  padding: 0 0.5em;
  background: #C50;
  background: var(--badge-background);
  color: #FFF;
  color: var(--badge-text);
  border-radius: 1em;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
  min-width: 1em;
  font-size: var(--font-size-small);
  box-shadow: none;
  box-shadow: var(--shadow);
  vertical-align: top;
  margin: 0 0 0 var(--padding-horz);
}

span.badge.overrapBadge {
  position: absolute;
  margin: 0;
  z-index: 1;
  left: 50%;
  bottom: 50%;
}

span.label {
  padding: 0 3px;
  padding: 0 var(--padding-horz);
  background: #860;
  background: var(--label-background);
  color: #FFF;
  color: var(--label-text);
  margin-left: 0.5em;
  border-radius: 3px;
  border-radius: var(--padding-horz);
  white-space: nowrap;
  text-align: center;
  display: inline-block;
}

span.label.attention {
  background: #AA0;
  background: var(--label-attention-background);
  color: #FFF;
  color: var(--label-attention-text);
}

span.label.danger {
  background: #F30;
  background: var(--label-danger-background);
  color: #FFF;
  color: var(--label-danger-text);
}

.noBorder {
  border: none !important;
}

.expandBlock, .affectedBlock {
  min-height: 3px;
  /*overflow: hidden;*/
}

.parentBlock.expandFloat > div.expandBlock {
  position: absolute;
  z-index: 1;
  height: auto;
  top: var(--margin);
  left: var(--margin);
  max-height: calc(100% - (var(--margin) + var(--margin)));
  overflow: auto;
  box-shadow: var(--contents-shadow);
  border: var(--contents-edge);
}

.parentBlock.expandFloat.affectedFocus > div.expandBlock {
  opacity: 0.2;
  transition: opacity 0.5s;
}

.parentBlock.hideExpandBlock > div.expandBlock,
.parentBlock.hideExpandBlock > div.separator,
.parentBlock.expandFloat > div.separator {
  display: none !important;
}

.parentBlock.horizon.nowrap,
.parentBlock[data-way=left].nowrap,
.parentBlock[data-way=right].nowrap {
  white-space: nowrap;
}

.parentBlock.horizon > *,
.parentBlock[data-way=left] > *,
.parentBlock[data-way=right] > * {
  float: left;
  height: 100%;
  min-height: 3px;
}

.parentBlock.horizon.hasArrange > .expand,
.parentBlock[data-way=left].hasArrange > .expand,
.parentBlock[data-way=right].hasArrange > .expand {
  height: auto !important;
}

.parentBlock.horizon.nowrap > div,
.parentBlock[data-way=left].nowrap > div,
.parentBlock[data-way=right].nowrap > div {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.parentBlock.horizon:after,
.parentBlock[data-way=left]:after,
.parentBlock[data-way=right]:after,
.parentBlock.horizon:before,
.parentBlock[data-way=left]:before,
.parentBlock[data-way=right]:before,
.parentBlock.horizon.toolessWidth > div:after,
.parentBlock[data-way=left].toolessWidth > div:after,
.parentBlock[data-way=right].toolessWidth > div:after,
.parentBlock.horizon.toolessWidth > div:before,
.parentBlock[data-way=left].toolessWidth > div:before,
.parentBlock[data-way=right].toolessWidth > div:before {
  content: "";
  display: table;
  clear: both;
}

.parentBlock.horizon.dontTooLess {
  white-space: nowrap;
  overflow: hidden;
  line-height: 0;
}

.parentBlock.horizon.dontTooLess > div {
  display: inline-block;
  float: none;
  line-height: normal;
}

.parentBlock.horizon.toolessWidth > div,
.parentBlock[data-way=left].toolessWidth > div,
.parentBlock[data-way=right].toolessWidth > div {
  display: block;
  float: none;
  margin-top: var(--margin);
}

.parentBlock.horizon.toolessWidth > label,
.parentBlock[data-way=left].toolessWidth > label,
.parentBlock[data-way=right].toolessWidth > label {
  display: block;
  float: none;
  padding: var(--margin) 0 0 0;
}

.parentBlock.horizon.toolessWidth > label + div,
.parentBlock[data-way=left].toolessWidth > label + div,
.parentBlock[data-way=right].toolessWidth > label + div {
  margin-top: 0;
}

.parentBlock.horizon.toolessWidth.hasArrange > div:after,
.parentBlock[data-way=left].toolessWidth.hasArrange > div:after,
.parentBlock[data-way=right].toolessWidth.hasArrange > div:after,
.toolessWidth.horizonFormRow > div:after {
  content: "";
  display: table;
  clear: both;
}

.parentBlock.horizon.toolessWidth > div.arrangeHeight,
.parentBlock[data-way=left].toolessWidth > div.arrangeHeight,
.parentBlock[data-way=right].toolessWidth > div.arrangeHeight {
  height: 10em;
  overflow-x: hidden;
  white-space: nowrap;
}

.parentBlock.horizon[splitter=thin] > div + div {
  margin-left: 1px;
  margin-left: var(--gap);
}

.parentBlock.vertical[splitter=thin] > div + div {
  margin-top: 1px;
  margin-top: var(--gap);
}

.parentBlock.horizon[splitter=normal] > div + div {
  margin-left: 5px;
  margin-left: var(--margin);
}

.parentBlock.vertical[splitter=normal] > div + div {
  margin-top: 5px;
  margin-top: var(--margin);
}

.expand {
  height: 100%;
}

.expand.expandOnly {
  height: auto;
}

.inlineBlock {
  display: inline-block;
}

.separator {
  position: relative;
  box-sizing: content-box;
}

.separator:hover {
  background: #333;
  background: var(--separator);
}

.parentBlock[data-way=left] > .separator,
.parentBlock[data-way=right] > .separator {
  width: 5px;
  width: var(--margin);
  height: 100%;
  cursor: col-resize;
}

.parentBlock[data-way=left][blockSplitter=thin] > .separator,
.parentBlock[data-way=right][blockSplitter=thin] > .separator {
  width: 3px;
}

.parentBlock[data-way=top] > .separator,
.parentBlock[data-way=bottom] > .separator {
  height: 5px;
  height: var(--margin);
  width: 100%;
  cursor: row-resize;
}

.parentBlock[data-way=top][blockSplitter=thin] > .separator,
.parentBlock[data-way=bottom][blockSplitter=thin] > .separator {
  height: 3px;
}

div.block {
  position: relative;
}

div.block > div + button,
div.block > button + div,
div.block > span + span,
div.block > div + div,
div.block > dl + dl {
  margin-left: 5px;
  margin-left: var(--margin);
}

div.minimizeSwitch > .switch {
  cursor: pointer;
  padding: var(--margin);
}

div.minimizeSwitch > .mini,
div.minimizeSwitch > .maxi {
  border: none !important;
}

div.minimizeSwitch.opened > .mini,
div.minimizeSwitch:not(.opened) > .maxi {
  display: none;
}

div.minimizeSwitch:not(.opened) > .mini {
  padding: var(--margin) 0;
}

div.minimizeSwitch > .switch > span {
  transition: transform 0.3s;
}

div.minimizeSwitch.opened > .switch > span {
  transform: rotate(90deg);
}

div.affectedBlock.fixedBlock,
div.expandBlock.fixedBlock,
div.expand.fixedBlock {
  overflow: auto;
  border: none;
  border: var(--contents-edge);
  padding: 1px;
  padding: var(--gap);
  background: #222;
  background: var(--contents-background);
}

div.affectedBlock.fixedBlock > div + div,
div.expandBlock.fixedBlock > div + div,
div.expand.fixedBlock > div + div {
  margin-top: 1px;
  margin-top: var(--gap);
}

ul.captionButtons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  float: right;
}

ul.captionButtons:before, ul.captionButtons:after {
  display: table;
  content: " ";
}

ul.captionButtons:after {
  clear: both;
}

ul.captionButtons > li {
  position: relative;
  display: block;
  float: left;
  box-shadow: none;
}

ul.captionButtons > li + li {
  margin-left: 3px;
  margin-left: var(--padding);
}

ul.captionButtons > li > span + span {
  margin-left: 3px;
  margin-left: var(--padding);
}

div.resultCaption,
div.reportCaption {
  width: 100%;
  background: #222;
  background: var(--contents-header-background);
  border: none;
  border: var(--contents-header-edge);
  color: #FFF;
  color: var(--contents-header-text);
  padding: 0;
  margin: 0;
  margin-bottom: 1px;
  margin-bottom: var(--gap);
  overflow: hidden;
  box-shadow: var(--contents-shadow);
}

div.resultCaption {
  padding: 5px;
  padding: var(--margin);
}

div.reportCaption {
  padding: 3px;
  padding: var(--padding) var(--padding-horz);
}

div.resultCaption > .caption {
  float: left;
  min-height: 1em;
}

div.resultCaption > .caption > label {
  float: left;
}

div.resultCaption > .caption > .breadcrumb {
  float: left;
  padding: var(--edge-gap) 0;
}

div.resultCaption > .caption > .breadcrumb > span > span + span {
  margin-left: 0.5em;
}

div.resultCaption > div.label {
  float: left;
  margin: 3px 0;
  margin: var(--padding) var(--padding-horz);
  padding: 1px 0;
  padding: var(--edge-gap) 0;
}

div.resultCaption > div.label > span + span {
  margin-left: 3px;
  margin-left: var(--padding-horz);
}

div.resultCaption > button {
  min-width: 1em;
  border-radius: 0.2em;
  margin-right: 5px;
  margin-right: var(--margin);
}

div.resultCaption button {
  border-radius: initial;
  background: transparent;
  margin: var(--edge-gap) 0;
  border: none;
  box-shadow: none;
}

div.resultCaption button,
div.resultCaption label {
  color: #FFF;
  color: var(--contents-header-text);
}

div.resultCaption button.active,
div.resultCaption button:active,
div.resultCaption button:hover {
  background: rgba(255, 255, 255, 0.2);
  background: var(--toolbar-hover-background);
  color: #FFF;
  color: var(--toolbar-hover-text);
}

div.resultCaption button.disabled,
div.resultCaption button:disabled {
  background: transparent;
  color: #888;
  color: var(--button-disabled-text);
  box-shadow: none;
}

div.resultCaption div.checkboxWrap:focus,
div.resultCaption div.checkboxWrap:hover {
  background: rgba(255, 255, 255, 0.2);
  background: var(--toolbar-hover-background);
  color: #FFF;
  color: var(--toolbar-hover-text);
}

div.resultCaption div.checkboxWrap:focus > label,
div.resultCaption div.checkboxWrap:hover > label {
  color: #FFF;
  color: var(--toolbar-hover-text);
}

div.resultCaption > div.captionGroup > * {
  float: left;
}

div.resultCaption > span + label {
  margin-left: 0.3em;
}

div.resultCaption span.keywords + span.keywords:before {
  content: ":";
  margin-right: 3px;
  margin-right: var(--padding);
}

div.resultCaption span.keywords > span + span {
  margin-left: 3px;
  margin-left: var(--padding);
}

div.resultCaption span.keywords > span + span:before {
  content: "x";
  margin-right: 3px;
  margin-right: var(--padding);
}

div.reportCaption.current {
  border-left: 5px solid #830;
  border-left: var(--margin) solid var(--current);
}

div.reportCaption.past {
  border-left: 5px solid #360;
  border-left: var(--margin) solid var(--past);
}

div.reportCaption.hasBadge {
  background: #522;
  background: var(--hasBadge-background);
  border-left: 5px solid #955;
  border-left: var(--margin) solid var(--hasBadge-highlight);
}

div.reportCaption.hasLabel {
  background: #522;
  background: var(--hasLabel-background);
}

div.reportCaption.subCaption,
div.leftCaption {
  background: #222;
  background: var(--contents-background);
  color: #FFF;
  color: var(--contents-text);
  border: none;
  border: var(--contents-edge);
  box-shadow: var(--contents-shadow);
}

div.reportCaption.subCaption {
  border-bottom: none;
  margin-bottom: 0;
}

div.reportCaption.changed {
  background: #800;
  background: var(--changed-background);
  color: #FFF;
  color: var(--changed-text);
}

div.leftCaption {
  padding: var(--padding) var(--padding-horz);
  border-right: 0;
  line-height: inherit;
  line-height: var(--line-height);
}

div.reportCaption.subCaption > span.captionText:before,
div.leftCaption > span.captionText:before,
span.parenthesis:before {
  content: "【";
}

div.reportCaption.subCaption > span.captionText:after,
div.leftCaption > span.captionText:after,
span.parenthesis:after {
  content: "】";
}

div.reportCaption > button {
  float: left;
  background: transparent !important;
  color: inherit !important;
  border: none;
  box-shadow: none;
}

div.reportCaption > span {
  float: left;
}

div.reportCaption:not(.subCaption) > span {
  padding: 3px 0;
  padding: var(--padding) 0;
}

div.reportCaption > span + span {
  margin-left: 3px;
  margin-left: var(--padding-horz);
}

div.reportCaption > span.captionLabel > span {
  padding: 3px;
  padding: var(--padding) var(--padding-horz);
  border-radius: 3px;
  border-radius: var(--padding-horz);
}

div.reportCaption > span.captionLabel > span + span {
  margin-left: 3px;
  margin-left: var(--padding);
}

div.reportCaption > span.captionLabel > span {
  background: transparent;
  background: var(--label-switch-off-background);
  color: #888;
  color: var(--label-switch-off-text);
}

div.reportCaption > span.captionLabel > span.active {
  background: #555;
  background: var(--label-switch-on-background);
  color: #FFF;
  color: var(--label-switch-on-text);
}

div.reportCaption > span.captionInfo > span + span,
div.reportCaption > span.captionInfo > span > span + span {
  margin-left: 3px;
  margin-left: var(--padding);
}

.reportCaption > i.changeSign {
  float: left;
  padding: var(--padding) 0;
  margin-right: var(--padding-horz);
  cursor: pointer;
  color: #FF0;
}

div.reportStaticData {
  background: #222;
  background: var(--contents-background);
  color: #FFF;
  color: var(--contents-text);
  /*height: 100%;*/
  padding: 3px;
  padding: var(--padding) var(--padding-horz);
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: inherit;
  line-height: var(--line-height);
  border: none;
  border: var(--contents-edge);
  overflow: auto;
  box-shadow: var(--contents-shadow);
}

div.reportStaticData > div {
  min-height: 1em;
}

div.reportStaticData > div.empty,
div.reportStaticData.noshow {
  color: rgba(0, 0, 0, 0);
}

div.reportStaticData > div.attachImage > img {
  max-width: 100%;
}

div.reportStaticData[data-font=fixed] {
  font-family: var(--font-family-fixed);
  font-size: var(--font-size-fixed);
  line-height: var(--line-height-fixed);
}

div.reportStaticBlock {
  background: #222;
  background: var(--contents-background);
  color: #FFF;
  color: var(--contents-text);
  border: none;
  border: var(--contents-edge);
  position: relative;
  box-shadow: var(--contents-shadow);
}

div.reportStaticBlock > span {
  padding: 3px;
  padding: var(--padding) var(--padding-horz);
  word-break: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: inherit;
  line-height: var(--line-height);
  float: left;
}

div.reportStaticBlock > span + span {
  margin-left: 0.5em;
}

div.imageWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

div.imageWrapper > img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

div.commandBar {
  text-align: right;
  padding: 3px;
  padding: var(--margin);
  background: #222;
  background: var(--contents-background);
  border: var(--contents-edge);
  border-top: none;
  box-shadow: var(--contents-shadow);
}

div.commandBar > div.expand {
  width: 100%;
}

div.commandBar > div.padding {
  padding: 3px;
  padding: calc(var(--padding) + var(--button-edge-gap));
}

#wrapper {
  height: 100%;
  margin: 0;
}

div.margined {
  padding: 5px;
  padding: var(--margin);
}

.parentBlock.horizon > .toolbar {
  height: 100%;
  background: #333;
  background: var(--toolbar-background-horizon);
  border-right: none;
  border-right: var(--toolbar-edge);
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.parentBlock.horizon > .toolbar button {
  padding: 5px;
  padding: var(--margin);
  display: block;
  text-align: center;
}

.parentBlock.horizon > .toolbar > div > button {
  display: block;
}

.parentBlock.horizon > .toolbar > div + div {
  margin-top: var(--margin);
}

.parentBlock.horizon > .toolbar.crop button {
  width: 100%;
}

.parentBlock.vertical > .toolbar {
  width: 100%;
  background: #333;
  background: var(--toolbar-background-vertical);
  border-bottom: none;
  border-bottom: var(--toolbar-edge);
  position: relative;
  overflow-y: hidden;
  overflow-x: auto;
  z-index: 1;
  box-shadow: var(--contents-shadow);
}

.parentBlock.vertical > .toolbar > div,
.parentBlock.vertical > .toolbar > div > button {
  float: left;
}

.parentBlock.vertical > .toolbar > div + div {
  margin-left: var(--margin);
}

.parentBlock.vertical > .toolbar:after,
.parentBlock.vertical > .toolbar:before {
  content: "";
  display: table;
  clear: both;
}

.toolbar button {
  position: relative;
  border-radius: initial;
  background: transparent;
  color: #CCC;
  color: var(--toolbar-text);
  margin: 0;
  border: none;
  box-shadow: none;
}

.toolbar button:disabled {
  color: #888 !important;
  color: var(--button-disabled-text) !important;
  background: transparent !important;
}

.toolbar button:active,
.toolbar button.active {
  background: rgba(255, 255, 255, 0.2);
  background: var(--toolbar-hover-background);
  color: #CCC;
  color: var(--toolbar-hover-text);
}

.toolbar button:hover {
  background: rgba(255, 255, 255, 0.2);
  background: var(--toolbar-hover-background);
  color: #FFF;
  color: var(--toolbar-hover-text);
}

.toolbar button > span.caption {
  margin-left: 5px;
  margin-left: var(--margin);
}

.toolbar > .pull-right > * {
  float: left;
}

.parentBlock.horizon > .toolbar.crop:not(.hover) button > span.btnLabel {
  display: none;
}

.parentBlock.horizon > .toolbar.crop.hover button {
  text-align: left;
}

.parentBlock.horizon > .toolbar.crop.hover button > span.btnLabel {
  display: inline;
}

#patientSearchForm > input {
  margin: 0 5px;
  margin: 0 var(--margin);
}

.loadingBlock {
  position: relative;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: var(--loading-background);
}

.loading:not(.hasAbort) {
  background-image: url(../image/loading.gif);
  background-image: var(--loading-image);
  background-size: var(--loading-size) var(--loading-size);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.loading.hasAbort {
  display: table;
}

.loading.hasAbort > div {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.loading.hasAbort > div > div {
  max-width: 18em;
  margin: 0 auto;
  position: relative;
  padding: var(--margin);
  background: var(--confirm-background);
  border: var(--confirm-edge);
  border-radius: var(--margin);
  box-shadow: var(--confirm-shadow);
  z-index: 999;
}

.loading.hasAbort .loader {
  height: 8em;
  background-image: var(--loading-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.imageBlock:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.imageBlock.loading:before {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 998;
  background: var(--loading-background);
  background-image: url(../image/loading.gif);
  background-image: var(--loading-image);
  background-size: var(--loading-size);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.loading.hasAbort button {
  display: block;
  margin: 0;
  width: 100%;
}

.errorInfo,
.warningInfo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 5px;
  padding: 0 var(--margin);
  overflow-y: auto;
}

.warningInfo {
  color: #CCC;
  color: var(--note-text);
}

.errorInfo {
  background: #FF8;
  color: #F00;
  border-radius: 0.5em;
}

.errorInfo > h1 {
  font-size: 200%;
  margin: 0;
}

.errorInfo > h1 > span {
  display: inline-block;
  vertical-align: middle;
}

.errorInfo > h1 > span + span {
  margin-left: 0.2em;
}

.errorInfo > p {
  margin: 1em 0.2em 0.2em 0.2em;
}

.caret {
  border-bottom: 0.5em solid transparent;
  border-top: 0.5em solid transparent;
  border-left: 0.5em solid;
  border-right: none;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  right: var(--padding-horz);
  top: 50%;
  transform: translateY(-50%);
}

.parentBlock.vertical > .toolbar button > .caret,
ul:not(.popup) > div > li > .caret {
  border-bottom: none;
  border-top: 0.5em dashed;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
}

.parentBlock.vertical > .toolbar button > .caret {
  margin: 0;
  top: auto;
  bottom: 1px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.parentBlock.vertical > .toolbar button.active > .caret,
.parentBlock.vertical > .toolbar button:active > .caret {
  bottom: 0px;
  transform: translateX(calc(-50% + 1px));
}

#alerts {
  position: absolute;
  right: 10px;
  right: calc(var(--margin) + var(--margin));
  top: 10px;
  top: calc(var(--margin) + var(--margin));
  z-index: 100;
}

#alerts > div.alert {
  margin-bottom: 10px;
  margin-bottom: calc(var(--margin) + var(--margin));
  min-width: 12em;
  padding: 0;
  float: right;
  clear: both;
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
}

#alerts > div.alert > div.alertCaption {
  padding: 5px 10px;
  padding: var(--margin) calc(var(--margin) + var(--margin));
}

#alerts > div.alert > div.alertCaption > span.icon {
  margin-right: 10px;
  margin-right: var(--margin);
}

#alerts > div.alert > div.alertCaption > span.closeBtn {
  float: right;
  cursor: pointer;
}

#alerts > div.alert > div.alertCaption:not(:hover) > span.closeBtn {
  display: none;
}

#alerts > div.alert > div.alertCaption:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

#alerts > div.alert > div.alertContent {
  padding: 5px 10px;
  padding: var(--margin) calc(var(--margin) + var(--margin));
}

#alerts > div.alert > .alertContent > .alertSource {
  margin-bottom: 5px;
  margin-bottom: var(--margin);
}

#alerts > div.alert > .alertContent > .alertSource:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: underline;
  cursor: pointer;
}

#alerts > div.alert > .alertContent > .detailSwitch {
  font-size: small;
  font-size: var(--font-size-small);
  cursor: pointer;
}

#alerts > div.alert > .alertContent > .alertDetail {
  max-width: 50vw;
  padding: 5px;
  padding: var(--margin);
  background: #222;
  background: var(--contents-background);
  color: #FFF;
  color: var(--contents-text);
  border-radius: 5px;
  border-radius: var(--margin);
}

#alerts > div.alert > .alertContent:not([showdetail=true]) > .alertDetail {
  display: none;
}

#alerts > div.alert > div.alertTimestamp {
  text-align: right;
  padding: 0 5px;
  padding: 0 var(--margin);
  font-size: 50%;
}

#alerts > div.alert.alert-error {
  color: #FFF;
  background: #C55;
  border-color: #000;
}

#alerts > div.alert.alert-error > div.alertCaption {
  background: #833;
}

#alerts > div.alert.alert-mail {
  color: #FFF;
  background: #55C;
  border-color: #000;
}

#alerts > div.alert.alert-mail > div.alertCaption {
  background: #448;
}

#alerts > div.alert.alert-information {
  color: #FFF;
  background: #585;
  border-color: #000;
}

#alerts > div.alert.alert-information > div.alertCaption {
  background: #353;
}

div.groupBox {
  background: #222;
  background: var(--group-box-background);
  box-shadow: none;
  box-shadow: var(--group-box-shadow);
  border: 1px solid #000;
  border: var(--group-box-edge);
  position: relative;
  /* padding: 5px; */
  /* padding: var(--margin); */
}

div.groupBox.padding {
  padding: 1em;
}

div.parentBlock.horizon > div.groupBox + div.groupBox {
  margin-left: 5px;
  margin-left: var(--margin);
}

div.horizon + div.groupBox,
div.groupBox + div.horizon,
div.vertical > div.groupBox + div.groupBox {
  margin: 5px 0;
  margin: var(--margin) 0;
}

div.groupBox > h1 {
  font-size: 100%;
  margin: 0;
  padding: 0.5em;
}

div.groupBox.cropping > h1 {
  cursor: pointer;
}

div.groupBox.cropping > h1:hover > span {
  text-decoration: underline;
}

div.groupBox.cropping > h1:before {
  font-family: "Glyphicons Halflings";
  position: relative;
  top: 1px;
  margin-right: 0.5em;
}

div.groupBox > h1 > p.note {
  color: #CCC;
  color: var(--note-text);
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
  margin: 5px 0 0 0;
  margin: var(--margin) 0 0 0;
  border-radius: 5px;
  border-radius: var(--margin);
}

div.groupBox.cropping[data-open=true] > h1:before {
  /* glyphicon-triangle-bottom */
  content: "\e252";
}

div.groupBox.cropping[data-open=true] > h1 {
  min-height: 2em;
}

div.groupBox.cropping:not([data-open=true]) > h1:before {
  /* glyphicon-triangle-right */
  content: "\e250";
}

div.groupBox.cropping:not([data-open=true]) > div.groupBoxContent {
  display: none;
}

div.groupBox > div.groupBoxContent {
  padding: 1em;
}

div.groupBox.paddingThin > div.groupBoxContent {
  padding: var(--margin);
}

div.groupBox > h1 + div.groupBoxContent {
  padding-top: 0;
}

div.groupBoxContent > div {
  padding: 0;
}

div.groupBoxContent > div.controlsGroup {
  margin: 5px 0px;
  margin: var(--margin) 0;
}

div.groupBoxBar {
  position: absolute;
  right: 0;
  top: 1px;
  display: block;
  white-space: nowrap;
  padding: 5px;
  padding: var(--margin);
}

div.groupBoxBar > div {
  float: left;
}

div.horizonFormRow {
  margin: 0;
  padding: 0;
  position: relative;
}

div + div.horizonFormRow {
  margin-top: var(--margin);
}

div.formControlGroup div,
div.formControlGroup label,
div.horizonFormRow div,
div.horizonFormRow label,
div.horizonFormRow input {
  min-height: 3px;
  display: inline-block;
  vertical-align: middle;
  float: left;
}

div.horizonFormRow > div + div,
div.horizonFormRow > div + input,
div.horizonFormRow > input + div,
div.horizonFormRow > input + input,
div.horizonFormRow div.horizonFormItem + div.horizonFormItem,
div.horizonFormRow div.horizonFormItem > div + div,
div.horizonFormRow div.horizonFormItem > div + input,
div.horizonFormRow div.horizonFormItem > input + div,
div.horizonFormRow div.horizonFormItem > input + input {
  margin-left: 5px;
  margin-left: var(--margin);
}

div.horizonFormRow > div.formControlGroup > * {
  float: left;
  height: 100%;
}

div.inputBlock > input + label {
  padding-left: 1px;
  padding-left: var(--gap);
}

div.inputBlock > input + * {
  margin-left: 1px;
  margin-left: var(--gap);
}

div.modalBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
}

div.mouseDragWrapper,
div.popupBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
}

.form-group.hidden {
  display: none;
}

div.vertical > .form-group:not(.hidden) + .form-group {
  margin-top: 5px;
  margin-top: var(--margin);
}

div.horizon > .form-group:not(.hidden) + .form-group {
  margin-left: 5px;
  margin-left: var(--margin);
}

input[type=password],
input[type=email],
input[type=tel],
input[type=text] {
  width: 100%;
}

input[type=url].number,
input[type=text].number,
input[type=number] {
  width: 5em;
  text-align: right;
  -moz-appearance: textfield;
}

input.number {
  ime-mode: disabled;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

img.userIcon {
  width: 4em;
  min-width: 4em;
  min-height: 4em;
  border-radius: 100%;
  object-fit: contain;
}

.checkSwitch {
  padding: 3px;
  padding: calc(var(--edge-gap) + var(--padding)) var(--padding-horz);
  position: relative;
  text-align: left;
}

.checkSwitch.active,
.checkSwitch:hover {
  background: inherit;
  color: inherit;
}

.checkSwitch > input[type=checkbox] {
  display: none;
}

.checkSwitch > label {
  position: relative;
  cursor: pointer;
  display: block;
  padding: 0 1em;
}

.checkSwitch > label:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 80%;
  transition: background 0.1s 0.1s ease;
  border-radius: 1em;
  background: #555;
  background: var(--switch-off-background);
  left: 0;
  top: 10%;
}

.checkSwitch > label:after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0.2em;
  top: 0px;
  top: calc(50% - 0.5em);
  border-radius: 1em;
  transition: all 0.2s ease;
  background: #FFF;
  background: var(--switch-off-text);
  z-index: 2;
}

.checkSwitch > label:hover:before {
  background: #555;
  background: var(--switch-off-hover-background);
}

.checkSwitch > label:hover:after {
  background: #FFF;
  background: var(--switch-off-hover-text);
}

.checkSwitch > input[type=checkbox]:checked + label:before {
  background: #06D;
  background: var(--switch-on-background);
}

.checkSwitch > input[type=checkbox]:checked + label:hover:before {
  background: #06D;
  background: var(--switch-on-hover-background);
}

.checkSwitch > input[type=checkbox]:checked + label:after {
  background: #FFF;
  background: var(--switch-on-text);
  left: auto;
  right: 0.2em;
}

.checkSwitch > input[type=checkbox]:checked + label:hover:after {
  background: #FFF;
  background: var(--switch-on-hover-text);
}

table.innerEdge {
  height: 100%;
}

table.innerEdge tr:not(:first-child) > td,
table.innerEdge tr:not(:first-child) > th {
  border-top: 1px solid #000;
  border-top: var(--table-border-horizontal);
}

table.innerEdge td:not(:first-child),
table.innerEdge th:not(:first-child) {
  border-left: 1px solid #000;
  border-left: var(--table-border-vertical);
}

table.innerEdge tr:last-child > th,
table.innerEdge tr:last-child > td {
  height: 100%;
  vertical-align: middle;
}

table.insideEdge tr:not(:first-child) > td,
table.insideEdge tr:not(:first-child) > th {
  border-top: 1px solid #000;
  border-top: var(--table-border-horizontal);
}

table.insideEdge td:not(:first-child),
table.insideEdge th:not(:first-child) {
  border-left: 1px solid #000;
  border-left: var(--table-border-vertical);
}

div.footer {
  text-align: right;
  width: 100%;
}

div.footer.nowrap {
  overflow: hidden;
}

div.importanceMessage > h1 {
  text-align: center;
}

div.importanceMessage > p {
  padding: 5px;
  padding: var(--margin);
  background: #222;
  background: var(--contents-background);
  border: none;
  border: var(--contents-edge);
}

div.sliderWrap > .ui-slider {
  margin: 6px;
  margin: var(--padding-horz);
  background: #136;
  background: var(--control-background);
  border: none;
  border: var(--control-edge);
  border-radius: 1em;
  box-sizing: content-box;
  box-shadow: none;
  box-shadow: var(--control-shadow);
}

div.sliderWrap > .ui-slider-horizontal {
  height: 1em;
  font-size: inherit;
}

div.sliderWrap > .ui-slider .ui-slider-range {
  background: #36D;
  background: var(--slider-range-background);
  border-radius: 1em;
}

div.sliderWrap > .ui-slider .ui-slider-handle {
  height: 1.6em;
  background: #555;
  background: var(--slider-handle-background);
  border: none;
  border: var(--slider-handle-edge);
  border-radius: 1em;
  box-sizing: content-box;
  cursor: pointer;
}

div.sliderWrap > .ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
}

.breadcrumb > span {
  float: left;
  position: relative;
  padding: 3px 1em;
  padding: var(--padding) 1em;
  background: #222;
  background: var(--list-contents-background);
  color: #FFF;
  color: var(--list-contents-text);
  box-shadow: none;
  box-shadow: var(--shadow);
}

.breadcrumb > span {
  cursor: pointer;
}

.breadcrumb > span:hover {
  background: #360;
  background: var(--highlight-background);
  color: #FFF;
  color: var(--highlight-text);
}

.breadcrumb > span:first-child {
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}

.breadcrumb > span:last-child {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.breadcrumb > span:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1em;
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 0.5em solid;
  border-left-color: #333;
  border-left-color: var(--separator);
  right: -0.5em;
  z-index: 1;
}

.breadcrumb > span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1em;
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 0.5em solid;
  border-left-color: #222;
  border-left-color: var(--list-contents-background);
  right: -0.4em;
  z-index: 2;
}

.breadcrumb > span:not(.active):hover::after {
  border-left-color: #360;
  border-left-color: var(--highlight-background);
}

div.dragging {
  position: absolute;
  z-index: 990;
  background: #360;
  background: var(--highlight-background);
  color: #FFF;
  color: var(--highlight-text);
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.langSwitch > span {
  background: #555;
  background: var(--button-background);
  padding: var(--padding) var(--padding-horz);
  color: #FFF;
  color: var(--button-text);
  cursor: pointer;
  border: var(--button-edge);
  box-shadow: var(--button-shadow);
}

.langSwitch > span:first-child {
  border-top-left-radius: var(--margin);
  border-bottom-left-radius: var(--margin);
}

.langSwitch > :last-child {
  border-top-right-radius: var(--margin);
  border-bottom-right-radius: var(--margin);
}

.langSwitch > span + span {
  margin-left: var(--gap);
}

.langSwitch > span.active {
  background: var(--button-pushed-background);
  color: var(--button-pushed-text);
  cursor: default;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.3) inset;
}

.langSwitch > span > span {
  position: relative;
}

.langSwitch > span.active > span {
  top: 1px;
  left: 1px;
}

.messageBlock {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: table;
  pointer-events: none;
}

.messageBlock:not(.active) {
  display: none;
}

.messageBlock > div {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.messageBlock > div > div.messageInner {
  width: 80%;
  max-width: 20em;
  margin: 0 auto;
  padding: var(--margin);
  text-align: center;
  border-radius: 1em;
  white-space: pre-wrap;
  position: relative;
  pointer-events: all;
  box-shadow: none;
  box-shadow: var(--contents-shadow);
}

.messageBlock > div > div.messageInner[messageType=message],
.messageBlock > div > div.messageInner[messageType=message] > button {
  background: #333;
  background: var(--contents-inner-background);
  color: #FFF;
  color: var(--contents-inner-text);
}

.messageBlock > div > div.messageInner[messageType=notFound],
.messageBlock > div > div.messageInner[messageType=notFound] > button {
  background: #550;
  background: var(--contents-notFound-background);
  color: #FFF;
  color: var(--contents-notFound-text);
}

.messageBlock > div > div.messageInner[messageType=error],
.messageBlock > div > div.messageInner[messageType=error] > button {
  background: #800;
  background: var(--contents-error-background);
  color: #FFF;
  color: var(--contents-error-text);
}

.messageBlock > div > div.messageInner > div {
  padding: 3px 6px;
  padding: var(--padding) var(--padding-horz);
}

.messageBlock > div > div.messageInner > button {
  position: absolute;
  top: -11px;
  top: calc(-0.5em - 5px);
  top: calc(-0.5em - var(--margin));
  right: -11px;
  right: calc(-0.5em - 5px);
  right: calc(-0.5em - var(--margin));
  border-radius: 1em;
  border: none;
  box-shadow: none;
}

.scrollShadow {
  position: relative;
}

.scrollShadow > .shadow {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.scrollShadow > .scrollShadowTarget {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.scrollShadow > .shadowTop, .scrollShadow > .shadowBottom {
  width: 100%;
  height: var(--font-size-regular);
  left: 0;
}

.scrollShadow > .shadowLeft, .scrollShadow > .shadowRight {
  width: var(--font-size-regular);
  height: 100%;
  top: 0;
}

.scrollShadow > .shadowTop {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  top: 0;
}

.scrollShadow > .shadowBottom {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  bottom: 0;
}

.scrollShadow > .shadowLeft {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  left: 0;
}

.scrollShadow > .shadowRight {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  right: 0;
}

.scrollShadow:not(.hasVert) > .shadowTop,
.scrollShadow:not(.hasVert) > .shadowBottom {
  display: none;
}

.scrollShadow:not(.hasHorz) > .shadowLeft,
.scrollShadow:not(.hasHorz) > .shadowRight {
  display: none;
}

body:not([screen-mode=MOBILE]).win .scrollShadow.hasVert > .shadowTop,
body:not([screen-mode=MOBILE]).win .scrollShadow.hasVert > .shadowBottom, body:not([screen-mode=MOBILE]).linux .scrollShadow.hasVert > .shadowTop,
body:not([screen-mode=MOBILE]).linux .scrollShadow.hasVert > .shadowBottom {
  width: calc(100% - 1em);
  width: calc(100% - var(--scrollbar-size));
}
body:not([screen-mode=MOBILE]).win .scrollShadow.hasVert > .shadowRight, body:not([screen-mode=MOBILE]).linux .scrollShadow.hasVert > .shadowRight {
  right: 1em;
  right: var(--scrollbar-size);
}
body:not([screen-mode=MOBILE]).win .scrollShadow.hasHorz > .shadowLeft,
body:not([screen-mode=MOBILE]).win .scrollShadow.hasHorz > .shadowRight, body:not([screen-mode=MOBILE]).linux .scrollShadow.hasHorz > .shadowLeft,
body:not([screen-mode=MOBILE]).linux .scrollShadow.hasHorz > .shadowRight {
  height: calc(100% - 1em);
  height: calc(100% - var(--scrollbar-size));
}
body:not([screen-mode=MOBILE]).win .scrollShadow.hasHorz > .shadowBottom, body:not([screen-mode=MOBILE]).linux .scrollShadow.hasHorz > .shadowBottom {
  bottom: 1em;
  bottom: var(--scrollbar-size);
}

.scrollShadow.hasCustomScrollBar > .customScrollBar {
  position: absolute;
  padding: var(--margin);
  transition: padding 0.2s;
  cursor: pointer;
  z-index: 9;
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.horizon {
  width: 100%;
  bottom: 0;
  display: none;
}

.scrollShadow.hasCustomScrollBar.hasVert > .customScrollBar.horizon {
  padding-right: calc(var(--custom-scrollbar-size) + var(--margin) + var(--margin));
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.vertical {
  height: 100%;
  right: 0;
  top: 0;
  display: none;
}

.scrollShadow.hasCustomScrollBar.hasHorz > .customScrollBar.vertical {
  padding-bottom: calc(var(--custom-scrollbar-size) + var(--margin) + var(--margin));
}

.scrollShadow.hasCustomScrollBar.hasHorz > .customScrollBar.horizon,
.scrollShadow.hasCustomScrollBar.hasVert > .customScrollBar.vertical {
  display: inline-block;
}

.scrollShadow.hasCustomScrollBar > .customScrollBar > .scrollBarInner {
  position: relative;
  background: var(--custom-scrollbar-inactive-background);
  box-shadow: var(--custom-scrollbar-inactive-shadow);
  opacity: var(--custom-scrollbar-inactive-opacity);
  border-radius: var(--custom-scrollbar-inactive-size);
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.horizon > .scrollBarInner {
  width: 100%;
  left: 0%;
  height: var(--custom-scrollbar-inactive-size);
  transition: height 0.2s, top 0.2s, margin 0.2s;
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.vertical > .scrollBarInner {
  height: 100%;
  top: 0%;
  width: var(--custom-scrollbar-inactive-size);
  transition: width 0.2s, left 0.2s, margin 0.2s;
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.scrollDragging > .scrollBarInner,
.scrollShadow.hasCustomScrollBar > .customScrollBar:hover > .scrollBarInner {
  background: var(--custom-scrollbar-background);
  box-shadow: var(--custom-scrollbar-shadow);
  opacity: var(--custom-scrollbar-opacity);
  border-radius: var(--custom-scrollbar-size);
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.horizon.scrollDragging,
.scrollShadow.hasCustomScrollBar > .customScrollBar.horizon:hover {
  padding-top: calc(var(--margin) - (var(--custom-scrollbar-size) - var(--custom-scrollbar-inactive-size)) / 2);
  padding-bottom: calc(var(--margin) - (var(--custom-scrollbar-size) - var(--custom-scrollbar-inactive-size)) / 2);
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.horizon.scrollDragging > .scrollBarInner,
.scrollShadow.hasCustomScrollBar > .customScrollBar.horizon:hover > .scrollBarInner {
  height: var(--custom-scrollbar-size);
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.vertical.scrollDragging,
.scrollShadow.hasCustomScrollBar > .customScrollBar.vertical:hover {
  padding-left: calc(var(--margin) - (var(--custom-scrollbar-size) - var(--custom-scrollbar-inactive-size)) / 2);
  padding-right: calc(var(--margin) - (var(--custom-scrollbar-size) - var(--custom-scrollbar-inactive-size)) / 2);
}

.scrollShadow.hasCustomScrollBar > .customScrollBar.vertical.scrollDragging > .scrollBarInner,
.scrollShadow.hasCustomScrollBar > .customScrollBar.vertical:hover > .scrollBarInner {
  width: var(--custom-scrollbar-size);
}

.scrollShadow.hasCustomScrollBar.hasHorz > .scrollShadowTarget {
  padding-bottom: calc(var(--custom-scrollbar-inactive-size) + var(--margin) + var(--margin));
}

.scrollShadow.hasCustomScrollBar.hasHorz > .scrollShadowTarget.onlyHorz {
  padding-bottom: 0;
}

.scrollShadow.hasCustomScrollBar.hasVert > .scrollShadowTarget {
  padding-right: calc(var(--custom-scrollbar-inactive-size) + var(--margin) + var(--margin));
}

.scrollShadow.hasCustomScrollBar.hasVert > .scrollShadowTarget.onlyVert {
  padding-right: 0;
}

span.labelField {
  padding: 0 0.5em;
  border-radius: 1em;
  background: #860;
  background: var(--label-background);
  color: #FFF;
  color: var(--label-text);
  white-space: nowrap;
}

/*@media screen and (min-height: 600px) {*/
span.labelField[data-fontsize=large] {
  font-size: var(--font-size-large);
  border-radius: var(--margin);
}

/*}*/
div.notFoundPlugin {
  border: none;
  border: var(--contents-edge);
  background: #222;
  background: var(--contents-background);
  padding: 5px;
  padding: var(--margin);
}

div.searchInputBox {
  position: relative;
  width: 100%;
}

div.searchInputBox > input {
  border-radius: 1em;
  padding: 3px 1em 3px 18px;
  padding: 3px 1em 3px calc(3px + 1em + 3px);
  padding: var(--padding) 1em var(--padding) calc(1em + var(--padding-horz) + var(--padding-horz));
}

div.searchInputBox.expandBox > input {
  width: 7em;
  transition: all 0.2s ease !important;
}

div.searchInputBox.expandBox > input:focus {
  width: 15em;
}

div.searchInputBox.expandBox > input:not(:placeholder-shown) {
  width: 15em;
}

div.searchInputBox > i {
  color: var(--control-text);
  left: calc(var(--padding-horz) + var(--padding));
  width: 1em;
  cursor: pointer;
  pointer-events: all;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.icon {
  top: 0.1em;
  top: var(--webicon-offset);
}

.separateRows > div + div,
.inputContainer > .form-group + .form-group,
.form-block > .form-group + .form-group {
  margin-top: var(--margin);
}

.modalContent > .form-block {
  padding: 1em;
  background: var(--contents-background);
  color: var(--contents-text);
  border: var(--contents-edge);
  box-shadow: var(--contents-shadow);
}

.form-group > div > .maxLength {
  text-align: right;
  padding: 0 var(--padding-horz);
}

.form-separator {
  margin: 1em 0;
  border-top: var(--contents-edge);
}

.verticalForm .form-group:not(.block):not(.hidden) {
  width: 100%;
  display: table;
}

.verticalForm .form-group:not(.block) > label {
  width: 9em;
  display: table-cell;
  text-align: right;
  margin-right: var(--margin);
  white-space: nowrap;
}

.verticalForm .form-group > label:after {
  content: " :";
}

.verticalForm .form-group:not(.block) > div {
  display: table-cell;
  vertical-align: top;
}

.form-block > h1 {
  margin: 0 0 var(--margin) 0;
  padding: 0 0 var(--margin) 0;
  border-bottom: var(--contents-edge);
  display: block;
  font-size: var(--font-size-midium);
}

.form-block > .hidden {
  display: none;
}

.form-block > .form-table {
  width: 100%;
  border-spacing: var(--margin);
  /* border-collapse: separate; */
}

.form-block > .form-table th,
.form-block > .form-table td {
  vertical-align: top;
}

.form-block > .form-table th {
  white-space: nowrap;
  text-align: right;
  padding: 0;
}

.form-block > .form-table th:after {
  /* content: ':'; */
}

.form-block > .form-table td {
  width: 100%;
  padding: 0;
}

.form-block > .form-table tr + tr > th,
.form-block > .form-table tr + tr > td {
  padding-top: var(--margin);
}

.form-block > .form-table td.form-after > div {
  white-space: nowrap;
  padding: calc(var(--edge-gap) + var(--padding)) var(--padding-horz);
}

.form-block > .form-table td > div.form-after {
  text-align: right;
  padding: 0 var(--padding-horz);
}

.form-block > .form-table td > span.form-row-separate {
  padding: calc(var(--edge-gap) + var(--padding)) var(--padding-horz);
}

.form-block td.block > .blockCaption > label,
.form-block td.block > .blockCaption > .form-after {
  padding: var(--padding) var(--padding-horz);
  display: inline-block;
}

.form-block td.block > .blockCaption > .form-after {
  float: right;
}

.editTableForm {
  padding: 1em;
  background: var(--contents-background);
  color: var(--contents-text);
  border: var(--contents-edge);
  box-shadow: var(--contents-shadow);
}

.editTableForm > table.editTable th,
.editTableForm > table.editTable td {
  padding: 0;
  white-space: nowrap;
}

.editTableForm > table.editTable > tr + tr > th,
.editTableForm > table.editTable > tr + tr > td {
  padding-top: var(--margin);
}

.editTableForm > table.editTable td.editTableField {
  white-space: inherit;
}

.editTableForm > table.editTable td.editTableField.expand {
  width: 100%;
}

.editTableForm > table.editTable td[data-suffix]:after {
  margin-left: var(--padding);
}

.editTableForm > table.editTable td.editTablePreState > div {
  padding: var(--padding) var(--padding-horz);
}

body > .tenkeyPanel {
  position: absolute;
  z-index: 999;
  background: var(--confirm-background);
  border: var(--confirm-edge);
  box-shadow: var(--shadow);
  margin-top: var(--gap);
  padding: var(--margin);
}
body > .tenkeyPanel > div + div {
  margin-top: var(--gap);
}
body > .tenkeyPanel > div > button {
  width: 3em;
  border-radius: var(--margin);
}
body > .tenkeyPanel:not(.hasDecimal) > div > button.zero {
  width: calc(6em + var(--gap));
}
body > .tenkeyPanel:not(.hasDecimal) > div > button.period {
  display: none;
}

body[screen-mode=MOBILE][screen-orientation=portrait] div.splitParent {
  overflow-x: hidden;
  overflow-y: auto;
}
body[screen-mode=MOBILE][screen-orientation=portrait] div.splitParent > div + div {
  margin-top: var(--margin);
}

body[screen-mode=MOBILE][screen-orientation=landscape] div.splitParent {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
body[screen-mode=MOBILE][screen-orientation=landscape] div.splitParent > div {
  display: inline-block;
}
body[screen-mode=MOBILE][screen-orientation=landscape] div.splitParent > div + div {
  margin-left: var(--margin);
}

@media print {
  #commonBar,
  #topBar,
  .shadow {
    display: none;
  }
  div.splitParent > div {
    position: relative !important;
    display: block !important;
    float: none !important;
    left: unset !important;
    top: unset !important;
    width: auto !important;
    height: auto !important;
    margin: 1em !important;
  }
  body,
  html,
  .parentBlock,
  .scrollShadow,
  .scrollShadowTarget {
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
  }
  span {
    -webkit-print-color-adjust: exact;
  }
}