/* Hide existing submit */
.feedback-container {
  display: none;
}

/* Layout */

.profile-select {
  margin-bottom: 5rem;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ccc;
}

.profile-select-body {
  margin-left: 3rem;
}

.profile-select-body label {
  font-weight: normal;
  margin-bottom: 1rem;
}

.profile-select-label-heading {
  display: block;
  font-size: 2rem;
  font-weight: bold;
}

.profile-select-radio {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.profile-select-radio > * {
  margin: 0 !important;
}

.profile-option-container {
  display: grid;
  grid-template-columns: 1fr 6fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.profile-option-label-container {
  grid-column-start: 1;
  align-self: start;
}

.profile-option-control-container {
  grid-column-start: 2;
}

#submit-button {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* Image Building styling & layout */

.terminal-container {
  background-color: black;
  padding: 16px;
}
.profile-option-control-container input[type="text"] {
  width: 100%;
  /* 8px here, even though we only use 4px for .react-select-item-container.
       Achieves similar visual effect.
    */
  padding: 8px;
  border: 1px solid gray;
  border-radius: 4px;
}

.profile-option-container.has-error label {
  color: red;
}

.profile-option-container.has-error input {
  border-color: red;
}

.profile-option-control-error {
  color: red;
  margin-top: 0.5rem;
}

.profile-form-error {
  color: red;
  margin-bottom: 1rem;
}

.btn-jupyter {
  margin-top: 0.5rem;
}

/* react-select styling */
.react-select-item-container.react-select-item-menu-display.react-select-item-selected
  .react-select-item-description {
  /* When rendering an option in react select's *menu*, if it is the currently selected one, make the description much lighter.
       Otherwise, it gets unreadable in the blue;
    */
  color: #ddd;
}
.react-select-item-container {
  padding: 4px;
}

.react-select-item-description {
  color: #999;
}
