/**
* Pinlogin
* Javascript cross-browser and flexible pincode login input experience
* 
* Author: Bob Hageman
*/

.pinlogin-field {
box-sizing: border-box;
display: inline-block;
width: 30px;
height: 30px;
padding: 10px;
margin-right: 5px;
font-size: 18px;
line-height: 3.5;
text-align: center;
border: 1px solid #555;
border-radius:50%;
}

.pinlogin-field:last-child {
margin-right: 0;
}

.pinlogin-field:focus {
border-color: var(--bs-success);
outline: 0;
}

.pinlogin-field:disabled {
background-color: #eee;
color: #999;
}

/* 
* Hide native cross-browser up/down arrows for numeric inputs 
* added specifically to support the modern inputmode layout
*/
.pinlogin-field::-webkit-outer-spin-button,
.pinlogin-field::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.pinlogin-field[type=number] {
-moz-appearance: textfield;
}