/* screen - search */

.search {
  align-items: flex-start;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  position: relative;
}

.search .hero {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  height: 320px;
  position: relative;
  width: 100%;
}

.search .header {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: space-between;
  padding: 24px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.search .name {
  background-image: url(../img/your-home-3.svg);
  background-size: 100% 100%;
  height: 16px;
  position: relative;
  width: 130px;
}

.search .text-2 {
  align-items: center;
  color: var(--eerie-black);
  display: flex;
  font-weight: 400;
  justify-content: center;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .label-3 {
  align-items: center;
  color: var(--eerie-black);
  display: flex;
  font-weight: 400;
  justify-content: center;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .arrow-down {
  aspect-ratio: 1;
  height: 8px;
  position: relative;
  width: 8px;
}

.search .background {
  background-image: url(../img/background-2.png);
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.search .keyword {
  height: 122px;
  left: calc(50.00% - 352px);
  top: 84px;
  width: 705px;
}

.search .motto-1 {
  align-items: flex-start;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  left: calc(50.00% - 322px);
  position: absolute;
  top: calc(50.00% + 69px);
}

.search .title-1 {
  -webkit-text-stroke: 7px var(--white);
  color: var(--jungle-green);
  font-weight: 600;
  line-height: 84px;
  margin-left: -7.00px;
  margin-top: -8.00px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.search .title {
  color: var(--white);
  font-weight: 600;
  line-height: 84px;
  margin-top: -1.00px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.search .title-2 {
  -webkit-text-stroke: 7px var(--white);
  color: var(--alizarin-crimson);
  font-weight: 600;
  line-height: 84px;
  margin-top: -8.00px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.search .title-3 {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  left: calc(50.00% - 230px);
  position: absolute;
  top: calc(50.00% - 60px);
}

.search .title-4 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 346px;
}

.search .keyword-1 {
  height: 84px;
  width: 73px;
}

.search .title-5 {
  -webkit-text-stroke: 6px #ed4c5c;
  color: var(--white);
  font-weight: 600;
  left: 4px;
  line-height: 84px;
  position: absolute;
  top: -6px;
  width: 192px;
}

.search .title-6 {
  -webkit-text-stroke: 6px var(--white);
  color: var(--jungle-green);
  font-weight: 600;
  left: 4px;
  line-height: 84px;
  position: absolute;
  top: 112px;
  width: 192px;
}

.search .title-7 {
  -webkit-text-stroke: 6px var(--white);
  color: var(--alizarin-crimson);
  font-weight: 600;
  left: 4px;
  line-height: 84px;
  position: absolute;
  top: 230px;
  width: 192px;
}

.search .subtitle {
  color: var(--white);
  font-weight: 500;
  line-height: 36px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.search .form {
  align-self: stretch;
  flex-direction: column;
  height: 832px;
  margin-top: -124px;
  width: 100%;
}

.search .form-1 {
  align-self: stretch;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 16px 16px;
  justify-content: center;
  padding: 48px 80px 16px;
  width: 100%;
}

.search .header-1 {
  background-image: url(../img/union-3.png);
  background-size: 100% 100%;
  height: 123px;
  position: relative;
  width: 1036px;
}

.search .header-2 {
  align-items: flex-start;
  box-shadow: 7px 7px 20px #cccccc1a , 26px 26px 37px #cccccc17 , 59px 59px 50px #cccccc0d , 105px 105px 59px #cccccc03 , 164px 164px 65px transparent;
  display: flex;
  flex-direction: column;
  left: 0;
  padding: 24px 32px;
  position: absolute;
  top: 0;
  width: 540px;
}

.search .label-4 {
  color: var(--jungle-green);
  font-weight: 600;
  line-height: 48px;
  margin-top: -0.50px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .label {
  color: var(--eerie-black);
  font-weight: 400;
  line-height: 27px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .header-3 {
  align-items: flex-start;
  box-shadow: 7px 7px 20px #cccccc1a , 26px 26px 37px #cccccc17 , 59px 59px 50px #cccccc0d , 105px 105px 59px #cccccc03 , 164px 164px 65px transparent;
  display: flex;
  gap: 16px;
  left: 556px;
  padding: 24px 32px;
  position: absolute;
  top: 0;
  width: 480px;
}

.search .text-3 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.search .label-5 {
  color: var(--alizarin-crimson);
  font-weight: 600;
  line-height: 48px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .form-2 {
  align-self: stretch;
  flex-wrap: wrap;
  gap: 16px 16px;
  height: 645px;
  justify-content: center;
  padding: 0px 80px;
  width: 100%;
}

.search .form-member::-webkit-scrollbar {
  display: none;
  width: 0;
}

.search .form-member {
  border-radius: 16px;
  flex-direction: column;
  gap: 16px;
  height: 645px;
  overflow-y: scroll;
  width: 540px;
}

.search .member {
  background-color: var(--white);
  border: 0.5px solid ;
  border-color: var(--bon-jour);
  border-radius: 16px;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}

.search .member-info {
  flex-wrap: wrap;
  gap: 24px 24px;
}

.search .input {
  align-items: flex-start;
  flex-direction: column;
  width: 226px;
}

.search .label-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  justify-content: center;
  position: relative;
}

.search .label-2 {
  color: var(--eerie-black);
  font-weight: 500;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .asterisk {
  color: var(--alizarin-crimson);
  font-weight: 400;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .box {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .text {
  color: var(--shady-lady);
  flex: 1;
  font-weight: 400;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
}

.search .box-1 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .box-2 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .box-3 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .box-4 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .helper-text {
  color: var(--shady-lady);
  font-weight: 400;
  line-height: 24px;
}

.search .label-with-asterisk {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.search .information-icon {
  aspect-ratio: 1;
  height: 20px;
  position: relative;
  width: 20px;
}

.search .box-5 {
  height: 51px;
  padding: 8px;
}

.search .scale {
  align-items: flex-start;
  align-self: stretch;
  border-radius: 4px;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 4px;
  overflow: hidden;
  position: relative;
}

.search .weight {
  background-color: var(--jungle-green);
}

.search .weight-1 {
  background-color: var(--wild-sand);
  align-self: stretch;
  border-radius: 8px;
  flex: 1;
  flex-grow: 1;
  position: relative;
}

.search .helper {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.search .button-checkbox {
  border: 1px solid;
  border-color: var(--bon-jour);
  border-radius: 4px;
  height: 16px;
  position: relative;
  width: 16px;
}

.search .helper-text-1 {
  flex: 1;
  margin-top: -1.00px;
}

.search .member-info-1 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 24px 24px;
  position: relative;
  width: 476px;
  z-index: 1;
  /*border: 2.5px solid red;*/
}

.search .box-6 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .box-7 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .box-8 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .box-9 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .box-10 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .information-icon-1 {
  aspect-ratio: 1;
  height: 20px;
  margin-left: -1867px;
  margin-top: -1049.50px;
  position: relative;
  width: 20px;
}

.search .box-11 {
  height: 51px;
  padding: 8px;
}

.search .background-1 {
  height: 20px;
  right: 0;
  top: 0;
  position:relative;
  width: 20px;
}

.search .union {
  right: 0px;
  position: relative;
  top: 100px;
  width: 577px;
}

.search .remove {
  aspect-ratio: 1;
  height: 24px;
  right: 0px;
  position: absolute;
  top: 0px;
  width: 24px;
}

.search .button {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 0px 0px 80px;
  position: relative;
  width: 100%;
}

.search .button-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--bon-jour);
  border-radius: 16px;
  display: flex;
  gap: 8px;
  height: 52px;
  justify-content: center;
  position: relative;
  /*width: 100%;*/
}

.search .add-member {
  aspect-ratio: 1;
  height: 20px;
  margin-left: -582.00px;
  margin-top: -1203.00px;
  position: relative;
  width: 20px;
}

.search .label-6 {
  color: var(--jungle-green);
  font-weight: 500;
  line-height: 27px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.search .property-form {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 480px;
}

.search .filter-options {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--bon-jour);
  border-radius: 16px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.search .input-1 {
  align-items: flex-start;
  align-self: stretch;
  flex: 0 0 auto;
  flex-direction: column;
  width: 100%;
}

.search .box-12 {
  flex: 0 0 auto;
  padding: 12px 16px;
  justify-content: space-between;
}

.search .box-12 input[name="location"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
}

.search .search-1 {
  aspect-ratio: 1;
  height: 16px;
  position: relative;
  width: 16px;
  flex-shrink: 0;
  margin-left: 8px;
}

.search .box-13 {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.search .input-2 {
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  width: 100%;
}

.search .input-item {
  align-items: center;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--bon-jour);
  border-radius: 12px;
  flex: 1;
  flex-grow: 1;
  padding: 12px 12px;
}

.search .text-1 {
  color: var(--alizarin-crimson);
  font-weight: 500;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.search .helper-text-2 {
  white-space: nowrap;
  width: fit-content;
}

.search .button-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  position: relative;
  width: 100%;
  z-index: 0;
}

.search .button-3 {
  align-items: center;
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--bon-jour);
  border-radius: 16px;
  display: flex;
  gap: 8px;
  height: 52px;
  justify-content: center;
  position: relative;
  width: 160px;
}

.search .label-7 {
  color: var(--eerie-black);
  font-weight: 400;
  line-height: 27px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.search .button-4 {
  align-items: center;
  background-color: var(--alizarin-crimson);
  border-radius: 16px;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 8px;
  height: 52px;
  justify-content: center;
  position: relative;
}

.search .label-8 {
  color: var(--white);
  font-weight: 500;
  line-height: 27px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.search .arrow-down-4 {
  aspect-ratio: 1;
  height: 16px;
  position: relative;
  width: 16px;
}

.search .background-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.search .box-14 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--bon-jour);
  border-radius: 12px;
  display: flex;
  gap: 8px;
  position: relative;
  width: 100%;
}

.search .calendar-2 {
  aspect-ratio: 1;
  height: 16px;
  position: relative;
  width: 16px;
}

.search .form-3 {
  align-items: flex-start;
  display: flex;
  position: relative;
}

.search .helper-1 {
  align-self: stretch;
  position: relative;
}

.search .helper-text-3 {
  color: var(--shady-lady);
  font-weight: 400;
  line-height: 24px;
  position: relative;
}

.search .input-3 {
  display: flex;
  gap: 8px;
  position: relative;
}

.search .keyword-2 {
  overflow: hidden;
  position: relative;
}

.search .member-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  /*border: 2.5px solid green;*/
}

.search .weight-2 {
  align-self: stretch;
  border-radius: 8px;
  flex: 1;
  flex-grow: 1;
  position: relative;
}

.input-field:hover{
  border: 1px solid var(--jungle-green);
  border-color: var(--jungle-green);
}

.input-field:focus{
  border: 2px solid var(--jungle-green) !important;
  border-color: var(--jungle-green) !important;
}

*:focus {
  outline: none;
}

*:hover{
  outline: none;
}

.gender:hover{
  border: 1px solid var(--jungle-green) !important;
  border-color: var(--jungle-green) !important;
}

.gender:focus{
  border: 2px solid var(--jungle-green) !important;
  border-color: var(--jungle-green) !important;
}

.gender:checked{
  border: 2px solid var(--jungle-green) !important;
  border-color: var(--jungle-green) !important;
}

.gender-container {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.gender-container .gender {
  flex: 1;
  min-width: 0;
}

.input-field-house:hover{
  border: 1px solid var(--alizarin-crimson);
  border-color: var(--alizarin-crimson);
}

.input-field-house:focus{
  border: 2px solid var(--alizarin-crimson) !important;
  border-color: var(--alizarin-crimson) !important;
}

.button-4:hover{
  opacity: 0.8;
}