:root {
  /* Color */
  --color-white: #fff;
  --color-primary: #1B1B1B;
  --color-secondary: #ABA69E;
  --color-brand: #F78123;
  --color-link: #2F63D4;

  --color-background: #FBF5EB;

  /* Font */
  --font-family-base: "Inter", sans-serif;
  --font-weight-base: 400;
  --font-family-heading: "Rubik", sans-serif;
  --font-weight-heading: 700;
}

body {
  color: var(--color-primary);
  background: var(--color-background);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-base);
  margin: 0;
  padding: 0;
  background-image: url('data:image/svg+xml,<svg width="1000" height="1094" viewBox="0 0 1000 1094" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1000" height="1094" fill="%23FBF5EB"/><rect width="1000" height="1094" fill="url(%23paint0_radial_5_856)"/><defs><radialGradient id="paint0_radial_5_856" cx="0" cy="0" r="1" gradientTransform="matrix(-529 937.5 -836.314 -542.52 479 204)" gradientUnits="userSpaceOnUse"><stop stop-color="%23FBF5EB"/><stop offset="1" stop-color="%23FFECC8"/></radialGradient></defs></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.container h1 {
  font-size: 16px;
  line-height: 20px;
  color: var(--color-brand);
  text-transform: uppercase;
  margin: 0;
}

.container h2 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: 30px;
  line-height: 30px;
  margin: 10px 0 0 0;
  text-transform: uppercase;
}

.container ul, .container ol {
  list-style: none;
  padding: 0;
}

.container li {
  list-style: none;
  background-color: var(--color-white);
  padding: 15px;
  margin-bottom: 1px;
}

.container li:first-child {
  border-radius: 5px 5px 0 0;
}

.container li:last-child {
  border-radius: 0 0 5px 5px;
}

.container,
.container-legal {
  padding: 20px 20px 0 20px;
}

.container {
  min-height: calc(100dvh - 20px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 150px;
}


@media (min-width: 600px) {
  .container,
  .container-legal {
    padding: 20px calc(50vw - 250px) 0;
  }
  .container {
    grid-template-rows: auto 300px;
  }
}

.result-item {
  font-size: 12px;
}

@media (max-width: 399px) {
  .action-container div, .action-container a{
    font-size: 0px;
    padding: 5px 15px 5px 15px;
  }
}

.name-action-container {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  justify-content: space-between;
}

.action-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0px;
}

.action-container div, .action-container a {
  cursor: pointer;
  margin-right: -5px;
  padding: 5px 27px 5px 10px;
  border-radius: 2px;
  background-color: #fff;
  color: var(--color-secondary);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.action-container div:hover, 
.action-container a:hover {
  background-color: var(--color-background);
  color: var(--color-primary);
}

.action-container .like {
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_9_913)"><path d="M6.0047 10.6136L1.31238 6.36335C-1.2378 3.81317 2.51096 -1.08316 6.0047 2.87811C9.49841 -1.08316 13.2302 3.83018 10.697 6.36335L6.0047 10.6136Z" stroke="%23ABA69E" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_9_913"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');
}

.action-container .like:hover {
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_9_925)"><path d="M6.0047 10.6136L1.31238 6.36335C-1.2378 3.81317 2.51096 -1.08316 6.0047 2.87811C9.49841 -1.08316 13.2302 3.83018 10.697 6.36335L6.0047 10.6136Z" stroke="%231B1B1B" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_9_925"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');
}

.liked .action-container .like {
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_9_936)"><path d="M6.0047 10.6136L1.31238 6.36335C-1.2378 3.81317 2.51096 -1.08316 6.0047 2.87811C9.49841 -1.08316 13.2302 3.83018 10.697 6.36335L6.0047 10.6136Z" fill="%23F65C25" stroke="%23F65C25" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_9_936"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');
}

.action-container .remove {
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_9_912)"><path d="M9.60039 4.80005L9.00039 11.4H3.00039L2.40039 4.80005" stroke="%23ABA69E" stroke-linecap="round" stroke-linejoin="round"/><path d="M1.19922 3.00006H10.7992" stroke="%23ABA69E" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.90039 3.00004V1.40004C3.90039 1.18786 3.98889 0.98438 4.14642 0.834351C4.30395 0.684322 4.51761 0.600037 4.74039 0.600037H7.26039C7.48317 0.600037 7.69683 0.684322 7.85436 0.834351C8.01189 0.98438 8.10039 1.18786 8.10039 1.40004V3.00004" stroke="%23ABA69E" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_9_912"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');
}

