html,
body {
  width: 100%;
  overflow-x: hidden;
}
html,
body {
  margin: 0;
  padding: 0;
  border: none;
}
#root > div {
  position: relative;
}
#elm {
  /* fonts */
  /* general stuff */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #272727;
}
#elm .tab {
  cursor: pointer;
  padding-bottom: 15px;
  border-bottom: 1px solid #525252;
  background: transparent;
  color: #ededed;
  font-size: 14px;
  line-height: 155%;
}
#elm .tab.active {
  border-color: #0db5ff;
}
#elm .tab:hover {
  border-color: #17a2df;
}
#elm .tab:active {
  border-color: #1681bd;
}
#elm .tab.active {
  color: #0db5ff;
}
#elm .tab:hover {
  color: #17a2df;
}
#elm .tab:active {
  color: #1681bd;
}
#elm .tab:not(:active) {
  transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
#elm .button {
  border-radius: 100px;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  line-height: 155%;
}
#elm .button:not(:disabled) {
  cursor: pointer;
}
#elm .button:disabled {
  cursor: not-allowed;
}
#elm .button.primary,
#elm .button.text {
  padding: 8px 30px;
}
#elm .button.secondary {
  padding: 6px 28px;
  border: 2px solid #ffffff;
}
#elm .button.secondary.small {
  padding: 3px 18px;
}
#elm .button.primary:not(:disabled) {
  background: #0db5ff;
}
#elm .button.primary:not(:disabled):hover {
  background: #17a2df;
}
#elm .button.primary:not(:disabled):active {
  background: #1681bd;
}
#elm .button.primary:disabled {
  background: #ababab;
}
#elm .button.primary:not(:active) {
  transition: background 0.3s ease-in-out;
}
#elm .button.secondary {
  background: transparent;
}
#elm .button.secondary:not(:disabled):hover {
  background: #ffffff;
  color: #1c1c1c;
}
#elm .button.secondary:not(:disabled):active {
  border-color: #dbdbdb;
  background: #dbdbdb;
  color: #1c1c1c;
}
#elm .button.secondary:disabled {
  border-color: #ababab;
  color: #ababab;
}
#elm .button.secondary:not(:active) {
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
#elm .button.text {
  background: transparent;
}
#elm .button.text:not(:disabled):hover {
  color: #17a2df;
}
#elm .button.text:not(:disabled):active {
  color: #1681bd;
}
#elm .button.text:disabled {
  color: #ababab;
}
#elm .button.text:not(:active) {
  transition: color 0.3s ease-in-out;
}
#elm .radio.button {
  cursor: pointer;
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 13px;
  font-weight: normal;
  line-height: 155%;
}
#elm .radio.button input {
  display: none;
}
#elm .radio.button span,
#elm .radio.button span::after {
  border-radius: 100px;
}
#elm .radio.button span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #ababab;
  margin-right: 10px;
}
#elm .radio.button input:checked + span {
  border-color: #0db5ff;
}
#elm .radio.button:hover input + span {
  border-color: #17a2df;
}
#elm .radio.button:active input + span {
  border-color: #1681bd;
}
#elm .radio.button:not(:active) span {
  transition: border-color 0.3s ease-in-out;
}
#elm .radio.button span::after {
  display: inline-block;
  content: '';
  width: 10.5px;
  height: 10.5px;
  background: transparent;
}
#elm .radio.button input:checked + span::after {
  background: #0db5ff;
}
#elm .radio.button:hover input:checked + span::after {
  background: #17a2df;
}
#elm .radio.button:active input:checked + span::after {
  background: #1681bd;
}
#elm .radio.button:not(:active) span::after {
  transition: background 0.3s ease-in-out;
}
#elm .link {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  font-weight: normal;
  line-height: 155%;
}
#elm .link:hover {
  color: #17a2df;
  text-decoration: underline;
}
#elm .link:active {
  color: #1681bd;
  text-decoration: underline;
}
#elm .link:not(:active) {
  transition: color 0.3s ease-in-out;
}
#elm .link svg {
  margin-right: 10px;
  stroke: #0db5ff;
}
#elm .link:hover svg {
  stroke: #17a2df;
}
#elm .link:active svg {
  stroke: #1681bd;
}
#elm .link:not(:active) svg {
  transition: stroke 0.3s ease-in-out;
}
#elm .progress {
  display: flex;
  align-items: stretch;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}
#elm .progress span {
  background: #0db5ff;
  border-radius: 2px;
}
#elm .pagination .pages {
  display: flex;
  align-items: center;
}
#elm .pagination .page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  color: #dbdbdb;
  font-size: 13px;
  font-weight: normal;
  line-height: 155%;
}
#elm .pagination .page:not(.collapsed) {
  cursor: pointer;
}
#elm .pagination .page:not(.collapsed) {
  border: 1px solid transparent;
  border-radius: 100px;
}
#elm .pagination .page:not(.collapsed):hover {
  background: #3b3b3b;
}
#elm .pagination .page:not(.collapsed):active {
  background: #272727;
}
#elm .pagination .page:not(.collapsed).current {
  background: #3b3b3b;
}
#elm .pagination .page:not(.collapsed).current {
  color: #0db5ff;
}
#elm .pagination .page:not(.collapsed).current:hover {
  color: #17a2df;
}
#elm .pagination .page:not(.collapsed).current:active {
  color: #1681bd;
}
#elm .pagination .page:not(.collapsed):active {
  border-color: #525252;
}
#elm .pagination .page:not(.collapsed):hover,
#elm .pagination .page:not(.collapsed).current {
  border-color: #3b3b3b;
}
#elm .pagination .page:not(.collapsed):not(:active) {
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
#elm .pagination .page svg {
  stroke: #fafafa;
}
#elm .pagination .page:hover svg {
  stroke: #dbdbdb;
}
#elm .pagination .page:not(:active) svg {
  transition: stroke 0.3s ease-in-out;
}
#elm .pagination .go-to-page {
  display: flex;
  align-items: center;
  color: #dbdbdb;
  font-size: 13px;
  font-weight: normal;
  line-height: 155%;
}
#elm .pagination .go-to-page .go-to {
  margin-left: 15px;
  display: flex;
}
#elm .pagination .go-to-page .go-to input {
  padding: 5px 5px 5px 10px;
  border-radius: 4px 0 0 4px;
  width: 36px;
  background: #3b3b3b;
  color: #dbdbdb;
  font-size: 13px;
  font-weight: normal;
  line-height: 155%;
}
#elm .pagination .go-to-page .go-to button {
  border-radius: 0 4px 4px 0;
  border: 1px solid #3b3b3b;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
