/** ■ theme color 
 * blue: #3d65af 
 * green: #65af3d
 *
 * sidebar transition: .33s ease-out;
 */

@-ms-viewport {
	width: 1024px;
	height: 648px;
}
 
@font-face{
	font-family: 'suken';
	src: url("../font/A-SOTJMathCenturyStd-Regular.woff") format("woff"), url("../font/A-SOTJMathCenturyStd-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
 
html,
body {
  font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
  touch-action: false;
  overflow: hidden;
  margin: 0;
}

button {
  display: inline-block;
  border: none;
  text-decoration: none;
  appearance: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: background .25s ease-in-out;
  user-select: none;
  cursor: pointer;
}

button::-moz-focus-inner {
  border: 0;
}

#container {
  display: flex;
  position: absolute;
  flex-direction: row;
  top: 1%;
  right: .5%;
  width: 99vw;
  height: 98%;
  overflow: hidden;
}

#container.NowLoading * {
  transition: none !important;
}

#container * {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#jxgbox {
  display: block;
  position: absolute;
  flex-shrink: 0;
  right: 9.25rem;
  transition: right .33s ease-out;
}

#jxgbox.wider {
  right: 0px;
}

.sidebar {
  display: flex;
  position: absolute;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  right: 0;
  top: 0;
  width: 18.5rem;
  height: 99%;
  border: 3px solid #3d65af;
  background: #fff;
  box-shadow: 2px 0 4px rgba(42, 42, 42, .2);
  user-select: none;
  margin: 0;
  transition: right .33s ease-out;
  z-index: 10;
}

.sidebar.hidden {
  right: calc(-18.5rem - 3px);
}

.switcher {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  right: calc(100% + 2px);
  top: -3px;
  width: calc(3.5rem + 2px);
  height: 4rem;
  border: 0;
  border-radius: 4px 0 0 4px;
  background: #3d65af;
  box-shadow: 0px 2px 2px rgba(42, 42, 42, .2);
  transition: all .2s linear;
  cursor: pointer;
}

.whitespace {
  display: flex;
  position: absolute;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  left: calc(-4px - 3.5rem);
  top: -3px;
  width: 3.5rem;
  padding: 4.5rem 0 .75rem 2px;
  border-radius: 4px 0 0 9px;
  box-sizing: border-box;
  z-index: -10;
  background: #fff;
  box-shadow: -1px 3px 4px rgba(42, 42, 42, .2);
}

.whitespace > button {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  flex-shrink: 0;
  padding: 1px;
  margin: 6px 0;
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(119, 160, 199, 1);
  background: #fff;
  transition: all .13s ease-out;
  cursor: pointer;
}

.whitespace > button > img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.whitespace > button:active,
.whitespace > button.chosen {
  border: 2px solid #3d65af;
  background: rgba(216, 224, 239, .2);
  box-shadow: none;
  transform: translate(0, 1px);
}

.whitespace > button:not(.chosen):not(:active):hover {
  transform: translate(0, -1px);
  box-shadow: 0 2px 2px rgba(119, 160, 199, 1);
}

.whitespace > div {
  margin: 10px 0 0;
  transform: scale(1, .92);
  cursor: pointer;
}

.whitespace > div > svg {
  fill: #f2f2f2;
  stroke: #999;
  stroke-width: 0.75;
  transition: fill .34s ease;
}

.whitespace > div.chosen > svg {
  fill: #3d65af;
  stroke: #3d65af;
}

.icon {
  display: inline-block;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  stroke-width: 1px;
  user-select: none;
  pointer-events: none;
  opacity: 1;
}

.icon.switch {
  fill: #fff;
  stroke: rgba(96, 96, 96, .2);
  stroke-width: 1; 
  stroke-miterlimit:10;
  transform: rotate(180deg) scale(.96, .82);
}

.icon.eraser {
  width: 2rem;
  height: 2rem;
  fill: rgba(96, 96, 96, .42);
  stroke: rgba(96, 96, 96, .42);
  stroke-width: 1; 
  stroke-miterlimit: 10;
  transform: scale(.86);
}

.icon.remove {
  width: 2rem;
  height: 2rem;
  fill: rgba(96, 96, 96, .42);
  stroke: rgba(96, 96, 96, .42);
  stroke-width: 1; 
  stroke-miterlimit: 10;
  transform: scale(.6);
}

/* .selected .icon.eraser {
  fill: rgba(96, 96, 96, .5);
  stroke: rgba(96, 96, 96, .5);
}

.selected .icon.remove {
  fill: rgba(96, 96, 96, .5);
  stroke: rgba(96, 96, 96, .5);
} */

.hidden .icon.switch {
  transform: scale(.96, .82);
}

.group-header {
  flex: 0 0 auto;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding: calc(.4vh) .6em;
  width: calc(100% - 1.2em);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  background: #7793c7;
  box-shadow: 0 2px 3px rgba(42, 42, 42, 0.1)
}

.group-header:not(:first-of-type) {
  margin-top: 2px;
}

.header-toggle {
  cursor: pointer;
}

.header-toggle svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

.header-toggle svg:last-of-type {
  display: block;
}

.header-toggle svg:last-of-type {
  display: none;
}

.hidden > .header-toggle svg:first-of-type {
  display: none;
}

.hidden > .header-toggle svg:last-of-type {
  display: block;
}

.modest {
  background: #aaa;
}

.formulae-container {
  display: block;
  position: relative;
  flex: 1 3 calc(17.5rem + 12%);
  top: 0;
  left: 0;
  width: 100%;
  font: suken;
  font-size: 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  transition: flex .46s;
  padding: 0 0 0 4px;
  z-index: 10;
}

