.search-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  border: 1px solid var(--if-border-color);
  border-radius: 31px;
  background: var(--if-bg-surface, #fff);
  transition: border-color 0.2s;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
  position: absolute;
  background-repeat: no-repeat;
  border: none;
  height: 24px;
  width: 24px;
  cursor: pointer;
  font-size: 20px;
  right: 20px;
  top: 18px;
  padding: 0;
}

#search-field {
  width: 100%;
  padding: 20px 60px 20px 60px; /* Adjusted padding */
  background:none;  
  border: none;
  resize: none;
  border-radius: 31px;
  line-height: 140%;
  font-size: 16px;
  box-sizing: border-box;
  overflow: hidden;
  height: 62px;
  z-index:1000;
}

#search-field:focus {
  outline: none;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s;
}

#search-field:focus-visible {
  outline: none;

}

#search-icon {
  position: absolute;
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z" fill="black"/></svg>');
  background-repeat: no-repeat;
  border: none;
  height: 24px;
  width: 24px;
  font-size: 20px;
  left: 20px;
  top: 20px;
  padding: 0;
}

#search-results{
  max-height: 400px; 
  overflow-y: auto;
  width:100%;
  border-bottom-right-radius: 31px;
  border-bottom-left-radius: 31px;
} 

.search-result {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
} 

.search-result:hover,
.search-result.active {
  background-color: var(--if-light-grey);
  cursor: pointer;
}


.remove-button {
  display: block;
  height: 24px;
  width: 24px;
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z" fill="%23212121"/></svg>');
}
.remove-button:hover {
  cursor: pointer;
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z" fill="%23980000"/></svg>');
}

.portfolio-position-label {
  flex: 1;
  text-align: left;
}

.portfolio-position-input {
  flex: 0 0 100px;
  text-align: center;
  margin-right: 20px;
  margin-left: 20px;
  width: 100%;
  padding: 15px; /* Adjusted padding */
  background-color: var(--if-white); 
  border: 1px solid transparent;
  resize: none;
  border-radius: 31px;
  line-height: 140%;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.portfolio-position-input-values {
}

.portfolio-position-header-label {
  flex: 1;
  text-align: left;
}

.portfolio-position-header-input {
  flex: 250px;
  text-align: right;
  padding-right: 0px;
}

.portfolio-position-input:focus {
  outline: none;
  border-color: var(--if-border-focus);
}

.portfolio-position-input:focus-visible {
  outline: none;

}

.portfolio-position-input::-webkit-outer-spin-button,
.portfolio-position-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.portfolio-position-input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.portfolio-position-remove {
  flex: 0 0 25px;
  text-align: right;
}


/* Euro, Percentage switch */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--if-black);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M300-520q-58 0-99-41t-41-99q0-58 41-99t99-41q58 0 99 41t41 99q0 58-41 99t-99 41Zm0-80q25 0 42.5-17.5T360-660q0-25-17.5-42.5T300-720q-25 0-42.5 17.5T240-660q0 25 17.5 42.5T300-600Zm360 440q-58 0-99-41t-41-99q0-58 41-99t99-41q58 0 99 41t41 99q0 58-41 99t-99 41Zm0-80q25 0 42.5-17.5T720-300q0-25-17.5-42.5T660-360q-25 0-42.5 17.5T600-300q0 25 17.5 42.5T660-240Zm-444 80-56-56 584-584 56 56-584 584Z"/></svg>');
  content: "";
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider-euro:before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M600-120q-118 0-210-67T260-360H120v-80h122q-2-11-2-20v-40q0-9 2-20H120v-80h140q38-106 130-173t210-67q69 0 130.5 24T840-748l-70 70q-35-29-78.5-45.5T600-740q-75 0-136.5 38.5T370-600h230v80H344q-2 11-3 20t-1 20q0 11 1 20t3 20h256v80H370q32 63 93.5 101.5T600-220q48 0 92.5-16.5T770-282l70 70q-48 44-109.5 68T600-120Z"/></svg>');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: white;
}

input:checked + .slider-pound:before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M240-120v-80l16.5-10q16.5-10 36-29.5t35.5-50q16-30.5 16-70.5 0-11-1.5-21t-3.5-19h-99v-80h60q-21-33-40.5-69.5T240-640q0-92 64-156t156-64q71 0 126 39t79 101l-74 31q-15-40-50.5-65.5T460-780q-58 0-99 41t-41 99q0 48 24 80t49 80h167v80H421q2 9 2.5 19t.5 21q0 50-17.5 90T364-200h196q40 0 61-21t29-54l70 35q-11 55-56.5 87.5T560-120H240Z"/></svg>');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: white;
}

input:checked + .slider-dollar:before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M441-120v-86q-53-12-91.5-46T293-348l74-30q15 48 44.5 73t77.5 25q41 0 69.5-18.5T587-356q0-35-22-55.5T463-458q-86-27-118-64.5T313-614q0-65 42-101t86-41v-84h80v84q50 8 82.5 36.5T651-650l-74 32q-12-32-34-48t-60-16q-44 0-67 19.5T393-614q0 33 30 52t104 40q69 20 104.5 63.5T667-358q0 71-42 108t-104 46v84h-80Z"/></svg>');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: white;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Base toggle button style */
.report-toggle .btn {
  padding: 12px 20px;
  font-size: 16px;
  color: var(--if-anthrazit);
  background: none;
  border: 1px solid var(--if-border-color);
  line-height: 140%;
  height: 46px;
  box-sizing: border-box;
  transition: all 0.2s;
  border-radius: 0; /* reset for grouped shape */
  white-space: nowrap;
}

/* First and last buttons get rounded edges */
.report-toggle .btn:first-of-type {
  border-top-left-radius: 31px;
  border-bottom-left-radius: 31px;
}

.report-toggle .btn:last-of-type {
  border-top-right-radius: 31px;
  border-bottom-right-radius: 31px;
}

/* Remove overlap between borders */
.report-toggle .btn + .btn {
  margin-left: -1px; /* collapse border */
}

/* Checked (active) button */
.report-toggle .btn-check:checked + .btn {
  background-color: var(--if-anthrazit);
  color: #fff;
  border-color: var(--if-anthrazit);
  z-index: 1;
}

/* Hover */
.report-toggle .btn:hover {
  color: var(--if-anthrazit);
  border-color: var(--if-border-focus);
}

/* Focus style */
.report-toggle .btn:focus {
  border-color: var(--if-border-focus);
  outline: none;
}

@media (max-width: 767px) {
  .report-toggle {
    width: 100%;
  }

  .report-toggle .btn {
    flex: 1;
  }
}

/* Submit button spinner */
.btn-submit-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid transparent;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

[data-theme="dark"] .btn-submit-spinner {
  border-top-color: #000;
  border-left-color: #000;
}

/* Popular ticker badges */
.popular-tickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.popular-tickers-label {
  font-size: 13px;
  color: var(--if-text-secondary);
}

.popular-ticker {
  padding: 4px 12px;
  border: 1px solid var(--if-border-color);
  border-radius: 31px;
  font-size: 13px;
  color: var(--if-text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.popular-ticker:hover {
  border-color: var(--if-border-focus);
  color: var(--if-text-primary);
}