html,  body  {
    height:  100%;
}
.main  {
    height:  100%;
    width:  100%;
    display:  table;
}
.wrapper  {
    display:  table-cell;
    height:  100%;
    vertical-align:  middle;
}
#login  {
    width:  23%;
    box-shadow:  0 0 10px rgba(0, 0, 0, 0.3);
    /* padding:  15px;
  */    border:  1px solid #dcdcdc;
    border-radius:  10px;
    background-color:  white;
}
#login-form {
    padding:  50px;
}
.login-button {
    margin-top:  20px !important;
}
.login-input {
    margin-top:  15px !important;
}

.button-group  {
    position:  relative;
    display:  inline-block;
    margin:  1rem 0;
}
.button-group:before  {
    content:  attr(data-grouptype);
    z-index:  99999;
    color:  #999;
    display:  block;
    font-size:  1rem;
    padding:  0.25em;
    border-radius:  50%;
    background:  #fff;
    position:  absolute;
    left:  42.5%;
    top:  0.35rem;
}
.button-group button + button  {
    margin-left:  5px;
}
.button {
    border-radius:  5px !important;
}
span.error,  small.error  {
    display:  block;
    font-size:  0.75rem;
    font-style:  italic;
    font-weight:  normal;
    margin-bottom:  1rem;
    margin-top:  -1px;
    padding:  0.375rem 0.5625rem 0.5625rem;
    background:  #EF5F62;
    color:  #fff;
    border-radius:  5px;
}
@media all and (max-width:800px)  {
    #login  {
        width:  90%;
    }
}
@media (min-width:  800px) and (max-width: 1300px)  {
    #login {
        width:  40%;
    }
}
@media (min-width:  1025px) and (max-width: 1300px)  {
    .row .login-button {
        width:  80%;
    }
}
@media (min-width:  1300px) and (max-width: 1600px)  {
    #login {
        width:  30%;
    }
    .row .login-button {
        width:  80%;
    }
}
@media (min-width:  1600px)  {
    .row .login-button {
        width:  80%;
    }
}