.hidden + .formulae-container {
  flex: 0 0 0;
}

.formulae-container > div {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  position: relative;
  width: calc(100% - 6px);
  height: calc(3.5rem + 2%);
  padding: 0 0 0 12px;
  margin: 3px 0;
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(42, 42, 42, 0.2);
  background: #fff;
  transition: .16s ease-in;
  overflow: hidden;
  cursor: pointer;
}

.formulae-container > div > .button {
  display: block;
  position: absolute;
  top: calc(50% - 1rem);
  right: 4px;
  width: 2rem;
  height: 2rem;
  opacity: 0
}

.formulae-container > .carrying > .button {
  opacity: 1
}

.formulae-container > .carrying > .button > .icon {
  transition: .16s ease-in;
}

.formulae-container > :not(.selected):hover {
  background: #fff;
  transform: translate(0, -.9px);
  box-shadow: 0px 2px 3.4px rgba(42, 42, 42, 0.2);
}

.formulae-container > .selected {
  border: 2px solid rgba(61, 101, 175, 0.6);
  background: #fff;
}

.formulae-container > .selected > .button > .icon {
  fill: rgba(219, 62, 83, .82);
  stroke: rgba(219, 62, 83, .92);
}

.formulae-container > .thinner {
  display: none;
  height: 0;
  font-size: 1.25rem;
  padding: 0;
  transition: width 0s height .12s;
}

.formulae-container > .thinner.carrying {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: calc(86% - 6px);
  height: calc(2.25rem + 2%);
  animation: slidein .72s cubic-bezier(.215, .61, .355, 1) .18s;
  animation-fill-mode: backwards;
  margin-left: 14%;
}

.formulae-container > .thinner .button {
  display: block;
  position: absolute;
  top: -.1rem;
  right: .25rem;
  width: 2rem;
  height: 2rem;
  z-index: 100;
}

.color-display {
  display: block;
  position: absolute;
  left: -6.6%;
  top: 0;
  width: 22%;
  height: 100%;
  transform: skew(-12deg);
  box-shadow: 1px 0px 2px rgba(42, 42, 42, .2)
}

.formulae-container > .thinner > .color-display {
  left: 0;
  width: 4.2%;
  transform: none;
  pointer-events: none;
}

.hidden > .color-display {
  opacity: 0.1;
  box-shadow: 1px 0px 2px rgba(42, 42, 42, 0);
}

.formulae-container > .selected.gray {
  border: 2px solid rgba(99, 99, 99, 1);
}

.gray > .color-display {
  background: linear-gradient(-130deg, rgba(109, 109, 109, 1) 10%, rgba(99, 99, 99, 1) 100%);
}

.formulae-container > .selected.red {
  border: 2px solid rgba(235, 97, 31, 1);
}

.red > .color-display {
  background: linear-gradient(-130deg, rgba(245, 107, 41, 1) 10%, rgba(235, 97, 31, 1) 100%);
}

.formulae-container > .selected.blue {
  border: 2px solid rgba(0, 110, 188, 1);
}

.blue > .color-display {
  background: linear-gradient(-130deg, rgba(10, 120, 198, 1) 10%, rgba(0, 110, 188, 1) 100%);
}

.formulae-container > .selected.green {
  border: 2px solid rgba(3, 174, 122, 1);
}

.green > .color-display {
  background: linear-gradient(-130deg, rgba(13, 184, 132, 1) 10%, rgba(3, 174, 122, 1) 100%);
}

.formulae-container > .selected.purple {
  border: 2px solid rgba(153, 0, 153, 1);
}

.purple > .color-display {
  background: linear-gradient(-130deg, rgba(163, 0, 163, 1) 10%, rgba(153, 0, 153, 1) 100%);
}

.detail-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  flex: 0 1 24rem;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  width: calc(100% - 4px * 2);
  min-height: 17rem;
  overflow: hidden;
  padding: 2px;
  margin: 4px 4px 2.25rem;
  transition: all .24s ease-in;
  transform-origin: 0 0;
}

.off:not(.float-container) {
  display: none;
}

.hidden + .detail-container {
  flex: 0 0 0;
  padding: 0;
  margin: 4px 4px 2.25rem;
  min-height: 0px;
}

.tab-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
}

.tab-container > div {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: 2.2em;
  font-weight: 700;
  background: #eee;
  border: 2.2px solid #ddd;
  border-bottom: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}

.tab-container > :first-of-type {
  margin-right: -.2em;
}

.tab-container > :last-of-type {
  margin-left: -.2em;
}

.tab-container > :not(.selected) {
  margin-bottom: -.2em;
}

.tab-container > .selected {
  background: #fff;
  margin-left: 0;
  margin-right: 0;
  cursor: default;
  z-index: 20;
}

.tab-container > .disabled {
  background: #aaa;
  pointer-events: none;
  cursor: default;
}

.detail-container > :not(:first-child):not(.float-container) {
  border: 2.2px solid #ddd;
  border-top: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.type-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  flex-shrink: 1;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: .4em;
  overflow: hidden;
  transition: height .16s ease-in;
}

.type-container.off {
  display: none;
}

.type-container > button {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: no-wrap;
  -ms-flex-wrap: no-wrap;
  flex-wrap: no-wrap;
  position: relative;
  justify-content: space-around;
  -ms-align-items: center;
  align-items: center;
  width: calc(100% / 2 - 1.25rem);
  height: calc(100% / 3 - .4em * 2);
  padding: 2px;
  margin: .4em;
  font-size: 1rem;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(119, 160, 199, 1);
  transition: all .13s ease-out;
  background: #fff;
  cursor: pointer;
}

