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

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

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

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

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

#inappInterfaceGuide #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));
}

/* Guide Elements */

#inappInterfaceGuide .interface-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: #333333;
  position: absolute;
}

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

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

#inappInterfaceGuide .interface-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);
}

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

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

/* Guide 1 - Interface Guide */

/* 1. Save */

#inappInterfaceGuide #interface-button-save {
  left: calc(var(--vh-unit) * (30.59));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-save {
  height: calc(var(--vh-unit) * (2.47));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (33.55));
}

#inappInterfaceGuide #interface-dot-save {
  top: calc(var(--vh-unit) * (1.15));
  left: calc(var(--vh-unit) * (33.22));
}

/* 2. Stage */

#inappInterfaceGuide #interface-button-stage {
  left: calc(var(--vh-unit) * (37.34));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-stage-1 {
  height: calc(var(--vh-unit) * (26.4));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (39.97));
}

#inappInterfaceGuide #interface-horizontal-line-stage-1 {
  width: calc(var(--vh-unit) * (1.81));
  top: calc(var(--vh-unit) * (25.59));
  left: calc(var(--vh-unit) * (39.97));
}

#inappInterfaceGuide #interface-vertical-line-stage-2 {
  height: calc(var(--vh-unit) * (34.05));
  top: calc(var(--vh-unit) * (7.07));
  left: calc(var(--vh-unit) * (41.61));
}

#inappInterfaceGuide #interface-horizontal-line-stage-2 {
  width: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (7.07));
  left: calc(var(--vh-unit) * (41.61));
}

#inappInterfaceGuide #interface-horizontal-line-stage-3 {
  width: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (41.12));
  left: calc(var(--vh-unit) * (41.61));
}

/* 3. Presentation Mode */

#inappInterfaceGuide #interface-button-presentation-mode {
  left: calc(var(--vh-unit) * (43.09));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-presentation-mode {
  height: calc(var(--vh-unit) * (2.47));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (45.72));
}

#inappInterfaceGuide #interface-dot-presentation-mode {
  top: calc(var(--vh-unit) * (1.32));
  left: calc(var(--vh-unit) * (45.39));
}

/* 4. Grid */

#inappInterfaceGuide #interface-button-grid {
  left: calc(var(--vh-unit) * (48.85));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-grid {
  height: calc(var(--vh-unit) * (2.14));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (51.64));
}

#inappInterfaceGuide #interface-dot-grid {
  top: calc(var(--vh-unit) * (1.32));
  left: calc(var(--vh-unit) * (51.32));
}

/* 5. Change Background */

#inappInterfaceGuide #interface-button-add-text {
  left: calc(var(--vh-unit) * (60.69));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-add-text {
  height: calc(var(--vh-unit) * (1.97));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (63.32));
}

#inappInterfaceGuide #interface-dot-add-text {
  top: calc(var(--vh-unit) * (1.15));
  left: calc(var(--vh-unit) * (62.99));
}

/* 6. Add Text */

#inappInterfaceGuide #interface-button-change-background {
  left: calc(var(--vh-unit) * (66.78));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-change-background {
  height: calc(var(--vh-unit) * (2.14));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (69.41));
}

#inappInterfaceGuide #interface-dot-change-background {
  top: calc(var(--vh-unit) * (1.32));
  left: calc(var(--vh-unit) * (69.08));
}

/* 7. Reset Characters */

#inappInterfaceGuide #interface-button-reset-characters {
  left: calc(var(--vh-unit) * (77.47));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-reset-characters {
  height: calc(var(--vh-unit) * (1.81));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (80.1));
}

#inappInterfaceGuide #interface-dot-reset-characters {
  top: calc(var(--vh-unit) * (0.99));
  left: calc(var(--vh-unit) * (79.77));
}

/* 8. Green Flag */

#inappInterfaceGuide #interface-button-green-flag {
  left: calc(var(--vh-unit) * (83.39));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-green-flag {
  height: calc(var(--vh-unit) * (1.81));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (86.18));
}

#inappInterfaceGuide #interface-dot-green-flag {
  top: calc(var(--vh-unit) * (0.99));
  left: calc(var(--vh-unit) * (85.86));
}

