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

.Dtlmsg2 {
  position: relative;
  top: 10px;
  margin-left: 16px;
  color: #1A1A1ADE
}

.Dtlmsg {
  position: relative;
  top: 10px;
  margin-left: 0px;
  color: #1A1A1A80
}

.DetailsBtn2 {
  width: 120px;
  height: 32px;
  border-width: 0.5px;
  color: #6E3AB6;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin-left: 182px;
  cursor: pointer;
  font-weight: 700;
}

.FormSubHeading {
  font-family: 'Helvetica';
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  color: #CD309E;
  padding-top: 20px;
}

.straightLine {
  border-left: 1px solid black;
  height: 160px;
  margin-left: 50px;
  color: rgba(26, 26, 26, 0.5);
}

.boxes-container1 {
  margin: 70px 0px 0px 60px;
  height: 25vh;
}

.stockValue {
  color: rgba(110, 58, 182, 1);
  font-weight: 400;
  font-size: 12px;
  font-style: Helvetica Neue;
  margin-right: 36px;
}

.DetailsBtn {
  width: 120px;
  height: 32px;
  border-width: 0.5px;
  cursor: pointer;
  color: #6E3AB6;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  font-weight: 700;
  display: block;
  margin-top: 25px;
}

.addon {
  margin: 60px 0px 20px 570px;
  color: rgba(110, 58, 182, 1);
  font-weight: 400;
  font-size: 12px;
  font-style: Helvetica Neue;
}

.Itemimg {
  position: relative;
  top: 40px;
  margin-left: 200px;
}

.imageTag {
  height: 165px;
  width: 100px;
  margin-right: 20px;
}

.defineType {
  font-family: helvetica;
  font-weight: 700px;
  color: var(--action-primary-default);
  font-size: 11px;
  position: relative;
  right: 10px;
  bottom: 4px;
}

.EmployeePersnalContainer {
  height: 165px;
  width: 1180px;
}

@media screen and (max-width: 1330px) {

  .EmployeePersnalContainer {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
  }

  .imageTag {
    height: 140px;
    width: 90px;
    margin-right: 12px;
  }

  .Itemimg {
    top: 20px;
    margin-left: 60px;
  }

  .adjacentField {
    max-width: 100%;
  }

  .straightLine {
    height: 100px;
    margin-left: 24px;
  }

  .boxes-container1 {
    margin: 40px 0 0 24px;
  }

  .addon {
    margin: 40px 0 20px 20px;
  }

  .DetailsBtn2 {
    margin-left: 0;
  }

  :host ::ng-deep {
    .FormsTabGroup {
      .mat-mdc-tab-label-container {
        overflow-x: auto;
      }

      .mat-mdc-tab {
        min-width: 100px;
        padding: 0 12px;
      }
    }

    mat-tab-body {

      .mat-mdc-tab-body-content>div[style*="flex"],
      .mat-mdc-tab-body-content>div[style*="inline-flex"] {
        flex-wrap: wrap !important;
      }

      .mat-mdc-tab-body-content>div>div[style*="margin-right"],
      .mat-mdc-tab-body-content>div>div[style*="margin-left"] {
        margin-right: 20px !important;
      }
    }

    gb-radiobutton,
    gb-checkbox {

      .mat-mdc-radio-group,
      mat-radio-group,
      .mdc-form-field,
      div[style*="flex"] {
        flex-wrap: wrap !important;
      }

      .mdc-label,
      .mat-radio-label,
      .mat-checkbox-label,
      label {
        white-space: normal !important;
      }
    }
  }
}

