/**
 * Missing Bootstrap styles needed for form.
 */
.well {
  display: block;
}

.form {
    padding-bottom: 12px;
}

.form-group {
  margin-bottom: 12px;
}

.form-horizontal .control-label {
  width: 300px;
  text-align: right;
  display: inline-block;
  padding-right: 12px;
}

@media screen and (max-width: 992px) {
  .form-horizontal .control-label {
    width: 200px;
  }
}

@media screen and (max-width: 514px) {
  .form-horizontal .control-label {
    text-align: left;
  }
}


.form-horizontal .controls {
  display: inline-block;
  margin-left: 0;
}

/**
 * A number of cdoc- specific classes.
 * Add outputclass="cdoc-page" to the main concept body will
 * 1. Add 'Step xxx' prefix to each main section
 * 2. Adjust paddings.
 * 3. Add $ to each of the command inputs, cdoc-input codeblocks.
 * 4. Adjust the look and feel to cdoc-output codeblocks.
 *
 * Add outputclass="cdoc-dev-mode" to the main concept body displays a background color for each category.
 * e.g. cdoc-os-redhat will show a different background color to cdoc-os-sles for example.
 */

/* adjusts the left margin so all boxes are aligned. */
.cdoc-page ~ section li dl {
  left: 0;
}

.dt[class*='cdoc-'],
.dd[class*='cdoc-'] {
  margin-left: 0;
}

li .dt[class*='cdoc-'],
li .dd[class*='cdoc-'] {
  margin-left: -12px;
  margin-right: 12px;
}

/* Automatically show counters for the main topics. */
.main_topic {
  counter-reset: step-counter;
}

.cdoc-page ~ section.nested1 {
  counter-increment: step-counter;
}

.cdoc-page ~ section.nested1 h2.topictitle2:before {
  content: "Step " counter(step-counter) ": ";
}

