body.headset #main_menu_outer {
  background-color: #f8f9f9;
}
body.archive-headset #main_menu_outer {
  background-color: #fff;
}
.screen-reader-text {
  display: none;
}
.headset_intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 100px;
}
.headset_intro .img_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 24px;
  padding: 32px;
  box-shadow: 0px 20px 30px 0px rgba(28, 22, 71, 0.05);
}
.headset_intro .img_wrapper img {
  max-width: 100%;
}
.headset_intro_media {
  flex: 0 0 590px;
}
.brand_info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.brand_info img {
  margin-left: 8px;
}
.headset_intro_metadata {
  flex-grow: 1;
}

.price_range {
  display: inline-block;
  border-radius: 21px;
}

.stars_holder {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 38px;
}

.stars_filled {
  position: absolute;
  width: 0;
  top: 0;
  left: 0;
  overflow: hidden;
  max-width: 124px;
  height: 38px;
}

.stars_empty {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-width: 124px;
  height: 38px;
}

.krisp_score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #614efa;
  padding: 0 24px;
  border-radius: 24px;
  max-width: 250px;
}

.krisp_score strong {
  margin-right: 16px;
  padding-right: 16px;
  display: inline-block;
  position: relative;
}
.krisp_score strong:after {
  content: '';
  width: 1px;
  height: 32px;
  background-color: #fff;
  right: 0;
  position: absolute;
  top: 8px;
}
audio {
  display: none;
}
.play_button_holder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.audio_player {
  background-color: #fff;
  padding: 16px;
  border-radius: 20px;
}
.play_button_holder span {
  display: none;
  line-height: 0;
}

.play_button_holder span.show {
  display: inline-block;
}
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.range {
  flex: 0 0 calc(100% - 40px);
  margin-left: 8px;
  height: 26px;
}
input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 5px;
  background: #d3d2d9;
  outline: none;
  opacity: 1;
  transition: all 0.2s ease;
  width: 100%;
  border-radius: 5px;
  height: 6px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 16px;
  background: #f3f0ff;
  border-radius: 4px;
  border: 1px solid #614efa;
  cursor: pointer;
}
input[type='range']::-moz-range-thumb {
  width: 12px;
  height: 23px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #614efa;
  cursor: pointer;
}

input[type='range']::-ms-thumb {
  width: 12px;
  height: 23px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #614efa;
  cursor: pointer;
}

.table_item_holder {
  display: flex;
  align-items: stretch;
  position: relative;
}
.table_item_holder:hover {
  background-color: #f3f0ff !important;
}

.table_item_holder > div {
  flex: 0 0 50%;
  display: flex;
  align-items: stretch;
}
.table_item_holder > div strong {
  display: block;
}
.table_item_holder > div.value {
  border-left: 1px solid #e4e7ea;
}

.specs_table .table_item_holder:nth-child(odd) {
  background-color: #f7f7f8;
}
.specs_table .table_item_holder:nth-child(even) {
  background-color: #fff;
}

.table_item_holder.table_item_comparison .label {
  flex: 0 1 30%;
  display: flex;
  align-items: center;
}
.table_item_holder.table_item_comparison .value {
  flex: 0 1 40%;
  display: flex;
  align-items: center;
}

.comparison_header {
  display: flex;
  align-items: center;
  position: relative;
}
.comparison_header .label {
  flex: 0 1 30%;
}
.comparison_header .headset_name {
  flex: 0 1 40%;
  border-left: 1px solid #e4e7ea;
}
.metadata .krisp_score {
  max-width: 153px;
  height: 30px;
  padding: 0 16px;
  border-radius: 20px;
  margin: 0 auto;
}
.metadata .krisp_score .score {
  width: 33px;
  text-align: center;
  flex: 0 0 33px;
}
.metadata .krisp_score strong:after {
  height: 14px;
}
.metadata .krisp_score .stars_holder {
  height: 16px;
}
.metadata .krisp_score .stars_empty,
.metadata .krisp_score .stars_filled {
  height: 16px;
}
.metadata .krisp_score strong {
  margin-right: 8px;
  padding-right: 8px;
}
.headsets_wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 30px;
}
.integrations_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 30px;
}
.recommended_wrapper {
  grid-template-rows: auto;
}
.headset_item .img_wrapper {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 180px;
  height: 220px;
  border: 1px solid #d3d2d9;
  background-color: #dfdcfe;
  border-radius: 10px;
}
.headset_item .img_wrapper.integration_img_wrapper {
  background-color: #fff;
  background-size: auto 100px;
  height: 180px;
}

