_core.less

//
// Core
// --------------------------------------------------

// See https://docs.angularjs.org/api/ng/directive/ngCloak
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

// Prevent zooming when focusing input fields in mobile Safari. Try to only
// target mobile devices to avoid larger-than-wanted fonts elsewhere.
@media only screen and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 0) {
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  select.form-control,
  textarea,
  .console-os .ace_editor {
    font-size: 16px;
  }

  // Fix Bootstrap modal dialog zoom on the iPhone
  // See http://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
  body {
    padding-right: 0px !important
  }
  .modal-open {
    overflow-y: auto;
  }
}

.console-os {
  .wrap > .container { // For projects list page
    margin-top: 35px;
    margin-bottom: @grid-gutter-width * 2;
    h1 {
      margin: 10px 0 20px;
    }
  }
}
.console-os {
  .page-header {
    border-color: @page-header-border-color;
    margin-bottom: 0;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    .actions {
      margin-top: 0;
    }
  }
  .section-header{
    .page-header();
    border-bottom: none;
    padding-bottom: 10px;
  }
}
@media (min-width: @screen-md-min) {
  .console-os {
    .page-header.page-header-bleed-left {
      margin-left: -30px;
      padding-left: 30px;
      margin-right: -30px;
      padding-right: 30px;
    }
    .middle .container-fluid {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}

// Firefox-specific hack for preventing fieldset content causing the container to expand
// see: https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685
@-moz-document url-prefix() {
  .console-os fieldset {
    display: table-cell;
  }
}

.separator {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.surface-shaded .nav-tabs {
  border-color: rgba(0, 0, 0, 0.15);
}

.breadcrumb {
  font-size: @font-size-base - 1;
  padding-bottom: 0;
  strong {
    font-weight: 600;
  }
}

.nav-tabs {
  // Use Patternfly secondary tab style on tabs
  // https://www.patternfly.org/widgets/#tabs
  .nav-tabs-pf;

  // Make sure the tabs are left-aligned when they wrap. Apply the same style
  // Patternfly uses for the first tab to all tabs, which prevents the extra
  // left margin on the second line.
  > li {
    // Right padding keeps the same spacing between tabs as before.
    padding-right: 15px;
    // https://github.com/patternfly/patternfly/blob/v3.3.2/less/tabs.less#L82-L89
    > a {
      padding-left: 0;
      &:before {
        left: 0 !important;
      }
    }
  }
}

.nav-tabs, .tab-content {
  margin-bottom: @grid-gutter-width / 2;
  margin-top: @grid-gutter-width / 2;
}

.hide-tabs .nav-tabs {
  display: none;
}

.empty-project {
  margin: 10px auto;
  max-width: 500px;
  padding: 30px;

  // Make sure icons are the same size so text aligns.
  .fa {
    width: 16px;
    text-align: center;
  }
  dd {
    margin-left: 20px;
    margin-bottom: 10px;
  }
}

.empty-state-message {
  margin: 60px auto;
  max-width: 600px;
  padding: 0 (@grid-gutter-width / 2);
  h2, .h2 {
    // Avoid clipped descenders with class truncate or overflow: hidden
    line-height: 1.4;
  }
  .btn {
    margin: 10px 0 20px;
  }
  .hero-icon {
    // Hidden at height <600px.
    display: none;
    @media (min-height:600px) {
      display: inline-block;
      font-size: 90px;
    }
  }
  @media (min-height:800px) {
    margin-top: 150px;
    .hero-icon {
      font-size: 100px;
    }
  }
  @media (min-height:1024px) {
    margin-top: 200px;
    .hero-icon {
      font-size: 120px;
    }
  }
}

// Mark is used for highlighting terms like search terms. See http://getbootstrap.com/css/#type-inline-text
// Remove the default padding as it makes letters jump for as-you-type updates.
mark {
  padding: 0;
  background-color: rgba(252, 248, 160, 0.5);
}

.service-table {
  .text-center;
  max-width: 650px;
  thead {
    tr th {
      .text-center;
    }
  }
  @media (max-width: @screen-sm-max) {
    // The `table-responsive` div adds a 100% border. Make sure the table is at
    // least 100% to avoid a white block at some screen sizes.
    min-width: 100%;
  }
}

.build-config-summary {
  .latest-build-status {
    margin-right: 5px;
    .status-icon {
      width: 20px;
    }
  }
  // Indent icon width to align with text above.
  .latest-build-timestamp {
    margin-left: 25px;
  }
}

.image-sources {
  .source-path:after,
  .destination-dir:before {
    content: "\00a0 ";
  }
}

.pipelines-page {
  @media (max-width: @screen-xs-max) {
    h2 small {
      display: block;
      margin-top: 3px;
    }
    .source-repo {
      display: block;
    }
  }
}

// The chart gets too compressed at narrow widths. Use an approach
// similar to table-responsive on mobile where the user can scroll.
.build-trends-responsive {
  width: 100%;
  margin-top: 20px;
  overflow: auto;
  .build-trends-container {
    min-width: 600px;
    height: 235px;
    // Set initial tooltip position to 0, 0 to avoid scrollbars flickering when
    // c3 first shows the tooltip, but hasn't positioned it.
    // (Doesn't change tooltip positioning.)
    .c3-tooltip-container {
      top: 0;
      left: 0;
    }
    // Disable the gray vertical line when hover over a bar.
    .c3-xgrid-focus {
      display: none;
    }
    .build-trends-avg-line {
      stroke: #d1d1d1;
      stroke-dasharray: 8,5;
      stroke-width: 1;
    }
    .avg-duration {
      margin-right: 30px;
    }
    .avg-duration-text {
      vertical-align: top;
      // same as c3-legend
      font-size: 12px;
    }
    @media (max-width: @screen-xs-max) {
      // Show a border at mobile screen widths so it's obvious you can scroll.
      border: 1px solid #d1d1d1;
      padding: 10px 0;
    }
  }
}

.metrics {
  .metrics-options {
    .form-group {
      margin-bottom: 0;
    }
    .select-container {
      display: inline-block;
    }
    @media (min-width: @screen-sm-min) {
      .form-group {
        display: inline-block;
      }
      .select-container {
        margin-right: 10px;
      }
    }
  }
  .metrics-full {
    .metrics-donut,
    .metrics-sparkline {
      margin-top: 20px;
    }
  }

  // Avoid overlapping tick text at mobile.
  @media (max-width: 500px) {
    .metrics-sparkline .c3-axis-x .tick {
      display: none;
    }
  }
}

// Since the monitoring page has additional padding, we need to stop showing ticks sooner.
@media (max-width: 550px) {
  .monitoring-page .metrics-sparkline .c3-axis-x .tick {
    display: none;
  }
}

// The sidebar takes additional width from the chart when open.
@media (max-width: 950px) {
  .monitoring-page.sidebar-open .metrics-sparkline .c3-axis-x .tick {
    display: none;
  }
}

.metrics-compact {
  margin-bottom: 10px;
  white-space : nowrap;
  @media (min-width: @screen-lg-min) {
    margin-bottom: 5px;
  }
  .metrics-sparkline {
    display: none;
    height: 27px;
    border-bottom: 1px solid #ededed;
    @media (min-width: @screen-lg-min) {
      display: inline-block;
      width: 150px;
      vertical-align: -6px;
    }
    @media (min-width: 1400px) {
      width: 230px;
    }
  }
  .metrics-usage {
    display: block;
    margin-left: 10px;
    @media (min-width: @screen-lg-min) {
      display: inline-block;
    }
  }
  .usage-value {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    margin: 3px 0;
    .fa {
      .text-muted();
      font-size: 10px;
      vertical-align: 2px;
    }
  }
  .usage-label {
    .small();
    .text-muted();
    // Make sure the labels align with the bottom of the chart.
    line-height: 1;
    margin-bottom: -1px;
  }
  .c3-line {
    stroke-width: 1px;
  }

  @media (max-width: @screen-sm-max) {
    .text-center();
    display: inline-block;
    margin: 10px;
    .metrics-usage {
      .usage-value {
        font-size: 22px;
      }
    }
  }
}

.quota-chart {
  margin: 0 20px;
}


// Create App
// --------------------------------------------------

label.checkbox {
  font-weight: normal;
}

.form-group .checkbox {
  // Use the default form-group margin for consistency. Otherwise the
  // checkboxes are closer than other form elements.
  margin-bottom: inherit;
}

.drag-and-drop-zone {
  display: none;
}

.show-drag-and-drop-zone {
  border-style: dashed;
  display: block;
  border-color:  rgb(136, 136, 136);
  border-width: 3px;
  background-color: rgba(255, 255, 255, 0.6);
  margin: -3px;
  text-align: center;
  vertical-align: middle;
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    margin: 0;
  }
}

.highlight-drag-and-drop-zone {
  border-color: #0099d3;
  p {
    color: #0099d3;
  }
}

.deploy-image {
  h2 small {
    display: block;
    margin-top: 5px;
    @media (min-width:@screen-md-min) {
      display: inline-block;
      margin-top: 0;
    }
  }
  @media (min-height:800px) {
    .empty-state-message {
      margin-top: 100px;
    }
  }
}

.icon-xl {
  font-size: 128px;
}

.istag-separator {
  .hidden-xs();
  .text-muted();
  position: absolute;
  top: 2px;
  right: -3px;
}

.about,
.command-line {
  .about-icon {
    img {
      width: 100%;
    }
  }
}

.lifecycle-hook {
  padding-bottom: 20px;
  &:first-of-type {
    padding-top: 20px;
  }
  .read-only-tag-image {
    padding-bottom: 10px;
  }
}

.osc-form {
  .icon {
    text-align: center;
    custom-icon {
      font-size: 100px;
      line-height: 1;
    }
  }
  span.fa.visible-xs-inline {
    margin-right: 10px;
  }
  .flow {
    .separator;
    display: table;
    margin-top: @grid-gutter-width;
    width: 100%;
    > .flow-block {
      display: inline-block;
      &.right {
        font-size: @font-size-small;
        font-weight: normal;
        .action-inline {
          @media (max-width: @screen-xs-max) {
            margin-left: 0;
          }
        }
      }
      .action {
          font-size: @font-size-small;
          font-weight: normal;
          // &:extend(.action-inline);
        }
      > ul.list-inline {
        margin-bottom: 0;
        > li {
          font-size: @font-size-small;
          padding-right: 0;
          text-align: left;
        }
      }
    }
  }
  .first-section .flow {
    margin-top: (@grid-gutter-width / 2);
    border-top: 0;
  }
  .template-options {
    line-height: 1.5;
    .list-unstyled {
      .options {
        margin-bottom: 12px;
      }
      .help-block {
        margin: 0 0 5px 2px;
      }
    }
    .form-group {
      width: 100%;

      .parameter-input-wrapper {
        position: relative;

        .resize-input {
          position: absolute;
          right: 6px;
          top: 5px;

          .fa-expand, .fa-compress {
            transform: rotate(90deg);
          }
        }

        input, textarea {
          padding-right: 20px;
        }
      }
    }
    .help-block {
      margin-bottom: 5px;
    }
  }
}

@media (max-width: @screen-xs-max) {
  .compute-resource .inline-select {
    // Spacing below input at mobile sizes.
    margin-top: 5px;
  }
}

.next-steps {
  .tile {
    margin-bottom: 0;
    &.tile-status {
      margin-top: 0;
    }
  }
}

// `edit-command` directive
.command-args {
  textarea {
    // Resize does not work well with drag and drop reordering.
    resize: none;
  }
  .drag-handle {
    cursor: move;
    .fa {
      padding-left: 5px;
    }
  }
  .drag-handle, .remove-arg {
    background-color: inherit;
    border: 0;
    font-size: 15px;
    padding-top: 5px;
    vertical-align: top;
  }
}

@create-form-md-width: 44%;
@media (min-width: 767px) {
  .osc-form {
    .flow > .flow-block {
      display: table-cell;
      &.right {
        // float: right;
        text-align: right;
      }
    }
    .labels .form-group {
      // Show name/value fields like labels and env vars side by side at wide screen sizes.
      // Align text fields with read-only values.
      width: @create-form-md-width;
      .form-control {
        width: 100%;
      }
    }
  }
}

.label-list li,
.env-variable-list li {
  &:first-child {
    padding: 6px 0 0;
  }
  .key,
  .value {
    display: inline-block;
    margin: 0;
    width: 44%;
  }
  .value {
    max-width: 500px; // enable firefox to truncate
  }
  .btn {
    vertical-align: top;
  }
}

.label + .label {
  margin-left: 3px;
}

.template-message {
  background-color: #d9edf7;
  border-color: #31708f;
  border-style: solid;
  border-width: 1px;
  color: black;
  .resource-description {
    margin-bottom: 0;
    font-family: @font-family-monospace;
    // Consistent font-size with the CLI examples in code blocks below the template message.
    font-size: (@font-size-base - 1);
  }
}

.resource-description {
  margin-bottom: (@grid-gutter-width / 2);
  .pre-wrap();
  .word-break();
}
.resource-metadata {
  margin-bottom: (@grid-gutter-width / 2);
}

// Misc
// TODO: pull out into _partials where it makes sense
// --------------------------------------------------
.action-inline {
  margin-left: @action-link-inline-margin;
  font-size: @font-size-small;
  i.pficon, i.fa {
    color: @btn-default-color;
    margin-right: 5px;
  }
}

a.subtle-link {
  color: @gray-light;
  border-bottom: 1px dotted #BBB;

  &:hover, &:active, &:focus {
    color: @link-hover-color;
    border-bottom: 1px dotted @link-hover-color;
    text-decoration: none;
  }
}

.tasks {
  background-color: #ffffff;
  font-weight: normal;
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
  &.success {
    border: 1px solid #3f9c35;
    border-left: 3px solid #3f9c35;
  }
  &.failure {
    border: 1px solid #cc0000;
    border-left: 3px solid #cc0000;
  }
  .task-icon {
    font-size: 38px;
    left: 15px;
    position: absolute;
    top: 14px;
  }
  .task-content {
    font-size: 16px;
    .task-info {
      margin-left: 45px;
    }
    .task-title {
      margin-right: 10px;
    }
    .task-links {
      font-size: 13px;
      font-weight: 300;
      white-space: nowrap;
    }
  }
  .task-expanded-details {
    margin-top: 20px;
    .alert {
      margin-bottom: 0;
    }
  }
}

label.required:before {
  content: '*';
  position: absolute;
  left: 10px;
}

.btn-xs {
  padding: 0 4px;
}
.btn-lg, .btn-group-lg > .btn {
  line-height: 1.334; // needed to make same height as inputs
}

code {
  white-space: normal;
}

pre,
div {
  &.code {
    background-color: #fff;
    border: none;
    border-left: 2px solid rgb(204, 204, 204);
  }
}

div.code {
  &:extend(pre);
}

[data-toggle="tooltip"] {
  cursor: pointer; // so tooltips get correct cursor
}

// Fix to override the Firefox 40+ behavior to add text-decoration
// No other browser does this.
abbr[data-original-title], abbr[title] {
  text-decoration: none;
}

.dl-horizontal {
  &.left {
    dt {
      text-align: left;
    }
  }
  &.indent {
    margin-left: (@grid-gutter-width / 2); // 20px
  }
  dd {
    &:extend(.clearfix all); // Including this here because it's not being set even though it's in /bootstrap/less/type.less dunno why?
  }
}

.gutter-top-bottom {
  padding: @grid-gutter-width / 2 0;
  &.gutter-top-bottom-2x {
    padding: @grid-gutter-width 0;
  }
}
.gutter-top {
  padding-top: @grid-gutter-width / 2;
  &.gutter-top-2x {
    padding-top: @grid-gutter-width;
  }
}
.gutter-bottom {
  padding-bottom: @grid-gutter-width / 2;
  &.gutter-bottom-2x {
    padding-bottom: @grid-gutter-width;
  }
}

select:invalid {
    box-shadow: none;
}

.truncate {
  // Bootstrap mixin
  // Note: If truncating within a flex container then the parent needs a width
  .text-overflow();
}

.nowrap {
  white-space: nowrap;
}

.well > {
  h1, h2, h3, h4, h5 {
    &:first-child {
      margin: 5px 0 15px;
    }
  }
}

.spinner.spinner-xs { // set height & width to 12px so that FF displays correctly
  height: 12px;
  width: 12px;
}

.spinner.spinner-inverse {
  border-color: rgba(0,153,211, .25);
  border-top-color: rgba(0,153,211, .75);
}

.attention-message {
  background-color: lighten(@brand-primary, 50%);
  border: 1px solid darken(@brand-primary, 10%);
  position: absolute;
  left: 50%;
  margin-top: 100px;
  transform: translateX(-50%);
  padding: 1em 1em 2em;
  min-width: 85%;
  h1,p {
    text-align: center;
  }
  p {
    max-width: 70em;
    margin: auto;
  }
}
.learn-more-block {
  display: block;
  font-size: @font-size-small;
  font-weight: normal;
}

.learn-more-inline {
  display: inline;
  font-size: @font-size-small;
  font-weight: normal;
  margin-left: 5px;
}

.short-id {
  background-color: #f1f1f1;
  color: #666;
}

.input-number {
  width: 60px;
}

.alert {
  margin-bottom: 14px;
  margin-top: 7px;
  code {
    // alerts have a clashing background color. Inherit the background and
    // remove padding, which looks strange without the background color.
    background-color: inherit;
    padding: 0;
  }
  .close {
    margin-left: 5px;
  }
}

.action-button {
  color: @gray-light;
  cursor: pointer;
  &:hover, &:active, &:focus {
    color: #000;
  }
}

a.action-button {
  &:hover, &:active, &:focus {
    text-decoration: none;
  }
}

// Use with aria-disabled="true" and role="button"
a.disabled-link {
  color: #bbbbbb;
  cursor: not-allowed;
  opacity: 0.4;
  &:hover, &:active, &:focus {
    color: #bbbbbb;
    text-decoration: none;
  }
}

.actions-dropdown-btn {
  margin-left: 5px;
}

.actions-dropdown-kebab {
  .action-button;
  // Bigger click target for the dropdown icon, which is a narrow ellipsis
  padding: 0 10px;
  vertical-align: middle;
}

.modal-resource-action {
  background-color: @gray-lighter;
  h1 {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 20px;
    .word-break();
  }
  p {
    font-size: @font-size-large + 1;
  }
}

// Disable numeric highlighting in YAML and Dockerfile modes because of bugs
.editor.yaml-mode .ace_constant.ace_numeric, .ace_editor.dockerfile-mode .ace_constant.ace_numeric {
  color: inherit;
}

.edit-yaml {
  h1 {
    line-height: 1.3;
  }
  .editor {
    font-family: @font-family-monospace;
    line-height: 1.5;
    width: 100%;
    min-height: 140px;
    height: 50vh;
    .ace_gutter {
      color: #8b8d8f;
    }
    @media (min-height: 550px) {
      height: 60vh;
    }
    @media (min-height: 750px) {
      height: 70vh;
    }
  }
}

.debug-pod-action {
  margin-top: 5px;
}

.modal-debug-terminal {
  .modal-header {
    padding: 0 18px 5px;
    h2 {
      margin-bottom: 5px;
    }
  }
  .modal-body {
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    padding: 5px 15px 0;
    .original-cmd-msg {
      margin-bottom: 10px;
    }
    .empty-state-message {
      margin-top: 60px;
    }
    kubernetes-container-terminal {
      .text-center();
      overflow: hidden;
    }
    padding-bottom: 15px;
  }
  .modal-footer {
    padding-top: 0;
  }
}

.ace-inline {
  height: 300px;
}

.ace-inline-small {
  height: 200px;
}

#from-file .editor {
  height: 350px;
}

.edit-form {
  .with-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 21px;
    padding-bottom: 10px;
    margin-top: 10px;
  }
  .labels {
    .form-group {
      width: 44%;
      .form-control {
        width: 100%;
      }
    }
  }
  .checkbox {
    margin: 10px 0;
  }

  .trigger-info {
    margin: 10px 0px 10px 0px;
    .trigger-url {
      display: inline-block;
      vertical-align: middle;
    }
    .trigger-actions {
      display: inline-block;
      margin-left: 5px;
      .action-icon,
      .action-icon:hover {
        color: @color-pf-black-700;
      }
    }
  }

  .section {
    padding-bottom: 5px;
  }
  @media (max-width: @screen-sm-min) {
    .trigger-url {
      max-width: 90%;
    }
    .labels {
      .form-group {
        width: 100%;
      }
    }
  }
}