pre.codeblock {
  padding: 8px;
  background-color: #fafafa;
  border: 1px solid #dcdcdc;
  line-height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

/**
 * <codeblock outputclass="cdoc-input">...</codeblock>
 * transforms to
 * <pre class="codeblock cdoc-input">
 * line1
 * line2
 * </pre>
 *
 * cdoc-utils.js will rewrite this as
 * <pre class="codeblock cdoc-input">
 * <span class="cdoc-command-line">line1</span>
 * <span class="cdoc-command-line">line2</span>
 * </pre>
 * We want to add a $ to these lines to indicate user should enter this.
 * We will include a copy to clipboard button.
 *
 * <codeblock outputclass="cdoc-input-file">...</codeblock>
 * transforms to
 * <pre class="codeblock cdoc-input-file">
 * line1
 * line2
 * </pre>
 * We will rewrite this as well and includes a copy to clipboard button.
 */
pre.codeblock.cdoc-input-file,
pre.codeblock.cdoc-input-mysql,
pre.codeblock.cdoc-input-mariadb,
pre.codeblock.cdoc-input-postgres,
pre.codeblock.cdoc-input-oracle,
pre.codeblock.cdoc-input-impala,
pre.codeblock.cdoc-input-beeline,
pre.codeblock.cdoc-input-hbase,
pre.codeblock.cdoc-input-zk,
pre.codeblock.cdoc-input-python,
pre.codeblock.cdoc-input-r,
pre.codeblock.cdoc-input-scala,
pre.codeblock.cdoc-input-kadmin,
pre.codeblock.cdoc-input-kadminlocal,
pre.codeblock.cdoc-input-bash,
pre.codeblock.cdoc-input {
  position: relative;
  white-space: pre-wrap;
  padding-right: 24px;
}

.cdoc-line:before {
  color: #aaa;
}

pre.codeblock.cdoc-input .cdoc-line:before,
pre.codeblock.cdoc-input-bash .cdoc-line:before {
  content: '$ ';
}

pre.codeblock.cdoc-input-mysql .cdoc-line:before {
  content: 'mysql> ';
}
pre.codeblock.cdoc-input-mariadb .cdoc-line:before {
  content: 'MariaDB [(none)]> ';
}

pre.codeblock.cdoc-input-postgres .cdoc-line:before {
  content: 'postgres=# ';
}

pre.codeblock.cdoc-input-oracle .cdoc-line:before {
  content: 'SQL> ';
}

pre.codeblock.cdoc-input-kadmin .cdoc-line:before {
  content: 'kadmin: ';
}

pre.codeblock.cdoc-input-kadminlocal .cdoc-line:before {
  content: 'kadmin.local: ';
}

pre.codeblock.cdoc-input-impala .cdoc-line:before {
  content: '[impala-shell] > ';
}

pre.codeblock.cdoc-input-beeline .cdoc-line:before {
  content: 'beeline> ';
}

pre.codeblock.cdoc-input-hbase .cdoc-line:before {
  content: 'hbase> ';
}

pre.codeblock.cdoc-input-zk .cdoc-line:before {
  content: '[zk:(CONNECTED)] ';
}

pre.codeblock.cdoc-input-python .cdoc-line:before {
  content: '>>> ';
}

pre.codeblock.cdoc-input-scala .cdoc-line:before {
  content: 'scala> ';
}

/* If there variables in these lines, make them stand out. */
samp {
  background-color: #fafafa;
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 1px 2px;
  color: #444;
}
h1 samp,
h2 samp,
h3 samp,
h4 samp,
h5 samp,
h6 samp {
  background-color: inherit;
  border: none;
  color: inherit;
}

pre.codeblock var {
  color: #165B79;
}

/* Examples to show various highlights. */
.cdoc-dev-mode .cdoc-db-oracle {
  background-color: #FFE5E5;
}

.cdoc-dev-mode .cdoc-db-mysql {
  background-color: #FFE8AF;
}

.cdoc-dev-mode .cdoc-db-embedded {
  background-color: #D5CFD1;
}

.cdov-dev-mode .cdoc-os-redhat {
  background-color: #FFCCCC;
}

.cdoc-dev-mode .cdoc-os-sles {
  background-color: #BEE4F5;
}

.cdoc-dev-mode .cdoc-os-debian {
  background-color: #F2DEDE;
}

.cdoc-dev-mode .cdoc-product-navigator {
  background-color: #EDF5E2;
}

/**
 * The main way to hide things by the filter module.
 * Every category needs to be added here.
 */
.cdoc-hidden,
.cdoc-hidden-db,
.cdoc-hidden-jdk,
.cdoc-hidden-cluster,
.cdoc-hidden-cr,
.cdoc-hidden-sp,
.cdoc-hidden-cdh,
.cdoc-hidden-cm,
.cdoc-hidden-product,
.cdoc-hidden-redhat,
.cdoc-hidden-sles,
.cdoc-hidden-ubuntu,
.cdoc-hidden-debian,
.cdoc-hidden-ha,
.cdoc-hidden-method,
.cdoc-hidden-os,
.cdoc-hidden-major,
.cdoc-hidden-running_server,
.cdoc-hidden-running_db,
.cdoc-hidden-jdbc,
.cdoc-hidden-am,
.cdoc-hidden-formfactor,
.cdoc-hidden-cdppvc,
.cdoc-hidden-service,
.cdoc-hidden-zdu,
.cdoc-hidden-oz {
  display: none !important;
}

/** A special input box that stores the base repo URL. */
input.cdoc-archive_cloudera_com_input[type='text'] {
  height: 32px;
  padding: 5px 12px;
  width: 500px;
  margin-bottom: 0;
  font-size: 1em;
}

.cdoc-archive_cloudera_com_btn {
  height: 32px;
  margin-left: 4px;
}

/** This is to make the environment filter appear clickable and allow user to copy this environment specific url to the clipboard. */
.cdoc-environment {
  margin-top: 0 !important;
  cursor: pointer;
  font-size: 1.6em;
  color: #29a7de;
}

.cdoc-environment-link {
  padding-left: 8px;
}

.cdoc-copy-btn {
  position: absolute;
  right: 4px;
  padding: 4px;
  background-color: transparent;
  border-width: 0;
}
.cdoc-copy-btn:before {
  color: #0B7FAD;
}

.cdoc-feedback {
  position: fixed;
  top: 24px;
  right: 24px;
  border: 1px solid #337ab7;
  border-radius: 4px;
  background-color: #29a7de;
  color: #fff;
  padding: 16px;
  z-index: 1020;
  font-weight: bold;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.cdoc-show-me-how-link:hover,
.cdoc-show-me-why-link:hover,
.cdoc-show-me-it-link:hover,
.cdoc-show-me-how-link:focus,
.cdoc-show-me-why-link:focus,
.cdoc-show-me-it-link:focus,
.cdoc-show-me-how-link,
.cdoc-show-me-why-link,
.cdoc-show-me-it-link {
  text-decoration: none;
}

@media print {
  /* We dont want to show the button to show-hide for printing. */
  .cdoc-show-me-how-link,
  .cdoc-show-me-why-link,
  .cdoc-show-me-it-link {
    display: none;
  }
  /* These generic hidden classes are used for show-hide. We want to show them for printing. */
  .cdoc-hidden {
    display: unset;
  }
}