.code_block {
    margin: 43px 0;
    position: relative;
}

.code_block pre {
    max-height: 312px;
    overflow: auto;
    background-color: #fff;
    border-radius: 5px;
    border-top: 4px solid #D1D4D9;
    border-right: 1px solid #D1D4D9;
    border-bottom: 1px solid #D1D4D9;
    border-left: 1px solid #D1D4D9;
    padding: 60px 120px 30px 30px;
}

.code_block pre code,
.code_block pre code span,
.content_section__container .html_content .code_block code:not(.language-bash) {
    color: #112031;
    font-family: "Roboto Mono" !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: normal;
}

.code_block pre code::-moz-selection,
.code_block pre code span::-moz-selection {
    background: #D1D4D9;
}

.code_block pre code::selection,
.code_block pre code span::selection {
    background: #D1D4D9;
}

/* Button */
.post-template-single_post_rebrand_2023 .content_section__container .html_content .code_block button[class^=code_] {
    right: 30px;
    top: 19px;
    opacity: 1;
    z-index: 2;

    font-family: 'Inter' !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px;
    color: #647081;
    margin-top: 0;
    padding: 7px 13px;
    border-radius: 5px;

    border: 2px solid #D1D4D9;
    background-color: #D1D4D9;
}


/* Blue */
.code_block pre.blue {
    border-top-color: #DDF8FF;
}

.code_block pre.blue code::-moz-selection,
.code_block pre.blue code span::-moz-selection {
    background: #DDF8FF;
}

.code_block pre.blue code::selection,
.code_block pre.blue code span::selection {
    background: #DDF8FF;
}

.post-template-single_post_rebrand_2023 .content_section__container .html_content .code_block pre.blue + button[class^=code_] {
    border: 2px solid #DDF8FF;
    background-color: #DDF8FF;
}

.post-template-single_post_rebrand_2023 .content_section__container .html_content .code_block pre.blue + button[class^=code_]:hover {
    background-color: #fff;
}


/* Pink */
.code_block pre.pink {
    border-top-color: #FFD0F4;
}

.code_block pre.pink code::-moz-selection,
.code_block pre.pink code span::-moz-selection {
    background: #FFD0F4;
}

.code_block pre.pink code::selection,
.code_block pre.pink code span::selection {
    background: #FFD0F4;
}

.post-template-single_post_rebrand_2023 .content_section__container .html_content .code_block pre.pink + button[class^=code_] {
    border: 2px solid #FFD0F4;
    background-color: #FFD0F4;
    color: #213247;
}

.post-template-single_post_rebrand_2023 .content_section__container .html_content .code_block pre.pink + button[class^=code_]:hover {
    background-color: #fff;
}

/* Custom colors */
.code_block .token.function,
.code_block .token.class-name {
    color: #CA2749;
}

.code_block .token.selector,
.code_block .token.attr-name,
.code_block .token.string,
.code_block .token.char,
.code_block .token.builtin,
.code_block .token.inserted {
    color: #10C67B;
}

.code_block .token.atrule,
.code_block .token.attr-value,
.code_block .token.keyword {
    color: #1178A4;
}

.code_block .token.property,
.code_block .token.tag,
.code_block .token.boolean,
.code_block .token.number,
.code_block .token.constant,
.code_block .token.symbol,
.code_block .token.deleted {
    color: #8E102B;
}

@media (max-width: 768px) {
    .code_block pre {
        padding-left: 15px;
        padding-right: 15px;
    }

    .post-template-single_post_rebrand_2023 .content_section__container .html_content .code_block button[class^=code_] {
        top: 5px;
    }
}