@import url('./../../../gbhost/public/gbstyle/gbcommonstyle.scss');

:host {
  display: block;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.pagebutton {
  margin: 0 3px;
  width: 48px;
  height: 32px;
  font-size: 16px;
  outline-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#backbutton {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  outline-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px #0000000F;
  cursor: pointer;

}

.first {
  width: 100%;
  max-width: 300px;
  height: 320px;
  box-sizing: border-box;
}

.second {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box;
}

.third {
  flex: 1;
  min-width: 300px;
  max-width: 420px;
  height: auto;
}

.four {
  flex: 1;
  min-width: 280px;
  max-width: 320px;
  height: auto;
  margin-left: 0;
}

.fith {
  width: 400px;
  height: 300px;
  border-radius: 8px;
  margin-left: 40%;
  overflow: hidden;
}

.input-with-icon {
  display: flex;
  align-items: center;
}

.map-parent {
  display: flex;
  flex: 1;
  min-height: 500px;
  height: 70vh;
}

.FormModal_contentLovType {
  justify-content: center;
  background-color: var(--mat-sys-background);
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 1350px;
  height: 460px;
  border-radius: 10px;
  overflow: auto;
}

.thirdcontainer {
  width: 100%;
  flex: 0 0 331px;
  top: 196px;
  height: 251px;
  border-radius: 6px;
  opacity: 1;
}

.address-container {
  display: flex;
  flex-direction: row;
  /* change from column to row */
  gap: 20px;
  /* optional spacing between columns */
}

.partycolumn {
  flex: 1;
  /* each column takes equal width */
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 992px) {
  .first {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
  }

  .second {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .third {
    flex: 0 0 420px !important;
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .four {
    flex: 1 !important;
    min-width: 280px !important;
    max-width: 320px !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

}

.first,
.third,
.four {
  ::ng-deep {

    gb-newpicklist,
    gb-input,
    gb-textarea {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    div[style*="display: inline-block"],
    div[style*="display:inline-block"] {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .Mat_Form_Field,
    .mat-mdc-form-field,
    .mat-form-field {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow: visible !important;
    }

    span[style*="display: inline-flex"],
    span[style*="display:inline-flex"] {
      display: flex !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      align-items: center !important;
      overflow: visible !important;

      input.form_input,
      .form_input,
      input[matInput],
      input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
      }

      mat-icon {
        flex-shrink: 0 !important;
        width: 20px !important;
        font-size: 20px !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
    }

    gb-input input.form_input,
    gb-input .form_input,
    gb-input input[matInput],
    gb-input input,
    gb-textarea textarea,
    textarea {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    div[style*="display: flex"] {
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      gap: 12px !important;
      margin-bottom: 8px !important;
      box-sizing: border-box !important;

      gb-newpicklist {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
        min-width: 0 !important;
        display: block !important;
        flex-shrink: 0 !important;
      }

      div[style*="margin-right"] {
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
    }

    >gb-textarea,
    >gb-newpicklist,
    >gb-input {
      width: 100% !important;
      display: block !important;
      margin-bottom: 8px !important;
    }

    div>gb-textarea,
    div>gb-newpicklist,
    div>gb-input {
      width: 100% !important;
      display: block !important;
      margin-bottom: 8px !important;
    }

    gb-newpicklist[formControlName="StandardRegionName"],
    gb-input[formControlName="AddressZipCode"],
    gb-input[formControlName='AddressZipCode'] {
      width: calc(100% - 36px) !important;
      max-width: calc(100% - 36px) !important;
    }
  }
}

gb-textarea[formControlName="AddressLine1"] {
  width: calc(100% - 36px) !important;
  max-width: calc(100% - 36px) !important;
}


@media (max-width: 991px) {

  .first,
  .third,
  .four {
    ::ng-deep {
      div[style*="display: flex"] {
        gap: 8px !important;

        gb-newpicklist {
          width: calc(100% - 44px) !important;
          max-width: calc(100% - 44px) !important;
        }

        div[style*="margin-right"] {
          width: 32px !important;
          height: 32px !important;
        }
      }

      gb-newpicklist[formControlName="StandardRegionName"] {
        width: 100% !important;
        max-width: 100% !important;
      }
    }
  }

  .fith {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .thirdcontainer {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .FormModal_contentLovType {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  :host ::ng-deep * {
    max-width: 100vw;
  }
}

::ng-deep span[style*="display: inline-flex"],
::ng-deep span[style*="display:inline-flex"] {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-items: center !important;

  input.form_input,
  .form_input,
  input[matInput],
  input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  mat-icon {
    flex-shrink: 0 !important;
    width: 20px !important;
    font-size: 20px !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

::ng-deep {

  // The row wrapping the radio button + back button
  div[style*="display: flex;width: 100%;"],
  div[style*="display: flex; width: 100%;"] {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  div[style*="display: flex;width: 100%;"]>gb-radiobutton,
  div[style*="display: flex; width: 100%;"]>gb-radiobutton {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  div:has(> #backbutton),
  div:has(> button[id="backbutton"]),
  div[style*="margin-left: 44%"],
  div[style*="margin-left:44%"] {
    // margin-left: auto !important;
    // margin-top: 0 !important;
    // align-self: center !important;
    flex-shrink: 0 !important;
  }
}