@media (max-width: 768px) {
  .card-recipe {
    margin-bottom: -10px !important;
  }
}

/* .top-text {
  color: #0058ad !important;
}
.button {
  border: 1px solid #0058ad !important;
} */

@media (max-width: 767px) {
  .filter-wrapper .panel {
    display: none !important;
  }

  #CompareArea2 .link {
    margin-right: 16px;
    /* margin-bottom: 20px!important; */
  }

  /* .card-body .checkbox-wrap span {
    left: unset !important;
    right: 0 !important;
  } */

  .card-body .form-group {
    left: unset;
    right: 16px;
  }
}

.card-filter-results.check-active .comparison-landing-sticky {
  display: block;
}

.card-filter-results.check-active .card-body .form-group {
  display: block;
}

.card-filter-results.check-active .card-body .form-group.checkbox-wrap {
  top: 0!important;
  left: 0!important;
  width: 100%;
  height: 100%;
}

.card-filter-results.check-active .card-body .form-group.checkbox-wrap label {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.card-filter-results.check-active .card-body .form-group.checkbox-wrap label .checkmark {
  margin: 8px;
}
.card-filter-results.check-active .card-body:not(:has(.card-campaign-box-info span)) .checkbox-wrap label .checkmark {
    margin: 12px;
}
.card-body .form-group {
  display: none;
  position: absolute;
  left: 16px;
  top: 16px;
}

.card-filter-results.check-active .comparison-landing-sticky {
  display: block;
}

.comparison-landing-sticky .device-item {
  position: relative;
  width: 238px !important;
  padding: 8px 16px;
  border: 1px solid #dee3ed;
  border-radius: 4px;
}

.device-item div:nth-child(3) {
  /* margin-left: 16px; */
}

.device-item div:nth-child(1) {
  position: absolute;
  top: 2px;
  right: 2px;
  transform: translate(50%, -50%);
}

.device-item div:nth-child(2) img {
  width: 56px;
  height: 56px;
  padding: 8px;
}

.device-item div:nth-child(3) h4 {
  font-size: 14px !important;
}

.comparison-landing-sticky .checkbox-wrap input:checked~span:before {
  display: none !important;
}

.comparison-landing-sticky .checkbox-wrap input:disabled~span {
  opacity: unset !important;
}

.comparison-landing-sticky .checkbox-wrap span {
  border: unset !important;
}

.comparison-landing-sticky .checkbox-wrap span svg {
  cursor: pointer;
}

.c-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (min-width: 768px) {
  .dark-small {
    display: none !important;
  }

  .device-mobil {
    width: unset !important;
    margin: auto 30px !important;
  }

  /* #CompareArea2 .link {
    margin-right: 10px;
    margin-bottom: 0;
    margin-top: 43px;
  } */
  .comparison-landing-sticky .col-md-3 {
    -ms-flex: unset !important;
    flex: unset !important;
    max-width: 270px !important;
  }
}

.comparison-landing-sticky .js-device-button {
  max-width: 270px;
  width: 100%;
}

.comparison-landing-sticky .device-item img {
  width: 38px;
  height: 38px;
}

.device-btn {
  align-self: center;
}

.js-device-btn {
  max-width: 270px;
  width: 100%;
}

.comparison-landing-sticky {
  padding: 12px 0px !important;
}

.checkbox-wrap {
  z-index: 1;
}

/* .filter-wrapper .filter-body .filter-form {
  justify-content: flex-end !important;
} */
#CompareArea2 .link {
  place-self: center;
  /* align-self: self-end;
    margin-bottom: 10px; */
  /* margin-right: 32px; */
}

#CompareArea2 .form-group {
  place-self: center;
  min-width: 170px;
}

#CompareArea2 .select2-container .select2-selection--single {
  border: 0.5px solid #A5B2C3;
}

#CompareArea2 {
  justify-content: flex-end !important;
  margin-top: 32px !important;
  gap: 32px;
}

#CompareArea2 .badges {
  margin-right: auto;
}

#CompareArea2 .bmcompare-button {
  margin-left: auto;
}

.device-none {
  opacity: 0.5;
}

.device-item.device-none .checkbox-wrap {
  display: none;
}

.device-item:not(.device-none) .checkbox-wrap {
  display: block;
}

#CompareArea2 .link {
  /* margin-bottom: 20px!important; */
}

