.pinlogin {
    display: flex;
    justify-content: center;
}

.pinlogin .pinlogin-field {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 50px;
    border: 1.5px solid var(--color-light-silver);
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 30px;
    color: var(--color-black);
    outline: none;
    text-align: center;
    /*-webkit-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, .1);*/
    /*-moz-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, .1);*/
    /*box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, .1);*/
    background: transparent;
    margin-right: 9px;
    transition: all .5s;
}

.pinlogin .pinlogin-field:nth-last-of-type(1) {
    margin-right: 0;
}

.pinlogin .pinlogin-field:first-of-type {
    margin-left: 0;
}

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

/* field with focus */
/*.pinlogin .pinlogin-field:focus {*/
/*	border-color: rgba(0,174,255,1);*/
/*	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,174,255,1);*/
/*	-moz-box-shadow: 0px 0px 5px 0px rgba(0,174,255,1);*/
/*	box-shadow: 0px 0px 5px 0px rgba(0,174,255,1);*/
/*}*/

/* field that's readonly */
.pinlogin .pinlogin-field:read-only {
    border-color: #ddd;
    color: #aaa;
    background: #f5f5f5;
    cursor: default;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* field that's invalid */
.pinlogin .pinlogin-field.invalid {
    border-color: var(--color-red);
    color: var(--color-red);

    -webkit-box-shadow: 0 0 5px 0 var(--color-red);
    -moz-box-shadow: 0 0 5px 0 var(--color-red);
    box-shadow: 0 0 5px 0 var(--color-red);
}