assets/cucumber-react.css in cucumber-html-formatter-7.0.0 vs assets/cucumber-react.css in cucumber-html-formatter-7.1.0

@@ -7,11 +7,11 @@
 .cucumber-react a {
   color: inherit;
 }
 .cucumber-react ol {
   list-style-type: none;
-  padding-left: 0;
+  padding-left: 10px;
 }
 .cucumber-react section {
   margin-bottom: 1em;
 }
 .cucumber-react .status-passed {
@@ -123,63 +123,137 @@
   padding: 4px 8px 4px 8px;
   margin-right: 6px;
   background-color: #FFFFFF;
   border-radius: 6px;
 }
-.cucumber-react .cucumber-report-header {
-  width: 100%;
+.cucumber-react p.cucumber-no-results {
+  font: 14px "Open Sans", sans-serif;
+}
+
+.anchored-link {
+  position: relative;
   display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  border: 1px solid #4B5662;
-  border-right: 0;
-  border-bottom: 0;
-  font-size: 80%;
+  align-items: center;
+  margin-top: 0.3em;
+}
+.anchored-link a {
+  opacity: 0;
+  transition: all 0.35s ease-in-out;
+  position: absolute;
+  left: -20px;
+  display: flex;
+  align-items: center;
+}
+.anchored-link:hover a {
+  opacity: 1;
+  width: max-content;
+  transition: all 0.35s ease-in-out;
+}
+.anchored-link > * {
+  height: 100%;
+  margin-top: 0px;
+}
+.anchored-link h1, .anchored-link h2, .anchored-link h3 {
+  margin-top: 0px;
+}
+.anchored-link .attachment {
+  background-color: #ebebeb;
+  padding: 0.5em;
+}
+.anchored-link .attachment .attachment-icon {
+  margin-right: 0.5em;
+}
+.anchored-link .attachment-image {
+  margin-top: 1em;
+}
+.anchored-link .highlight mark {
+  background-color: yellow;
+}
+.anchored-link .cucumberFeature {
+  padding-left: 10px;
+}
+
+.cucumber-report-header {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font: 11px "Open Sans", sans-serif;
   margin-bottom: 1em;
 }
-.cucumber-react .cucumber-report-header > * {
-  flex-grow: 1;
-  border-right: 1px solid #4B5662;
-  border-bottom: 1px solid #4B5662;
+.cucumber-report-header > * {
   padding: 1em;
 }
-.cucumber-react .cucumber-report-header .cucumber-status-filter {
-  padding-bottom: 1em;
+.cucumber-report-header .cucumber-status-filter {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-.cucumber-react .cucumber-report-header .cucumber-status-filter th {
-  display: table-row;
+.cucumber-report-header .cucumber-status-filter table {
+  width: 100%;
 }
-.cucumber-react .cucumber-report-header .cucumber-status-filter td {
-  padding: 3px 15px;
+.cucumber-report-header .cucumber-execution-data {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-.cucumber-react .cucumber-report-header .cucumber-ci-information ul {
-  list-style-type: none;
+.cucumber-report-header .cucumber-search-bar {
+  border-right: 0;
 }
-.cucumber-react .cucumber-report-header .cucumber-search-bar input {
+.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-search {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 9fr 1fr;
+}
+.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-search input {
   padding: 0.4em;
   border-radius: 0;
-  width: 80%;
 }
-.cucumber-react .cucumber-report-header .cucumber-search-bar button {
+.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-search button {
   height: 2.2em;
   padding-left: 0.6em;
   padding-right: 0.6em;
 }
-.cucumber-react .cucumber-report-header .cucumber-search-bar p.help {
+.cucumber-report-header .cucumber-search-bar p.help {
   font-size: 80%;
 }
-.cucumber-react .attachment {
-  background-color: #ebebeb;
-  padding: 0.5em;
+.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul {
+  display: inline;
 }
-.cucumber-react .attachment .attachment-icon {
-  margin-right: 0.5em;
+.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul li {
+  list-style-type: none;
+  display: inline-block;
 }
-.cucumber-react .attachment-image {
-  margin-top: 1em;
+.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul li input {
+  display: inline-block;
+  width: auto;
+  height: 0.6em;
 }
-.cucumber-react .highlight mark {
-  background-color: yellow;
+.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul li label {
+  padding-right: 1em;
+}
+
+@media only screen and (min-width: 600px) {
+  .cucumber-report-header {
+    grid-template-columns: 1fr 1fr;
+  }
+  .cucumber-report-header .cucumber-status-filter {
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .cucumber-report-header .cucumber-search-bar {
+    grid-column: 1/-1;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .cucumber-report-header {
+    grid-template-columns: 1fr 1fr 2fr;
+  }
+  .cucumber-report-header .cucumber-status-filter {
+    border-bottom: 0;
+  }
+  .cucumber-report-header .cucumber-execution-data {
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 0;
+  }
+  .cucumber-report-header .cucumber-search-bar {
+    grid-column: auto;
+  }
 }
 .accordion {
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 2px;
 }