html,
body {
  height: auto !important;
  overflow: auto;
}
.ppe-element-holder {
  background: url('../assets/images/dm-background.jpg') rgb(var(--v-theme-primary)) !important;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#004682+0,004682+100&1+0,0.5+70,0.1+100 */
  /* background: #004682; */
  /* fallback colour. Make sure this is just one solid colour. */
  /* FF3.6-15 */
  background:
    -moz-linear-gradient(top, rgba(0, 70, 130, 0.6) 0%, rgba(0, 70, 130, 0.4) 70%, rgba(0, 70, 130, 0.1) 100%),
    url('../assets/images/dm-background.jpg') no-repeat center bottom;
  /* Chrome10-25,Safari5.1-6 */
  /* background: -webkit-linear-gradient(top, rgba(0, 70, 130, 0.6) 0%, rgba(0, 70, 130, 0.4) 70%, rgba(0, 70, 130, 0.1) 100%), url("./assets/images/ppe-background.jpg") no-repeat center bottom; */
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background:
    linear-gradient(to bottom, rgba(0, 70, 130, 0.6) 0%, rgba(0, 70, 130, 0.4) 70%, rgba(0, 70, 130, 0.1) 100%),
    url('../assets/images/dm-background.jpg') no-repeat center bottom;
  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004682', endColorstr='#1a004682', GradientType=0);
  background-size: cover !important;
}

.create-user-holder {
  background: url('../assets/images/dm-background.jpg') !important;
  background-size: cover !important;
  background-position: bottom !important;
}
.login-holder {
  background: url('../assets/images/dm-background.jpg') !important;
  background-size: cover !important;
  background-position: bottom !important;
}
.create-user-holder .info-card-holder {
  background: url('../assets/images/info-card-holder.png');
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.create-user-holder .form-card-holder {
  background: url('../assets/images/form-card-holder.jpg');
  filter: drop-shadow(42px 20px 20px rgba(0, 0, 0, 0.2));
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.login-holder .info-card-holder {
  background: url('../assets/images/info-card-holder.png');
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.login-holder .form-card-holder {
  background: url('../assets/images/form-card-holder.jpg');
  filter: drop-shadow(42px 20px 20px rgba(0, 0, 0, 0.2));
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.login-holder .form-card-holder .v-card {
  background-color: var(--primary) !important;
  border: 1px solid white !important;
}
.login-holder .user_login .identity_button {
  background-color: var(--primary) !important;
  border: 1px solid white !important;
}
#create-account {
  .v-input {
    display: grid !important;
  }
  .v-text-field input {
    padding: 12px !important;
  }
  .v-card {
    background-color: var(--primary) !important;
    border: 1px solid white;
  }
  .form-card .btnCreate {
    border: 1px solid white !important;
  }
  .form-card {
    padding-top: 24px !important;
  }
}

#hero h1 {
  color: #ffffff !important;
}

#loan-path-options .dropped-underline {
  color: #ffffff !important;
}
#loan-path-options .nav-link {
  height: 100% !important;
}
#loan-path-options .puchase_refinance_subtext {
  color: rgb(161, 161, 161) !important;
  margin: -20px;
  margin-top: -3px;
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
  #loan-path-options .puchase_refinance_subtext_mobile {
    color: rgb(161, 161, 161) !important;
    margin: -17px !important;
    margin-top: -5px !important;
    margin-left: -5px !important;
  }
}

@media screen and (min-width: 340px) and (max-width: 915px) {
  #loan-path-options .puchase_refinance_subtext_mobile {
    color: rgb(161, 161, 161) !important;
    margin: -51px !important;
    margin-top: -5px !important;
    margin-left: -119px !important;
  }
}

.navbar-nav {
  flex-direction: row;
}

.nav-header-link {
  width: 100%;
  color: #ffffff;
  display: inline;
  padding-right: 1px;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.resource-centre {
  position: relative;
  display: block;
  margin-right: 20px;
}

@media screen and (min-device-width: 340px) and (max-device-width: 982px) {
  .resource-centre {
    margin-left: 157px;
    margin-right: 10px;
    font-size: 15px;
  }

  .sign-in {
    font-size: 15px;
  }

  .contact-border {
    display: none !important;
  }

  .page-border {
    display: none !important;
  }
}

.dropbtn {
  background-color: #04aa6d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.navbar-header a:hover {
  text-decoration: none;
}

.grecaptcha-badge {
  display: none;
}

.page-border {
  max-width: 0% !important;
  padding: 1px !important;
  height: 100px !important;
  margin-top: 7em !important;

  .border-2 {
    border-width: 4px !important;
  }
}

.contact-border {
  max-width: 0% !important;
  padding: 1px !important;
  height: 100px !important;
  margin-top: 4em !important;

  .border-2 {
    border-width: 4px !important;
  }
}

.cdk-global-scrollblock {
  top: 0px !important;
}

#portal-app img.app-bar-logo {
  width: 11em !important;
  @media (max-width: 768px) {
    width: 8.5em !important;
  }
}
#portal-app .ppe-element-holder .v-application__wrap {
  min-height: auto !important;
}
#portal-app .resource_center_link {
  color: var(--primary) !important;
}
#portal-app .sigin-handler .v-btn__content {
  color: var(--primary) !important;
}
#portal-app .btn-login svg {
  fill: var(--primary) !important;
}
#portal-app .login-holder .user_login .identity_button {
  color: #ffffff;
}

