
.pinDotContainer, .pinPadContainer, .tooltipMessage {
    width:18em;
    margin:0 auto;
}

.pinDotContainer {height:3em}
.pinPadContainer {overflow:auto}

.pinDot {
    border:.125em solid #fff;
    border-radius:50%;
    height:1em;
    width:1em;
    float:left;
    margin:1em
}

.pinDot.fill {
    background:#fff;
}

.pinKey {
    user-select:none;
    cursor:pointer;
    width:2em;
    height:2em;
    margin:1rem;
    font-size:2em;
    line-height:2em;
    text-align:center;
    border:.125rem solid #fff;
    border-radius:50%;
    float:left;
}

.pinKey.maxInputLength {opacity:.7}

.pinKey.controlKey {
    opacity:1;
    border-color:transparent;
}

.pinKey.controlKey.submitButton {opacity:.7}

.pinKey.controlKey.submitButton.ready {opacity:1}

.submitButton.loading::before {
    content:'';
    display:block;
    position:absolute;
    top:-.0625em;
    left:-.0625em;
    height:1.875em;
    width:1.875em;
    border:.0625em solid #fff;
    border-left:solid transparent;
    border-right:solid transparent;
    border-radius:50%;
    background:transparent;
    animation:spinRotate .6s linear infinite;
}

@keyframes spinRotate {
    from {transform:rotate(0deg)}
    to {transform:rotate(360deg)}
}

.tooltipMessage {
    margin:.5em auto;
    font-size:.875em;
    font-family:monospace;
    text-align:center
}
.tooltipMessage.whiteText {color:#fff}
.tooltipMessage.greenText {
    font-weight:600;
    color:greenyellow
}

.popupMessageBox {
    background-color:rgba(33,38,44,.98);
    box-shadow:0 0 .5em -.25em #000;
    border-radius: 1em;
    border:1px solid #000;
    position:absolute;
    top:0;
    padding:1em 1em 4.125em 1em;
    width:100%;
    max-width:36em;
    left:50%;
    bottom: 0;
    transform:translate3d(-50%, 0, 0)
}

.popupMessageBox .btn {
    display:block;
    position:absolute;
    bottom:1em;
    left:50%;
    transform:translate3d(-50%,0,0)
}

.messageContent {
    overflow: auto;
    display: block;
    position: absolute;
    font-size:1.25em;
    left: 1em;
    top: 1em;
    right: 1em;
    bottom: 4.125rem;
}



