.app-credentials-screen {
  @include apply-flexlayout(row, nowrap, center, center);
  @include apply-background-container(linear-gradient(
                                        to bottom,
                                        color(color-background) 0%,
                                        color(color-background, darker) 50%));

  mat-card {
    @include apply-flexlayout(column, nowrap, center, center);

    background: linear-gradient(
      to bottom, 
      color(primary) 0%, 
      color(primary) 30%,  
      color(text-icons) 30%,
      color(text-icons) 100%
    );

    button {
      background: color(primary);
      height: 50px;
      width: 100%;

      border-radius: 2px;
      margin: 20px 0px 0px 0px;

      color: color(text-icons);
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }
  
    h1 {
      margin: 0px 0px 50px 0px;

      color: color(text-icons);
      font-family: 'Rajdahni', sans-serif;
      font-size: 2.2rem;
    }
  
    input {
      height: 45px;
      width: 300px;

      border: 1.3px solid color(primary);
      margin: 0px 0px 5px 5px;
      padding: 0px 5px 0px 5px;

      color: color(primary-text);
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;

      &:focus {
        outline:none;
      }

      &::placeholder {
        color: color(secondary-text);
      }
    }
  }

  /* Responsivity */                                        
  .xs {
    @include configure-flex(100%, 0, 0);
  }

  .sm {
    @include configure-flex(80%, 0, 0);
  }

  .md .lg {
    @include configure-flex(20%, 0, 0);
  }
}


.app-form {
  button {
    background: color(accent);

    color: color(text-icons);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: bold;
  }
}

.custom-overlay-pane-class {
  background: black;
}