.type-container > .japanese {
  font-size: 1.5rem;
}

.type-container > button:not(.selected):hover {
  transform: translate(0, -1px);
  box-shadow: 0 2px 2px rgba(119, 160, 199, 1);
}

.type-container > .selected {
  border: 2px solid #3d65af;
  background: rgba(216, 224, 239, .2);
  box-shadow: none;
  transform: translate(0, 1px);
}

.numerics-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  flex-shrink: 1;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;  
  padding: .2em 0;
  transition: height .16s ease-in;
}

.domain-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  flex-shrink: 1;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;  
  position: relative;
  padding: .2em 0;
  transition: height .16s ease-in;
}

.hidden + .numerics-container {
  height: 0;
  min-height: 0px;
}

.formula-detail {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  flex-shrink: 0;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: calc(4.5em + 2%);
  padding: 0 0 -.2em;
  margin: 1.25em 0 .25em .22em;
  font-size: 1.25rem;
}

.input {
  width: 2.6em;
  height: 1.2em;
  padding: .12em .16em;
  margin: 0 .34em 0 .14em;
  font-size: 1.375rem;
  text-align: right;
  border: 1.9px solid #999;
  border-radius: 2px;
}

.input.vwide {
  height: 2.4em;
}

.input.focus {
  border: 1.9px solid #74b750;
  z-index: 20;
}

.input > div:not(.box-balloon) {
  display: flex;
  position: relative;
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}

.input .fraq {
  width: 100%;
}

.box-balloon {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: -1.5em;
  left: 75%;
  height: 1.5em;
  border-radius: 50%;
  padding: 0 .5em;
  margin: 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(42, 42, 42, .3);
  overflow: visible;
  font-size: 1rem;
}

.box-balloon::before {
  content: '';
  display: block;
  position: absolute;
  left: -5px;
  bottom: -5px;
  border-top: 8.75px solid #fff;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transform: rotate(45deg);
  filter: drop-shadow(0 2px 3px rgba(42, 42, 42, .6));
}

.box-balloon .fraq {
  font-size: .75em;
}

.vwide .negative > .fraq {
  margin: 0 0 0 .2em;
}

.vwide .negative::before {
  margin: .18em 0 0;
}

.vwide .fraq > *:first-child {
  padding: 0 .2em .1em;
  margin: 0;
}

.vwide .fraq > *:last-child {
  margin: 0;
}

.input > button {
  display: block;
  position: absolute;
  width: 100%;
  height: 1.75rem;
  background-color: transparent;
}

.input > .default {
  color: #cccccc;
}

.input svg {
  stroke: #6aa64a;
  stroke-width: 2;
  fill: #d0e7c4;
  width: 1.875rem;
  height: 1.875rem;
}

.input > .increment {
  top: -2rem;
}

.input > .increment:active {
  top: calc(-2rem - 3px);
}

.input > .decrement {
  bottom: -1.75rem;
}

.input > .decrement:active {
  bottom: calc(-1.75rem - 3px);
}

.focus .caret {
  width: .1em;
  height: 1em;
  border: 0;
  border-right: .1em solid #74b750;
  animation: blinking 1.6s cubic-bezier(.215, .61, .355, 1) 0.65s forwards infinite;
}

.fraq .input {
  margin: -.24em 0 0 .24em;
}

.fraq .input > button {
  left: calc(3.5rem + 3.25em / 2);
}

.fraq .input > .increment {
  width: auto;
  top: -60%;
}

.fraq .input > .increment:active {
  top: calc(-60% - 3px);
}

.fraq .input > .decrement {
  width: auto;
  bottom: -20%;
}

.fraq .input > .decrement:active {
  bottom: calc(-20% - 3px);
}

.fraq .input.vwide {
  margin: -1.4em 0 0 .24em;
}

.fraq .input.vwide  > .increment {
  top: -2.9em;
}

.fraq .input.vwide  > .increment:active {
  top: calc(-2.9em - 3px);
}

.fraq .input.vwide  > .decrement {
  bottom: 0;
}

.fraq .input.vwide  > .decrement:active {
  bottom: -3px;
}

.compact .input {
  width: 2.7em;
  margin: 0 .22em 0 .14em;
  font-size: 1.125rem;
}

.toggle-switch {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 1.18em;
  height: 1.18em;
  border: 1.2px solid #999;
  border-radius: .12em;
  box-shadow: 0 .5px .5px rgba(119, 160, 199, 1);
  cursor: pointer;
}

.toggle-switch.op.left {
  margin: 0 .36em 0 .12em;
}

.toggle-switch.op.right {
  margin: 0 .12em 0 .36em;
}

.toggle-switch:first-of-type {
  margin: 0 .24em 0 0;
}

.toggle-switch:last-of-type {
  margin: 0 0 0 .24em;
}

.formula-coefficient {
  margin: 0 .38em;
}

.formula-coefficient > button {
  margin-left: 2.76em;
  background: transparent;
}

.crementer-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  -ms-align-items: start;
  align-items: start;
  margin: .2em 0 0;
}

.small-header {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  font-weight: 400;
  font-size: 1.125rem;
  height: 1.2em;
  margin: .4em 1em .2em;
}

.switcher-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  border: 1.2px solid #d0d0d0;
  border-radius: 2px;
}

.toggle-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  width: calc(100% - 3.2em);
  margin: 1.8em 1em 1em 0;
}

.amtpad {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  background: #fff;
  font-size: 1.25rem;
  font-weight: 400;
  transition: all .3s ease-out;
  cursor: pointer;
  width: 3.1rem;
  height: 1.8rem;
}