/* 9. Pages */

#inappInterfaceGuide #interface-button-pages {
  left: calc(var(--vh-unit) * (96.22));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-pages {
  height: calc(var(--vh-unit) * (2.47));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (99.01));
}

#inappInterfaceGuide #interface-dot-pages {
  top: calc(var(--vh-unit) * (1.64));
  left: calc(var(--vh-unit) * (98.68));
}

/* 10. Project Information */

#inappInterfaceGuide #interface-button-project-information {
  left: calc(var(--vh-unit) * (106.09));
  top: calc(var(--vh-unit) * (-6.25));
}

#inappInterfaceGuide #interface-vertical-line-project-information {
  height: calc(var(--vh-unit) * (2.14));
  top: calc(var(--vh-unit) * (-0.82));
  left: calc(var(--vh-unit) * (108.88));
}

#inappInterfaceGuide #interface-dot-project-information {
  top: calc(var(--vh-unit) * (1.32));
  left: calc(var(--vh-unit) * (108.55));
}

/* 16. Characters */

#inappInterfaceGuide #interface-button-characters {
  left: calc(var(--vh-unit) * (18.91));
  top: calc(var(--vh-unit) * (73.68));
}

#inappInterfaceGuide #interface-vertical-line-characters-1 {
  height: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (36.18));
  left: calc(var(--vh-unit) * (15.95));
}

#inappInterfaceGuide #interface-vertical-line-characters-3 {
  height: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (36.18));
  left: calc(var(--vh-unit) * (37.17));
}

#inappInterfaceGuide #interface-horizontal-line-characters {
  width: calc(var(--vh-unit) * (21.5));
  top: calc(var(--vh-unit) * (37.5));
  left: calc(var(--vh-unit) * (15.95));
}

#inappInterfaceGuide #interface-vertical-line-characters-2 {
  height: calc(var(--vh-unit) * (36.18));
  top: calc(var(--vh-unit) * (37.5));
  left: calc(var(--vh-unit) * (21.71));
}

/* 15. Block Categories */

#inappInterfaceGuide #interface-button-block-categories {
  left: calc(var(--vh-unit) * (29.61));
  top: calc(var(--vh-unit) * (73.68));
}

#inappInterfaceGuide #interface-vertical-line-block-categories-1 {
  height: calc(var(--vh-unit) * (0.99));
  top: calc(var(--vh-unit) * (50));
  left: calc(var(--vh-unit) * (15.63));
}

#inappInterfaceGuide #interface-vertical-line-block-categories-3 {
  height: calc(var(--vh-unit) * (0.99));
  top: calc(var(--vh-unit) * (50));
  left: calc(var(--vh-unit) * (46.05));
}

#inappInterfaceGuide #interface-horizontal-line-block-categories {
  width: calc(var(--vh-unit) * (30.59));
  top: calc(var(--vh-unit) * (50.99));
  left: calc(var(--vh-unit) * (15.63));
}

#inappInterfaceGuide #interface-vertical-line-block-categories-2 {
  height: calc(var(--vh-unit) * (22.7));
  top: calc(var(--vh-unit) * (50.99));
  left: calc(var(--vh-unit) * (32.4));
}

/* 14. Block Palette */

#inappInterfaceGuide #interface-button-block-palette {
  left: calc(var(--vh-unit) * (59.7));
  top: calc(var(--vh-unit) * (73.68));
}

#inappInterfaceGuide #interface-vertical-line-blocks-palette-1 {
  height: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (50.66));
  left: calc(var(--vh-unit) * (48.36));
}

#inappInterfaceGuide #interface-vertical-line-blocks-palette-3 {
  height: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (50.66));
  left: calc(var(--vh-unit) * (98.1));
}

#inappInterfaceGuide #interface-horizontal-line-blocks-palette {
  width: calc(var(--vh-unit) * (50.16));
  top: calc(var(--vh-unit) * (51.97));
  left: calc(var(--vh-unit) * (48.36));
}

