div.component_ManualConnectHandshake {

    display: none;

    &.show {
        display: inline-block;
    }

    background-color: $background-light;
    border-radius: 5px;
    padding: 15px 10px 10px 10px;
    box-shadow: 1px 3px 10px $support-color-dark;
}

div.component_ManualConnectHandshake_label {
    text-align: center;
    font-weight: bold;
    font-size: large;
}
div.component_ManualConnectHandshake_sublabel {
    text-align: center;
    font-size: smaller;
    padding: 0 15px 0 15px;
}

div.component_ManualConnectHandshake_characters {

    border-radius: 3px;
    background-color: $background-lightestgray;
    border: $background-lightgray 1px solid;
    cursor: default;

    margin-top: 10px;
    padding: 25px 15px 25px 15px;

    & span.component_ManualConnectHandshake_character {
        font-size: 36px;
        padding: 7px 9px 7px 9px;
        background-color: $background-light;
        border: 1px solid $background-lightgray;
        border-radius: 3px;
        width: 27px;
        text-align: center;
    }
}

div.component_ManualConnectHandshake_button {
    display: none;
    margin-top: 10px;

    &.show {
        display: inline-block;
    }
}