@import url('../../css/font.css');

html {
  -webkit-user-select: none;
  height: 100%;
}

#inappPaintEditorGuide {
  margin-top: 102px;
  padding: calc(var(--vh-unit) * (2)) calc(var(--vw-unit) * (6.05)) calc(var(--vh-unit) * (2));
}

#inappPaintEditorGuide .scaledView {
  transform: translate(-200px, -50px) scale(0.7);
  z-index: 1000;
}

#inappPaintEditorGuide #content {
  width: calc(var(--vh-unit) * (164));
  margin-left: auto;
  margin-right: auto;
}

#inappPaintEditorGuide #content-buffer {
  color: #808080;
  margin-left: calc(var(--vh-unit) * (14.31));
  height: calc(var(--vh-unit) * (7.24));
  font-size: calc(var(--vh-unit) * (2.3));
}

#inappPaintEditorGuide .paint-button {
  font-family: Roboto, arial, sans-serif;
  border-radius: 50%;
  position: absolute;
  border: 1px solid #808080;
  width: calc(var(--vh-unit) * (5.26));
  height: calc(var(--vh-unit) * (5.26));
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#inappPaintEditorGuide .paint-dot {
  height: calc(var(--vh-unit) * (0.82));
  width: calc(var(--vh-unit) * (0.82));
  border-radius: 50%;
  background-color: #333333;
  position: absolute;
}

#inappPaintEditorGuide .paint-vertical-line {
  border-left: 1px solid black;
  position: absolute;
}

#inappPaintEditorGuide .paint-horizontal-line {
  border-top: 1px solid black;
  position: absolute;
}

#inappPaintEditorGuide .paint-button-text {
  padding: calc(var(--vh-unit) * (1.15));
  font-size: calc(var(--vh-unit) * (2.3));
}

#inappPaintEditorGuide .paint-button-selected {
  border: 1px solid #2898cd;
  color: #2898cd;
}

/* 1. Undo */

#inappPaintEditorGuide #paint-button-undo {
  left: calc(var(--vh-unit) * (15.79));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-undo {
  height: calc(var(--vh-unit) * (1.97));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (18.42));
}

#inappPaintEditorGuide #paint-dot-undo {
  top: calc(var(--vh-unit) * (1.15));
  left: calc(var(--vh-unit) * (18.09));
}

/* 2. Redo */

#inappPaintEditorGuide #paint-button-redo {
  left: calc(var(--vh-unit) * (23.68));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-redo {
  height: calc(var(--vh-unit) * (1.97));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (26.32));
}

#inappPaintEditorGuide #paint-dot-redo {
  top: calc(var(--vh-unit) * (1.15));
  left: calc(var(--vh-unit) * (25.99));
}

/* 3. Select Shape */

#inappPaintEditorGuide #paint-button-select-shape {
  left: calc(var(--vh-unit) * (31.58));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-select-shape-1 {
  height: calc(var(--vh-unit) * (24.9));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (34.21));
}

#inappPaintEditorGuide #paint-horizontal-line-select-shape-1 {
  width: calc(var(--vh-unit) * (12.34));
  top: calc(var(--vh-unit) * (23.85));
  left: calc(var(--vh-unit) * (22.04));
}

#inappPaintEditorGuide #paint-vertical-line-select-shape-2 {
  height: calc(var(--vh-unit) * (23.5));
  top: calc(var(--vh-unit) * (10.2));
  left: calc(var(--vh-unit) * (22.04));
}

#inappPaintEditorGuide #paint-horizontal-line-select-shape-2 {
  width: calc(var(--vh-unit) * (1.64));
  top: calc(var(--vh-unit) * (10.2));
  left: calc(var(--vh-unit) * (20.39));
}

#inappPaintEditorGuide #paint-horizontal-line-select-shape-3 {
  width: calc(var(--vh-unit) * (1.81));
  top: calc(var(--vh-unit) * (33.55));
  left: calc(var(--vh-unit) * (20.39));
}

/* 4. Character Name */

#inappPaintEditorGuide #paint-button-character-name {
  top: calc(var(--vh-unit) * (-6.25));
  left: calc(var(--vh-unit) * (60.2));
}

#inappPaintEditorGuide #paint-vertical-line-character-name {
  height: calc(var(--vh-unit) * (1.97));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (62.83));
}

#inappPaintEditorGuide #paint-dot-character-name {
  top: calc(var(--vh-unit) * (1.15));
  left: calc(var(--vh-unit) * (62.5));
}

/* 5. Cut */

