/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
      user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

h1 {
  font-size: 25px;
  margin: 10px;
  text-align: center;
}

#app {
  padding: 20px;
}

#wrapper {
  display: table;
  border-collapse: collapse;
  margin: 20px auto;
}

#wrapper > div {
  display: table-row;
}

#wrapper .square {
  display: table-cell;
  background-color: white;
  border: 1px solid gray;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: center;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
      user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

#wrapper .square.start {
  background-color: green;
}

#wrapper .square.end {
  background-color: red;
}

#wrapper .square.obstacle {
  background-color: #CCC;
}

#wrapper.start .square.over {
  background-color: green;
}

#wrapper.end .square.over {
  background-color: red;
}

#wrapper.obstacle .square.over {
  background-color: #CCC;
}

#wrapper .square.visited {
  /*background-color: yellow;*/
}

#wrapper .square.right {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYwMUY3QkIyMTUyRDExRUE4QTI0QTQ3RkNBNUFCRjcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYwMUY3QkIzMTUyRDExRUE4QTI0QTQ3RkNBNUFCRjcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjAxRjdCQjAxNTJEMTFFQThBMjRBNDdGQ0E1QUJGNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjAxRjdCQjExNTJEMTFFQThBMjRBNDdGQ0E1QUJGNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7pVZCVAAAA90lEQVR42mL8//8/w2AGTAyDHIw6cNSBow4cdeCoA0cdSBlgpElNTMX6fVhFcQUQWwxmB8oB8SEgzh3MmYQViCcB8Sog5qNnJllFhFojIFZG4t8G4jAgvkDLTMLwH4L/k4D7gPg8lP0diNP+I8yBYKAMtTAsBGFeDiPCT+eA+CkQTwTiNKjYUiDOAOIvtA5BBhLxYiS962gRgixo7g0lMQRj0EKQBoU+6WmwC4hP0zsNDvpcTAyehhSKa4CYD6daKoYgqQX1byAugqbVT/QoqFlIUPsIiO2A+MRoc2soNbdYGEYHj0YdOOrAUQeOOnDUgcPagQABBgBojojlG6lPkQAAAABJRU5ErkJggg==);
}

#wrapper .square.left {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAyRjU4RDBCMTUyRTExRUE4NzkyQTk0NzJFNEMzRjU1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAyRjU4RDBDMTUyRTExRUE4NzkyQTk0NzJFNEMzRjU1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDJGNThEMDkxNTJFMTFFQTg3OTJBOTQ3MkU0QzNGNTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDJGNThEMEExNTJFMTFFQTg3OTJBOTQ3MkU0QzNGNTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gs8mTAAAA+0lEQVR42mL8//8/w2AGTAyDHIw6cNSBow4cdeCoA0cdSBlgoappjIyjUUwPYAHEFYPVgQVAfAiI5QYmDeIGfEA8B4hDSU7WVG2wYs8kBkC8CohVkcTuAvE5IkwMYwA5kGoYaCIaTgPi70AMCobzQNwDZROLaRbFPEA8A4ijofxZQJwPxNJAfJII/avgLBqF4HqkUFiMJWQJYZqHYCxSCMYA8TcgzgNiGSA2IskkOqbB00DcRWoaHPG5GIb5gHgdUshMIzY90qsm+QTEwUBcBMS/B2tdDAqQfiC2A+JHg6kmGW2wklJmjTZYRx046sBRB446cNSBgwwABBgA40eAY5kgxekAAAAASUVORK5CYII=);
}

#wrapper .square.up {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFENURFMzc2MTUyRTExRUFBQjY3RjU5MTkwM0M2NTVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFENURFMzc3MTUyRTExRUFBQjY3RjU5MTkwM0M2NTVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUQ1REUzNzQxNTJFMTFFQUFCNjdGNTkxOTAzQzY1NUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ1REUzNzUxNTJFMTFFQUFCNjdGNTkxOTAzQzY1NUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7XIuL5AAABJklEQVR42uyXPQ4BQRTHdxEdjUbhIxzAKRRaLoMDKBTcRqV3gD2BFdEofDQUGP/J/iUbsZKxEzvFe8kveZn3xvzyspj1lVKey5HzHA8RFEERFEERFEERFEERFEERTBMF4x2+n+5Ew3cg2xOsEmvhG7/VJU8wD5a6A3TB3cYEPS1ohN7zmYmKjlfMP/cZnmdLsAce4EYeXHNCsA72nNwYjJjrtUbWgkWwotBC6Wc6YsG1FXsyE5xRJASV2LrO16zNsxLs81nTH3MBQawWcE2xZ/BvwTY4xr61rym+6uFb7cg9xucVfvz93IEW8xoIEvo6YMv88p+/uiiuREfpS98JHOQ2I4Ii6NSFNTnKYBjLnbkPNkCY0N0EmzT3QRsTPIPpl1qqeAowAMD8rJ9+iuPeAAAAAElFTkSuQmCC);
}

#wrapper .square.down {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjExMkQ5MEVDMTUyRTExRUFCNDFCREYzNkUwNjE3MzVEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjExMkQ5MEVEMTUyRTExRUFCNDFCREYzNkUwNjE3MzVEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTEyRDkwRUExNTJFMTFFQUI0MUJERjM2RTA2MTczNUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTEyRDkwRUIxNTJFMTFFQUI0MUJERjM2RTA2MTczNUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7HVKhBAAABPUlEQVR42uyXsU4CQRCGd9EYqNDQGBPPd/AZKHwNfYrzAUxo9G2o7CkteADiUZnQcBUUyvpP+IsFg2bZkTNmJvlym93h9ru5ZG/wIQSXFN67rEjc79jlxykod6wNwDzn5l6hggWodmRfgWlOBVtOL+asZJlbta0HCmnIbzYpwrouVTRXca74kp+4n2YFfyVM0ASbjn0P6jbocNz9Jk/WzjhegOWhBC/Ayw9yEmNea3ANJod6xbLRLY82x8rU0XodVUty7vaR0zioH6NDuhfNy/iVa085B3Wu4AkYUWQY5Nu+Zsi5EXMaExQuwYxC96DkeKbxqdMQFG7ACryTFefcXxEUHli5wLHTEPSKHfUReJYM0AcfGh21V275z3l902r5/f/7T5L6QNbNmKAJmqAJmqAJmqAJmqAJNhifAgwAP2hb5wJHTQkAAAAASUVORK5CYII=);
}

#form {
  display: block;
  margin: 0 auto;
}
#form .form-row {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#form .form-input {
  max-width: 70px;
  margin-right: 10px;
}
#form .form-submit {
  margin-bottom: 13px
}
#form .label {
  color: rgb(63,81,181);
  font-size: 12px;
}
#form .sliders {
  max-width: 250px;
}

#footer {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  margin: 0 auto;
}