.parent-inline-selector {
  color: white;
}
.child {
  color: black;
}
.parent-block {
  color: white;
}
.child1 {
  color: green;
}
.child2 {
  color: blue;
}
.parent-block .step-child {
  color: black;
}
.first {
  color: red;
}
body .second {
  color: white;
  color: black;
}
.nested1 {
  color: blue;
  color: orange;
}
.nested2 {
  color: yellow;
}
.third {
  color: green;
}
@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}
@media (min-width: 300px) {
  .my-widget .inside-mq {
    inside-style: mq;
  }
}
.my-widget .outside-mq {
  outside-style: mq;
}
.outside-class {
  color: blue;
}
@media (min-width: 300px) {
  .with-only {
    color: pink;
  }
}
@media screen and (max-width: 320px) {
  .foo {
    margin: 0;
  }
}
@media screen and (max-width: 320px) {
  .bar {
    padding: 0;
  }
}
.baar {
  padding: 0;
}
.foo .barr {
  padding: 0;
}
.foo .bar {
  width: 0;
}
@supports (display: flex) {
  .baz {
    height: 0;
  }
}
@media screen and (max-width: 640px) {
  .qux {
    margin: 0;
  }
}
@media screen and (max-width: 640px) {
  .foo .quux {
    padding: 0;
  }
}
.foo .quix {
  padding: 0;
}
.test .test2 {
  padding: 0px;
}
tbody {
  padding: 10px;
}
a.badge {
  text-decoration: none;
}
.badge-primary {
  background-color: blue;
}
a.badge-primary:focus, a.badge-primary.focus {
  outline: 0;
}
.badge-secondary {
  background-color: yellow;
}
a.badge-secondary:focus, a.badge-secondary.focus {
  outline: 0;
}
.table-hover tbody tr:hover, .table2#id tbody tr:hover {
  color: #ddd;
  background-color: #eee;
}
.table-hover tbody tr.foo, .table2#id tbody tr.foo {
  color: red;
}
.badge {
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}
a.badge:hover, a.badge:focus {
  text-decoration: none;
}
.btn:hover, .btn:focus {
  text-decoration: none;
}
.other {
  content: "bar";
  content: "foo";
}
.class .test {
  color: red;
}