#inappPaintEditorGuide #paint-button-cut {
  left: calc(var(--vh-unit) * (75.33));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-cut {
  height: calc(var(--vh-unit) * (45.23));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (77.96));
}

#inappPaintEditorGuide #paint-horizontal-line-cut {
  width: calc(var(--vh-unit) * (25.16));
  top: calc(var(--vh-unit) * (44.41));
  left: calc(var(--vh-unit) * (77.96));
}

#inappPaintEditorGuide #paint-dot-cut {
  left: calc(var(--vh-unit) * (102.96));
  top: calc(var(--vh-unit) * (44.08));
}

/* 6. Duplicate */

#inappPaintEditorGuide #paint-button-duplicate {
  left: calc(var(--vh-unit) * (82.57));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-duplicate {
  height: calc(var(--vh-unit) * (38.98));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (85.2));
}

#inappPaintEditorGuide #paint-horizontal-line-duplicate {
  width: calc(var(--vh-unit) * (17.76));
  top: calc(var(--vh-unit) * (38.16));
  left: calc(var(--vh-unit) * (85.2));
}

#inappPaintEditorGuide #paint-dot-duplicate {
  left: calc(var(--vh-unit) * (102.96));
  top: calc(var(--vh-unit) * (37.83));
}

/* 7. Rotate */

#inappPaintEditorGuide #paint-button-rotate {
  left: calc(var(--vh-unit) * (89.8));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-rotate {
  height: calc(var(--vh-unit) * (31.8));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (92.43));
}

#inappPaintEditorGuide #paint-horizontal-line-rotate {
  width: calc(var(--vh-unit) * (11.02));
  top: calc(var(--vh-unit) * (30.92));
  left: calc(var(--vh-unit) * (92.6));
}

#inappPaintEditorGuide #paint-dot-rotate {
  left: calc(var(--vh-unit) * (102.96));
  top: calc(var(--vh-unit) * (30.59));
}

/* 8. Drag */

#inappPaintEditorGuide #paint-button-drag {
  left: calc(var(--vh-unit) * (97.04));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-drag {
  height: calc(var(--vh-unit) * (25.66));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (99.67));
}

#inappPaintEditorGuide #paint-horizontal-line-drag {
  width: calc(var(--vh-unit) * (3.62));
  top: calc(var(--vh-unit) * (25));
  left: calc(var(--vh-unit) * (99.67));
}

#inappPaintEditorGuide #paint-dot-drag {
  left: calc(var(--vh-unit) * (102.96));
  top: calc(var(--vh-unit) * (24.67));
}

/* 9. Save */

#inappPaintEditorGuide #paint-button-save {
  left: calc(var(--vh-unit) * (104.28));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappPaintEditorGuide #paint-vertical-line-save {
  height: calc(var(--vh-unit) * (1.97));
  top: calc(var(--vh-unit) * (-0.66));
  left: calc(var(--vh-unit) * (107.07));
}

#inappPaintEditorGuide #paint-dot-save {
  top: calc(var(--vh-unit) * (1.15));
  left: calc(var(--vh-unit) * (106.74));
}

/* 10. Fill */

#inappPaintEditorGuide #paint-button-fill {
  left: calc(var(--vh-unit) * (97.53));
  top: calc(var(--vh-unit) * (73.03));
}

#inappPaintEditorGuide #paint-vertical-line-fill {
  height: calc(var(--vh-unit) * (15.3));
  top: calc(var(--vh-unit) * (57.89));
  left: calc(var(--vh-unit) * (100.16));
}

#inappPaintEditorGuide #paint-horizontal-line-fill {
  width: calc(var(--vh-unit) * (2.8));
  top: calc(var(--vh-unit) * (57.89));
  left: calc(var(--vh-unit) * (100.16));
}

#inappPaintEditorGuide #paint-dot-fill {
  left: calc(var(--vh-unit) * (102.96));
  top: calc(var(--vh-unit) * (57.57));
}

/* 11. Camera */

#inappPaintEditorGuide #paint-button-camera {
  left: calc(var(--vh-unit) * (90.46));
  top: calc(var(--vh-unit) * (73.03));
}

#inappPaintEditorGuide #paint-vertical-line-camera {
  height: calc(var(--vh-unit) * (20.72));
  top: calc(var(--vh-unit) * (52.3));
  left: calc(var(--vh-unit) * (93.09));
}

#inappPaintEditorGuide #paint-horizontal-line-camera {
  width: calc(var(--vh-unit) * (9.87));
  top: calc(var(--vh-unit) * (52.3));
  left: calc(var(--vh-unit) * (93.09));
}