.action-container .remove:hover {
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_9_924)"><path d="M9.60039 4.80005L9.00039 11.4H3.00039L2.40039 4.80005" stroke="%231B1B1B" stroke-linecap="round" stroke-linejoin="round"/><path d="M1.19922 3.00006H10.7992" stroke="%231B1B1B" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.90039 3.00004V1.40004C3.90039 1.18786 3.98889 0.98438 4.14642 0.834351C4.30395 0.684322 4.51761 0.600037 4.74039 0.600037H7.26039C7.48317 0.600037 7.69683 0.684322 7.85436 0.834351C8.01189 0.98438 8.10039 1.18786 8.10039 1.40004V3.00004" stroke="%231B1B1B" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_9_924"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');
}

.action-container .get {
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1996 5.39999L10.1996 1.79999L6.59961 1.79999" stroke="%23ABA69E" stroke-width="0.9" stroke-linecap="round"/><path d="M9.59961 2.40002L2.39963 9.60002" stroke="%23ABA69E" stroke-width="0.9" stroke-linecap="round"/></svg>');
  text-decoration: none;
}

.action-container .get:hover {
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1996 5.39999L10.1996 1.79999L6.59961 1.79999" stroke="%231B1B1B" stroke-width="0.9" stroke-linecap="round"/><path d="M9.59961 2.40002L2.39963 9.60002" stroke="%231B1B1B" stroke-width="0.9" stroke-linecap="round"/></svg>');
  text-decoration: none;
}

.no-domain-found .action-container .get {
  color: var(--color-secondary);
  pointer-events: none;
  opacity: .2;
}

.name {
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
}

.domain-main {
  text-decoration: none;
  color: var(--color-primary);
}

.domain-main:not(.no-domain-found):hover {
  color: var(--color-link);
}

.domain-more:hover {
  color: var(--color-link);
}

.domain-more {
  color: var(--color-secondary);
  cursor: pointer;
  margin-left: 5px;
}

.brainstorm-form .inner {
  margin-top: 30px;
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
}

@media screen and (min-width: 600px) {
  .brainstorm-form .inner {
    grid-template-columns: auto max-content;
  } 
}

.input-settings-icon-container {
  position: relative;
}

@media screen and (min-height: 600px) {
  .search-container {
    transition: margin-top .5s ease-out;
    margin-top: calc(50vh - 280px);
  }
  body.interacted .search-container {
    margin-top: 50px;
  }
}

.input-settings-icon-container .settings-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
  width: 50px;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 6L9.5 6" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><path d="M5.5 6L3 6.00001" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><path d="M10.5 14L3 14" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><path d="M14.5 14L17 14" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><circle cx="7.5" cy="6" r="1.75" transform="rotate(90 7.5 6)" stroke="%23ABA69E" stroke-width="1.5"/><circle cx="12.5" cy="14" r="1.75" transform="rotate(90 12.5 14)" stroke="%23ABA69E" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.input-settings-icon-container .settings-button:hover {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 6L9.5 6" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><path d="M5.5 6L3 6.00001" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><path d="M10.5 14L3 14" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><path d="M14.5 14L17 14" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><circle cx="7.5" cy="6" r="1.75" transform="rotate(90 7.5 6)" stroke="%231B1B1B" stroke-width="1.5"/><circle cx="12.5" cy="14" r="1.75" transform="rotate(90 12.5 14)" stroke="%231B1B1B" stroke-width="1.5"/></svg>');
}

.brainstorm-form input,
.refine-form input {
  font-size: 16px;
  line-height: 20px;
  width: -webkit-fill-available;
  padding: 15px 40px 15px 15px;
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #F6EBD9;
  transition: box-shadow 0.1s ease;
}

.brainstorm-form input::placeholder,
.refine-form input::placeholder {
  color: var(--color-secondary);
}

