:root {
    --white: rgb(255, 255, 255);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-25: rgba(255, 255, 255, 0.25);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-5: rgba(255, 255, 255, 0.05);
    --white-2-5: rgba(255, 255, 255, 0.025);
    --white-1: rgba(255, 255, 255, 0.01);
    --black-200: rgb(16, 30, 30);
    --black-100: rgb(52, 64, 85);
    --black-80: rgba(52, 64, 85, 0.8);
    --black-50: rgba(52, 64, 85, 0.5);
    --black-25: rgba(52, 64, 85, 0.25);
    --black-200-80: rgba(16, 30, 30, 0.8);
    --black-200-50: rgba(16, 30, 30, 0.8);
    --black-200-25: rgba(16, 30, 30, 0.25);
    --black-10: rgba(52, 64, 85, 0.1);
    --black-5: rgba(52, 64, 85, 0.05);
    --black-2-5: rgba(52, 64, 85, 0.025);
    --black-1: rgba(52, 64, 85, 0.01);
    --green-300: rgb(25, 68, 54);
    --green-200: rgb(43, 144, 102);
    --green-100: rgb(61, 220, 151);
    --green-50: rgba(61, 220, 151, 0.5);
    --green-25: rgba(61, 220, 151, 0.25);
    --green-10: rgba(61, 220, 151, 0.1);
    --teal-200: rgb(14, 140, 118);
    --teal-100: rgb(27, 252, 213);
    --teal-50: rgba(27, 252, 213, 0.5);
    --teal-25: rgba(27, 252, 213, 0.25);
    --teal-10: rgba(27, 252, 213, 0.1);
    --blue-300: rgb(13, 49, 75);
    --blue-200: rgb(6, 88, 165);
    --blue-100: rgb(0, 127, 255);
    --blue-50: rgba(0, 127, 255, 0.5);
    --blue-25: rgba(0, 127, 255, 0.25);
    --blue-10: rgba(0, 127, 255, 0.1);
    --blue-5: rgba(0, 127, 255, 0.05);
    --blue-2-5: rgba(0, 127, 255, 0.025);
    --blue-1: rgba(0, 127, 255, 0.01);
    --cyan-300: rgb(13, 69, 72);
    --cyan-200: rgb(12, 148, 158);
    --cyan-100: rgb(4, 228, 244);
    --cyan-50: rgba(4, 228, 244, 0.5);
    --cyan-25: rgba(4, 228, 244, 0.25);
    --cyan-10: rgba(4, 228, 244, 0.1);
    --cyan-5: rgba(4, 228, 244, 0.05);
    --cyan-2-5: rgba(4, 228, 244, 0.025);
    --cyan-1: rgba(4, 228, 244, 0.01);
    --purple-400: rgb(29, 29, 92);
    --purple-300: rgb(33, 27, 72);
    --purple-200: rgb(68, 21, 157);
    --purple-100: rgb(102, 16, 242);
    --purple-50: rgba(102, 16, 242, 0.5);
    --purple-25: rgba(102, 16, 242, 0.25);
    --purple-10: rgba(102, 16, 242, 0.1);
    --red-300: rgb(64, 38, 42);
    --red-200: rgb(159, 55, 67);
    --red-100: rgb(255, 73, 92);
    --red-50: rgba(255, 73, 92, 0.5);
    --red-25: rgba(255, 73, 92, 0.25);
    --red-10: rgba(255, 73, 92, 0.1);
    --orange-300: rgb(64, 56, 24);
    --orange-200: rgb(159, 110, 11);
    --orange-100: rgb(255, 170, 0);
    --orange-50: rgba(255, 170, 0, 0.5);
    --orange-25: rgba(255, 170, 0, 0.25);
    --orange-10: rgba(255, 170, 0, 0.1);
    --yellow-300: rgb(63, 64, 35);
    --yellow-200: rgb(157, 133, 49);
    --yellow-100: rgb(253, 202, 64);
    --yellow-50: rgba(253, 202, 64, 0.5);
    --yellow-25: rgba(253, 202, 64, 0.25);
    --yellow-10: rgba(253, 202, 64, 0.1);
    --pink-300: rgb(62, 54, 48);
    --pink-200: rgb(154, 102, 84);
    --pink-100: rgb(246, 150, 121);
    --pink-50: rgb(246, 150, 121, 0.5);
    --pink-25: rgb(246, 150, 121, 0.25);
    --pink-10: rgb(246, 150, 121, 0.1);
}

