.ws_copy_code {
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px dashed var(--yellow);
    background: var(--bg-color);
    box-shadow: 0px 4px 6px -1px var(--shadow2), 0px 2px 4px -2px var(--shadow);
    color: var(--text-color);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}

.ws_copy_code_value {
    font-weight: 400;
    font-size: 1.25rem;
    color:var(--title-color);
    white-space: nowrap;
}
.ws_copy_code_value:not(.small) {
    padding-top: .25rem;
} 
.ws_copy_code_info i {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--light-grey)
}
.ws_copy_code_info i:hover {
    color: var(--title-color);
    transition: color .5s
}
.ws_copy_code_info-text {
    display: none
}

.ws_copy_code.small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-color: var(--border);
    color: #fff!important;
    background: var(--transparent-bgr2);
    box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.10), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
}
.ws_copy_code.small .ws_copy_code_value {
    color: #fff;
}
.ws-clipboard-wrap {
    position: fixed;
    z-index: 99999;
    border-radius: 0.75rem;
    border: 1px solid var(--alternate-border);
    background: var(--hd-ft-bg);
    font-size: 0.875rem;
    transition: transform .5s;
    cursor: pointer;
    box-shadow: 0px 12px 16px -4px var(--shadow2), 0px 4px 6px -2px var(--skeumorphic-shadow2), 0px 2px 2px -1px var(--skeumorphic-shadow2);
}
.ws-clipboard-wrap:before {
    content: '';
    position: absolute;
    left: .45rem;
    top: .45rem;
    width: 2.375rem;
    height: 2.375rem;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC4zIj4KPHBhdGggZD0iTTE5IDZDMjYuMTc5NyA2IDMyIDExLjgyMDMgMzIgMTlDMzIgMjYuMTc5NyAyNi4xNzk3IDMyIDE5IDMyQzExLjgyMDMgMzIgNiAyNi4xNzk3IDYgMTlDNiAxMS44MjAzIDExLjgyMDMgNiAxOSA2WiIgc3Ryb2tlPSIjMDc5NDU1IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9nPgo8ZyBvcGFjaXR5PSIwLjEiPgo8cGF0aCBkPSJNMTkgMUMyOC45NDExIDEgMzcgOS4wNTg4NyAzNyAxOUMzNyAyOC45NDExIDI4Ljk0MTEgMzcgMTkgMzdDOS4wNTg4NyAzNyAxIDI4Ljk0MTEgMSAxOUMxIDkuMDU4ODcgOS4wNTg4NyAxIDE5IDFaIiBzdHJva2U9IiMwNzk0NTUiIHN0cm9rZS13aWR0aD0iMiIvPgo8L2c+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8yNDM0Nl80NzUyKSI+CjxwYXRoIGQ9Ik0xNS4yNTAxIDE5TDE3Ljc1MDEgMjEuNUwyMi43NTAxIDE2LjVNMjcuMzMzNCAxOUMyNy4zMzM0IDIzLjYwMjQgMjMuNjAyNSAyNy4zMzMzIDE5LjAwMDEgMjcuMzMzM0MxNC4zOTc3IDI3LjMzMzMgMTAuNjY2NyAyMy42MDI0IDEwLjY2NjcgMTlDMTAuNjY2NyAxNC4zOTc2IDE0LjM5NzcgMTAuNjY2NyAxOS4wMDAxIDEwLjY2NjdDMjMuNjAyNSAxMC42NjY3IDI3LjMzMzQgMTQuMzk3NiAyNy4zMzM0IDE5WiIgc3Ryb2tlPSIjMDc5NDU1IiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzI0MzQ2XzQ3NTIiPgo8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5IDkpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
    background-size: contain;
    background-repeat: no-repeat;
}
.ws-clipboard-title {
    color: var(--title-color);
    font-weight: 600;
    margin-bottom: .25rem
}
.ws-clipboard-msg {
    color: var(--icon-color);
}

@media (max-width: 374px) {
    .ws_copy_code.small .ws_copy_code {
        font-size: .75rem
    }
    .ws_copy_code.small {
        padding: 0.75rem;
    }
    .ws_copy_code.small .ws_copy_code_value {
        font-size: 1rem;
    }
}
@media (max-width: 767px) {
    .ws-clipboard-wrap {
        bottom: 1rem;
        right: calc(.5rem - 100vw);
        width: calc(100vw - 1rem);
        padding: 3.25rem 1rem 1rem;
    }
    .ws-clipboard-wrap.active {
        transform: translateX(-100vw);
    }
}
@media (min-width: 768px) {
    .ws-clipboard-wrap {
        top: 1.5rem;
        right: -26.5rem;
        width: 25rem;
        padding: 1rem 2.5rem 1rem 3.25rem;
    }
    .ws-clipboard-wrap.active {
        transform: translateX(-28rem);
    }

}