.wrapper_popup {
  opacity: 0;
  display: none;
  z-index: 1200;
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}
.wrapper_popup .box_scroll_popup {
  max-height: 100%;
  min-height: fit-content;
  width: 100%;
  max-width: 560px;
}
.wrapper_popup .margin_popup {
  padding-block: 4rem;
  margin-inline: 1rem;
}
@media (max-width: 620px) {
  .wrapper_popup .margin_popup {
    padding-block: 2rem;
  }
}
.wrapper_popup .container_popup {
  width: 100%;
  padding: 2rem 2.5rem;
}
@media (max-width: 620px) {
  .wrapper_popup .container_popup {
    padding: 2rem 1rem;
  }
}
.wrapper_popup .popup {
  position: relative;
  width: 100%;
  max-width: 34.375rem;
  padding: 3.375rem 3.75rem 3rem 3.75rem;
  background: var(--white);
  border-radius: 18px;
}
@media (max-width: 620px) {
  .wrapper_popup .popup {
    padding: 2rem 1rem;
  }
}
.wrapper_popup .popup .close {
  position: absolute;
  background: var(--ultra-light-gray);
  border: 0;
  border-radius: 50%;
  top: -34px;
  right: -34px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 740px) {
  .wrapper_popup .popup .close {
    top: -10px;
    right: -10px;
  }
}
.wrapper_popup .popup .close::before, .wrapper_popup .popup .close::after {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--black);
}
.wrapper_popup .popup .close::before {
  left: 9px;
  transform: rotate(45deg);
}
.wrapper_popup .popup .close::after {
  right: 9px;
  transform: rotate(-45deg);
}
.wrapper_popup .popup h2.title {
  text-align: center;
  margin: 0;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.5rem;
}
@media (max-width: 620px) {
  .wrapper_popup .popup h2.title {
    font-size: 20px;
  }
}
.wrapper_popup .popup p {
  margin: 1.25rem 0 2rem 0;
  text-align: center;
}
.wrapper_popup .popup .btns_col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#sign_up .popup, #login .popup, #forgot_pass .popup, #new_pass .popup {
  padding: 0 0 0 0;
}
#sign_up h2, #login h2, #forgot_pass h2, #new_pass h2 {
  text-align: center;
}
#sign_up .tabs, #login .tabs, #forgot_pass .tabs, #new_pass .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#sign_up .tabs .tab, #login .tabs .tab, #forgot_pass .tabs .tab, #new_pass .tabs .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.375rem;
  padding: 32px 10px;
  border-bottom: 1px solid var(--light-gray);
  cursor: pointer;
}
#sign_up .tabs .tab.active, #login .tabs .tab.active, #forgot_pass .tabs .tab.active, #new_pass .tabs .tab.active {
  color: var(--black);
  border-bottom: 2px solid var(--brand-colour);
}
#sign_up .form_sign_up, #login .form_sign_up, #forgot_pass .form_sign_up, #new_pass .form_sign_up {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  margin-block: 1.5rem 1rem;
}
#sign_up .form_sign_up .forgot_pass, #login .form_sign_up .forgot_pass, #forgot_pass .form_sign_up .forgot_pass, #new_pass .form_sign_up .forgot_pass {
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--black);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  transition: 0.2s;
  cursor: pointer;
}
#sign_up .form_sign_up .forgot_pass:hover, #login .form_sign_up .forgot_pass:hover, #forgot_pass .form_sign_up .forgot_pass:hover, #new_pass .form_sign_up .forgot_pass:hover {
  color: var(--brand-colour);
}
#sign_up .form_sign_up button, #login .form_sign_up button, #forgot_pass .form_sign_up button, #new_pass .form_sign_up button {
  margin-top: 0.625rem;
}
#sign_up .form_sign_up .icon_input, #login .form_sign_up .icon_input, #forgot_pass .form_sign_up .icon_input, #new_pass .form_sign_up .icon_input {
  position: relative;
}
#sign_up .form_sign_up .icon_input i, #sign_up .form_sign_up .icon_input img, #login .form_sign_up .icon_input i, #login .form_sign_up .icon_input img, #forgot_pass .form_sign_up .icon_input i, #forgot_pass .form_sign_up .icon_input img, #new_pass .form_sign_up .icon_input i, #new_pass .form_sign_up .icon_input img {
  font-size: 1.25rem;
  position: absolute;
  top: 50%;
  left: 1.25rem;
  bottom: 0;
  transform: transY(-50%);
}
#sign_up .form_sign_up .icon_input input, #login .form_sign_up .icon_input input, #forgot_pass .form_sign_up .icon_input input, #new_pass .form_sign_up .icon_input input {
  padding-left: 55px;
  padding-block: 1.125rem;
  background: var(--light-brand);
}
#sign_up .form_sign_up .icon_input input:focus, #login .form_sign_up .icon_input input:focus, #forgot_pass .form_sign_up .icon_input input:focus, #new_pass .form_sign_up .icon_input input:focus {
  border: 1px solid var(--brand-colour);
}

#save_to_selection .items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 2rem 1.25rem;
}
#save_to_selection .items .item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--white);
  cursor: pointer;
  position: relative;
}
#save_to_selection .items .item input {
  display: none;
}
#save_to_selection .items .item label {
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  cursor: pointer;
}
#save_to_selection .items .item img {
  width: 2.9rem;
  height: 2.9rem;
  object-fit: cover;
  object-position: center;
  border-radius: 0.5rem;
}
#save_to_selection .items .item p {
  color: #000;
  text-align: center;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin: 0;
}
#save_to_selection .items .item input[type=checkbox] + label {
  border: 1px solid var(--light-gray);
}
#save_to_selection .items .item input[type=checkbox]:checked + label {
  border: 1px solid var(--brand-colour);
}
#save_to_selection .items .item:hover {
  background: var(--light-brand);
}
#save_to_selection .btns_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#save_to_selection .add_selection {
  border: none;
  background-color: transparent;
  outline: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: start;
  gap: 8px;
  color: var(--brand-colour);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem;
}

#new_selection .btns_row {
  margin-top: 1.875rem;
  display: flex;
  gap: 1rem;
}

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