.rngpad {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  background: #fff;
  font-size: 1.25rem;
  font-weight: 400;
  transition: all .3s ease-out;
  cursor: pointer;
  width: 5.25rem;
  height: 1.875rem;
}

.amtpad.pressed,
.rngpad.pressed {
  color: #fff;
  background: #74b750;
}

.rngpad > span {
  letter-spacing: .1em;
}

.trace-holder {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  height: 4.4em;
  margin: .6em 0 0;
}

.trace-holder > * {
  margin: 0 1.2em;
}

.float-container {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
  opacity: 1;
  transition: .23s ease-in;
  pointer-events: auto;
}

.float-container.off {
  opacity: 0;
  pointer-events: none;
}

.float-container > .curtain {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: calc(100% - 300px - 6px);
  height: 100%;
  opacity: 1;
  transition: opacity .21s;
  pointer-events: auto;
  z-index: 20;
}

.float-container.off > .curtain {
  opacity: 0;
  pointer-events: none;
}

.float-header {
  display: block;
  position: relative;
  font-weight: 700;
  width: calc(100% - 1.2em);
  padding: .06em .6em;
  margin: 0 0 .8em;
  color: #fff;
  text-align: left;
  background: #7793c7;
  box-shadow: 0 1px 1px rgba(32, 32, 32, 0.1);
}

.domain-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  flex-shrink: 1;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  right: 0;
  bottom: 0;
  width: calc(300px - 8px);
  height: calc(346px - 4px);
  margin: 0;
  padding: 0 0 .2em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #7793c7;
  border-radius: 3px;
  overflow: hidden;  
  box-shadow: 0 1px 3px rgba(32, 32, 32, 0.2);
  z-index: 20;
}

.domain-container > .switcher-container {
  width: 254px;
}

.dmnpad {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  background: #fff;
  font-size: 1rem;
  font-weight: 400;
  transition: all .3s ease-out;
  cursor: pointer;
  width: 100%;
}

.dmnpad.pressed {
  color: #fff;
  background: #7793c7;
}

.formula-pad {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  flex-shrink: 0;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  -ms-align-items: start;
  align-items: start;
  padding: 2px;
  font-size: 1.5rem;
  border: 2px solid #fff;
  background: #fff;
  overflow: hidden;
  z-index: 30;
}

.formula-pad > button,
.formula-pad > div {
  width: 3.5rem;
  height: 2.625rem;
  margin: .2rem .1rem;
}

.formula-pad.float {
  width: calc(18.5rem - 6px);
  padding: 0 0 0 2px;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, .16);
}

.numpad {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  border: 1px solid rgba(119, 147, 199, 0.3);
  border-radius: 6px;
  background: #fff;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 400;
  transition: all .23s ease-out;
  cursor: pointer;
}