#inappInterfaceGuide #interface-vertical-line-blocks-palette-2 {
  height: calc(var(--vh-unit) * (21.71));
  top: calc(var(--vh-unit) * (51.97));
  left: calc(var(--vh-unit) * (62.5));
}

/* 13. Programming Area */

#inappInterfaceGuide #interface-button-programming-area {
  left: calc(var(--vh-unit) * (68.09));
  top: calc(var(--vh-unit) * (73.68));
}

#inappInterfaceGuide #interface-vertical-line-programming-area {
  height: calc(var(--vh-unit) * (4.11));
  top: calc(var(--vh-unit) * (69.74));
  left: calc(var(--vh-unit) * (70.72));
}

#inappInterfaceGuide #interface-dot-programming-area {
  top: calc(var(--vh-unit) * (69.08));
  left: calc(var(--vh-unit) * (70.39));
}

/* 12. Programming Script */

#inappInterfaceGuide #interface-button-programming-script {
  left: calc(var(--vh-unit) * (76.48));
  top: calc(var(--vh-unit) * (73.68));
}

#inappInterfaceGuide #interface-vertical-line-programming-script-1 {
  height: calc(var(--vh-unit) * (1.64));
  top: calc(var(--vh-unit) * (63.32));
  left: calc(var(--vh-unit) * (65.79));
}

#inappInterfaceGuide #interface-vertical-line-programming-script-3 {
  height: calc(var(--vh-unit) * (1.64));
  top: calc(var(--vh-unit) * (63.32));
  left: calc(var(--vh-unit) * (93.09));
}

#inappInterfaceGuide #interface-horizontal-line-programming-script {
  width: calc(var(--vh-unit) * (27.47));
  top: calc(var(--vh-unit) * (64.97));
  left: calc(var(--vh-unit) * (65.79));
}

#inappInterfaceGuide #interface-vertical-line-programming-script-2 {
  height: calc(var(--vh-unit) * (8.55));
  top: calc(var(--vh-unit) * (65.13));
  left: calc(var(--vh-unit) * (79.11));
}

/* 11. Undo Redo */

#inappInterfaceGuide #interface-button-undo-redo {
  left: calc(var(--vh-unit) * (102.8));
  top: calc(var(--vh-unit) * (73.68));
}

#inappInterfaceGuide #interface-vertical-line-undo-redo-1 {
  height: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (50.66));
  left: calc(var(--vh-unit) * (100.66));
}

#inappInterfaceGuide #interface-vertical-line-undo-redo-3 {
  height: calc(var(--vh-unit) * (1.32));
  top: calc(var(--vh-unit) * (50.66));
  left: calc(var(--vh-unit) * (110.2));
}

#inappInterfaceGuide #interface-horizontal-line-undo-redo {
  width: calc(var(--vh-unit) * (9.7));
  top: calc(var(--vh-unit) * (51.97));
  left: calc(var(--vh-unit) * (100.66));
}

#inappInterfaceGuide #interface-vertical-line-undo-redo-2 {
  height: calc(var(--vh-unit) * (21.88));
  top: calc(var(--vh-unit) * (51.97));
  left: calc(var(--vh-unit) * (105.43));
}

#inappInterfaceGuide #right-column {
  display: block;
  overflow: auto;
  width: calc(var(--vh-unit) * (45.39));
}

#inappInterfaceGuide #interface-key {
  /*width: calc(var(--vh-unit) * (36.35));
	height: calc(var(--vh-unit) * (72.53));
	float: left;
	margin-left: calc(var(--vh-unit) * (9.05));
	*/

  position: absolute;
  top: 374px;
  width: 800px;

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

#inappInterfaceGuide #interface-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));
  color: #2898cd;
}

#inappInterfaceGuide #interface-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));
}

#inappInterfaceGuide #video-wrapper {
  margin-top: calc(var(--vh-unit) * (1.97));
  float: left;
  margin-left: calc(var(--vh-unit) * (9.05));
}

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

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

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

#inappInterfaceGuide .ipad-project-view {
  margin-left: calc(var(--vh-unit) * (14.31));
  float: left;
  height: calc(var(--vh-unit) * (72.7));
}

/* End Guide 3 - Block Descriptions */