.status {
  min-width: 130px;
  .status-icon {
    margin-right: 6px;
    width: 13px;
    text-align: center;
  }
}
pre.clipped {
  display: inline-block;
  margin-top: 10px;
  max-width: 100%;
  &.scroll {
    max-height: 150px;
    overflow: auto;
    width: 100%;
  }
}

.k8s-label {
  margin-right: 5px;
  // A bit more space below the actions button.
  margin-top: 3px;
  &:before {
    content: ' ';
    white-space: normal;
  }
  .label-pair {
    margin-bottom: 2px;
  .label {
    &:first-child {
      border-radius: 2px 0 0 2px;
    }
    &:last-child {
      border-radius: 0 2px 2px 0;
    }
  }
  .label-key {
    background-color: #bee1f4;
    color: #00659c;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: 0;
    font-size: 12px;
  }
  // if its a link
  a.label-key {
    &:hover, &:focus, &:active {
      background-color: #00659c;
      color: #FFFFFF;
    }
  }
  .label-value {
    background-color: #7dc3e8;
    color: #FFFFFF;
    margin-left: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
  }
  a.label-value {
    &:hover, &:focus, &:active {
      background-color: #00659c;
    }
  }
  }
}
@media (max-width: @screen-sm-min) {
  .k8s-label {
  // enable label to truncate
    width: 100%;
    .label {
      display: block;
      min-width: 50px;
    }
    .label-pair {
      width: 100%;
    }
  }
}

