#inner-container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  margin-left: 5rem;
  margin-right: 5rem;
  margin-bottom: 2rem;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  max-width: 1000px;
  overflow: hidden;
}

#exercise-container {
  display: grid;
}

#title-and-exercise-actions {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  /* background-color: aliceblue; */
  align-items: center;
}

#exercise-actions {
  display: flex;
  gap: 1rem;
}

#description {
  height: 45vh;
  overflow: auto;
}

#challenge {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  word-wrap: break-word;
  min-width: 0;
  height: 45vh;
  overflow: auto;
}

#challenge-description {
  padding: 0 1rem 1rem 1rem;
}

#challenge-description-container {
  max-height: 100%;
}

#task-title {
  padding: 0 1rem 0 1rem;
}

#command-description {
  padding: 1rem;
}

#prof_check_mark {
  opacity: 0;
}

h2 {
  margin: 0;
}

p {
  margin: 0;
}

#reset {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  color: rgb(12, 55, 98);
  background-color: white;
  border: 1px solid rgb(12, 55, 98);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 1rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#reset:hover {
  background-color: rgb(239, 239, 239);
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#terminal-and-visualization {
  display: flex;
  flex-direction: row;
}

#success-message {
  justify-self: end;
  display: flex;
  background-color: green;
  color: white;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-radius: 20px;
  gap: 1rem;
  margin-bottom: 1rem;
}

#reset-button-container {
  justify-self: end;
}

#reset-button:hover {
  /* background-color: #303030; */
  background-color: #202020;
  /* font-weight: bold; */
}

#success-message p {
  font-size: larger;
  font-weight: bold;
}

.hidden {
  display: none;
}

.fa-check {
  font-size: x-large;
}

.text {
  color: #0c3762;
}

#commandline {
  background-color: black;
  height: 45vh;
  overflow: auto;
  display: grid;
  grid-template-columns: auto min-content;
  gap: 1rem;
}

#command-line-inner {
  padding: 1rem;
}

#visualization-container {
  /* border-style: solid; */
  background-color: aliceblue;
  height: 45vh;
}

#progress-indicator {
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  min-width: 6rem;
  justify-content: center;
  align-items: center;
  display: flex;
  border: 1px solid black;
  font-size: 1rem;
  gap: 0.5rem;
}

.completed {
  background-color: green;
  transition: all 0.7s ease-in-out;
}

.in-progress {
  background-color: rgb(107, 30, 107);
}

#success-indicator {
  background-color: green;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  min-width: 6rem;
  justify-content: center;
  align-items: center;
  display: flex;
  border: 1px solid black;
  font-size: 1rem;
  gap: 0.5rem;
  transition: all 0.7s ease-in-out;
}

#command-line-value {
  color: white;
  background-color: black;
  border: 0;
  padding: 0;
  flex-grow: 1;
}

#command-line-value:focus {
  outline: 0;
}

#history {
  color: white;
}

/* #start-symbol-and-input {
  display: flex;
  color: white;
  align-items: center;
  height: 18px;
} */

/* .node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
} */
.output {
  padding-bottom: 1rem;
}

.symbol-and-input {
  display: flex;
  gap: 1rem;
  color: white;
  align-items: center;
}

.symbol-and-input p {
  padding: 0;
  margin: 0;
}

.link- {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 4px;
}

.link-local {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

.link-remote {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

.link-remote-commit {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

.link-local-commit {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

.output-list {
}

.output-list p {
  padding: 0;
  margin: 0;
}

.ls-output {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.git-status {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}

.git-status p {
  padding: 0;
  margin: 0;
}

.git-commit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.git-status-branch {
}

.git-status-staged {
}

.git-status-not-staged {
}

.git-status-untracked {
}

.git-status-files {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding-left: 2rem;
}

.git-status-files-names {
}

.git-status-files-statuses {
}

.git-status-staged .git-status-files p {
  color: #66ff00;
}

.git-status-not-staged .git-status-files p {
  color: red;
}

.git-status-untracked .git-status-files p {
  color: red;
}

.command-line-prompt,
.command-line-prompt-old {
  display: flex;
  gap: 0.25rem;
  width: max-content;
}

.command-line-prompt-path,
.command-line-prompt-path-old {
  color: yellow;
}

.command-line-prompt-branch,
.command-line-prompt-branch-old {
  color: aqua;
}

.history-line-container {
  display: flex;
  flex-direction: column;
  padding: 0 0 0.5rem 0;
}

.prompt-and-input {
  display: flex;
  gap: 1rem;
}

.output-list-container {
  display: flex;
  flex-direction: column;
}

.prompt-container {
  display: flex;
  gap: 0.25rem;
}

.path {
  color: yellow;
  width: max-content;
}

.branch {
  color: aqua;
}

.ls-output-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.commit-output-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.status-output-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}

.status-section-files {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding-left: 2rem;
}

.working-files {
  color: red;
}

.staged-files {
  color: #66ff00;
}