.numpad.operator {
  width: 5.5rem;
  background: rgba(144, 144, 144, 1);
  border: 2px solid rgba(144, 144, 144, 1);
  margin-left: 11px;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.numpad.operation {
  width: 5.5rem;
  border: 2px solid rgba(76, 162, 193, 1);
  background: rgba(76, 162, 193, 1);
  margin-left: 11px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.numpad.operation.special {
  border: 2px solid rgba(91, 186, 61, 1);
  background: rgba(91, 186, 61, 1);
}

.numpad.operation.negative {
  border: 2px solid rgba(230, 112, 147, 1);
  background: rgba(230, 112, 147, 1);
}

.numpad:not(.pressed):hover {
  transform: translate(0, -1.2px);
  box-shadow: 0 1px 2px rgba(119, 160, 199, .8);
}

.numpad:not(.pressed):active {
  transform: none;
  box-shadow: none;
}

.numpad.pressed {
  color: #fff;
  background: #65af3d;
  margin-bottom: .2px;
  box-shadow: 0 1px 2px rgba(61, 101, 175, 0.8);
}

.numpad > .icon {
  fill: #444;
  stroke-width: 0;
  width: 1.375rem;
  height: 1.5rem;
}

.numpad > .icon.num {
  height: 1.25rem;
}

.numpad > .icon.fraq {
  width: 1.75rem;
  height: 1.5rem;
}

.operation > .icon {
  width: 1.75rem;
  height: 1.375rem;
}

.special > .icon {
  width: 1.5rem;
  height: 1.25rem;
}

.formula-features {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-shrink: 1;
  position: relative;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: calc(100% - 2rem);
  height: 100%;
  margin: .75rem 0;
}

.formula-features > button {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  color: #333;
  background: #fff;
  box-shadow: 0 1px 2px rgba(119, 160, 199, 1);
  font-size: 1rem;
  font-weight: 400;
  padding: 0;
  margin: .2em;
  transition: all .23s ease-out;
  cursor: pointer;
}

.formula-features > button:not(.pressed):hover {
  box-shadow: 0 2px 2px rgba(119, 160, 199, 1);
  transform: translate(0, -1px);
}

.formula-features > button.pressed {
  color: #fff;
  background: rgba(61, 101, 175, 0.8);
  box-shadow: 0 1px 1px rgba(61, 101, 175, 0.8);
}

.toggle-switch > input {
  display: none;
}

.toggle-switch > input:checked ~ label {
  background: #a2cf8a;
}

.toggle-switch > input:checked ~ label:after {
  left: 20px;
  background: #65af3d;
}

.toggle-switch > input:disable ~ label {
  background: #d5d5d5;
  pointer-events: none;
}

.toggle-switch > input:disable ~ label:after {
  background: #bcbdbc;
}

.toggle-switch > label {
  position: relative;
  display: block;
  height: 20px;
  width: 44px;
  background: #898989;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-switch > label:after {
  content: '';
  display: block;
  position: absolute;
  left: -2px;
  top: -3px;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.toggle-switch > label:active:after {
  transform: scale(1.15, 0.85);
}

.bottombar {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  flex-shrink: 0;
  width: 100%;
  height: 2rem;
  padding: 4px 0 0 6px;
  box-sizing: border-box;
  background: #fff;
  z-index: 5;
  box-shadow: 0 -2px 2px rgba(42, 42, 42, 0.1)
}

.watermark {
  display: inline-block;
  position: relative;
  width: 5rem;
}

.table-window {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: absolute;
  flex-shrink: 1;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  right: 18.5rem;
  bottom: 4px;
  width: 36rem;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #3d65af;
  border-radius: 3px;
  overflow: hidden;  
  box-shadow: 0 1px 3px rgba(32, 32, 32, 0.2);
  transition: opacity .23s ease-in;
  z-index: 50;
}

.table-header {
  display: block;
  position: relative;
  font-weight: 700;
  width: 100%;
  padding: .12em .6em;
  margin: 0;
  color: #fff;
  text-align: left;
  background: #3d65af;
  box-shadow: 0 1px 1px rgba(32, 32, 32, 0.1);
  z-index: 10;
}

.table-window.red {
  border: 2px solid #db773e;
}

.table-window.red .table-header {
  background: #db773e;
}

.table-window.blue {
  border: 2px solid #3282b9;
}

.table-window.blue .table-header {
  background: #3282b9;
}

.table-window.green {
  border: 2px solid #32a032;
}

.table-window.green .table-header {
  background: #32a032;
}

.table-window.purple {
  border: 2px solid #ca66a1;
}

.table-window.purple .table-header {
  background: #ca66a1;
}

.table-window.gray {
  border: 2px solid #858585;
}

.table-window.gray .table-header {
  background: #858585;
}

.table-data-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  -ms-align-items: start;
  align-items: start;
  width: 100%;
  height: 100%;
  font-size: .875rem;
}

.table-legend-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: absolute;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: start;
  -ms-align-items: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 3.8em;
  height: calc(3.8em * 2 + 6px);
  background: rgba(255, 255, 255, .9);
  box-shadow: 2px 0 0px rgba(42, 42, 42, .4);
  z-index: 10;
}

.table-legend-container > div {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: 3.8em;
  margin: 0;
  padding: 0;
  border-bottom: 1.4px solid rgba(42, 42, 42, .6);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.5rem;
}

.table-scroll-container {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-scroll-container > table {
  position: relative;
  border-spacing: 0;
  border-collapse: collapse;
  white-space: nowrap;
  margin-left: calc(3.8em + 3px);
}

.table-scroll-container > table > tr {
  margin: 0 2px 0 0;
}

.table-scroll-container > table > tr > td {
  position: relative;
  width: 3.8em;
  min-width: 3.8em;
  height: 3.8em;
  margin: 0;
  border: 1.4px solid rgba(42, 42, 42, .6);
}

.table-scroll-container > table > tr > .focus {
  border: 1.9px solid #65af3d;
}

.table-scroll-container > table > tr:first-of-type > td {
  border-top: none;
}

.table-scroll-container > table > tr > td:first-child {
  margin: 0 0 0 2px;
}

.table-scroll-container > .d-table {
  pointer-events: none;
}

.table-unit-value.math {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  text-align: center;
  cursor: pointer;
}

.values .table-unit-value > div {
  height: 100%;
}

.values .table-unit-value.fraq {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: auto;
}

.values .table-unit-value.fraq > * {
  flex-shrink: 1;
  width: auto;
  height: 1em;
  text-align: center;
}

.values .table-unit-value.fraq > *:first-child {
  display: block;
  position: relative;
  padding: 0 .2em .15em;
  margin: -.12em 0 0;
  border-bottom: 1px solid #333;
}

.values .table-unit-value.fraq > *:last-child {
  display: block;
  position: relative;
  margin: -.12em 0 -.1em;
}

.onfile {
  display: flex;
  position: absolute;
  flex-direction: row;
  justify-content: flex-last;
  align-items: center;
  right: 2px;
  top: 0;
  height: calc(100% - 1px);
}

.onfile > button {
  display: block;
  position: relative;
  padding: .2rem 0;
  width: 4.5rem;
  margin: .2rem;
  color: #333;
  background: #fafafa;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  font-size: .875rem;
  outline: none;
  cursor: pointer;
  text-align: center;
}

.onfile > button:hover {
  border-color: #009dff;
}

.onfile > .disable {
  border-color: #cccccc;
  background-color: #f0f0f0;
  color: #cccccc;
  cursor: default;
  pointer-events: none;
}

#setting > svg,
#flowmanager svg,
.feature > svg {
  fill: #666;
  stroke: #666;
  stroke-width: 1; 
  stroke-miterlimit:10;
  margin: 0;
}

.unable {
  opacity: .2;
  pointer-events: none;
}

#undo > svg {
  transform: scale(1, 1)
}

#redo > svg {
  transform: scale(-1, 1);
}

.configure {
  display: block;
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  padding: 10px;
}

.configure svg {
  width: 28px;
  height: 28px;
}

.setting {
  position: absolute;
  top: 2px;
  left: 2px;
}