#elm .pagination .go-to-page .go-to button:disabled {
  cursor: not-allowed;
}
#elm .pagination .go-to-page .go-to button:disabled {
  background: #3b3b3b;
}
#elm .pagination .go-to-page .go-to button svg {
  stroke: #ededed;
}
#elm .pagination .go-to-page .go-to button:not(:disabled):hover svg {
  stroke: #fafafa;
}
#elm .pagination .go-to-page .go-to button:not(:disabled):active svg {
  stroke: #ffffff;
}
#elm .pagination .go-to-page .go-to button:not(:active) svg {
  transition: stroke 0.3s ease-in-out;
}
#elm .vantage.ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 15px;
  background: #3b3b3b;
  color: #ffffff;
}
#elm .vantage.ribbon .vantage.logo {
  display: inline-block;
  width: 100px;
  height: 30px;
}
#elm .vantage.ribbon .content {
  width: 100%;
  max-width: 1420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1183px) {
  #elm .vantage.ribbon .content {
    flex-direction: column;
    row-gap: 10px;
  }
}
#elm .vantage.ribbon .content .container {
  display: flex;
  align-items: center;
}
@media (max-width: 1183px) {
  #elm .vantage.ribbon .content .container {
    flex-direction: column;
    row-gap: 10px;
  }
}
#elm .vantage.ribbon .content .container .divider {
  width: 1px;
  height: 37px;
  margin: 0 20px;
  background: #ffffff;
}
@media (max-width: 1183px) {
  #elm .vantage.ribbon .content .container .divider {
    display: none;
  }
}
@media (min-width: 1184px) {
  #elm .vantage.ribbon .content .container .divider {
    display: inline-block;
  }
}
#elm .vantage.ribbon .content .container .message {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1183px) {
  #elm .vantage.ribbon .content .container .message {
    align-items: center;
  }
}
@media (min-width: 1184px) {
  #elm .vantage.ribbon .content .container .message {
    align-items: flex-start;
  }
}
#elm .vantage.ribbon .content .container .message h6 {
  font-size: 13px;
}
#elm .vantage.ribbon .content .container .message p {
  font-size: 11px;
  font-weight: 500;
}
#elm .vantage.logo {
  background-image: url('https://static.chaos.com/images/assets/000/011/585/original/sub-menu-logo-vantage.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#elm .banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 82px 15px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
}
@media (max-width: 1183px) {
  #elm .banner.download {
    background-image: url('https://static.chaosgroup.com/images/assets/000/011/345/mobile_square/Benchmark5-1920x600.jpg');
  }
}
@media (min-width: 1184px) {
  #elm .banner.download {
    background-image: url('https://static.chaos.com/images/assets/000/011/345/full_width_original/Benchmark5-1920x600.jpg');
  }
}
@media (max-width: 1183px) {
  #elm .banner.vantage {
    background-image: url('https://static.chaos.com/images/assets/000/002/606/mobile_square/max-trial-grad.jpg');
  }
}
@media (min-width: 1184px) {
  #elm .banner.vantage {
    background-image: url('https://static.chaos.com/images/assets/000/002/606/full_width_original/max-trial-grad.jpg');
  }
}
#elm .banner.vantage .logo {
  margin-bottom: 40px;
  background-image: url('https://static.chaos.com/images/assets/000/011/585/original/sub-menu-logo-vantage.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 134px;
  height: 40px;
}
#elm .banner h3 {
  font-size: 31px;
  line-height: 140%;
}
#elm .banner p {
  font-size: 17px;
}
#elm .banner h3 {
  margin-bottom: 18px;
}
#elm .banner p {
  margin-bottom: 40px;
}
#elm .banner h3,
#elm .banner p {
  text-align: center;
}
#elm .chevron {
  display: flex;
  align-items: center;
  justify-content: center;
}
#elm .chevron svg.chevron {
  width: 16px;
  height: 16px;
}
#elm .chevron.xlarge svg.chevron {
  width: 22px;
  height: 22px;
}
#elm .chevron.xlarge svg.chevron path {
  stroke-width: 0.9;
}
#elm .chevron.large svg.chevron {
  width: 18px;
  height: 18px;
}
#elm .chevron.large svg.chevron path {
  stroke-width: 1.2;
}
#elm .chevron.small svg.chevron {
  width: 12px;
  height: 12px;
}
#elm .chevron.blue svg.chevron {
  stroke: #0db5ff;
}
#elm .chevron.blue:hover svg.chevron {
  stroke: #17a2df;
}
#elm .chevron.blue:active svg.chevron {
  stroke: #1681bd;
}
#elm span.toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 17px;
  background: transparent;
  border: 1.5px solid #ababab;
  border-radius: 18px;
}
#elm span.toggle::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #ababab;
  transform: translate(-7.5px);
}
#elm span.toggle.on {
  background: #0db5ff;
  border-color: #0db5ff;
}
#elm span.toggle.on::after {
  background: #272727;
  transform: translate(7.5px);
}
#elm :hover > span.toggle {
  background: transparent;
  border-color: #17a2df;
}
#elm :hover > span.toggle::after {
  background: #17a2df;
}
#elm :active > span.toggle {
  background: transparent;
  border-color: #1681bd;
}
#elm :active > span.toggle::after {
  background: #1681bd;
}
#elm :not(:active) > span.toggle {
  transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