.brainstorm-form input:focus,
.refine-form input:focus {
  box-shadow: 0 0 0 5px #F6EBD9;
}

button {
  font-size: 12px;
  line-height: 20px;
  padding: 15px 20px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 5px;
  background-color: var(--color-brand);
  color: var(--color-white);
  display: block;
  cursor: pointer;
  box-shadow: 0 0 0 0px var(--color-brand);
  transition: box-shadow 0.1s ease;
}

button:hover {
  box-shadow: 0 0 0 3px #CE5B00;
}

/* List of domains inside result item*/

.domain-list .inner {
  margin-top: 15px;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-primary);
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media screen and (min-width: 600px) {
  .domain-list .inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 600px) {
  
}

.domain-list .domain-item {
  color: var(--color-primary);
  display: block;
  text-decoration: none;
  padding-left: 30px;
  margin-top: 5px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3_1999)"><path d="M16.3634 16.364C19.8781 12.8492 19.8781 7.15076 16.3634 3.63604C12.8486 0.121321 7.15016 0.12132 3.63545 3.63604C0.120727 7.15076 0.120727 12.8492 3.63545 16.364C7.15016 19.8787 12.8486 19.8787 16.3634 16.364Z" fill="%23808080"/><path d="M12.8287 12.8282L7.17188 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.17127 12.8282L12.8281 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_1999"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
}

.domain-item.available {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3_2008)"><path d="M16.3634 16.364C19.8781 12.8492 19.8781 7.15076 16.3634 3.63604C12.8486 0.121321 7.15016 0.12132 3.63545 3.63604C0.120727 7.15076 0.120727 12.8492 3.63545 16.364C7.15016 19.8787 12.8486 19.8787 16.3634 16.364Z" fill="%2300C43E"/><path d="M8 13L6 11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.00003 13L14 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2008"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
}

.domain-item.failed {
background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_9_1079)"><path d="M16.3634 16.364C19.8781 12.8492 19.8781 7.15076 16.3634 3.63604C12.8486 0.121321 7.15016 0.12132 3.63545 3.63604C0.120727 7.15076 0.120727 12.8492 3.63545 16.364C7.15016 19.8787 12.8486 19.8787 16.3634 16.364Z" fill="%23808080"/><path d="M9 12.6535V12.5455C9.00758 11.841 9.07765 11.2803 9.21023 10.8637C9.34659 10.447 9.53977 10.1099 9.78977 9.85232C10.0398 9.59474 10.3409 9.35989 10.6932 9.14777C10.9205 9.00383 11.125 8.84285 11.3068 8.66482C11.4886 8.48679 11.6326 8.28224 11.7386 8.05118C11.8447 7.82012 11.8977 7.56444 11.8977 7.28414C11.8977 6.94701 11.8182 6.65535 11.6591 6.40914C11.5 6.16292 11.2879 5.97353 11.0227 5.84095C10.7614 5.70459 10.4697 5.63641 10.1477 5.63641C9.85606 5.63641 9.57765 5.69701 9.3125 5.81823C9.04735 5.93944 8.82765 6.12883 8.65341 6.38641C8.47917 6.6402 8.37879 6.96785 8.35227 7.36936H6.625C6.65152 6.68754 6.82386 6.11179 7.14205 5.64209C7.46023 5.16861 7.88068 4.81065 8.40341 4.56823C8.92992 4.3258 9.51136 4.20459 10.1477 4.20459C10.8447 4.20459 11.4545 4.33527 11.9773 4.59664C12.5 4.85421 12.9053 5.21595 13.1932 5.68186C13.4848 6.14398 13.6307 6.68376 13.6307 7.30118C13.6307 7.72542 13.5644 8.108 13.4318 8.44891C13.2992 8.78603 13.1098 9.08717 12.8636 9.35232C12.6212 9.61747 12.3295 9.85232 11.9886 10.0569C11.6667 10.2576 11.4053 10.466 11.2045 10.6819C11.0076 10.8978 10.8636 11.1535 10.7727 11.4489C10.6818 11.7444 10.6326 12.1099 10.625 12.5455V12.6535H9ZM9.85795 16.108C9.54735 16.108 9.2803 15.9982 9.05682 15.7785C8.83333 15.555 8.72159 15.286 8.72159 14.9716C8.72159 14.661 8.83333 14.3959 9.05682 14.1762C9.2803 13.9527 9.54735 13.841 9.85795 13.841C10.1648 13.841 10.4299 13.9527 10.6534 14.1762C10.8807 14.3959 10.9943 14.661 10.9943 14.9716C10.9943 15.18 10.9413 15.3713 10.8352 15.5455C10.733 15.716 10.5966 15.8523 10.4261 15.9546C10.2557 16.0569 10.0663 16.108 9.85795 16.108Z" fill="white"/></g><defs><clipPath id="clip0_9_1079"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
}

