  .example-form {
      width: 100%;
      font-size: smaller;
      margin-top: 20px;
  }
  
  .example-full-width {
      width: 69%;
      margin-left: 0px;
      padding-bottom: 28px;
  }
  
  .mat-select {
      margin-left: 0px;
      width: 100%;
      text-align: left;
  }
  
  .mat-select.error div {
      border-bottom: 2px solid red;
      color: red;
  }
  
  .uploadDiv {
      padding: 61px;
      max-width: 550px;
      margin: 20px auto 40px;
      border: 1px dashed #ccc;
      border-radius: 8px;
  }
  
  .mdButton {
      background-color: #043660;
      border: 1px solid #043660;
      border-radius: 5px;
      height: 30px;
      width: 120px;
      line-height: 10px;
  }
  /* slider */
  
  .slider {
      padding: 20px 0;
      .slide_header {
          display: inline-block;
          width: 156px;
          font-family: roboto;
          font-size: 14px;
          line-height: 16px;
          color: #000;
          height: 50px;
          .indicator {
              height: 25px;
              width: 25px;
              border: 1px solid #E7E7E7;
              background-color: #FFFFFF;
              border-radius: 100%;
              margin: auto;
              margin-bottom: 8px;
              position: relative;
          }
          .indicator::after {
              color: #fff;
              transition: .4s all ease-in;
          }
          &.inProgress .indicator {
              box-shadow: 0 2px 5px 2px rgba(37, 37, 80, 0.08);
              &::after {
                  content: '';
                  background: #00CCFF;
                  position: absolute;
                  top: 25%;
                  bottom: 25%;
                  left: 25%;
                  right: 25%;
                  border-radius: 100%;
              }
          }
          &.completed .indicator::after {
              content: 'check';
              background: #00CCFF;
              position: absolute;
              top: -1px;
              bottom: -1px;
              left: -1px;
              right: -1px;
              border-radius: 100%;
              font-family: 'Material Icons';
              color: #FFF;
              line-height: 25px;
          }
          &.completed+.separator {
              border-color: #00CCFF;
          }
      }
      .separator {
          display: inline-block;
          border: 1px solid #E7E7E7;
          margin: 0 -73px 31px -73px;
          width: 156px;
      }
  }
  /* End of slider */
  
  // make the form fields more managable with bootstrap
  mat-form-field {
      // display: block;
      width: 100%;
  }
  
  mat-select {
      padding-top: 17px;
  }
  
   :host {
      display: block;
       ::ng-deep {
          // hide mat-horizontal-stepper headers
          .mat-horizontal-stepper-header-container {
              display: none;
          }
          .mat-horizontal-content-container {
              padding-top: 1px;
          }
          .mat-horizontal-stepper-content {
              padding: 0 24px 0 24px;
          }
      }
      mat-horizontal-stepper {
          background: none;
      }
      .noPadding {
          padding: 0;
      }
      button[mat-button] {
          &.default {
              background: transparent;
              color: #262628;
              border: 2px solid #262628;
              border-radius: 2px;
          }
          &.warning {
              background: #FF787F;
              color: #fff;
              border-radius: 2px;
          }
          &.success {
              background: #8BCA4A;
              color: #fff;
              border-radius: 2px;
          }
      }
      .marginTopMd {
          margin-top: 20px;
      }
      .mat-form-field {
          background: #FAFAFA;
          margin-bottom: 10px;
          border-radius: 2px;
          padding: 20px 20px 0 20px;
          border: 1px solid #F1F1F1;
          width: 100%;
          .mat-form-field-wrapper {
              height: 82px;
          }
      }
       ::ng-deep .mat-input-placeholder-wrapper {
          &,
          .mat-form-field-placeholder {
              overflow: visible;
          }
          span.mat-placeholder-required.mat-form-field-required-marker {
              // float: left;
              position: absolute;
              left: -10px;
              top: -10px;
          }
      }
      .profilePic {
          border: 1px solid #ccc;
          background: #FAFAFA;
          border: 1px solid #F1F1F1;
          border-radius: 3px;
          height: 217px;
          line-height: 215px;
          margin-bottom: 10px;
          input {
              display: none;
          }
          mat-icon {
              color: #AEAEAE;
              height: 70px;
              line-height: 217px;
              font-size: 120px;
              width: 100%;
          }
          img {
              height: auto;
              border-radius: 100%;
              width: 100%;
              max-width: 215px;
              max-height: 215px;
          }
      }
  }
  
  // custom column sizes to match the design
  @media (min-width: 992px) {
       :host {
          .col-md-custom-40 {
              width: 40%;
          }
          .col-md-custom-60 {
              width: 60%;
          }
      }
  }
  
  .cdk-global-overlay-wrapper,
  .cdk-overlay-container {
      z-index: 99999 !important;
  }