html {
  height: 100%;
  box-sizing: border-box;
}

.logo_link {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 15px;
    align-content: center;
    align-items: center;
    justify-items: center;
    margin-bottom: 10px;
    color:inherit;

}
.login-image {
    width:47px;
    display:block;
    margin:auto;
}

.payoff {
    color:#eee;
}

.background-front {
  /*background: linear-gradient(45deg, #0a247b 0%, rgba(10, 36, 123, 0) 70%), linear-gradient(135deg, #7fd8e6 10%, rgba(127, 216, 230, 0) 80%), linear-gradient(225deg, #3b1e67 10%, rgba(59, 30, 103, 0) 80%), linear-gradient(315deg, #83e6e7 100%, rgba(131, 230, 231, 0) 70%);*/
  /*  background-image: linear-gradient(to left bottom, #207ac2, #009ecf, #00bcb1, #51d179, #d0da49);*/
  /*  background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);*/
    /*background-image: linear-gradient(to right bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);*/
    /*background-image: linear-gradient(to bottom, #207ac2, #009ecf, #00bcb1, #51d179, #d0da49);*/

    background-image: linear-gradient(to left bottom, #207ac2, #009ecf, #00bcb1, #51d179, #d0da49);
    /*background-image: linear-gradient(to left, #051937, #102f57, #194679, #1f5f9d, #207ac2);*/
    /*background-image: linear-gradient(to left bottom, #051937, #102f57, #194679, #1f5f9d, #207ac2);*/
    /*background-image: linear-gradient(to right top, #051937, #102f57, #194679, #1f5f9d, #207ac2);*/

}

.background-front-develop {
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  width: 350px;
}

.login-panel {
  -webkit-animation: fadein 4s;
  /* Safari, Chrome and Opera > 12.1 */
  /* Firefox < 16 */
  /* Internet Explorer */
  /* Opera < 12.1 */
  animation: fadein 4s;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.panel__body {
  padding: 25px;
}

.panel__top {
  text-align: center;
  margin-bottom: 40px;
}

.panel__appliction-name {
  margin-bottom: 30px;
  width: 100%;
  color: #fff;
  font-size: 50px;
  font-weight: 100;
}

/*.sub {*/
/*  display: block;*/
/*  width: 100%;*/
/*  font-size: 12px;*/
/*  text-align: center;*/
/*  margin-bottom: 10px;*/
/*}*/

.error span {
  display: block;
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-weight: 200;
  text-align: center;
  color: #fff;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Firefox < 16 */

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Internet Explorer */

/* Opera < 12.1 */

canvas {
    position: absolute;
    top:0;
    height: 100%;
    width: 100%;
    z-index: -10;
}