.domain-item.unavailable {
  text-decoration: line-through;
}

.domain-item:hover {
  text-decoration: none;
  color: var(--color-link);
}

li.liked {
  position: relative;
}

li.liked:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: var(--color-brand);
}

.settings-container {
  padding: 20px;
  background-color: #FFECC8cc;
  position: fixed;
  inset: 0;
}

.settings-container .inner {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  margin-top: 10px;
  background: #fff;
  box-shadow: 0 0 0 10px rgba(205, 176, 125, 0.3);
}

.settings-item {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
}

.settings-item input:not([type="checkbox"]), .settings-item select {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: var(--font-weight-base);
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 2px;
  background: #FEF7EB;
  box-shadow: 0 0 0 0px #F78123;
  transition: box-shadow 0.1s ease;
  width: -webkit-fill-available;
}

input[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  background-color: var(--color-background);
  border-radius: 2px;
  margin: 4px 0 0 0;
}

input[type="checkbox"]:checked {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="2" fill="%23FEF7EB"/><path d="M6 11L4 9" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.00003 11L12 5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.settings-item select {
  -webkit-appearance: none; /* Safari/Chrome/iOS */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* Standard */
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.85355 9.85355C6.53857 9.53857 6.76165 9 7.20711 9H12.7929C13.2383 9 13.4614 9.53857 13.1464 9.85355L10.3536 12.6464C10.1583 12.8417 9.84171 12.8417 9.64645 12.6464L6.85355 9.85355Z" fill="%231B1B1B"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.settings-item label {
  margin-top: 10px;
  font-weight: bold;
}

.settings-domain-hack-container {
  padding-top: 10px;
  display: grid;
  grid-template-columns: 16px auto;
  gap: 0px;
}

.settings-item label.settings-domain-hack {
  font-weight: var(--font-weight-base);
  padding-left: 7px;
  margin-top: 3px;
}

.settings-item input:focus {
  box-shadow: 0 0 0 3px #F78123;
}

.settings-container .button-container {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  justify-content: space-between
}

.button-reset {
  background: var(--color-white);
  color: var(--color-primary);
}

.button-reset:hover {
  background: var(--color-background);
  color: var(--color-primary);
}

.hint {
  opacity: .5;
  font-style: italic;
}

.button-container {
  display: flex;
  gap: 10px;
}

.refinement-item {
  text-align: center;
  cursor: default;
  font-size: 12px;
  color: var(--color-secondary);
}

.prompt-hint-container {
  background-color: var(--color-white);
  padding: 15px;
  border-radius: 5px;
  margin-top: 30px;
}

.prompt-hint-container .inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.prompt-hint-close {
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 10px;
  margin: -10px;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3_1818)"><path d="M16.3634 16.364C19.8781 12.8492 19.8781 7.15076 16.3634 3.63604C12.8486 0.121321 7.15016 0.12132 3.63545 3.63604C0.120727 7.15076 0.120727 12.8492 3.63545 16.364C7.15016 19.8787 12.8486 19.8787 16.3634 16.364Z" fill="%23FEF7EB"/><path d="M12.8287 12.8282L7.17188 7.17139" stroke="%23383838" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.17127 12.8282L12.8281 7.17139" stroke="%23383838" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_1818"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.prompt-hint-close:hover {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3_1818)"><path d="M16.3634 16.364C19.8781 12.8492 19.8781 7.15076 16.3634 3.63604C12.8486 0.121321 7.15016 0.12132 3.63545 3.63604C0.120727 7.15076 0.120727 12.8492 3.63545 16.364C7.15016 19.8787 12.8486 19.8787 16.3634 16.364Z" fill="%23F78123"/><path d="M12.8287 12.8282L7.17188 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.17127 12.8282L12.8281 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_1818"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
}

