.calculator {
  position: relative;
}

.calculator-aspect-ratio {
  padding-bottom: 100%;
}

.calculator canvas, .calculator .loader {
  position: absolute;
  left: 16.55%;
  top: 8.60%;
  width: 66.90%;
  height: 26.22%;
}

.calculator span {
  position: absolute;
  display: block;
  border-radius: 999px;
  cursor: pointer;
}

.calculator span:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.calculator span:active {
  background-color: rgba(0, 0, 0, 0.2);
}

.calculator span[data-key="0"] {
  left: 11.47%;
  top: 44.28%;
  width: 12.07%;
  height: 3.92%;
}

.calculator span[data-key="1"] {
  left: 19.91%;
  top: 39.91%;
  width: 7.50%;
  height: 6.31%;
}

.calculator span[data-key="2"] {
  left: 19.91%;
  top: 46.22%;
  width: 7.50%;
  height: 6.31%;
}

.calculator span[data-key="3"] {
  left: 23.71%;
  top: 44.28%;
  width: 12.07%;
  height: 3.92%;
}

.calculator span[data-key="4"] {
  left: 64.22%;
  top: 43.38%;
  width: 11.12%;
  height: 5.81%;
}

.calculator span[data-key="5"] {
  left: 77.41%;
  top: 43.38%;
  width: 11.12%;
  height: 5.81%;
}

.calculator span[data-key="6"] {
  left: 43.28%;
  top: 40.90%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="7"] {
  left: 43.28%;
  top: 47.03%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="12"] {
  left: 11.47%;
  top: 54.50%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="13"] {
  left: 24.66%;
  top: 54.50%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="14"] {
  left: 37.84%;
  top: 54.50%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="15"] {
  left: 51.03%;
  top: 54.50%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="16"] {
  left: 64.22%;
  top: 54.50%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="17"] {
  left: 77.41%;
  top: 54.50%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="18"] {
  left: 11.47%;
  top: 60.00%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="19"] {
  left: 24.66%;
  top: 60.00%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="20"] {
  left: 37.84%;
  top: 60.00%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="21"] {
  left: 51.03%;
  top: 60.00%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="22"] {
  left: 64.22%;
  top: 60.00%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="23"] {
  left: 77.41%;
  top: 60.00%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="24"] {
  left: 11.47%;
  top: 65.54%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="25"] {
  left: 24.66%;
  top: 65.54%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="26"] {
  left: 37.84%;
  top: 65.54%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="27"] {
  left: 51.03%;
  top: 65.54%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="28"] {
  left: 64.22%;
  top: 65.54%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="29"] {
  left: 77.41%;
  top: 65.54%;
  width: 11.12%;
  height: 3.92%;
}

.calculator span[data-key="30"] {
  left: 11.47%;
  top: 71.08%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="31"] {
  left: 27.33%;
  top: 71.08%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="32"] {
  left: 43.28%;
  top: 71.08%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="33"] {
  left: 59.14%;
  top: 71.08%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="34"] {
  left: 75.09%;
  top: 71.08%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="36"] {
  left: 11.47%;
  top: 77.25%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="37"] {
  left: 27.33%;
  top: 77.25%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="38"] {
  left: 43.28%;
  top: 77.25%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="39"] {
  left: 59.14%;
  top: 77.25%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="40"] {
  left: 75.09%;
  top: 77.25%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="42"] {
  left: 11.47%;
  top: 83.38%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="43"] {
  left: 27.33%;
  top: 83.38%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="44"] {
  left: 43.28%;
  top: 83.38%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="45"] {
  left: 59.14%;
  top: 83.38%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="46"] {
  left: 75.09%;
  top: 83.38%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="48"] {
  left: 11.47%;
  top: 89.55%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="49"] {
  left: 27.33%;
  top: 89.55%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="50"] {
  left: 43.28%;
  top: 89.55%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="51"] {
  left: 59.14%;
  top: 89.55%;
  width: 13.45%;
  height: 4.55%;
}

.calculator span[data-key="52"] {
  left: 75.09%;
  top: 89.55%;
  width: 13.45%;
  height: 4.55%;
}

canvas.calculator-mirror {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

.calculator.loading canvas {
  display: none;
}

.calculator .loader {
  display: none;
}

.calculator.loading .loader {
  display: block;
  background-color: #000;
  position: absolute;
}

.calculator .loader span {
  display: inline-block;
  width: 80px;
  height: 80px;
  top: 50%;
  margin-top: -40px;
  left: 50%;
  margin-left: -40px;
}

@keyframes calculator-loader-rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.calculator .loader span:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: calculator-loader-rotation 1.2s linear infinite;
}




.col-fullscreen {
  display: none;
  width: 60%;
  float: left;
}

.col-fullscreen canvas {
  margin-top: 7%;
  width: 100%;
}

body.fullscreen .col-fullscreen {
  display: block;
}

body.fullscreen .col-calculator {
  width: 35%;
  float: left;
}

a.action {
  display: block;
  width: 4%;
  padding: 1.5% 3%;
  border: 1px solid black;
  border-radius: 100px;
  cursor: pointer;
  opacity: 0.65;
}

a.action:hover {
  opacity: 1.0;
  background-color: rgba(0,0,0,0.125);
}

a.action svg {
  display: block;
}

.calculator-container {
  margin: 0 auto;
  position: relative;
  display: inline-block;
  text-align: left;
}
.calculator-container > img {
  
  max-height: 92.0vh;
  max-width: 100%;
  display: block;
}

.calculator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.calculator-container .actions {
    position: absolute;
    top: 94.0vh;
    text-align: center;
    left: 0;
    right: 0;
    margin-left: 20px; 
}

.calculator-container .actions a {
  display: inline-block;
  margin-right: 10px;
}