.network-icon {
    width: 14px;
    height: auto;
    vertical-align: middle;
}

.rpc-status {
    margin-top: 1px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.rpc-status-online {
    background-color: #4edc35;
    animation: pulse 2s infinite;
}

.rpc-status-offline {
    background-color: #ff0000;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(78,220,53,.7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(78,220,53,0)
    }

    to {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(78,220,53,0)
    }
}

html {
    scroll-behavior: smooth;
}

.code {
    background: var(--bs-gray-100);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    padding: 5px 30px 5px 7px;
    border-radius: .475rem;
    position: relative;
}

.code .btn-copy, .highlight-code .btn-copy {
    background: var(--bs-scrollbar-color);
    padding: 3px;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-gray-300);
    border-radius: .475rem;
    cursor: pointer;
    position: absolute;
    top: min(2.5px, 50%);
    right: 3px;
}

.highlight-code {
    background: var(--bs-gray-100);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    /*padding: 5px 30px 5px 7px;*/
    border-radius: .475rem;
    position: relative;
}

.highlight-code pre {
    margin-bottom: 0;
}

.highlight-code .btn-copy {
    top: min(10px, 50%)!important;
    right: 10px!important;
    font-size: 15px;
}