.c4it-condition-lab {
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #f8fafc;
  margin: 1.5em 0;
  padding: 18px;
}

.c4it-condition-lab * {
  box-sizing: border-box;
}

.c4it-condition-lab__grid {
  display: grid;
  gap: 14px;
}

.c4it-condition-lab__panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px;
}

.c4it-condition-lab__row {
  display: grid;
  gap: 8px;
  margin: .8em 0;
}

.c4it-condition-lab label {
  font-weight: 700;
}

.c4it-condition-lab input[type="range"] {
  width: 100%;
}

.c4it-condition-lab select {
  width: 100%;
  border: 1px solid #b8c2d1;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  padding: .5em;
}

.c4it-condition-lab input:focus-visible,
.c4it-condition-lab select:focus-visible,
.career4it-code-copy-button:focus-visible {
  outline: 3px solid rgba(23, 94, 170, .35);
  outline-offset: 2px;
}

.c4it-condition-lab__steps {
  display: grid;
  gap: 7px;
  margin: .8em 0;
}

.c4it-condition-lab__step {
  border-left: 4px solid #94a3b8;
  background: #f1f5f9;
  padding: .65em;
}

.c4it-condition-lab__step.is-true {
  border-left-color: #16803c;
  background: #ecfdf3;
}

.c4it-condition-lab__step.is-false {
  border-left-color: #b42318;
  background: #fff1f0;
}

.c4it-condition-lab__formula {
  background: #17202a;
  color: #f8fafc;
  margin: .7em 0 0;
  overflow: auto;
  padding: .85em;
  white-space: pre-wrap;
}

.c4it-condition-lab__result {
  font-weight: 700;
  margin: .8em 0 0;
}

.career4it-code-copy-wrap {
  position: relative;
  margin: 1.5em 0;
}

.career4it-code-copy-wrap pre {
  margin: 0;
  padding-top: 3.25em;
}

.career4it-code-copy-button {
  position: absolute;
  top: .75em;
  right: .75em;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4px;
  background: rgba(32, 38, 46, .92);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  max-width: calc(100% - 1.5em);
  min-height: 32px;
  padding: .55em .75em;
  white-space: normal;
}

.career4it-code-copy-button:hover,
.career4it-code-copy-button:focus {
  background: #0f1720;
  border-color: rgba(255, 255, 255, .65);
  outline: none;
}

.career4it-code-copy-button.is-copied {
  background: #176a43;
}

@media (min-width: 760px) {
  .c4it-condition-lab__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .career4it-code-copy-wrap pre {
    padding-top: 3.5em;
  }

  .career4it-code-copy-button {
    font-size: 11px;
  }
}