style.css

html, body {
  margin: 0;
  padding: 0;
  background-color: #464646;
  color: white;
  height: 100%;
}

html, body, * {
  box-sizing: border-box;
  font-weight: 400;
  font-size: 13.3333px;
  font-family: 'Montserrat', sans-serif;
}

#controls {
  z-index: 50;
  padding: 16px;
  padding-right: 0;
  background-color: #272727;
  position: fixed;
  top: 8px;
  left: 8px;
  border-radius: 8px;
  display: flex;
  transition: transform 300ms ease-in-out;
  overflow: hidden;
}

#controls.closed {
  transform: translateX(calc(-100% + 38px));
}
#controls .hide-show-container ion-icon {
  transform: rotateZ(180deg);
  transition: transform 300ms ease-in-out;
}
#controls.closed .hide-show-container ion-icon {
  transform: rotateZ(0);
}

ion-icon {
  font-size: 18px;
}

button {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: transparent;
  border-radius: 6px;
  color: white;
  border-width: 0;
  cursor: pointer;
  outline: none;
}
button:disabled {
  color: rgb(73, 73, 73);
  background-color: rgba(32, 32, 32, 0.25);
}
button:disabled:hover {
  color: rgb(73, 73, 73);
  background-color: rgba(32, 32, 32, 0.25);
}

button ion-icon {
  margin-right: 8px;
}

.start-and-target {
  display: flex;
}
.start-and-target button:first-child {
  margin-right: 8px;
}

.hide-show-container {
  display: flex;
  justify-content: center;
  margin-left: 8px;
  background-color: #202020;
  margin-top: -16px;
  margin-bottom: -16px;
}
.hide-show-container ion-icon {
  margin-right: 0;
}

.inputs-container {
  display: flex;
}
.inputs-container input {
  flex: 1;
  height: 100%;
  background-color: transparent;
  color: #ffffff;
  border: 0;
  outline: none;
}
.inputs-container input:disabled {
  color: rgb(73, 73, 73);
  background: rgb(37, 37, 37);
}
.inputs-container .input-grp {
  background-color: #202020;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
}
.inputs-container .input-grp.disabled {
  color: rgb(73, 73, 73);
  background: rgb(37, 37, 37);
}
.inputs-container .input-grp span {
  display: inline-block;
  padding: 8px;
}
.inputs-container .input-grp:first-child {
  margin-right: 8px;
}

.grid-size-container {
  border-left: 5px #e67e22 solid;
  padding-left: 8px;
  border-radius: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.grid-size {
  color: #dfdfdf;
  margin-bottom: 8px;
  display: block;
}

.starting-button {
  color: rgb(46, 204, 113);
  background-color: rgba(46, 204, 113, 0.05);
  transition: background-color 100ms ease-in-out;
}
.starting-button:hover, .starting-button:focus {
  background-color: rgba(46, 204, 113, 0.15);
}

.target-button {
  color: rgb(52, 152, 219);
  background-color: rgba(52, 152, 219, 0.05);
  transition: background-color 100ms ease-in-out;
}
.target-button:hover, .target-button:focus {
  background-color: rgba(52, 152, 219, 0.15);
}

.barriers-button {
  color: rgb(231, 76, 60);
  background-color: rgba(231, 76, 60, 0.05);
  margin: 8px 0;
  transition: background-color 100ms ease-in-out;
}
.barriers-button:hover, .barriers-button:focus {
  background-color: rgba(231, 76, 60, 0.15);
}

.simulate-button {
  color: rgb(155, 89, 182);
  background-color: rgba(155, 89, 182, 0.05);
  margin-top: 8px;
  transition: background-color 100ms ease-in-out;
}
.simulate-button:hover, .simulate-button:focus {
  background-color: rgba(155, 89, 182, 0.15);
}

.reset-button {
  color: rgb(230, 126, 34);
  background-color: rgba(230, 126, 34, 0.05);
  margin-top: 8px;
  transition: background-color 100ms ease-in-out;
}
.reset-button:hover, .reset-button:focus {
  background-color: rgba(230, 126, 34, 0.15);
}



#root {
  position: absolute;
  top: 52px;
  left: 52px;
  bottom: 52px;
  right: 52px;
  background-color: #202020;
  display: flex;
  flex-direction: column;
  border: #202020 1px solid;
  overflow: auto;
}

.grid-row {
  flex: 1;
  display: flex;
}
.grid-box {
  flex: 1;
  min-height: 24px;
  min-width: 24px;
  border: #202020 .5px solid;
  background-color: #303030;
  transition: background-color 200ms ease-in-out;
}


.grid-box.starting {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgb(46, 204, 113);
  background-color: rgba(46, 204, 113, 0.15);
}
.grid-box.target {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgb(52, 152, 219);
  background-color: rgba(52, 152, 219, 0.15);
}
.grid-box.barrier {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgb(231, 76, 60);
  background-color: rgba(231, 76, 60, 0.25);
}
.grid-box.visiting {
  background-color: rgba(241, 196, 15, 0.3);
}
.grid-box.visited {
  background-color:  rgba(241, 196, 15, 0.15);
}
.grid-box ion-icon {
  pointer-events: none;
}

.grid-row .grid-box.path {
  background-color: rgba(52, 152, 219, 0.15)!important;
}

#checklist {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}
.list, .list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list {
  display: flex;
}
.list li {
  margin: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b4b4b4;
}
.list li ion-icon{
  margin-right: 8px;
}

.check-start.active {
  color: #2ecc71;
}
.check-target.active {
  color: #3498db;
}

.check-barriers {
  color: #d46dff!important;
}
.check-barriers.active {
  color: #e74c3c!important;
}

#notifications {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 0 8px;
  max-width: 320px;
  width: 100%;
  z-index: 10;
}

.notification {
  display: flex;
  margin-bottom: 8px;
  background-color: #272727;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  transition: transform 250ms ease-in-out, height 100ms ease-in-out;
  transform: translateX(0);
}
.notification .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  background-color: #202020;
}

.notification .icon-container ion-icon {
  font-size: 18px;
}

.notification .message-container {
  padding: 12px 16px;
  flex: 1;
}
.notification .message-container p {
  padding: 0;
  margin: 0;
  font-size: 12.5px;
}

.notification .close-btn {
  display: none;
  padding: 8px;
}
.notification.dismissible .close-btn {
  display: block;
}
.notification .close-btn ion-icon {
  margin: 0;
}

.notification.success .icon-container {
  color: rgb(46, 204, 113);
  background-color: rgba(46, 204, 113, 0.05);
}
.notification.error .icon-container {
  color: rgb(231, 76, 60);
  background-color: rgba(231, 76, 60, 0.05);
}
.notification.warning .icon-container {
  color: rgb(230, 126, 34);
  background-color: rgba(230, 126, 34, 0.05);
}
.notification.info .icon-container {
  color: rgb(155, 89, 182);
  background-color: rgba(155, 89, 182, 0.05);
}

.notification.away {
  transform: translateX(calc(100% + 8px));
}