.setting-container {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
  align-items: space-between;
  top: -2px;
  left: -2px;
  border-radius: 3px;
  padding: .4em 0;
  background: #fff;
  opacity: 0;
  font-size: 1em;
  transition: transform .24s, opacity .24s;
  transform: scale(.8);
  transform-origin: top left;
  box-shadow: 0 3px 4px rgba(42, 42, 42, .24);
  pointer-events: none;
}

#setting.doing > .setting-container {
  transform: scale(1);
  opacity: 1;
  z-index: 10;
  cursor: initial;
  pointer-events: auto;
}

#setting > .curtain {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

#setting.doing > .curtain {
  display: block; 
  cursor: default;
}

.setting-block {
  width: 15.2em;
  padding: 0 .6em;
}

.setting-block .title {
  width: 100%;
  color: #B7B7B7;
  font-weight: 700;
  font-size: 1.2em;
  margin: .2em .2em 0;
}

.setting-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: .8em 0 .5em;
  margin-bottom: .8em;
  border-top: 4px solid #B7B7B7;
  box-sizing: border-box;
}

.setting-area > * {
  margin: .6em 1.5em;
}

.check-box {
  position:relative;
  padding-left: 1.4em;
  color: #717171;
  font-weight: 700;
  cursor: pointer;
}

.check-box > p {
  margin: 0 0 0 .5em;
}

.check-box::before{
  content: "";
  display: block;
  position: absolute;
  top: .25em;
  left: .25em;
  width: .8em;
  height: .8em;
  border: 2px solid #666;
  border-radius: 4px;
}

.check-box.chosen::after {
  content: "";
  display: block;
  position: absolute;
  top: -.25em;
  left: .4em;
  width: .5em;
  height: 1em;
  transform: rotate(40deg);
  border-bottom: 4px solid #65AF3D;
  border-right: 4px solid #65AF3D;
}

.inner-settings {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 70%;
  margin: 0 auto;
  opacity: .3;
  pointer-events: none;
  transition: opacity .12s ease-in;
}

.feature.chosen + .inner-settings {
  opacity: 1;
  pointer-events: inherit;
}

.feature.disabled {
  display: none;
}

.inner-settings > div {
  margin: .2em 1em;
}

.blue-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  color: #5E81C1;
  background-color: #fff;
  border-radius: 35px;
  border: 3px solid #5E81C1;
  font-size: 1.1em;
  font-weight: 700;
  padding: 0.3em;
  margin: 0 auto;
  outline: none;
  cursor: pointer;
}

.text-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  appearance: none;
  background: none;
  margin: .8em auto .4em;
  color: #5E81C1;
  font-size: 1.05em;
  font-weight: 700;
  outline: none;
  cursor: pointer;
}

.text-button.disabled {
  display: none;
}

.zoom-container {
  display: flex; 
  position: absolute;
  flex-direction: row;
  bottom: 2px;
  left: 2px;
}

.home-button {
  display: none;
  pointer-events: none;
}

.home-button.activated {
  display: block;
  animation: vanish 500ms cubic-bezier(.215, .61, .355, 1) alternate forwards;  
 animation-fill-mode: forwards;
  pointer-events: auto;
}

.home-button .icon {
  transform: scale(.9);
}

#magnify.onTab {
  display: none;
}

#magnify > div {
  position: absolute;
  top: 0;
  margin: 0 -6px 0 0;
  z-index: 10;
  pointer-events: none;
}

#magnify::before {
  content: '';
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

#magnify.chosen > div {
  pointer-events: auto;
}

#magnify.chosen::before {
  display: block;
  cursor: auto;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 26px;
  background: transparent;
  outline: none;
  transform: scale(1, 0) rotate(270deg);
  transform-origin: top left;
  transition: opacity .2s, transform .14s;
  opacity: .96;
}

.chosen .slider {
  transform: scale(1, 1) rotate(270deg);
}

.slider::-webkit-slider-runnable-track {
  width: 140px;
  height: 6px;
  background: #ddd;
  outline: none;
  border: none;
  overflow: visible;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  background: #4da8e5;
  border-radius: 14px;
  top: -8px;
  cursor: pointer;
}

.slider::-moz-range-track {
  width: 140px;
  height: 6px;
  background: #ddd;
  outline: none;
  border: none;
  overflow: visible;
}

.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4da8e5;
  border-radius: 14px;
  cursor: pointer; 
}

.slider::-ms-track {
  width: 140px;
  height: 6px;
  background: transparent;
  outline: none;
  border: none;
}

.slider::-ms-fill-lower,
.slider::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

.slider::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #4da8e5;
  border-radius: 14px;
}

.modal {
  display: flex;
  position: fixed;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  flex: 1 0 0%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100
}

.modal.on {
  opacity: 1;
  cursor: auto;
  pointer-events: auto;
}

.modal > .pane {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(42, 42, 42, 0.4);
  opacity: 0;
  transform: scale(1.02, 1.04);
  transition: opacity .20s, transform .18s ease-out .06s;
  pointer-events: none;
  cursor: default;
}

.modal.on > .pane {
  transform: scale(1.0, 1.0);
  pointer-events: auto;
  opacity: 1;
}

.modal > .curtain {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(43, 46, 56, 0.8);
  opacity: 0;
  transition: opacity .21s;
  pointer-events: none;
  z-index: -20;
}

.modal.on > .curtain {
  opacity: 1;
  pointer-events: auto;
}

.close {
  display: block;
  position: absolute;
  top: 10px;
  left: calc(100% - 20px - 10px);
  width: 20px;
  height: 20px;
  fill: #666;
  stroke: #666;
  stroke-width: 1; 
  stroke-miterlimit: 10;
  margin: 0;
  cursor: pointer;
  pointer-events: none; 
}

.on .close {
  pointer-events: auto; 
}