#elm :not(:active) > span.toggle::after {
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#elm .no-scores {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
}
#elm .no-scores svg.speedometer {
  stroke: #ffffff;
}
#elm .no-scores h3 {
  font-weight: bold;
  line-height: 140%;
  text-align: center;
  color: #ffffff;
}
@media (max-width: 1183px) {
  #elm .no-scores h3 {
    font-size: 17px;
  }
}
@media (min-width: 1184px) {
  #elm .no-scores h3 {
    font-size: 23px;
  }
}
#elm span.dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px;
  border-radius: 100px;
  background: #ababab;
}
#elm label.private {
  cursor: default;
  padding: 1px 6px;
  border-radius: 4px;
  background: #1681bd;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  line-height: 155%;
}
#elm * {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  font-family: 'Poppins', 'Montserrat', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR', sans-serif;
}
#elm > .page {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}
#elm > .page:not(.error) {
  max-width: 1420px;
}
@media (max-width: 1183px) {
  #elm > .page:not(.error) {
    padding: 15px 15px 80px;
  }
}
@media (min-width: 1184px) {
  #elm > .page:not(.error) {
    padding: 80px 15px;
  }
}
#elm > .page h1 {
  color: #ffffff;
}
@media (max-width: 1183px) {
  #elm > .page h1 {
    font-size: 17px;
    font-weight: bold;
    line-height: 155%;
    margin-bottom: 15px;
  }
}
@media (min-width: 1184px) {
  #elm > .page h1 {
    font-size: 31px;
    font-weight: bold;
    line-height: 140%;
    margin-bottom: 30px;
  }
}
#elm > .page .tabs {
  display: flex;
  justify-content: center;
  box-shadow: inset 0px -1px #525252;
}
@media (max-width: 340px) {
  #elm > .page .tabs .tab {
    font-size: 12px;
  }
}
@media (max-width: 1183px) {
  #elm > .page .tabs {
    column-gap: 15px;
  }
}
@media (min-width: 1184px) {
  #elm > .page .tabs {
    column-gap: 30px;
  }
}
#elm > .page .top.container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}
#elm > .page .top.container .link svg.chevron {
  transform: rotate(90deg);
}
#elm > .page .top.container .back {
  margin-right: auto;
}
#elm > .page .bottom.container {
  margin-top: 60px;
}
#elm > .page .loader {
  border-radius: 100px;
  box-shadow: 0px 0px 30px 10px rgba(28, 28, 28, 0.7);
}
#elm > .page .progress {
  width: 100px;
}
#elm ul,
#elm ol {
  list-style-type: none;
}
#elm a {
  text-decoration: none;
}
#elm a * {
  pointer-events: none;
}
#elm :focus {
  outline: none;
}
#elm .search.container {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 46px;
}
@media (max-width: 1183px) {
  #elm .search.container {
    margin-top: 15px;
  }
}
@media (min-width: 1184px) {
  #elm .search.container {
    margin-top: 30px;
  }
}
#elm .search.container .search {
  position: absolute;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 1183px) {
  #elm .search.container .search.expanded {
    z-index: 30;
  }
}
@media (min-width: 1184px) {
  #elm .search.container .search.expanded {
    z-index: 10;
    box-shadow: 0px 0px 30px 10px rgba(28, 28, 28, 0.7);
  }
}
#elm .search.container .search > .plain {
  background: #3b3b3b;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#elm .search.container .search > .plain .clearable-input {
  flex-grow: 1;
}
#elm .search.container .search > .plain .clearable-input input {
  padding-left: 43px;
  background: url('/v5/search.svg') no-repeat 15px 14px;
}
#elm .search.container .search > .plain button.advanced {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 13px 15px;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  line-height: 155%;
}
#elm .search.container .search > .plain button.advanced:hover {
  color: #17a2df;
}
#elm .search.container .search > .plain button.advanced:active {
  color: #1681bd;
}
#elm .search.container .search > .plain button.advanced:not(:active) {
  transition: color 0.3s ease-in-out;
}
@media (min-width: 1184px) {
  #elm .search.container .search > .plain button.advanced span.chevron {
    margin-left: 10px;
  }
}
#elm .search.container .search > .plain button.advanced svg.chevron {
  stroke: #0db5ff;
}
#elm .search.container .search > .plain button.advanced:hover svg.chevron {
  stroke: #17a2df;
}
#elm .search.container .search > .plain button.advanced:active svg.chevron {
  stroke: #1681bd;
}
#elm .search.container .search > .plain button.advanced:not(:active) svg.chevron {
  transition: stroke 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#elm .search.container .search:not(.expanded) > .plain > button.advanced svg.chevron {
  transform: rotateX(0);
}
@media (min-width: 1184px) {
  #elm .search.container .search.expanded > .plain > button.advanced svg.chevron {
    transform: rotateX(180deg);
  }
}
#elm .search.container .search > .advanced.container {
  display: flex;
  background: #272727;
}
@media (max-width: 1183px) {
  #elm .search.container .search > .advanced.container {
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    row-gap: 50px;
  }
  #elm .search.container .search > .advanced.container button.close {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 15px;
    background: transparent;
  }
  #elm .search.container .search > .advanced.container button.close svg.x {
    stroke: #ababab;
  }
  #elm .search.container .search > .advanced.container button.close:hover .x {
    stroke: #fafafa;
  }
}
#elm .search.container .search > .advanced.container .advanced {
  max-width: 560px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1183px) {
  #elm .search.container .search > .advanced.container .advanced {
    padding: 15px;
  }
}
@media (min-width: 1184px) {
  #elm .search.container .search > .advanced.container .advanced {
    padding: 30px;
  }
}
#elm .search.container .search > .advanced.container .advanced h3 {
  font-weight: bold;
  line-height: 155%;
}
@media (max-width: 1183px) {
  #elm .search.container .search > .advanced.container .advanced h3 {
    color: #ffffff;
    font-size: 17px;
    text-align: center;
    margin-bottom: 5px;
  }
}
@media (min-width: 1184px) {
  #elm .search.container .search > .advanced.container .advanced h3 {
    color: #0db5ff;
    font-size: 13px;
  }
}
#elm .search.container .search > .advanced.container .advanced ul {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  row-gap: 25px;
}
#elm .search.container .search > .advanced.container .advanced ul .header {
  display: block;
  margin-bottom: 2px;
  color: #ababab;
}
#elm .search.container .search > .advanced.container .advanced ul .devices .header,
#elm .search.container .search > .advanced.container .advanced ul ol.devices,
#elm .search.container .search > .advanced.container .advanced ul ol.devices > li {
  display: grid;
  grid-template-columns: 330fr minmax(15px, 30fr) minmax(85px, 100fr) minmax(15px, 15fr) 25px;
  grid-column: 1 / 6;
}
#elm .search.container .search > .advanced.container .advanced ul .devices .header .name,
#elm .search.container .search > .advanced.container .advanced ul ol.devices .name,
#elm .search.container .search > .advanced.container .advanced ul ol.devices > li .name {
  grid-column: 1 / 2;
}
#elm .search.container .search > .advanced.container .advanced ul ol.devices {
  grid-row-gap: 15px;
}
#elm .search.container .search > .advanced.container .advanced ul ol.devices.single > li .count {
  grid-column: 3 / 6;
}
#elm .search.container .search > .advanced.container .advanced ul ol.devices:not(.single) > li .count,
#elm .search.container .search > .advanced.container .advanced ul .devices .header .count {
  grid-column: 3 / 4;
}
#elm .search.container .search > .advanced.container .advanced ul ol.devices:not(.single) > li button,
#elm .search.container .search > .advanced.container .advanced ul .devices .header button {
  grid-column: 5 / 6;
}
#elm .search.container .search > .advanced.container .advanced ul .smt .radio.button {
  display: inline-flex;
  margin-top: 8px;
  margin-right: 30px;
  color: #ededed;
}
#elm .search.container .search > .advanced.container .advanced ul > li.cores .cores.container {
  display: flex;
}
@media (max-width: 1183px) {
  #elm .search.container .search > .advanced.container .advanced ul > li.cores .cores.container {
    column-gap: 15px;
  }
}
@media (min-width: 1184px) {
  #elm .search.container .search > .advanced.container .advanced ul > li.cores .cores.container {
    column-gap: 30px;
  }
}
#elm .search.container .search > .advanced.container .advanced ul > li.cores .clearable-input {
  max-width: 150px;
}
#elm .search.container .search > .advanced.container .advanced .hr-container {
  display: flex;
  align-items: center;
  margin-top: 30px;
  width: 100%;
  height: 26px;
}
#elm .search.container .search > .advanced.container .advanced .hr-container button {
  margin-right: 10px;
  font-size: 13px;
  font-weight: bold;
  line-height: 155%;
}
#elm .search.container .search > .advanced.container .advanced .hr-container button .plus {
  margin-right: 12px;
}
#elm .search.container .search > .advanced.container .advanced .hr-container span.hr {
  flex-grow: 1;
  height: 1px;
  background: #3b3b3b;
}
#elm .search.container .search > .advanced.container .advanced ol.devices > li > button,
#elm .search.container .search > .advanced.container .advanced .hr-container button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #ffffff;
}
#elm .search.container .search > .advanced.container .advanced ol.devices > li > button svg,
#elm .search.container .search > .advanced.container .advanced .hr-container button svg {
  stroke: #0db5ff;
}
#elm .search.container .search > .advanced.container .advanced ol.devices > li > button:hover svg,
#elm .search.container .search > .advanced.container .advanced .hr-container button:hover svg {
  stroke: #17a2df;
}
#elm .search.container .search > .advanced.container .advanced ol.devices > li > button:active svg,
#elm .search.container .search > .advanced.container .advanced .hr-container button:active svg {
  stroke: #1681bd;
}
#elm .search.container .search > .advanced.container .advanced ol.devices > li > button:not(:active) svg,
#elm .search.container .search > .advanced.container .advanced .hr-container button:not(:active) svg {
  transition: stroke 0.3s ease-in-out;
}
#elm .search.container .search > .advanced.container .advanced .buttons.container {
  margin-top: 30px;
  display: flex;
  align-items: center;
  width: 100%;
}
@media (max-width: 1183px) {
  #elm .search.container .search > .advanced.container .advanced .buttons.container {
    justify-content: center;
  }
}
@media (min-width: 1184px) {
  #elm .search.container .search > .advanced.container .advanced .buttons.container {
    justify-content: flex-end;
  }
}
@media (max-width: 1183px) {
  #elm .search.container .search > .advanced.container .advanced .buttons.container button.primary.button {
    max-width: 345px;
    width: 100%;
  }
}
#elm .search.container .clearable-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  overflow: hidden;
}
#elm .search.container .clearable-input ::placeholder {
  color: #ababab;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#elm .search.container .clearable-input input {
  flex-grow: 1;
  width: 100%;
  padding: 13px 5px 13px 15px;
  font-size: 13px;
  font-weight: normal;
  line-height: 155%;
}
#elm .search.container .clearable-input button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background: transparent;
}
#elm .search.container .clearable-input button svg.x {
  stroke: #ababab;
}
#elm .search.container .clearable-input button:hover .x {
  stroke: #fafafa;
}
#elm .search.container .clearable-input,
#elm .search.container input {
  background: #3b3b3b;
}
#elm .search.container .clearable-input input,
#elm .search.container input input {
  color: #fafafa;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#elm .search-info {
  display: flex;
  width: 100%;
  margin-top: 30px;
  column-gap: 15px;
  border-bottom: 1px solid #3b3b3b;
}
@media (max-width: 1183px) {
  #elm .search-info {
    flex-direction: column;
    row-gap: 5px;
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
}
@media (min-width: 1184px) {
  #elm .search-info {
    align-items: flex-end;
    padding-bottom: 15px;
  }
}
#elm .search-info ul {
  flex-grow: 1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 15px;
}
@media (max-width: 1183px) {
  #elm .search-info ul {
    row-gap: 5px;
  }
}
@media (min-width: 1184px) {
  #elm .search-info ul {
    row-gap: 15px;
  }
}
#elm .search-info ul li button.chip {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: #ededed;
  border: 1px solid #525252;
  border-radius: 4px;
  font-size: 13px;
  line-height: 155%;
  white-space: nowrap;
}
#elm .search-info ul li button.chip:hover {
  border-color: #17a2df;
}
#elm .search-info ul li button.chip:active {
  border-color: #1681bd;
}
#elm .search-info ul li button.chip:not(:active) {
  transition: border-color 0.3s ease-in-out;
}
#elm .search-info ul li button.chip svg.x {
  margin-left: 12px;
  width: 12px;
  height: 12px;
  stroke: #fafafa;
}
#elm .search-info ul li button.chip:hover svg.x {
  stroke: #17a2df;
}
#elm .search-info ul li button.chip:active svg.x {
  stroke: #1681bd;
}
#elm .search-info ul li button.chip:not(:active) svg.x {
  transition: stroke 0.3s ease-in-out;
}
#elm .search-info div {
  display: flex;
  justify-content: space-between;
  column-gap: 15px;
}
#elm .search-info span.checkbox {
  align-self: flex-end;
  white-space: nowrap;
}
#elm .scores {
  width: 100%;
  /* define the grid layout */
  /* end: define the grid layout */
  /* configuration scores - mobile view */
  /* end: configuration scores - mobile view */
}
@media (max-width: 1183px) {
  #elm .scores ul.table,
  #elm .scores ul.table > li.row {
    display: grid;
    grid-template-columns: 90px 1fr 60px 18px;
    grid-column-gap: 5px;
    grid-column: 1 / 5;
  }
  #elm .scores ul.table.vray > li.row {
    grid-template-rows: 1fr 20px;
    grid-row-gap: 5px;
  }
  #elm .scores ul.table.vray > li.row:not(.header):not(.focused) {
    grid-template-areas: "configuration configuration score benchmarks" "cores cores cores cores";
  }
  #elm .scores ul.table.vray-gpu > li.row:not(.header):not(.focused) {
    grid-template-areas: "configuration configuration score benchmarks";
  }
  #elm .scores ul.table.vray-gpu > li.focused.row {
    grid-template-areas: "configuration configuration configuration configuration";
  }
  #elm .scores ul.table.vray > li.focused.row {
    grid-template-areas: "configuration configuration configuration configuration" "cores cores cores cores";
  }
  #elm .scores ul.table > li.header.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-column: 1 / 5;
  }
  #elm .scores ul.table > li.header.row span:not(.configuration):not(.score) {
    display: none;
  }
  #elm .scores ul.table > li.row li.header.row {
    display: none;
  }
  #elm .scores ul.table > li.focused.row > span:not(.configuration):not(.total-cores-smt) {
    display: none;
  }
  #elm .scores ul.table > li.row > span:not(.configuration):not(.total-cores-smt):not(.score):not(.benchmarks) {
    display: none;
  }
  #elm .scores ul.table > li.row > span.score .progress,
  #elm .scores ul.table > li.row > span.benchmarks .count {
    display: none;
  }
  #elm .scores ol.table {
    grid-column: 1 / 5;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  #elm .scores ol.table a.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    row-gap: 15px;
  }
  #elm .scores ol.table a.row > span.compare,
  #elm .scores ol.table a.row > span.score,
  #elm .scores ol.table a.row > span.private {
    order: 1;
  }
  #elm .scores ol.table a.row > span.private {
    align-items: flex-end;
  }
  #elm .scores ol.table a.row > span:not(.compare):not(.score):not(.private) {
    order: 2;
  }
  #elm .scores ol.table a.row > span:not(.compare):not(.score) {
    width: 100%;
  }
  #elm .scores ol.table a.row > span.score {
    width: 60px;
  }
  #elm .scores ol.table a.row > span.score .progress {
    display: none;
  }
  #elm .scores ol.table a.row > span.os {
    padding-right: 55px;
  }
}
@media (min-width: 1184px) {
  #elm .scores .table,
  #elm .scores .table .row {
    display: grid;
    grid-template-columns: 70px 2fr 1fr 1fr 1fr 90px 202px 100px;
    grid-column-gap: 30px;
    grid-column: 1 / 9;
  }
  #elm .scores ul.vray.table > li.header.row {
    grid-template-areas: "configuration configuration cores cores cores cores score benchmarks";
  }
  #elm .scores ul.vray.table > li.row:not(.header) {
    grid-template-areas: "configuration configuration configuration configuration cores cores score benchmarks";
  }
  #elm .scores ul.vray.table > li.row > ol.table .row {
    grid-template-areas: "compare os comment comment comment frequency score private";
  }
  #elm .scores ul.vray-gpu.table > li.row {
    grid-template-areas: "configuration configuration configuration configuration configuration configuration score benchmarks";
  }
  #elm .scores ul.vray-gpu.table > li.row > ol.table > li.header.row {
    grid-template-areas: "compare os comment scheduling scheduling driver score .";
  }
  #elm .scores ul.vray-gpu.table > li.row > ol.table .row:not(.header) {
    grid-template-areas: "compare os comment comment scheduling driver score private";
  }
  #elm .scores .table h6,
  #elm .scores span.total-cores-smt span.dot,
  #elm .scores span.score span.units {
    display: none;
  }
}
#elm .scores .table .row .configuration {
  grid-area: configuration;
}
#elm .scores .table .row .total-cores-smt {
  grid-area: cores;
}
#elm .scores .table .row .total-cores-smt .smt {
  width: 70px;
}
#elm .scores .table .row .score {
  grid-area: score;
}
#elm .scores .table .row .benchmarks {
  grid-area: benchmarks;
}
#elm .scores .table .row .compare {
  grid-area: compare;
}
#elm .scores .table .row .os {
  grid-area: os;
}
#elm .scores .table .row .comment {
  grid-area: comment;
}
#elm .scores .table .row .frequency {
  grid-area: frequency;
}
#elm .scores .table .row .scheduling {
  grid-area: scheduling;
}
#elm .scores .table .row .driver {
  grid-area: driver;
}
#elm .scores .table > .row:not(.header):not(.subtable):not(.disabled) {
  cursor: pointer;
}
#elm .scores ol.table > li.header.row span.score {
  cursor: pointer;
}
@media (max-width: 1183px) {
  #elm .scores ul.table > li.header.row {
    padding: 5px 0;
  }
}
@media (min-width: 1184px) {
  #elm .scores ul.table > li.header.row {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 30px 30px 15px;
    border-bottom: 1px solid #3b3b3b;
  }
  #elm .scores ul.table > li.header.row span > a {
    display: flex;
    align-items: center;
  }
  #elm .scores ul.table > li.header.row span.score svg.chevron {
    margin-left: 3px;
    stroke: #ababab;
    transition: stroke 0.3s ease-in-out;
  }
  #elm .scores ul.table > li.header.row span.score:hover svg.chevron {
    stroke: #17a2df;
  }
  #elm .scores ul.table > li.header.row span.score:hover ul.dropdown,
  #elm .scores ul.table > li.header.row span.score ul.dropdown:hover {
    display: flex;
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown {
    display: none;
    flex-direction: column;
    row-gap: 15px;
    position: absolute;
    top: 50px;
    padding: 30px 20px 30px 15px;
    background: #272727;
    border-radius: 4px;
    box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.25);
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown li {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown li svg {
    margin-right: 15px;
    stroke: #0db5ff;
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown li:not(.current) svg {
    visibility: hidden;
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown li a {
    color: #fafafa;
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown li a:hover {
    color: #17a2df;
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown li a:active {
    color: #1681bd;
  }
  #elm .scores ul.table > li.header.row span.score ul.dropdown li a:not(:active) {
    transition: color 0.3s ease-in-out;
  }
}
#elm .scores ul.table > li.header.row {
  background: #272727;
}
#elm .scores ul.table > li.row:not(.header):not(.subtable):not(.highlighted):not(.focused) {
  border-radius: 4px;
}
#elm .scores ul.table > li.row:not(.header):not(.subtable):not(.highlighted):not(.focused):nth-child(even) {
  background: #3b3b3b;
}
#elm .scores ul.table > li.row:not(.header):not(.subtable):not(.highlighted):not(.focused):nth-child(odd) {
  background: #272727;
}
#elm .scores ul.table > li.row:not(.header):not(.subtable):not(.highlighted):not(.focused):hover {
  background: #525252;
}
#elm .scores ul.table > li.highlighted.row {
  background: #525252;
  border-radius: 4px;
}
#elm .scores ul.table > li.focused.row {
  background: #525252;
  border-radius: 4px 4px 0 0;
}
#elm .scores ol.table > li.header.row {
  background: #1c1c1c;
}
#elm .scores ol.table > li.row:not(.header) {
  background: #272727;
}
#elm .scores ol.table > li.row:not(.header):not(.more):hover {
  background: #525252;
}
#elm .scores ol.table > li.highlighted.row:not(.header) {
  background: #525252;
}
#elm .scores .table > li.row {
  transition: background 0.3s ease-in-out;
}
#elm .scores ol.table > li.row:last-child {
  border-bottom: 2px solid #525252;
}
@media (max-width: 1183px) {
  #elm .scores ul.table {
    row-gap: 10px;
  }
}
@media (max-width: 1183px) {
  #elm .scores ul.table > li.row:not(.header):not(.subtable) {
    padding: 10px 15px;
  }
}
@media (min-width: 1184px) {
  #elm .scores ul.table > li.row:not(.header):not(.subtable) {
    padding: 22px 30px;
  }
}
#elm .scores ol.table > li.row.header {
  padding: 15px 30px;
}
@media (max-width: 1183px) {
  #elm .scores ol.table > li.row:not(.header) > a.row {
    padding: 10px 15px;
  }
}
@media (min-width: 1184px) {
  #elm .scores ol.table > li.row:not(.header) > a.row {
    padding: 20px 30px;
  }
}
#elm .scores ol.table > li.row.more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 155px;
}
#elm .scores .row {
  color: #ffffff;
}
#elm .scores li.header.row,
#elm .scores li.header.row > span a {
  color: #ababab;
}
@media (min-width: 1184px) {
  #elm .scores li.header.row {
    align-items: flex-end;
  }
}
#elm .scores li.header.row .sort {
  stroke: #ababab;
  margin-left: 3px;
  visibility: hidden;
}
@media (min-width: 1184px) {
  #elm .scores li.header.row .sort {
    margin-right: -15px;
  }
}
#elm .scores li.header.row .asc .sort {
  transform: rotate(180deg);
}
#elm .scores li.header.row .current .sort,
#elm .scores li.header.row a:hover > .sort {
  visibility: visible;
}
#elm .scores .row > span {
  display: flex;
}
@media (max-width: 1183px) {
  #elm .scores .row > span {
    align-items: start;
  }
}
@media (min-width: 1184px) {
  #elm .scores .row > span {
    align-items: center;
  }
}
#elm .scores .table span.compare > .checkbox {
  pointer-events: auto;
}
@media (min-width: 1184px) {
  #elm .scores .table span.compare > .checkbox .label {
    display: none;
  }
}
@media (max-width: 1183px) {
  #elm .scores .table li.row.header > span.score {
    justify-content: flex-end;
  }
}
@media (min-width: 1184px) {
  #elm .scores .table .total-cores-smt,
  #elm .scores .table .frequency,
  #elm .scores .table .scheduling,
  #elm .scores .table .driver,
  #elm .scores .table .score,
  #elm .scores .table .benchmarks {
    justify-content: flex-end;
  }
  #elm .scores .table .total-cores,
  #elm .scores .table .smt {
    display: flex;
    justify-content: flex-end;
  }
}
#elm .scores .table .row:not(.header) > span.score {
  font-weight: bold;
}
@media (max-width: 1183px) {
  #elm .scores .table .row:not(.header) > span.score {
    flex-direction: column;
    align-items: flex-end;
  }
  #elm .scores .table .row:not(.header) > span.score span.units {
    font-size: 11px;
    font-weight: normal;
    line-height: 155%;
    color: #ababab;
  }
}
@media (min-width: 1184px) {
  #elm .scores .table .row:not(.header) > span.score {
    justify-content: space-between;
  }
}
@media (max-width: 1183px) {
  #elm .scores span.total-cores-smt {
    align-items: center;
  }
  #elm .scores span.total-cores-smt h6 {
    display: inline-block;
    margin-right: 5px;
  }
  #elm .scores h6 {
    font-weight: normal;
    color: #ababab;
  }
}
@media (max-width: 1183px) {
  #elm .scores ul.table > li.row span.benchmarks svg.chevron {
    margin-top: 1.5px;
    transform: rotate(-90deg);
  }
}
@media (min-width: 1184px) {
  #elm .scores ul.table > li.row span.benchmarks svg.chevron {
    margin-left: 34px;
    transform: rotateX(0);
  }
}
#elm .scores ul.table > li.row svg.chevron {
  stroke: #0db5ff;
}
#elm .scores ul.table > li.row:hover svg.chevron {
  stroke: #17a2df;
}
#elm .scores ul.table > li.row:active svg.chevron {
  stroke: #1681bd;
}
#elm .scores ul.table > li.row:not(:active) span.benchmarks svg.chevron {
  transition: stroke 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#elm .scores ul.table > li.focused.row span.benchmarks svg.chevron {
  transform: rotateX(180deg);
}
@media (max-width: 1183px) {
  #elm .scores ul.table > li.focused.row {
    background: transparent;
  }
  #elm .scores ul.table > li.focused.row span.configuration {
    font-weight: bold;
  }
  #elm .scores ol.table > li.row {
    border-radius: 4px;
  }
  #elm .scores ol.table > li.row:nth-child(even) {
    background: #3b3b3b;
  }
  #elm .scores ol.table > li.row:nth-child(odd) {
    background: #272727;
  }
  #elm .scores ol.table > li.row > a.row > span:not(.compare):not(.score) {
    flex-direction: column;
  }
}
#elm .pagination {
  display: flex;
  align-items: center;
}
@media (max-width: 1183px) {
  #elm .pagination {
    justify-content: space-around;
    margin-top: 30px;
  }
}
@media (min-width: 1184px) {
  #elm .pagination {
    justify-content: space-between;
    margin-top: 80px;
  }
}
#elm .pagination > a.link svg.chevron {
  transform: rotate(90deg);
}
#elm .pagination .previous svg.chevron {
  transform: rotate(90deg);
}
#elm .pagination .next svg.chevron {
  transform: rotate(-90deg);
}
#elm .pagination .go-to-page button svg.chevron {
  transform: rotate(-90deg);
}
@media (max-width: 1183px) {
  #elm .pagination .go-to-page {
    color: #dbdbdb;
  }
  #elm .pagination .go-to-page ::placeholder {
    color: #dbdbdb;
  }
  #elm .pagination .go-to-page input {
    margin-right: 10px;
    width: 36px;
    padding: 6.5px 5px 6.5px 10px;
    background: #3b3b3b;
    border: 1px solid #3b3b3b;
    border-radius: 4px;
    color: #fafafa;
    font-size: 13px;
    font-weight: normal;
    line-height: 155%;
  }
  #elm .pagination .go-to-page input:focus {
    border-color: #0db5ff;
  }
  #elm .pagination span.disabled .page {
    background: #272727;
    pointer-events: none;
  }
  #elm .pagination span.disabled .page svg.chevron {
    stroke: #ababab;
  }
}
#elm span.checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#elm span.checkbox.disabled {
  cursor: not-allowed;
}
#elm span.checkbox span.check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1.5px solid #ababab;
  border-radius: 3px;
  background: transparent;
}
#elm span.checkbox span.check svg.tick {
  width: 14px;
  height: 14px;
  stroke: #272727;
  visibility: hidden;
}
#elm span.checkbox input:checked + span.check {
  border-color: #0db5ff;
  background: #0db5ff;
}
#elm span.checkbox:hover input:not(:disabled) + span.check {
  border-color: #17a2df;
}
#elm span.checkbox:active input:not(:disabled) + span.check {
  border-color: #1681bd;
}
#elm span.checkbox:not(:active) span.check {
  transition: border-color 0.3s ease-in-out;
}
#elm span.checkbox input:checked + span.check svg.tick {
  visibility: visible;
}
#elm span.checkbox input {
  display: none;
}
#elm span.checkbox span.label {
  margin-left: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: normal;
  line-height: 155%;
}
#elm ul.preview {
  width: 100%;
  margin: 0 15px;
  overflow-x: hidden;
  /* center the area */
}
#elm ul.preview li > div:first-child {
  margin-left: auto;
}
#elm ul.preview li > div:last-child {
  margin-right: auto;
}
#elm ul.preview li {
  display: flex;
  column-gap: 10px;
}
#elm ul.preview li > div {
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;
  min-width: 280px;
  max-width: 435px;
  padding: 0 15px;
  border-left: 1px solid #3b3b3b;
  border-right: 1px solid #3b3b3b;
}
#elm ul.preview li > div.container {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
#elm ul.preview li > div.container div {
  display: flex;
  flex-direction: column;
}
#elm ul.preview li > div.container label.private {
  margin-top: 5px;
}
#elm ul.preview li:first-child > div {
  padding-top: 15px;
  border-top: 1px solid #3b3b3b;
  border-radius: 4px 4px 0 0;
}
#elm ul.preview li:first-child > div > div {
  display: flex;
}
@media (min-width: 1184px) {
  #elm ul.preview li:first-child > div > div {
    padding-bottom: 15px;
    border-bottom: 1px solid #3b3b3b;
  }
}
#elm ul.preview li:first-child > div > div img {
  margin-right: 10px;
}
#elm ul.preview li:first-child > div > div > span {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
#elm ul.preview li:first-child > div > div > span > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: normal;
  line-height: 155%;
}
#elm ul.preview li:first-child > div > div > span > span:first-child {
  font-size: 14px;
  color: #ffffff;
}
#elm ul.preview li:first-child > div > div > span > span:last-child {
  font-size: 11px;
  color: #ababab;
}
#elm ul.preview li:first-child > div > div > span > span span.score {
  display: flex;
  align-items: center;
  font-weight: bold;
  white-space: nowrap;
}
#elm ul.preview li:first-child > div > div > span > span span.score span.progress {
  margin: 0 15px 0 5px;
}
@media (max-width: 1183px) {
  #elm ul.preview li:first-child > div > div > span > span span.score span.progress {
    display: none;
  }
}
#elm ul.preview li > div {
  padding-top: 15px;
}
#elm ul.preview li:last-child > div {
  padding-bottom: 15px;
  border-bottom: 1px solid #3b3b3b;
  border-radius: 0 0 4px 4px;
}
#elm ul.preview li {
  color: #ffffff;
}
#elm ul.preview li p {
  overflow: hidden;
  text-overflow: ellipsis;
}
#elm ul.preview li > div > span.checkbox {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
#elm ul.preview h6 {
  color: #ababab;
  font-weight: normal;
}
#elm a.highlight {
  display: flex;
  align-items: center;
  color: #ffffff;
}
#elm a.highlight:hover {
  color: #ffffff;
}
#elm a.highlight:visited {
  color: #ffffff;
}
#elm a.highlight > span {
  margin-right: 10px;
}
#elm .primary.button {
  grid-column-start: 2;
}
#elm .dots {
  margin-top: 25px;
  display: flex;
  align-items: center;
}
#elm .dots span {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
}
#elm .dots span::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: #828282;
}
#elm .dots span.current::after {
  background: #0db5ff;
}
#elm .dots span:hover::after {
  background: #17a2df;
}
#elm .dots span:active::after {
  background: #1681bd;
}
#elm .dots span:not(:active)::after {
  transition: background 0.3s ease-in-out;
}
#elm .comparison {
  display: flex;
  flex-direction: column;
  z-index: 8;
  position: fixed;
}
@media (max-width: 1183px) {
  #elm .comparison {
    align-items: center;
    justify-content: center;
    bottom: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    background: #525252;
    border-radius: 100px;
    box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.25);
  }
  #elm .comparison svg.compare {
    stroke: #ffffff;
  }
  #elm .comparison span.count {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background: #e1161c;
    border: 1px solid #272727;
    border-radius: 100px;
    color: #ffffff;
    font-size: 11px;
    font-weight: normal;
    line-height: 155%;
  }
}
@media (min-width: 1184px) {
  #elm .comparison {
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    transition: max-height 0.7s ease-in-out;
    background: #3b3b3b;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.15);
  }
  #elm .comparison:not(.expanded) {
    max-height: 74px;
  }
  #elm .comparison .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  #elm .comparison .container > * {
    max-width: 1420px;
    width: 100%;
  }
  #elm .comparison .header.container {
    cursor: pointer;
    padding: 30px 15px 18px;
  }
  #elm .comparison .header.container h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 17px;
    font-weight: normal;
    line-height: 155%;
  }
  #elm .comparison .header.container svg.chevron {
    stroke: #0db5ff;
  }
  #elm .comparison .header.container:hover svg.chevron {
    stroke: #17a2df;
  }
  #elm .comparison .header.container:active svg.chevron {
    stroke: #1681bd;
  }
  #elm .comparison .header.container:not(:active) svg.chevron {
    transition: stroke 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  #elm .comparison:not(.expanded) > .header.container svg.chevron {
    transform: rotateX(180deg);
  }
  #elm .comparison.expanded > .header.container svg.chevron {
    transform: rotateX(0);
  }
  #elm .comparison .body.container {
    padding: 0 15px 30px;
  }
  #elm .comparison .body.container ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 30px;
  }
  #elm .comparison .body.container ol li {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-radius: 4px;
  }
  #elm .comparison .body.container ol li:not(.placeholder) {
    background: #272727;
  }
  #elm .comparison .body.container ol li.placeholder {
    border: 1px solid #525252;
  }
  #elm .comparison .body.container ol li h5,
  #elm .comparison .body.container ol li div.score {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: bold;
    line-height: 155%;
  }
  #elm .comparison .body.container ol li > div > div {
    display: flex;
    align-items: center;
  }
  #elm .comparison .body.container ol li > div > div > span:not(.dot) {
    display: flex;
    align-items: center;
    color: #ffffff;
  }
  #elm .comparison .body.container ol li h6 {
    margin-right: 5px;
    font-weight: normal;
    color: #ababab;
  }
  #elm .comparison .body.container ol li div {
    font-size: 13px;
    font-weight: normal;
    line-height: 155%;
  }
  #elm .comparison .body.container ol li div.score {
    display: flex;
    align-items: baseline;
    margin-top: 15px;
  }
  #elm .comparison .body.container ol li div.score span.units {
    margin-left: 5px;
    color: #ababab;
    font-size: 11px;
    font-weight: normal;
    line-height: 155%;
  }
  #elm .comparison .body.container ol li button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
  }
  #elm .comparison .body.container ol li button svg.x {
    width: 12px;
    height: 12px;
    stroke: #ababab;
    transition: stroke 0.3s ease-in-out;
  }
  #elm .comparison .body.container ol li button:hover svg.x {
    stroke: #fafafa;
  }
  #elm .comparison .body.container > div {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    column-gap: 15px;
  }
}
#elm .error {
  position: relative;
}
@media (max-width: 768px) {
  #elm .error {
    padding-top: 100%;
  }
}
@media (min-width: 769px) {
  #elm .error {
    padding-top: 41.82291667%;
  }
}
#elm .error div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}
#elm .error div::after {
  content: "© Zombie Studio";
  position: absolute;
  right: 7px;
  bottom: 7px;
  color: #ffffff;
}
#elm .error div h1 {
  color: #ffffff;
}
@media (max-width: 768px) {
  #elm .error div h1 {
    font-size: 23px;
  }
}
@media (min-width: 769px) {
  #elm .error div h1 {
    font-size: 31px;
  }
}
@media (max-width: 768px) {
  #elm .error .forbidden {
    background-image: url('https://chaos.com/403-page-mobile.jpg');
  }
}
@media (min-width: 769px) {
  #elm .error .forbidden {
    background-image: url('https://chaos.com/403-page.jpg');
  }
}
@media (max-width: 768px) {
  #elm .error .not-found {
    background-image: url('https://chaos.com/404-page-mobile.jpg');
  }
}
@media (min-width: 769px) {
  #elm .error .not-found {
    background-image: url('https://chaos.com/404-page.jpg');
  }
}
@media (max-width: 768px) {
  #elm .error .internal-server-error {
    background-image: url('https://chaos.com/500-page-mobile.jpg');
  }
}
@media (min-width: 769px) {
  #elm .error .internal-server-error {
    background-image: url('https://chaos.com/500-page.jpg');
  }
}
#elm .tick {
  stroke: #ffffff;
}
#elm mark {
  background-color: transparent;
  color: #0db5ff;
}
#elm mark svg.tick {
  background-color: transparent;
  stroke: #0db5ff;
}