.loader {
  text-align: center;
  padding: 20px;
}

.loader svg {
  display: inline;
}

.settings-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.settings-header h3 {
  text-transform: none;
  font-size: 20px;
  line-height: 20px;
  margin: 0;
}

.settings-close {
  cursor: pointer;
  margin: -10px;
  width: 20px;
  height: 20px;
  padding: 10px;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3_1818)"><path d="M16.3634 16.364C19.8781 12.8492 19.8781 7.15076 16.3634 3.63604C12.8486 0.121321 7.15016 0.12132 3.63545 3.63604C0.120727 7.15076 0.120727 12.8492 3.63545 16.364C7.15016 19.8787 12.8486 19.8787 16.3634 16.364Z" fill="%23FEF7EB"/><path d="M12.8287 12.8282L7.17188 7.17139" stroke="%23383838" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.17127 12.8282L12.8281 7.17139" stroke="%23383838" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_1818"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  cursor: pointer;
}

.settings-close:hover {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3_1818)"><path d="M16.3634 16.364C19.8781 12.8492 19.8781 7.15076 16.3634 3.63604C12.8486 0.121321 7.15016 0.12132 3.63545 3.63604C0.120727 7.15076 0.120727 12.8492 3.63545 16.364C7.15016 19.8787 12.8486 19.8787 16.3634 16.364Z" fill="%23F78123"/><path d="M12.8287 12.8282L7.17188 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.17127 12.8282L12.8281 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_1818"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
}

.settings-intro {
  margin-top: 20px;
}

.settings-background {
  position: fixed;
  inset: 0;
  z-index: -1;
}

footer {
  display: grid;
  grid-template-columns: auto auto;
  color: var(--color-secondary);
  font-size: 12px;
  line-height: 20px;
}

footer .left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

footer .left a.producthunt-badge {
  margin-bottom: 30px;
}

footer .right {
  line-height: 0;
}

footer .left a {
  color: var(--color-primary);
  text-decoration: none;
  margin: 0 10px 10px 0;
}

footer .left a:hover {
  color: var(--color-brand);
}

footer img.visual {
  height: 150px;
  width: 96px;
  line-height: 0;
}

footer .copyright {
  margin: 0px 0 35px 0;
}

footer .copyright a {
  color: var(--color-secondary);
}


@media screen and (min-width: 600px) {
  footer img.visual {
    height: 300px;
    width: 192px;
  }
}

/* Refine form */
.refine-form {
  margin: 20px 0;
}

.refine-form .inner {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px;
  padding: 5px;
  background-color: var(--color-white);
  border-radius: 5px;
}

.refine-form .inner label {
  padding: 15px 10px;
}

@media (max-width: 399px) {
  .refine-form .inner {
    grid-template-columns: 1fr;
  }
  .refine-form .inner label {
    padding: 10px 15px;
  }
}

.refine-form .inner .input-settings-icon-container input {
  background: var(--color-background);
  border-radius: 2px;
  box-shadow: 0 0 0 0 #F78123;
}

.refine-form .inner .input-settings-icon-container {
  position: relative;
}

.refine-form .inner .input-settings-icon-container .settings-button {
  position: absolute;
  right: 0;
  top: 0;
}

.refine-form .button-container {
  margin-top: 20px;
}

/* Skeleton */

.skeleton-item {
  height: 30px;
  display: grid;
  grid-template-columns: 30% 20%;
  justify-content: space-between;
  gap: 10px;
  grid-template-rows: 10px 20px;
}

.skeleton-item div:first-child,
.skeleton-item div:last-child {
  width: 100%;
  height: 14px;
  border-radius: 2px;
  animation: skeleton-item-animation 1s infinite;
  background-image: linear-gradient(90deg, #FBF5EB 0%, #FFECC8 50%, #FBF5EB 100%);
  background-size: 200% 100%;
}

.skeleton-item div:last-child {
  margin-bottom: 130px;
}

/* Animation that moves a gradiant from left to right */
@keyframes skeleton-item-animation {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}