labels + .resource-details {
  margin-top: 10px;
}

[flex].page-header {
  // reduced for consistency if used with flex
  margin-top: 21px;
}

.resource-details h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

h1 small.meta, .build-config-summary .meta {
  font-size: 12px;
  @media (max-width: @screen-xs-min) {
    display: block;
    margin-top: 5px;
  }
}

.ace-bordered {
  border: 1px solid #8b8d8f;
  &.ace-read-only {
    border-color: #d1d1d1;
    background-color: #fafafa;
  }
}

.action-divider {
  color: @gray-light;
}

.surface-shaded .table {
  background-color: transparent;
}

.environment-variables {
  &.table.table-bordered > tbody > tr > td:first-child {
    font-weight: bold;
    padding-right: 10px;
    vertical-align: top;
  }
  &.table.table-bordered > tbody > tr > td:last-child {
    word-break: break-all;
    width: 100%;

    .env-var-value {
      font-family: @font-family-monospace;

      a {
        font-family: @font-family-base;
      }
    }
  }
}

.pretty-json {
  font-family: @font-family-monospace;
  white-space: pre-wrap;
}

.info-popover, .warnings-popover {
  cursor: help;
  vertical-align: middle;
  margin-left: 2px;
}

// don't allow copy-to-clipboard .input-groups get bigger than 600px so Github webhook secrets aren't revealed within the input-group
copy-to-clipboard .input-group {
  max-width: 300px;
}

// same style as a <strong> tag but used when you want to optionally apply the style based on a condition
.strong {
  font-weight: bold;
}

.tech-preview-header {
  justify-content: space-between;
}


// add an option for a single-column display at screen resolutions 0-479px
@media (max-width: @screen-xxs-max) {
  .col-xxs-12 {
    width: 100%;
  }
}

// Use to control spacing on the parent div to prevent spacing discrepancy at mobile
.h2-help-block {
  margin-bottom: (@line-height-computed / 2);
  h2 {
    margin-bottom: 0;
    margin-right: 5px;
  }
}