/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../hydrogen-data/assets/franchisees/giftlist/components/GiftlistPageShell.vue?vue&type=style&index=0&id=255ce091&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
#giftlist-app .giftlist-password-field {
  position: relative;
  width: 100%;
}
#giftlist-app .giftlist-password-field .form-control {
  width: 100%;
  padding-right: 52px;
}
#giftlist-app button.giftlist-password-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: transparent;
  box-shadow: none;
  color: var(--giftlist-muted);
  font-size: 18px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
#giftlist-app button.giftlist-password-toggle:hover {
  background: var(--giftlist-soft);
  color: var(--giftlist-accent-dark);
}
#giftlist-app button.giftlist-password-toggle:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--giftlist-accent);
}