/* layouts Grid Column */
.customColumnClass:nth-child(odd) {
  background-color: #ddd;
}

.customColumnClass:nth-child(even) {
  background-color: #ccc;
}

.customRowClass {
  border: 1px solid #ddd;
}

/* layouts Icon */
.iconExample,
.buttonExample {
  margin-right: 6px;
}

/* checkbox */
.checkboxInlineExample {
  float: left;
  margin-right: 6px;
}

.checkboxExampleSection {
  display: block;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Override style of react-styleguidist */
p code[class^="code-"],
li code[class^="code-"] {
  background-color: #E8EAF6 !important;
  color: #3F51B5;
  border-radius: 3px;
  font-size: 13px;
  padding: 2px 4px;
}

h1 > a,
h1 > a:visited,
h1 > .primary:visited,
h2 > a,
h2 > a:visited,
h2 > .primary:visited {
  color: #00142b !important;
}

h1 > a:hover,
h1 > a:visited:hover,
h2 > a:hover,
h2 > a:visited:hover {
  color: rgba(0, 20, 43, .8) !important;
}

a:hover,
a:visited:hover {
  text-decoration: none !important;
}

[class^="sidebar"] {
  background-color: #00142b !important;
  border-color: #00142b !important;
  width: 300px !important;
}

[class^="sidebar"] a,
[class^="sidebar"] a:visited {
  color: #fff !important;
}

[class^="sidebar"] a:hover {
  color: rgba(255, 255, 255, .5) !important;
}

[class^="sidebar"] > div {
  border-color: #00142b !important;
}

[class^="sidebar"] h1 {
  color: #fff;
  font-size: 34px;
  line-height: 60px;
}

[class^="sidebar"] h1::before {
  background-image: url("../../images/toolset-logo-light.png");
  background-size: 60px 60px;
  width: 60px;
  height: 60px;
  display: block;
  float: left;
  content: "";
}

[class*="hasSidebar"] {
  padding-left: 300px !important;
}

footer {
  display: none !important;
}

@media (max-width: 600px) {
  [class^="sidebar"] {
    width: 100% !important;
  }

  [class*="hasSidebar"] {
    padding-left: 0 !important;
  }
}