#portal-app .login-holder .user_login .back_to_login {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}
#portal-app .identity_verify_account_button {
  color: #ffffff !important;
  border: 1px solid #ffffff;
}
.cdk-global-scrollblock {
  top: 0px !important;
}

/* temporaray fix for borrower Digital mfe-UI Issues */
#AccountChekIFRAME {
  overflow: hidden !important;
  height: 100vh !important;
}
#iframeFormFree {
  margin-top: 7rem;
}
app-free-form #loader1 {
  height: 32px !important;
  width: 32px !important;
}

app-tasks .tooltip {
  opacity: 1 !important;
  font-weight: 500 !important;
  border-style: unset;
  z-index: 0;
}
app-tasks .table td {
  border-style: unset;
}

#digital-app {
  width: 100%;
  margin-top: 3.5rem !important;
  min-height: calc(100vh - 128px);
}

app-error-dialog .modal {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  .button {
    margin: -12px !important;
  }
}
app-credit-type-intent-dialog {
  .mat-dialog-title {
    color: #ffffff !important;
  }
  .mat-dialog-content {
    margin: 20px 0 0 0px !important;
    padding: 0 22px 0px 0px !important;
  }
}
#digital-app app-tasks .modal {
  position: relative !important;
  display: block !important;
  height: 16rem;
}

#digital-app app-tasks .uploadedmodal-container {
  position: relative !important;
  width: 20rem;
  height: 15rem;
}
#digital-app app-tasks .table-container {
  position: relative !important;
}
#digital-app app-documents .modal {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}
#digital-app app-contact-schedule-consultation .mat-form-field {
  width: 30% !important;
}
#digital-app app-communications .item-header {
  width: 100% !important;
}
#digital-app app-communications .subject-container .input,
.item-section .textarea {
  border: 1px solid #424242 !important;
}
#digital-app custom-element-ppe {
  margin-top: 100px;
}
@media screen and (min-width: 312px) and (max-width: 1024px) {
  #digital-app app-communications .subject-container {
    margin-top: 3rem !important;
    margin-left: -0.8rem !important;
  }
}
@media only screen and (min-device-width: 312px) {
  ::ng-deep .cdk-overlay-container {
    position: static !important;
  }
}
body .cdk-overlay-container {
  position: fixed !important;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  ::ng-deep .cdk-overlay-container {
    position: static !important;
  }
}

@media screen and (min-device-width: 312px) and (max-device-width: 940px) {
  #footer-main {
    .order-1 {
      display: flex;
      justify-content: center !important;
    }
    .order-3 {
      display: flex;
      justify-content: center;
    }
    .order-sm-3 {
      justify-content: center;
    }
    .order-sm-1 {
      display: flex;
      justify-content: center;
    }
  }
}
#footer-main {
  .order-sm-3 {
    justify-content: end;
  }
  .order-1 {
    display: flex;
    justify-content: end;
  }
}

@media screen and (min-width: 750px) {
  #digital-app .mat-sidenav {
    width: 275px;
    position: fixed !important;
    margin-top: 64px;
    height: calc(100% - 162px);
    z-index: 1;
  }

  #digital-app .mat-sidenav-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
  }
  #digital-app app-sub-header .container-fluid {
    width: calc(100% - 285px);
    margin-left: 290px !important;
    margin-right: 0px !important;
    position: fixed;
    z-index: 2000;
    top: calc(100px - 45px);
    background: #fff;
    padding-left: 0px;
    padding-right: 0px;
    /* margin-left: 256px; */
  }
  #digital-app app-dynamic-menu-container .application-wrapper {
    margin-top: 12vh;
    /* margin-left: 257px; */
  }
  #digital-app mat-sidenav-content .content {
    width: calc(100% - 275px);
    margin-left: 275px;
  }
  #digital-app {
    .container,
    .container-fluid {
      padding-right: 0px;
      padding-left: 0px;
    }
  }
}
@media screen and (min-width: 350px) and (max-width: 800px) {
  #digital-app custom-element-ppe {
    margin-top: 0px;
  }
}
.timer {
  display: none;
}

@media (min-width: 340px) {
  a[aria-expanded='true'] {
    .icon-background_sm {
      width: 50px !important;
      height: 50px !important;
      margin: 0 24px !important;
      background-color: var(--primary) !important;
    }

    .icon {
      filter: invert(100%) sepia(88%) saturate(0%) hue-rotate(150deg) brightness(107%) contrast(101%) !important;
    }
  }
}
@media only screen and (min-width: 330px) {
  #digital-app mat-sidenav-content .content {
    margin-top: 0% !important;
  }
}
@media only screen and (min-width: 750px) {
  #digital-app mat-sidenav-content .content {
    margin-top: 9% !important;
  }
}
@media only screen and (min-width: 800px) {
  #digital-app mat-sidenav-content .content {
    margin-top: -1.5% !important;
  }
}

#digital-app app-loan-dashboard .fixed-content {
  position: fixed !important;
  pointer-events: none;
  width: 100%;
  bottom: 10px;
  top: 64px !important;
}
#digital-app nav {
  pointer-events: all;
}
#digital-app app-loan-dashboard .viewloan-wrapper {
  margin-top: 178px !important;
}

.phone-email-ml .text-underline {
  color: var(--primary) !important;
}
.statySigninButton,
.signoutButton {
  background-color: var(--neutral-white) !important;
  color: var(--primary) !important;
}
#restartButtonId button.bg-primary:hover {
  background-color: var(--primary) !important;
}