#main_content.login_content {
 height: 100%;
 padding: 0;
}

.login_content #page,
.login_content #view {
 height: 100%;
}

.login_content .login,
.login_content .users,
.login_content .login_keypad {
 height: 100%;
 padding: 20px 0;
}

.login,
.users,
.login_keypad {
 display: flex;
 align-items: center;
 float: left;
 width: 100%;
}

.login .container,
.users .container,
.login_keypad .container {
 width: 340px;
}


/* LOGIN start */

.login .title {
 float: left;
 width: 100%;
 margin: 0 0 10px 0;
 font-weight: 700;
 font-size: 16px;
 line-height: 1.1;
}

.login .input_holder {
 height: 43px;
 margin: 0 0 15px 0;
}

.login .input_holder:last-child {
 margin: 0;
 border: none;
 background: none;
}

.login .input {
 background: transparent;
}

.login .basic_btn {
 width: 100%;
 height: 100%;
 padding: 0;
 font-size: 27px;
}

.login .basic_btn .fa {
 color: var(--admin-font-color-light);
} 

/* LOGIN end */


/* USERS start */

.user {
 display: flex;
 align-items: center;
 float: left;
 width: 100%;
 padding: 0 0 12px 0;
 margin: 0 0 12px 0;
 line-height: 1.1;
 border-bottom: 1px solid var(--admin-border-color-secondary);
 cursor: pointer;
}

.user .icon {
 float: left;
 width: 30px;
 min-width: 30px;
 margin: 0 15px 0 0;
}

.user .icon .fa {
 font-size: 30px;
 color: #0c3260;
}

.user .icon .fa.fa-question-circle-o {
 font-size: 36px;
}

.user .name {
 flex: auto;
 float: left;
 width: 100%;
 font-weight: 700;
 font-size: 20px;
}

/* USERS end */


/* KEYPAD start */

.pin {
 display: flex;
 justify-content: center;
 align-items: center;
 float: left;
 width: 100%;
}

.pin .boxes {
 position: relative;
 float: left;
 width: 100%;
 margin: 0 0 10px 0;
}

.pin .boxes .invisible_div {
 position: absolute;
 right: 0;
 top: 0;
 display: flex;
 align-items: center;
 width: 79.4%;
 height: 100%;
 padding: 0 0 0 20px;
 letter-spacing: 3.6em;
}

.pin .boxes .invisible_div .fa {
 display: none;
 color: var(--admin-font-color-secondary);
}

.pin .boxes .invisible_div .fa.filled {
 display: block;
}

.pin .boxes .box {
 display: flex;
 justify-content: center;
 align-items: center;
 float: left;
 width: 17.6%;
 height: 45px;
 margin: 0 3% 0 0;
 line-height: 0;
 border: 1px solid var(--admin-border-color-secondary);
 background-color: var(--admin-bg-color);
}

.pin .boxes .box:last-child {
 margin: 0;
}

.pin .boxes .box.title {
 font-weight: 700;
 text-transform: uppercase;
 border: none;
 background-color: transparent;
}

.pin .boxes .box .fa {
 display: none;
 color: var(--admin-font-color-secondary);
}

.pin .boxes .box.filled .fa {
 display: block;
}

.keypad {
 float: left;
 width: 100%;
 border: 1px solid var(--admin-border-color-secondary);
 border-right: none;
 border-bottom: none;
 background-color: var(--admin-bg-color);
}

.keypad .btn {
 display: flex;
 justify-content: center;
 align-items: center;
 float: left;
 width: 33.33%;
 height: 60px;
 font-weight: 700;
 font-size: 23px;
 line-height: 1;
 border: 1px solid var(--admin-border-color-secondary);
 border-top: none;
 border-left: none;
}

.keypad .btn.touched {
 background-color: var(--admin-border-color-secondary);
}

.keypad .btn.minus .fa {
 font-size: 28px;
 color: var(--admin-color-red);
}

.keypad .btn.check .fa {
 font-size: 28px;
 color: var(--admin-color-green);
}

/* KEYPAD end */