#inappPaintEditorGuide #paint-dot-camera {
  left: calc(var(--vh-unit) * (102.96));
  top: calc(var(--vh-unit) * (51.81));
}

/* 12. Select Color */

#inappPaintEditorGuide #paint-button-select-color {
  left: calc(var(--vh-unit) * (59.7));
  top: calc(var(--vh-unit) * (73.03));
}

#inappPaintEditorGuide #paint-vertical-line-select-color-1 {
  height: calc(var(--vh-unit) * (1.64));
  top: calc(var(--vh-unit) * (71.38));
  left: calc(var(--vh-unit) * (62.34));
}

#inappPaintEditorGuide #paint-horizontal-line-select-color-1 {
  width: calc(var(--vh-unit) * (95));
  top: calc(var(--vh-unit) * (71.38));
  left: calc(var(--vh-unit) * (14.97));
}

#inappPaintEditorGuide #paint-vertical-line-select-color-2 {
  height: calc(var(--vh-unit) * (1.81));
  top: calc(var(--vh-unit) * (69.57));
  left: calc(var(--vh-unit) * (14.97));
}

#inappPaintEditorGuide #paint-vertical-line-select-color-3 {
  height: calc(var(--vh-unit) * (1.81));
  top: calc(var(--vh-unit) * (69.57));
  left: calc(var(--vh-unit) * (109.7));
}

/* 13. Line Size */

#inappPaintEditorGuide #paint-button-select-line-size {
  left: calc(var(--vh-unit) * (32.89));
  top: calc(var(--vh-unit) * (73.03));
}

#inappPaintEditorGuide #paint-vertical-line-select-line-size-1 {
  height: calc(var(--vh-unit) * (24.34));
  top: calc(var(--vh-unit) * (48.68));
  left: calc(var(--vh-unit) * (35.53));
}

#inappPaintEditorGuide #paint-horizontal-line-select-line-size-1 {
  width: calc(var(--vh-unit) * (13.32));
  top: calc(var(--vh-unit) * (48.68));
  left: calc(var(--vh-unit) * (22.37));
}

#inappPaintEditorGuide #paint-vertical-line-select-line-size-2 {
  height: calc(var(--vh-unit) * (21.38));
  top: calc(var(--vh-unit) * (37.01));
  left: calc(var(--vh-unit) * (22.2));
}

#inappPaintEditorGuide #paint-horizontal-line-select-line-size-2 {
  width: calc(var(--vh-unit) * (1.64));
  top: calc(var(--vh-unit) * (37.01));
  left: calc(var(--vh-unit) * (20.56));
}

#inappPaintEditorGuide #paint-horizontal-line-select-line-size-3 {
  width: calc(var(--vh-unit) * (1.81));
  top: calc(var(--vh-unit) * (58.39));
  left: calc(var(--vh-unit) * (20.56));
}

#inappPaintEditorGuide #paint-key {
  /*width: calc(var(--vh-unit) * (36.35));
    float: left;
    margin-left: calc(var(--vh-unit) * (9.05));
    */
  position: absolute;
  top: 374px;
  width: 800px;

  background-image: url('../images/keybackground.png');
  background-repeat: none;
  background-size: 100%;
}

#inappPaintEditorGuide #paint-key-header {
  font-size: calc(var(--vh-unit) * (3));
  padding-top: calc(var(--vh-unit) * (1.64));
  padding-left: calc(var(--vh-unit) * (1.64));
  height: calc(var(--vh-unit) * (5.1));
  color: #2898cd;
}

#inappPaintEditorGuide #paint-key-description {
  color: #808080;
  line-height: calc(var(--vh-unit) * (3.62));
  padding-top: calc(var(--vh-unit) * (0.82));
  padding-right: calc(var(--vh-unit) * (2.47));
  font-size: calc(var(--vh-unit) * (2.3));
  margin-right: calc(var(--vh-unit) * (0.82));
  margin-left: calc(var(--vh-unit) * (3.29));
}

#inappPaintEditorGuide #ipad-project-view-wrapper {
  position: relative;
}

#inappPaintEditorGuide .learn-tab {
  display: none;
}

#inappPaintEditorGuide .learn-tab-selected {
  display: inline;
}

#inappPaintEditorGuide .ipad-project-view {
  margin-left: calc(var(--vh-unit) * (14.31));
  width: calc(var(--vh-unit) * (96.55));
  float: left;
}