#ensure > .pane {
  width: 40%;
  min-width: 494px;
  max-width: 634px;
  height: 32%;
  min-height: 201px;
  max-height: 281px;
}

#ensure > .pane > h2 {
  margin: -.5em 0 .5em;
}

#ensure > .pane > p {
  font-size: 1rem;
  margin: -2.5em 0 -2em;
}

#ensure > .pane > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.data > .pane {
  width: 98%;
  max-width: 780px;
  height: 98%;
  max-height: 480px;
  margin: auto;
}

.dataarea {
  display: block;
  position: relative;
  width: 90%;
  height: 68%;
  border: 3px solid #f0f0f0;
  margin: 0 0 2em 0;
  overflow: hidden;
}

#saver .dataarea {
  height: 56%;
}

.dataarea > .load-tab-bar{
  display: flex;
  position: relative;
  top: 0;
  width: 100%;
  height: 2.6em;
}

.dataarea > .load-tab-bar > div {
  display: flex;
  position: relative;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  width: 100%;
  color: #000;
  background: #f0f0f0;
  padding: .5em .15em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
  cursor: pointer;
}

.dataarea > .load-tab-bar > :first-child {
  letter-spacing: -.01em;
}

.dataarea > .load-tab-bar > .selected {
  color: #000;
  margin: 0;
  background: #fff;
  font-weight: bold;
}
 
#datatools {
  display: none;
  position: absolute;
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
  width: calc(100% - 4em);
  padding: 1.9em 2em 0.8em;
}

/* temporary disable */
#datatools.on {
  display: none;
}

#datatools > div {
  margin-left: 10px;
  cursor: pointer;
}

#datatools svg {
  fill: #f2f2f2;
  stroke: #bbb;
  stroke-width: 1; 
  stroke-miterlimit:10;
  transition: all .2s; 
  transform: scale(.9, .9);
}

.dataarea > .scroll-wrapper{
  display: block;
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 2.6em);
}

.dataarea ul {
  display: flex;
  position: absolute;
  flex-wrap: wrap;
  justify-content: flex-start;
  -ms-align-items: flex-start;
  align-items: flex-start;
  width: 96%;
  margin: 2rem 1rem;
  padding: 0;
  list-style: none;
}

.dataarea li {
  display: inline-block; 
  position: relative;
  border: 1px solid #f0f0f0;
  padding: 0px .6rem;
  width: 5.5rem;
  height: 6rem;
  margin: 0 0 1rem 1rem;
  font-size: .85rem;
  line-height: 6rem;
  color: #888;
  font-weight: 700;
  border: 2px solid #f0f0f0;
  background: #f0f0f0;
  text-align: center;
  transition: all .12s linear;
}

#savearea li {
  background: #f6f6f6;
  cursor: pointer;
}

.dataarea li.saved {
  color: #333;
  background: #fff;
  border: 2px solid #f0f0f0;
  cursor: pointer;
  white-space: pre-line;
  overflow: hidden;
}

#savearea li.saved {
  background: #fff;
  box-shadow: none;
}

.dataarea li.saved:hover {
  margin-top: -2px;
  box-shadow: 0 2px 2px rgba(42, 42, 42, 0.2);
}

#savearea li.selected {
  color: #3d65af;
  border: 2px solid #3d659f;
  background: linear-gradient(135deg, #edeff5 0%, #c2d6fb 100%);
}

.dataarea li > .name {
  margin-top: 0.6em;
  line-height: 1.5rem;
  font-weight: 700;
}

.dataarea li > .date {
  margin-top: -0.5em;
  line-height: 1.5rem;
  font-weight: 400
}

.ensurebtn {
  display: block;
  color: #fff;
  width: 8em;
  text-align: center;
  padding: 1em 0;
  margin: 0 .2rem;
  transition: background .2s;
  pointer-events: none; 
}

#saver .ensurebtn {
  margin: -1em 0 1.6em;
  font-size: 1rem;
}

.on .ensurebtn {
  cursor: pointer;
  pointer-events: auto; 
}

.yes {
  background: #3daf7e;
}

  .yes:hover {
    background: #42bd88
  }

.no {
  background: #ddd;
}

  .no:hover {
    background: #e0e0e0
  }
  
@media screen and (max-width: 764px) {
  #loader > .pane {
    width: 98%;
    height: 90%;
  }
  
  #dataarea {
    width: 96%;
    height: 90%;
    border: 3px solid #f0f0f0;
    margin: 0 0 2em 0;
  }
}
  
#loading {
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: calc(100% - 4em);
  height: calc(100% - 4em);
  color: #fff;
  padding: 2em;
  background: rgba(32, 32, 32, 0.6);
  z-index: 100;
}

#loading > div{
  display: inline-block;
  position: relative;
  width: 15px;
  height: 30px;
}

#loading > div::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #0AB79D;
  transform-origin: 50%;
  animation: bounce 500ms alternate infinite ease;  
}

#loading > p {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin: 0 1em;
}

#loading.active {
  display: flex;
}
  
@media all and (-ms-high-contrast:none) {
  .modal.data { 
    justify-content: flex-start;
  }
  
  *::-ms-backdrop, 
  .modal.data { 
    justify-content: flex-start;
  }
}

/* Math class */
.math {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-align-items: center;
  align-items: center;
  font-family: suken;
  font-size: 1.125rem;
}

.formulae-container .math {
  font-size: 1.5rem;
}

.formulae-container .math.compact {
  font-size: 1.25rem;
}

.formulae-container .math.undefined > * {
  display: none;
}

