/* Define the regular variable font */
@font-face {
  font-family: "Inter";
  src: url("/app/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900; /* The range of weights the variable font supports */
  font-style: normal; /* This is for normal (non-italic) text */
}
/* Define the italic variable font */
@font-face {
  font-family: "Inter";
  src: url("/app/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900; /* The range of weights the italic variable font supports */
  font-style: italic; /* This is for italic text */
}
.color-white {
  color: #fff !important;
}

@font-face {
  font-family: "Passion One";
  src: url("/app/assets/fonts/PassionOne-Black.woff2") format("woff2"), url("/app/assets/fonts/PassionOne-Black.woff") format("woff"), url("/app/assets/fonts/PassionOne-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Passion One";
  src: url("/app/assets/fonts/PassionOne-Regular.woff2") format("woff2"), url("/app/assets/fonts/PassionOne-Regular.woff") format("woff"), url("/app/assets/fonts/PassionOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Passion One";
  src: url("/app/assets/fonts/PassionOne-Bold.woff2") format("woff2"), url("/app/assets/fonts/PassionOne-Bold.woff") format("woff"), url("/app/assets/fonts/PassionOne-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
.text-decoration-underline {
  text-decoration: underline !important;
}

hr {
  background-color: white;
  margin: 96px 0px !important;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Passion One" !important;
}

.rating-slider {
  display: flex;
  border: 2px solid #009688;
  border-radius: 50px;
  overflow: hidden;
  text-align: center;
}

.rating-segment {
  flex: 1;
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #333;
  transition: background-color 0.2s, color 0.2s;
}

.rating-segment + .rating-segment {
  border-left: 1px solid #009688;
}

.rating-segment:hover {
  background-color: #b2dfdb;
  color: #004d40;
}

.rating-segment.selected {
  background-color: #009688;
  color: #ffffff;
}

.rating-segment.selected:not(:first-child) {
  border-left: 1px solid #068873 !important;
}

.rating-segment.hovered {
  background-color: #80cbc4;
  color: #004d40;
}

button.btn.btn-primary,
a.btn.btn-primary {
  padding: 8px 16px;
  background-color: #009688;
  color: white;
  font-weight: 500;
  border: 1px solid #009688;
  transition: all 0.5s ease-in-out;
  border-radius: 50px;
  min-width: 141px;
}
button.btn.btn-primary:hover,
a.btn.btn-primary:hover {
  background-color: white;
  color: black;
  transition: all 0.5s ease-in-out;
  border: 1px solid black;
}

form {
  background: #4c4c4c;
  border-radius: 12px;
}
form.ng-background {
  background: transparent !important;
}
form .form-groupinput,
form .form-group select,
form .form-group textarea,
form .form-group input,
form .form-group .form-control:focus {
  background: #333 !important;
  color: white;
  border: 1px solid #009688;
  border-radius: 12px;
}
form .form-groupinput :focus,
form .form-group select :focus,
form .form-group textarea :focus,
form .form-group input :focus,
form .form-group .form-control:focus :focus {
  color: white !important;
}
form .form-group option {
  color: white;
}
form label {
  font-size: 0.9rem;
  margin-right: 1rem;
  font-weight: 700;
  color: white;
}
form label.required-label::after {
  content: "*";
  color: red;
  margin-left: 0.2rem;
  font-size: 1rem;
}
form span#reliabilityValue,
form span#responsivenessValue,
form span#priceScaleValue {
  font-size: 12px;
}
form .form-check label {
  font-weight: 400;
}
@media (max-width: 768px) {
  form {
    padding: 1rem; /* Add some padding for smaller screens */
  }
  form label {
    font-size: 0.8rem;
  }
}

form#bugReportForm {
  padding: 10px;
}
form#bugReportForm button.close span {
  color: white !important;
}

.form.ng-valid.ng-dirty.ng-valid-parse.ng-valid-min.ng-valid-max.ng-valid-step label {
  color: white;
}

.form-group {
  row-gap: 16px;
}
.form-group .form-group-rtb input {
  height: 1rem;
  width: 1rem;
}
@media (max-width: 768px) {
  .form-group input {
    width: 100%; /* Full width inputs on mobile */
  }
}

.form-info {
  color: white !important;
}

input[type=date]::placeholder {
  color: #b2dfdb;
}

/* Change calendar dropdown color */
input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Inverts the color to make it white */
  cursor: pointer;
}

/* Remove default styling in Firefox */
input[type=date]::-moz-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.cookie-consent .cookie-message {
  display: inline-block;
  border: 1px solid white;
  padding: 16px;
  border-radius: 12px;
}

:root {
  --background-color: #333;
  --text-color: white;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333 !important;
    color: white !important;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #333 !important;
    color: white !important;
  }
}
body,
.modal-content {
  font-family: "Inter", sans-serif !important;
  background-color: #333 !important;
  margin: 0;
  padding: 0;
  font-family: "Inter";
  color: white !important;
}

.height-full {
  min-height: 100vh;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

.container {
  background-color: transparent;
}

.transparent {
  background-color: transparent !important;
}

h1 {
  color: #333;
}

#exception-heading,
#exception-heading-two {
  color: #333 !important;
}

p {
  color: #333;
}

.color-gold {
  color: #ffc98b;
}

li.list-group-item {
  border-radius: 12px !important;
}

.navbar-brand {
  font-weight: 900;
  color: white !important;
  text-transform: uppercase;
}

.navbar {
  background-color: #fff;
  padding: 10px;
  color: white;
}
.navbar .navbar-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.navbar .navbar-menu .navbar-item {
  margin-right: 15px;
}
.navbar .navbar-menu .navbar-item .navbar-link {
  color: white;
  text-decoration: none;
}
.navbar .navbar-menu .navbar-item .navbar-link:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .navbar .navbar-menu {
    flex-direction: column; /* Stack navbar items vertically */
    align-items: center;
  }
  .navbar .navbar-item {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

section#search-CTA h1 {
  font-size: 54px;
  font-weight: bold;
}
@media (max-width: 768px) {
  section#search-CTA h1 {
    font-size: 36px; /* Reduce heading size for mobile */
  }
}
section#search-CTA p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  section#search-CTA p {
    font-size: 1rem; /* Reduce paragraph size for mobile */
  }
}
section#search-CTA input {
  padding: 20px !important;
  border-radius: 8px 8px 8px 8px !important;
  margin-bottom: 32px;
  background: transparent;
  box-shadow: none;
  border: 1px solid white !important;
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 500;
}
@media (max-width: 576px) {
  section#search-CTA input {
    max-width: 100%; /* Full width on mobile */
    margin-bottom: 10px; /* Add space between input and button */
    border-radius: 8px 8px 8px 8px !important;
  }
}
section#search-CTA input::placeholder {
  color: white;
}
@media (max-width: 576px) {
  section#search-CTA .form-group {
    flex-direction: column; /* Stack input and button vertically */
  }
}

footer {
  background-color: #333;
  position: fixed;
  bottom: 0;
}
@media (max-width: 768px) {
  footer {
    font-size: 0.9rem; /* Reduce footer text size */
  }
}

#result-repeater .column-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* Adjust this value to control the gap size */
}
@media (max-width: 768px) {
  #result-repeater .column-gap {
    gap: 16px; /* Smaller gap for mobile */
  }
}
@media only screen and (min-width: 992px) {
  #result-repeater .column-gap li {
    flex: 0 1 calc(50% - 16px); /* Two columns with space in between */
  }
}
@media (max-width: 768px) {
  #result-repeater .column-gap li {
    flex: 0 1 calc(100% - 16px); /* Full width items on mobile */
  }
}

/*# sourceMappingURL=main.css.map */