@media screen and (max-width: 599px) {

  .FormOverView.scrollbar {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .FormOverView>div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
  }

  .imageTag {
    order: -1 !important;
    width: 120px !important;
    height: 120px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 12px auto 20px auto !important;
    flex-shrink: 0 !important;
  }

  .Itemimg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .EmployeePersnalContainer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

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

  .FormSubHeading {
    font-size: 14px;
    padding-top: 12px;
    display: block;
  }

  .boxes-container1 {
    margin: 16px 0 0 0;
    height: auto;
    width: 100%;
  }

  .stockValue {
    margin-right: 0;
    font-size: 11px;
    width: 100%;
    display: block;
  }

  .DetailsBtn,
  .DetailsBtn2 {
    width: 100%;
    margin-left: 0;
    text-align: center;
    margin-top: 12px;
  }

  .addon {
    margin: 20px 0;
    font-size: 11px;
    text-align: center;
    width: 100%;
  }

  .Dtlmsg2,
  .Dtlmsg {
    margin-left: 8px;
    display: block;
  }

  .defineType {
    right: 4px;
  }

  .straightLine {
    display: none !important;
  }

  :host ::ng-deep {

    .FormOverView.scrollbar {
      padding: 0 16px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    gb-gbimage.Itemimg,
    .Itemimg {
      position: static !important;
      left: auto !important;
      top: auto !important;
      right: auto !important;
      margin: 0 !important;
      transform: none !important;
      display: block !important;
    }

    gb-gbimage.Itemimg *,
    .Itemimg * {
      position: static !important;
      left: auto !important;
      top: auto !important;
      right: auto !important;
      margin: 0 !important;
      transform: none !important;
    }

    gb-newpicklist,
    gb-input,
    gb-combobox,
    gb-date {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      margin-bottom: 8px !important;
    }

    .adjacentField>div[style*="flex"],
    .adjacentField>div {
      display: flex !important;
      width: 100% !important;
      align-items: center !important;
    }

    .adjacentField>div>div:first-child {
      flex: 1 !important;
    }

    br,
    mat-tab-body>div>div>div:empty {
      display: none !important;
    }

    .FormsTabGroup {
      .mat-mdc-tab-label-container {
        overflow-x: auto !important;
      }

      .mat-mdc-tab {
        min-width: 90px;
        font-size: 12px;
        padding: 0 8px;
      }
    }

    mat-tab-body {
      height: auto !important;
      overflow: visible !important;
    }

    .mat-mdc-tab-body-content,
    .mat-tab-body-content {
      width: 100% !important;
      height: auto !important;
      min-height: unset !important;
      max-height: none !important;
      box-sizing: border-box !important;
      padding: 0 8px !important;
      overflow: visible !important;
    }

    .mat-mdc-tab-body-content>div {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: auto !important;
      overflow: visible !important;
    }

    .mat-mdc-tab-body-content>div>div {
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    .mat-mdc-tab-body-content>div>div>div {
      width: 100% !important;
      height: auto !important;
      overflow: visible !important;
    }

    gb-radiobutton,
    gb-checkbox {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 0 20px 0 !important;
      height: auto !important;
      overflow: visible !important;
    }

    gb-radiobutton mat-radio-group[role="radiogroup"],
    gb-radiobutton .mat-mdc-radio-group,
    gb-checkbox mat-radio-group,
    gb-checkbox .mat-mdc-radio-group {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      flex-wrap: nowrap !important;
    }

    gb-radiobutton mat-radio-button,
    gb-radiobutton .mat-mdc-radio-button,
    gb-checkbox mat-checkbox,
    gb-checkbox .mat-mdc-checkbox {
      display: flex !important;
      width: 100% !important;
      height: auto !important;
      min-height: 44px !important;
      overflow: visible !important;
      margin-bottom: 8px !important;
      align-items: center !important;
    }

    .modal .modal-content {
      width: 95vw !important;
      max-width: 95vw !important;
      margin: 0 auto;
    }

    .modal .gridOver {
      overflow-x: auto;
    }

    app-gb-formgrid,
    gb-formgrid {
      display: block;
      width: 100%;
      overflow-x: auto;
    }
  }
  :host {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  ::ng-deep .Checkbox_Form_Field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  ::ng-deep .Checkbox_Form_Field .mat-mdc-text-field-wrapper,
  ::ng-deep .Checkbox_Form_Field .mdc-text-field {
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
  }

  ::ng-deep .Checkbox_Form_Field .mat-mdc-form-field-flex {
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
  }

  ::ng-deep .Checkbox_Form_Field .mat-mdc-form-field-infix {
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }

  ::ng-deep .Checkbox_Form_Field mat-checkbox,
  ::ng-deep .Checkbox_Form_Field .mat-mdc-checkbox {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;   
    align-items: flex-start !important;
    overflow: visible !important;
  }

  ::ng-deep .Checkbox_Form_Field .mdc-form-field,
  ::ng-deep .Checkbox_Form_Field .mat-internal-form-field {
    display: flex !important;
    flex-direction: row !important;  
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  ::ng-deep .Checkbox_Form_Field .mdc-checkbox + label,
  ::ng-deep .Checkbox_Form_Field .mdc-form-field label,
  ::ng-deep .Checkbox_Form_Field .mat-internal-form-field label {
    white-space: normal !important;
    word-wrap: break-word !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  ::ng-deep .checkbox-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }

  :host {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  ::ng-deep .Radio_Form_Field.h-\[56px\],
  ::ng-deep .Radio_Form_Field {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    width: 100% !important;
    min-width: unset !important;
    overflow: visible !important;
  }

  ::ng-deep .Radio_Form_Field .mat-mdc-text-field-wrapper,
  ::ng-deep .Radio_Form_Field .mdc-text-field {
    height: auto !important;
    overflow: visible !important;
  }

  ::ng-deep .Radio_Form_Field .mat-mdc-form-field-flex {
    height: auto !important;
    overflow: visible !important;
  }

  ::ng-deep .Radio_Form_Field .mat-mdc-form-field-infix {
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  ::ng-deep mat-radio-group,
  ::ng-deep .mat-mdc-radio-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }

  ::ng-deep mat-radio-button,
  ::ng-deep .mat-mdc-radio-button {
    display: block !important;
    height: auto !important;
    min-height: 44px !important;
    overflow: visible !important;
    margin-bottom: 4px !important;
    width: 100% !important;
  }
}