

.linkcolor {
    color: #7954AD;
    text-decoration: none;
    background-color: transparent;
}

    .linkcolor:hover {
        color: #B58EEB;
        text-decoration: none;
    }




.qrcodetablestyle {
    width: 60px;
    height: 60px;
    border-radius: 8% !important;
    border: 1px solid #7954AD;
    padding: 1px;
    box-shadow: 0px 2px 9px #b9a7d3;
}








.inputGroup {
    margin: 1em 0 1em 0;
    position: relative;
}

    .inputGroup input {
        font-size: 100%;
        padding: 0.8em;
        outline: none;
        border: 1px solid rgb(200, 200, 200);
        background-color: transparent;
        border-radius: 5px;
        width: 100%;
        height: 40px;
        padding-top: 20px;
        color: #495057;
    }





    .inputGroup label {
        font-size: 100%;
        position: absolute;
        left: 0;
        padding: 0.8em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        margin-top: 1px;
        pointer-events: none;
        transition: all 0.3s ease;
        color: rgb(100, 100, 100);
        inset-area: center;
    }


    .inputGroup :is(input:focus, input:valid) ~ label {
        transform: translateY(-50%) scale(.9);
        margin: 0em;
        margin-left: 1.3em;
        margin-right: 1.3em;
        padding: 0.4em 0.4em 0em 0.4em;
        background-color: #FFFFFF;
        color: #7a54ad;
    }

    .inputGroup :is(input:focus, input:valid) {
        border-color: rgb(150, 150, 200);
    }



.labelstyle {
    margin-bottom: 0rem;
    margin-top: 0.9rem;
}




.readonlyinput-style {
    transform: translateY(-50%) scale(.9) !important;
    margin: 0em !important;
    margin-left: 1.3em !important;
    margin-right: 1.3em !important;
    padding: 0.4em 0.4em 0em 0.4em !important;
    background-color: #FFFFFF !important;
    color: #7a54ad !important;
}






.aButtonIconStyle {
    padding: 10px 11px 5px 11px;
}













<style >
.containercopy {
    width: 100%;
}


.copy-text {
    height: 40px;
    align-items: center;
    position: relative;
    padding: 0px 1px 0px 7px;
    background: #fff;
    border: 1px solid #7954AD;
    border-radius: 10px;
    display: flex;
}

    .copy-text input.text {
        width: 100%;
        padding: 6px 7px 3px 6px;
        font-size: 16px;
        color: #555;
        border: none;
        outline: none;
    }

    .copy-text button {
        padding: 5px 9px 5px 9px;
        background: #7954AD;
        color: #fff;
        font-size: 16px;
        border: none;
        outline: none;
        border-radius: 8px;
        cursor: pointer;
    }

        .copy-text button:active {
            background: #809ce2;
        }

        .copy-text button:before {
            content: "Copied";
            position: absolute;
            top: 2px;
            right: 2px;
            background: #7954AD;
            padding: 6px 11px;
            border-radius: 10px;
            font-size: 15px;
            display: none;
            width: 69px;
            /* aspect-ratio: 1 / 1; */
            align-content: center;
        }



    .copy-text.active button:before,
    .copy-text.active button:after {
        display: block;
    }

</style >