.pagination .nav-links {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
.pagination .nav-links > * {
  all: inherit;
}
.pagination .nav-links > a {
  cursor: pointer;
}
.pagination .nav-links > a:hover {
  color: #614efa;
}

.pagination .nav-links .current {
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #614efa;
  font-size: 17px;
  font-weight: 700;
  border-radius: 50%;
}

.pagination .nav-links .prev,
.pagination .nav-links .next {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.pagination .nav-links .prev img,
.pagination .nav-links .next img {
  width: 14px;
  height: auto;
}

.pagination .nav-links .prev img {
  transform: rotate(90deg) translateY(1px);
}

.pagination .nav-links .next img {
  transform: rotate(-90deg) translateY(1px);
}
.pagination .nav-links .prev:hover,
.pagination .nav-links .next:hover {
  background-color: #e7e7e7;
}
.integrations_wrapper .headset_item .title_holder a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #614efa;
}
.integrations_wrapper .headset_item .title_holder a img {
  vertical-align: sub;
}
.integrations_wrapper .headset_item .title_holder a span {
  text-decoration: none !important;
}
.integrations_wrapper .headset_item .title_holder a strong {
  color: #614efa;
}
.integrations_wrapper .headset_item a:hover strong {
  opacity: 0.7;
  text-decoration: underline;
}

.headset_item a:hover strong {
  opacity: 0.7;
}

.search_input_wrapper {
  width: 400px;
  max-width: 100%;
  height: 48px;
  border: 1px solid #c8c7d0;
  border-radius: 10px;
  padding: 10px 12px;
  background: url('../svg/icon_search_new.svg') no-repeat left 10px center;
  background-size: 16px;
}
.search_input_wrapper input {
  border: none;
  outline: none;
  width: 100%;
  padding-left: 24px;
  font-size: 15px;
  line-height: 28px;
  height: 100%;
  background-color: transparent;
}
.search_input_wrapper input::placeholder {
  font-size: 15px;
  line-height: 28px;
  color: #75738b;
}

.search_bar_holder {
  position: relative;
}

#dataFetch {
  width: 400px;
  margin-top: 8px;
  border: 1px solid #c8c7d0;
  border-radius: 10px;
  padding: 10px 0 10px 12px;
  background-color: #fff;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 99;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}
#dataFetch.show {
  max-height: 5000px;
  transition: max-height 0.2 ease;
  -webkit-transition: max-height 0.2 ease;
  height: auto;
  opacity: 1;
  visibility: visible;
}
#dataFetch .list_item > div:last-child {
  margin-bottom: 0;
}
#dataFetch .list_item {
  max-height: 300px !important;
  height: auto;
  overflow-y: auto;
}
#dataFetch a:hover {
  text-decoration: underline;
}

#dataFetch .list_item::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f8f9f9;
  border-radius: 10px;
}

#dataFetch .list_item::-webkit-scrollbar {
  width: 6px;
  background-color: #f8f9f9;
  border-radius: 10px;
}

#dataFetch .list_item::-webkit-scrollbar-thumb {
  background-color: #949da6;
  border-radius: 10px;
}