code-tab-menu,
code-tab,
code-tab > code[label],
code-tab > pre > code[label] {
    position: relative;
    width: 100%;

    color: var(--white);
    font-family: "Courier New";
}

code-tabs {

    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    background-color: #1F313F;
    position: relative;
    height: 100%;

    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;


}

code-tabs[data-rendered] {

    border-radius: 0px 8px 8px 8px;
}

code-tab-menu {
    display: block;
}

code-tab-menu > label {
    display: inline-block;

    color: var(--white-25);
    padding: 8px 16px;
    cursor: pointer;
    background-color: #192935;

    border-left: 2px solid #1F313F;
}

code-tab-menu > label:first-child {
    border-radius: 8px 0 0 0;
}

code-tab-menu > label:last-child {
    border-radius: 0 8px 0 0;
}

code-tab-menu > label:not(.active):hover {
    color: var(--green-100);
}

code-tab-menu label.active {
    background-color: #1F313F;
    color: var(--green-100);
    font-weight: bold;
}

code-tab-menu label:not(:only-child):first-child {
    float: left;
}

code-tabs > code[label],
code-tabs:not([data-rendered]) > code[label],
code-tabs[data-rendered] > pre {
    display: flex;

    flex: 1 1 auto;
    position: relative;
    max-width: 100%;
    color: var(--white);
    height: 100%;
    overflow: hidden;
    background-color: #1F313F;
    border-radius: 8px;
    padding: 0px;
    margin: 0px;
    font-family: "Courier New";
    box-sizing: border-box;
}

code-tabs[data-rendered] > pre {
    height: 100%;

}


code-tabs[data-rendered] > pre > code[label] {
    overflow: initial;
    padding: 0px;
    display: block;

    color: inherit;
    background-color: inherit;
}

code-tabs[data-rendered] > pre > code-copy {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);


}

code-tabs[data-rendered] > pre > code-copy:before {
    background-color: var(--white);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: '';
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-image: url(https://www.cm.com/app/aurora/svg/icons/duplicate.svg);
    -webkit-mask-image: url(https://www.cm.com/app/aurora/svg/icons/duplicate.svg);
}

code-tabs[data-rendered] > pre > code-copy:after {
    content: "Copy code";
    font-family: "Gotham", sans-serif;
    pointer-events: none;
    visibility: visible;
    height: auto;
    width: auto;
    min-height: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    background-color: var(--black-80);
    color: var(--white);
    border-radius: 16px;
    padding: 4px 8px;
    position: absolute;
    right: 0px;
    opacity: 0;
    top: 24px;
    transition: opacity 0.35s;

}

code-tabs[data-rendered] > pre > code-copy:hover:after {
    opcity: 1;
}

code-tabs[data-rendered] > pre:not(.active),
code-tabs:not([data-rendered]) > code[label]:not(:first-child) {
    max-width: 0%;
    flex: 0 0 0%;
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;

}

.hljs, .hljs-subst {
    color: var(--white-100);
}

.hljs-comment {
    color: var(--white-50);
}

.hljs-keyword {
    color: var(--whitecolor:var(--white-50);
    -100);
}

.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta-keyword, .hljs-name, .hljs-selector-tag {
    font-weight: 700
}

.hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type {
    color: var(--orange-100);
}

.hljs-section, .hljs-title {
    color: var(--yellow-100);
    font-weight: 700
}

.hljs-link, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable {
    color: var(--white-50);
}

.hljs-literal {
    color: var(--blue-100);
}

.hljs-addition, .hljs-built_in, .hljs-bullet, .hljs-code {
    color: var(--teal-100);
}

.hljs-meta {
    color: var(--blue-200);
}

.hljs-meta-string {
    color: var(--blue-100);
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}