@import url('https://fonts.googleapis.com/css?family=Barlow');

html
{
    height:100%;
}

body
{
    background-color:#f1f1f1;
    font-family: 'Barlow', sans-serif;
    height:100%;

    background: transparent url('/skins/admin_login/donate/images/donate_bg_1.jpg') no-repeat center center;
    background-size:cover !important;
}

.login-form
{
    padding:30px;
    margin:30px auto 0;
    max-width:450px;
    /*background-color: #FFF;*/
    /*border:1px solid #ddd;*/
    background-color:rgba(0,0,0,0.6);
    border-radius: 2px;
    color:#FFF;
}

.login-form label
{
    display:none;
}

.login-form.show-labels label
{
    display:block;
    font-size:0.7em;
}

.login-form label span.req
{
    color:red;
    font-weight:bold;
}

.login-form button.btn
{
    /*width:40%;*/
    text-align: center;
    cursor:pointer;
    margin-top:15px;
}

input.form-control,
button.btn{
    border-radius: 0;
}

button.btn.btn-pa
{
    color:#FFF;
    background-color: #b11f2a;
}

button.btn.btn-pa:hover
{
    background-color:#9e1c26;
}


/***********************
 *
 * Key Pad + Input
 *
 ***********************/
.donate-login-form-pin {
    font-size:2.2em;
    text-align:center;
}

.donate-login-form-keypad {
    max-width:600px;
    font-size:0px;
}

.donate-login-form-keypad .donate-login-form-keypad-key {
    width:calc(33.3% - 5px);
    background-color:#f1f1f1;
    cursor:pointer;
    text-align: center;
    padding:35px 0;
    color:#333;
    font-size:18px;
    display:inline-block;
    margin:0px 5px 5px 0px;
    border-radius: 2px;
}

.donate-login-form-keypad .donate-login-form-keypad-key:nth-child(3n) {
    margin-right:0;
    width:33.3%;
}

.donate-login-form-keypad .donate-login-form-keypad-key.submit,
.donate-login-form-keypad .donate-login-form-keypad-key.reset {
    background-color:#11a9a7;
    color:#FFF;
}

.donate-login-form-keypad .donate-login-form-keypad-key:hover {
    background-color:#eaeaea;
}

.donate-login-form-keypad .donate-login-form-keypad-key:hover,
.donate-login-form-keypad .donate-login-form-keypad-key.submit:hover,
.donate-login-form-keypad .donate-login-form-keypad-key.reset:hover {
    background-color:#23c3c1;
    color:#FFF;
}