.headset_metadata_container .intro_metadata {
  display: flex;
  justify-content: center;
}
.headset_metadata_container .metadata .image_holder {
  height: 280px;
  padding: 32px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headset_metadata_container .metadata img {
  height: 100%;
  object-fit: contain;
}
.headset_metadata_container .logo_holder img {
  max-height: 46px;
  width: auto;
}

.headset_metadata_container .metadata {
  padding: 0 32px;
  flex: 0 0 470px;
}
.headset_metadata_container .metadata:last-child {
  border-left: 1px solid #32304d33;
}

.headset_metadata_container .audio_player {
  background-color: #f7f7f8;
}
.krisp_score.winner {
  max-width: unset;
  margin: 0 auto;
  width: auto;
  display: inline-flex;
  height: 40px;
  padding: 0 24px 0 60px;
  position: relative;
}
.score_container {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.krisp_score.winner:before {
  content: '';
  width: 61px;
  height: 61px;
  position: absolute;
  left: 0;
  top: -12px;
  background-image: url('../png/icon_trophy.png');
  background-size: cover;
}
.krisp_score.winner .score {
  font-size: 30px;
  line-height: 48px;
  max-width: unset;
  width: auto;
  flex: 1 0 auto;
  text-align: center;
}
.krisp_score.winner strong {
  padding-right: 16px !important;
  margin-right: 16px !important;
}
.krisp_score.winner .score:after {
  height: 28px;
  top: 10px;
}
.krisp_score.winner .stars_holder {
  height: 24px;
}
.krisp_score.winner .stars_empty,
.krisp_score.winner .stars_filled {
  height: 24px;
}
.krisp_score.winner .stars_empty {
  max-width: 120px;
}
.comparison_item .img_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  background-color: #f3f0ff;
  padding: 16px;
}

.comparison_item .img_wrapper img {
  width: 145px;
  height: auto;
  position: relative;
  z-index: 20;
}

.comparison_item .img_wrapper .versus {
  width: 32px;
  height: 32px;
  background-color: #fff;
  box-shadow: 0px 10px 10px 0px rgba(97, 78, 250, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  z-index: 20;
}

.comparison_item .img_wrapper::before {
  width: 55%;
  height: 100%;
  content: ' ';
  background-image: url('../svg/img_headset_comparison_bg.svg');
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.headset_select_container .container {
  padding: 0;
}
.headset_select_container form {
  display: grid;
  grid-template-columns: 2.5fr 2.5fr 160px;
  gap: 32px;
  width: 100%;
}
.headset_select_container form .btn {
  height: 48px !important;
}
.headset_select_container form .btn a {
  height: 48px !important;
  line-height: 48px !important;
  max-width: 100%;
  min-width: unset;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.headset_select_container form .btn a span {
  all: inherit;
  padding: 0;
}
.headset_select_container form .btn a .loader {
  display: none;
}
.headset_select_container form .btn a.loading .loader {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  flex: 0 0 16px;
  animation: rotation 1s linear infinite;
}

.headset_select_container .select_wrapper {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #c8c7d0;
  padding: 10px 40px;
  background-image: url('../svg/icon_filter.svg'),
    url('../svg/icon_dropdown.svg');
  background-size: 20px 20px;
  background-position: center left 12px, center right 12px;
  background-repeat: no-repeat;
  background-color: #fff;
}
.headset_select_container .select_wrapper select {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.headset_select_container .select_wrapper select {
  color: #75738b;
}
.headset_select_container .select_wrapper select.selected {
  color: #131032;
  font-weight: 600;
}
body.headset-comparison {
  padding-top: 176px;
}
body.headset-comparison .headset_select_container {
  position: fixed;
  top: 96px;
  background-color: #f4f4f5;
  padding: 16px;
  width: 100%;
  z-index: 9999;
}
.info_text {
  padding: 8px 12px 8px 36px;
  background-color: #eaf7ff;
  border-radius: 8px;
  font-size: 12px;
  line-height: 21px;
  background: url('../svg/icon_info_blue.svg') no-repeat center left 12px
    #eaf7ff;
  background-size: 16px;
  margin-top: 8px;
}
.sticky_nav {
  display: none;
}
.sticky_nav .headset_name {
  flex: 0 1 50%;
}
.sticky_nav .comparison_header {
  box-shadow: 0px 6px 20px 0px rgba(19, 16, 50, 0.08);
  background-color: #32304d;
}
.sticky_nav .comparison_header .headset_name strong {
  color: #fff;
}
.sticky_nav .comparison_header .headset_name:first-child {
  border-left: unset !important;
}

@media screen and (max-width: 1200px) {
  .headset_intro {
    gap: 50px;
  }
  .headset_intro_media {
    flex: 0 0 450px;
  }
  .comparison_item .img_wrapper img {
    width: 120px;
  }
  .comparison_item .img_wrapper {
    padding: 8px;
  }
  .headset_select_container .container {
    padding: 0;
  }
}

@media screen and (max-width: 1203px) {
  .headset_intro {
    gap: 50px;
    flex-direction: column;
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
  .headset_intro_media {
    flex: auto;
  }
  body.headset-comparison .stars_filled {
    top: 0 !important;
  }
  .stars_filled {
    top: 6px;
  }
  .headsets_wrapper {
    display: grid;
    gap: 30px;
  }
}

@media screen and (max-width: 1024px) {
  body.archive-headset-comparison .headsets_wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 30px;
  }
  .headset_metadata_container .metadata {
    padding: 0 16px;
  }
  .comparison_item .img_wrapper {
    padding: 16px;
  }
  .comparison_item .img_wrapper img {
    width: 145px;
  }
  .headset_select_container form {
    gap: 16px;
  }
  .headset_metadata_container .metadata {
    padding: 0 32px;
    flex: 0 0 calc(50% - 32px);
  }
}

@media screen and (max-width: 769px) {
  body.headset-comparison .headset_select_container {
    position: static;
  }
  body.headset-comparison {
    padding-top: 70px;
  }
  .comparison_item .img_wrapper img {
    width: 145px;
  }
  .headset_intro {
    display: block;
    max-width: 520px;
    margin: 0 auto;
  }
  .headsets_wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 30px;
  }

  .headset_intro_media {
    flex: auto;
    margin-bottom: 30px;
  }
  body.headset-comparison .headsets_wrapper,
  body.archive-headset-comparison .headsets_wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
  }
  body.archive-headset-comparison .headset_item .img_wrapper,
  body.headset-comparison .headset_item .img_wrapper {
    height: 180px;
  }

  .headset_select_container form {
    grid-template-columns: 2fr 2fr;
    grid-template-rows: 1fr auto;
  }
  .comparison_item .img_wrapper img {
    width: 100px;
  }
  .comparison_item .img_wrapper {
    padding: 0;
  }
  .headset_select_container .select_wrapper {
    height: 38px;
    padding: 6px 35px;
  }
  .headset_select_container form .btn {
    max-width: 145px;
    grid-column: 1 / span 2;
    justify-self: center;
    align-self: center;
    height: 38px !important;
  }
  .headset_select_container p {
    text-align: center;
  }
  .headset_select_container form .btn a {
    height: 38px !important;
    line-height: 38px !important;
  }
  .headset_metadata_container .intro_metadata {
    flex-direction: column;
    max-width: 470px;
    margin: 0 auto;
  }
  .headset_metadata_container .intro_metadata .metadata {
    flex: auto;
  }
  .headset_metadata_container .metadata .image_holder {
    padding: 16px 0;
    height: 200px;
  }
  .switch_wrapper strong {
    font-size: 13px;
  }
  .headset_metadata_container .metadata {
    padding: 0;
  }
  .headset_metadata_container .metadata:last-child {
    border-left: 0;
    border-top: 1px solid #32304d33;
    margin-top: 16px;
  }
  .switch_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .table_item_comparison {
    flex-wrap: wrap;
  }
  .specs_table .table_item_comparison .label {
    flex: 0 1 100%;
    border-bottom: 1px solid #e4e7ea;
    border-top: 1px solid #e4e7ea;
  }
  .specs_table .table_item_comparison {
    border-left: 1px solid #e4e7ea;
    border-right: 1px solid #e4e7ea;
  }
  .table_item_holder.table_item_comparison .value {
    flex: 0 1 50%;
  }
  .table_item_holder > div:nth-child(2) {
    border-left: 0;
  }
  .sticky_nav.fixed {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: 999;
    display: block;
    width: 100%;
  }
  .comparison_tables_container .comparison_header .headset_name {
    display: none;
  }
  .comparison_header .label {
    flex: 1 0 100%;
  }
}

@media screen and (max-width: 530px) {
  body.archive-headset-comparison .headsets_wrapper,
  body.headset-comparison .headsets_wrapper {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 30px;
  }
  .headsets_wrapper.recommended_wrapper {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 30px;
  }
  body.archive-headset-comparison .comparison_item .img_wrapper img,
  body.headset-comparison .comparison_item .img_wrapper img {
    width: 145px;
  }
  body.archive-headset-comparison .comparison_item .img_wrapper,
  body.headset-comparison .comparison_item .img_wrapper {
    padding: 0 22px;
  }
  body.archive-headset-comparison .comparison_item .img_wrapper img,
  body.headset-comparison .comparison_item .img_wrapper img {
    width: 100px;
    height: 100%;
  }

  .headset_select_container form {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .headset_select_container .select_wrapper {
    grid-column: 1 / span 2;
  }
  .headset_select_container .select_wrapper select {
    background-color: #fff;
  }
}

@media screen and (max-width: 425px) {
  .headsets_wrapper {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 30px;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}