.bmcompare-button {
  display: flex;
  width: 170px;
  padding: 10px 16px;
  align-items: flex-start;
  gap: 3px;
  border-radius: 1000px;
  border: 0.5px solid #A5B2C3;

  background: var(--white-white, #FFF);
  justify-content: space-between;
  cursor: pointer;
}

.bmcompare-button strong {
  color: #222943;
  /* Body/Body - 16S */
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  /* 137.5% */
  user-select: none;
}

.bmcompare-button .svg1 path {
  fill: #222943;
}

.svg1 {
  display: block;
}

.svg2 {
  display: none;
}

.comparison-landing-sticky .device-item {
  gap: 8px;
}

.device-item div:nth-child(2) {
  text-align: center;
  width: 56px;
  height: 56px;
}

.select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--Blue-Dark, #222943);
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
}

.select2-container .select2-selection--single {
  border-radius: 1000px;
}

.cbot-animation-holder {
  z-index: 998;
}

.comparison-landing-sticky {
  z-index: 999;
}

.filter-wrapper .filter-body .filter-form .form-group {
  margin-bottom: unset !important;
  margin-top: unset !important;
}

.filter-wrapper .filter-body .filter-form .badges {
  margin-bottom: unset !important;
  margin-top: unset !important;
}

.filter-wrapper,
.filter-wrapper>.filter-wrapper {
  overflow-x: hidden;
  justify-content: center;
}

#CompareArea1 {
  margin-top: 32px;
  margin-bottom: 16px;
}

a.link.bmcompare-button.active .svg1 {
  display: none;
}

a.link.bmcompare-button.active .svg2 {
  display: block;
}

.CompareArea2 a.link.bmcompare-button.active, #CompareArea2 a.link.bmcompare-button.active {
  background: var(--tt-color-button-primary-BG);
}

.CompareArea2 .link.bmcompare-button.active strong, #CompareArea2 .link.bmcompare-button.active strong {
  background: var(--tt-color-button-primary-BG);
  color: var(--tt-color-text-white) !important;
}
a.link.bmcompare-button.active .svg2 path {
  fill: var(--tt-color-text-white);
}

.comparison-landing-sticky .c-row .device-btn .btn {
  background: var(--tt-color-button-primary-BG);
  color: var(--tt-color-button-primary-text);
  border: 1px solid var(--tt-color-button-primary-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  padding: 10px 40px;
}
.comparison-landing-sticky .c-row .device-btn .btn.disable {
  background: #E2E6EB;
  color: #B8BEC6;
}

@media only screen and (min-width: 768px) {
  .card-filter-results.check-active .comparison-landing-sticky .container {
    max-width: 1440px !important;
    width: 100%;
  }

  .device-mobil {
    display: block !important;
  }

  /* .cbot-animation-holder {
    bottom: 118px !important;
  } */
}



@media only screen and (max-width: 768px) {
  .bmcompare-button {
    max-width: 160px;
    margin-bottom: 24px;
    padding: 8px 16px;
    margin-right: 0 !important;
  }


  .card-body .form-group {
    display: none;
    position: absolute;
    right: 6px !important;
    top: 0px !important;
  }

  label {
    width: -webkit-fill-available;
    height: 170px;
  }

  /* .card-filter-results.check-active .card-body .form-group.checkbox-wrap label .checkmark {
    margin: 6px;
  } */

  .card-campaign-box-info.filter-list>span {
    width: 100%;
    /* max-width: 171px; */
  }

  #CompareArea2 .form-group {
    justify-content: center;
  }

  .btn-secondary-outline .form-group {
    justify-content: unset !important;
  }

  .bmcompare-button {
    margin-left: unset !important;
    width: 100% !important;
    max-width: unset !important;
  }

  .select2-container--default {
    max-width: unset !important;
  }

  #CompareArea2 .form-group:nth-of-type(2) .select2-selection__arrow {
    top: -50% !important;
    transform: translateY(31%) !important;
  }

  #CompareArea2 .btn-secondary-outline {
    margin-right: 0px !important;
  }

  .card-filter-results.check-active .cbot-animation-holder {
    bottom: 84px !important;
  }

  .card-filter-results:not(.check-active) .cbot-animation-holder {
    bottom: 0 !important;
  }

  /* .cbot-animation-holder {
    margin-bottom: 84px!important;
  } */
  .select2-selection--single {
    border-radius: 1000px !important;
    border: 0.5px solid #A5B2C3;
  }

  .select2-selection__rendered {
    color: #222943 !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 22px !important;
    user-select: none;
  }

  .select2-search__field {
    border-radius: 1000px !important;
    height: 42px !important;
    margin-top: 6px !important;
  }
}

/* HYPER-1506 taskı için yapılan düzenleme -MC */
@media (max-width: 767px) {
  #CompareArea2 {
    margin-top: -24px !important;
    gap: 16px;
  }

  #CompareArea2 .link {
    margin-bottom: 0px;
  }

  .filter-wrapper .filter-body .filter-form {
    position: relative;
    bottom: 24px;
  }

  .filter-wrapper .filter-body {
    margin-bottom: -24px;
  }
}