.formulae-container .math.undefined::before {
  content: '';
  position: relative;
  height: 1.4px;
  width: 2.2em;
  background: #999;
}

.math > * {
  display: block;
  position: relative;
  margin-top: -.08em;
}

.math .fraq {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex: 0 1 auto;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}

.math .fraq.small {
  margin-left: .2em;
}

.formulae-container .fraq {
  margin: 0 .3em;
}

.formulae-container span {
  margin: 0 .06em;
}

.math .fraq > * {
  flex-shrink: 1;
  width: 94%;
  height: 1em;
  text-align: center;
}

.math .fraq > *:first-child {
  display: block;
  position: relative;
  padding: 0 .2em .18em;
  margin: 0;
  border-bottom: 1px solid #333;
}

.math .fraq.small > *:first-child {
  padding: 0 .2em .1em;
}

.math .fraq > *:last-child {
  display: block;
  position: relative;
  padding: -.02em .2em 0;
  margin: 0;
}

.math .fraq.small > *:last-child {
  margin: 0;
}

.math .sq {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin: 0;
}

.math .sq::after {
  content: '2';
  display: block;
  font-size: .75rem;
  right: -.5em;
  top: -.2em;
}

.math .valuable,
.math .negative {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}

.math.negative::before,
.math .negative::before {
  content: '';
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  position: relative;
  width: 13.5pt;
  height: 3em;
  margin-right: .1em;
  background: linear-gradient(0deg, #fff 50%, #000 51%, #fff 52%);
  font-size: 1.5rem;
}

.math > .op {
  margin: 0 .1em;
}

.math.huge {
  font-size: 1.875rem;
}

.math.huge .sq::after {
  font-size: 1.25rem;
}

.math.huge > .op {
  font-size: 1.75rem;
}

.math.compact .shape {
  margin: .1em -.1em 0;
  font-weight: 400;
  font-size: 1rem;
}

.math .free {
  display: none;
}

.formula-detail .math.compact {
  font-size: 1.25rem;
}

.formula-detail .math.compact .sq::after {
  font-size: .75rem;
}

.formula-detail .math.compact > .op {
  font-size: 1rem;
}

.thinner > .math .fraq > * {
  font-size: 1rem;
}

.lhs, .rhs {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}

.lhs .op,
.rhs .op {
  margin-bottom: -.1em;
}

/* JXG Class */


.quit {
  display: block;
  position: absolute;
  width: 38px;
  height: 38px;
  margin: 0 0 -20px -30px;
  font-size: 1.125rem;
  outline: none;
  cursor: pointer;
  text-align: center;
  transition: 0.4s;
}

.quit > button {
  border: #ccc;
  border-radius: 8px;
  background: #BD4277;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}

.quitsvg {
  display: block;
  position: relative;
  padding: 8px 0;
  width: 22px;
  height: 22px;
  fill: #fff;
  stroke: #fff;
  stroke-width: 1; 
  stroke-miterlimit: 10;
  margin: auto;
  cursor: pointer;
  pointer-events: none; 
  transform: scale(1.1);
}

.ticksLabel {
  font-family: suken !important;
  font-weight: 700 !important;
  color: #222 !important;
  filter:dropshadow(color=#fff, offX= 0, offY=-1)
    dropshadow(color=#fff, offX= 1, offY= 0)
    dropshadow(color=#fff, offX= 0, offY= 1)
    dropshadow(color=#fff, offX=-1, offY= 0);

  text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px,
    #fff 1px -1px 0px, #fff -1px -1px 0px;
  font-size: 1.125rem !important;
  transform: translate(0, .16em)
}

.point,
.guide,
.info {  
  font-family: suken !important;
  font-weight: 700 !important;
  color: #222 !important;
  filter:dropshadow(color=#fff, offX= 0, offY=-1)
    dropshadow(color=#fff, offX= 1, offY= 0)
    dropshadow(color=#fff, offX= 0, offY= 1)
    dropshadow(color=#fff, offX=-1, offY= 0);

  text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px,
    #fff 1px -1px 0px, #fff -1px -1px 0px;
  font-size: 1.25rem !important;
}

.point {
  font-size: 1rem !important;
}

.point:first-letter {
  font-size: 1.25rem !important;
}

.dependentee {
  color: #444 !important;
}

.guide {
  font-size: 1.25rem !important;
  padding: 1px !important;
}

.info {
  margin-top: 1.1em;
  margin-left: -1.3em;
}

.info.top {
  margin-top: -1.1em;
}

.info.left {
  margin-left: -1.3em;
}

.info.right {
  margin-left: 1.3em;
}

.info.bottom {
  margin-top: 1.1em;
}

@keyframes blinking {
  50% {
    border-color: transparent;
  },
}

@keyframes slidein {
  0% {
    opacity: 0;
    transform: translate(102%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes vanish {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounce {
  0% {
    top: 20px;
    height: 5px;
    border-radius: 60px 60px 30px 30px;
    transform: scaleX(1.8);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: -4px;
  }
}

/* using em to specify the size because iPhone is always semi-zooming the content */
@media screen and (max-height: 32em) {
  .setting-container {
    flex-direction: row;
  }
}

@media only screen and (max-width: 1023px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (max-height: 575px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (max-width: 839px) {
  html {
    font-size: 12px;
  }
}

@media only screen and (max-height: 479px) {
  html {
    font-size: 12px;
  }
}

@media only screen and (max-width: 600px) {
  html {
    font-size: 10px;
  }
}

@media only screen and (max-height: 399px) {
  html {
    font-size: 10px;
  }
}

@media only screen and (max-height: 319px) {
  html {
    font-size: 9px;
  }
}