:root{

    --cb-background:#ffffff;

    --cb-border:#d9d9d9;

    --cb-title:#222222;

    --cb-content:#333333;

    --cb-button:#111111;

    --cb-button-hover:#000000;

    --cb-button-text:#ffffff;

    --cb-radius:12px;

}



.cb-box{

    background:var(--cb-background);

    border:2px solid var(--cb-border);

    border-radius:var(--cb-radius);

    overflow:hidden;

    margin:24px 0;

}



.cb-title{

    font-size:15px;

    font-weight:700;

    color:var(--cb-title);

    padding:5px 20px;


    line-height:1.4;

}



.cb-content{

    padding: 5px 20px;

    color:var(--cb-content);

    word-break:break-word;

    font-size:15px;

    overflow-x:auto;

}





.cb-footer{ padding:1px 20px;}





.cb-copy-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    border:none;

    outline:none;

    padding:8px;

    background:var(--cb-button);

    color:var(--cb-button-text);

    border-radius:8px;

    font-size:12px;

    font-weight:600;

    transition:.25s;

}



.cb-copy-btn:hover{

    background:var(--cb-button-hover);

}



.cb-copy-btn:active{

    transform:scale(.97);

}



/* =====================================
Mobile
===================================== */

@media(max-width:768px){

    .cb-title{

        font-size:19px;

        padding:15px;

    }

    .cb-content{

        padding:16px;

        font-size:14px;

    }

    .cb-footer{

        padding:15px;

    }

    .cb-copy-btn{

        width:100%;

    }

}