html,body {
    height: 100%;
    font-family: 'Work Sans', sans-serif;
    line-height: 1.6;
  }

  body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #e6e6e6;
    filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#424889', endColorstr='#c33232');
    /*background-image: url(//img.alicdn.com/tps/TB1d.u8MXXXXXXuXFXXXXXXXXXX-1900-790.jpg);*/
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, #424889), color-stop(100%, #c33232));
    background-image: -webkit-linear-gradient(135deg, #424889, #c33232);
    background-image: -moz-linear-gradient(45deg, #424889, #c33232);
    background-image: -ms-linear-gradient(45deg, #424889 0, #c33232 100%);
    background-image: -o-linear-gradient(45deg, #424889, #c33232);
    background-image: linear-gradient(135deg, #424889, #c33232);
  }

  .form-signin {
    opacity: 0.9;
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
    background-color: #e6e6e6;
    font-weight: 200;
    padding: 10px;
    box-sizing: border-box;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
    -webkit-box-shadow: 0.5px 0.5px 13px #D3CEFF;
       -moz-box-shadow: 0.5px 0.5px 13px #D3CEFF;
            box-shadow: 0.5px 0.5px 13px #D3CEFF;        
    /*box-shadow: 0.5em 0.5em 0.5em -0.4em #C3CEFF;*/
  }

  ::-webkit-input-placeholder { /* Edge */
    font-weight: 200;
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight: 200;
  }

  ::placeholder {
    font-weight: 200;
  }

  .form-signin img {
    width:300px;
    height:auto;
    padding:8px;
    margin:2px;
  }

  .form-signin button {
    color: #ffffff;
    font-weight: 200;
    background-color:  #424889;
    border-color: #424889;
  }
  .form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
  }
  .form-signin .form-control:focus {
    z-index: 2;
  }
  .form-signin input[type="number"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type=number] {
    -moz-appearance:textfield;
  }
  .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  canvas{
    position:fixed;
    top:0;
    left:0;
    z-index:-999;
  }
    
  .card{
    background-color: transparent;
    background-clip: border-box;
    /*border: 1px solid rgba(0,0,0,.125);*/
    border-radius: 1rem;
    -webkit-box-shadow: 0.3px 0.3px 8px black;
     -moz-box-shadow: 0.3px 0.3px 8px black;
          box-shadow: 0.3px 0.3px 8px black; 
  }