@charset "UTF-8";

:root {
    /* Primary brand colors */
    --light-blue-100: hsla(227, 100%, 50%, 1);
    --light-blue-75: hsla(227, 100%, 63%, 1);
    --light-blue-50: hsla(227, 100%, 75%, 1);
    --light-blue-25: hsla(227, 100%, 87%, 1);
    --light-blue-10: #EAEDFA;
    --light-blue-6: #F3F6FF;
    --dark-blue-100: hsla(241, 78%, 12%, 1);
    --dark-blue-75: hsla(242, 21%, 34%, 1);
    --dark-blue-50: hsla(240, 11%, 56%, 1);
    --dark-blue-30: #b4b4c3;
    --dark-blue-25: hsla(240, 11%, 78%, 1);
    --cool-grey: hsla(0, 0%, 82%, 1);
    --cool-grey-50: hsla(0, 0%, 91%, 1);
    
    /* Secondary brand colors */
    --yellow: hsla(48, 100%, 50%, 1);
    --red: hsla(7, 81%, 54%, 1);
    --purple: hsla(268, 100%, 50%, 1);
    --green: hsla(148, 85%, 59%, 1);
    --cyan: hsla(193, 100%, 61%, 1);
    
    /* Props */
    --callout-border-width: 5px;
    
    /* Product palette */
    --brandBlueXLight: hsla(226, 100%, 97%, 1);
    --brandBlueLight: hsla(227, 100%, 95%, 1);
    --brandBlueBase: hsla(227, 100%, 85%, 1);
    --brandBlueDark: hsla(227, 100%, 50%, 1);
    --brandPurpleXLight: hsla(240, 9%, 96%, 1);
    --brandPurpleLight: hsla(246, 11%, 82%, 1);
    --brandPurpleBase: hsla(240, 11%, 65%, 1);
    --brandPurpleDark: hsla(241, 77%, 12%, 1);
    --smokeXLight: hsla(0, 0%, 98%, 1);
    --smokeLight: hsla(0, 0%, 96%, 1);
    --smokeBase: hsla(0, 0%, 93%, 1);
    --smokeDark: hsla(0, 0%, 84%, 1);
    --greyXLight: hsla(0, 0%, 96%, 1);
    --greyLight: hsla(0, 0%, 85%, 1);
    --greyBase: hsla(0, 0%, 62%, 1);
    --purpleXLight: hsla(0, 0%, 44%, 1);
    --purpleLight: hsla(263, 46%, 79%, 1);
    --purpleBase: hsla(263, 52%, 47%, 1);
    --purpleDark: hsla(263, 51%, 33%, 1);
    --magentaXLight: hsla(310, 56%, 94%, 1);
    --magentaLight: hsla(311, 56%, 75%, 1);
    --magentaBase: hsla(311, 95%, 37%, 1);
    --magentaDark: hsla(311, 94%, 26%, 1);
    --pinkXLight: hsla(340, 86%, 95%, 1);
    --pinkLight: hsla(341, 87%, 85%, 1);
    --pinkBase: hsla(340, 82%, 52%, 1);
    --pinkDark: hsla(341, 55%, 48%, 1);
    --redXLight: hsla(0, 91%, 96%, 1);
    --redLight: hsla(0, 89%, 83%, 1);
    --redBase: hsla(0, 89%, 57%, 1);
    --redDark: hsla(0, 67%, 45%, 1);
    --orangeXLight: hsla(36, 100%, 95%, 1);
    --orangeLight: hsla(36, 100%, 80%, 1);
    --orangeBase: hsla(36, 100%, 50%, 1);
    --orangeDark: hsla(36, 100%, 32%, 1);
    --yellowXLight: hsla(46, 100%, 95%, 1);
    --yellowLight: hsla(45, 100%, 80%, 1);
    --yellowBase: hsla(45, 100%, 51%, 1);
    --yellowDark: hsla(45, 96%, 43%, 1);
    --greenXLight: hsla(120, 38%, 95%, 1);
    --greenLight: hsla(123, 38%, 80%, 1);
    --greenBase: hsla(122, 39%, 49%, 1);
    --greenDark: hsla(122, 39%, 34%, 1);
    --aquaXLight: hsla(189, 72%, 94%, 1);
    --aquaLight: hsla(187, 73%, 77%, 1);
    --aquaBase: hsla(187, 100%, 42%, 1);
    --aquaDark: hsla(187, 100%, 27%, 1);
    --blueXLight: hsla(209, 91%, 95%, 1);
    --blueLight: hsla(207, 89%, 82%, 1);
    --blueBase: hsla(207, 90%, 54%, 1);
    --blueDark: hsla(207, 77%, 38%, 1);
    --white: hsla(0, 0%, 100%, 1);
    --black: hsla(0, 0%, 0%, 1);
    
    --oui-icon--primary-color: currentColor;
    --oui-icon--secondary-color: currentColor;
    --oui-icon--primary-background-color: transparent;
    
    --thin: 								100;
    --ultra-light: 					200;
    --light: 								300;
    --normal: 							400;
    --medium: 						500;
    --semi-bold: 					600;
    --bold: 								700;
    --ultra-bold: 					800;
    --black-heavy: 				900;
}

.brandBlueLight { color: var(--brandBlueLight) }
.brandBlueBase { color: var(--brandBlueBase) }
.brandBlueDark { color: var(--brandBlueDark) }
.brandPurpleLight { color: var(--brandPurpleLight) }
.brandPurpleBase { color: var(--brandPurpleBase) }
.brandPurpleDark { color: var(--brandPurpleDark) }
.smokeLight { color: var(--smokeLight) }
.smokeBase { color: var(--smokeBase) }
.smokeDark { color: var(--smokeDark) }
.greyLight { color: var(--greyLight) }
.greyBase { color: var(--greyBase) }
.greyDark { color: var(--greyDark) }
.purpleLight { color: var(--purpleLight) }
.purpleBase { color: var(--purpleBase) }
.purpleDark { color: var(--purpleDark) }
.magentaLight { color: var(--magentaLight) }
.magentaBase { color: var(--magentaBase) }
.magentaDark { color: var(--magentaDark) }
.redLight { color: var(--redLight) }
.redBase { color: var(--redBase) }
.redDark { color: var(--redDark) }
.pinkLight { color: var(--pinkLight) }
.pinkBase { color: var(--pinkBase) }
.pinkDark { color: var(--pinkDark) }
.orangeLight { color: var(--orangeLight) }
.orangeBase { color: var(--orangeBase) }
.orangeDark { color: var(--orangeDark) }
.amberLight { color: var(--amberLight) }
.amberBase { color: var(--amberBase) }
.amberDark { color: var(--amberDark) }
.greenLight { color: var(--greenLight) }
.greenBase { color: var(--greenBase) }
.greenDark { color: var(--greenDark) }
.aquaLight { color: var(--aquaLight) }
.aquaBase { color: var(--aquaBase) }
.aquaBlueDark { color: var(--aquaBlueDark) }
.blueLight { color: var(--blueLight) }
.blueBase { color: var(--blueBase) }
.blueDark { color: var(--blueDark) }

.light-blue-100 { color: var(--light-blue-100) }
.light-blue-75 { color: var(--light-blue-75) }
.light-blue-50 { color: var(--light-blue-50) }
.light-blue-25 { color: var(--light-blue-25) }
.dark-blue-100 { color: var(--dark-blue-100) }
.dark-blue-75 { color: var(--dark-blue-75) }
.dark-blue-50 { color: var(--dark-blue-50) }
.dark-blue-25 { color: var(--dark-blue-25) }
.cool-grey { color: var(--cool-grey) }
.cool-grey-50 { color: var(--cool-grey-50) }

.yellow { color: var(--yellow) }
.red { color: var(--red) }
.purple { color: var(--purple) }
.green { color: var(--green) }
.cyan { color: var(--cyan) }

.bg-light-blue-100 { background-color: var(--light-blue-100); }
.bg-light-blue-75 { background-color: var(--light-blue-75); }
.bg-light-blue-50 { background-color: var(--light-blue-50); }
.bg-light-blue-25 { background-color: var(--light-blue-25); }
.bg-dark-blue-100 { background-color: var(--dark-blue-100); }
.bg-dark-blue-75 { background-color: var(--dark-blue-75); }
.bg-dark-blue-50 { background-color: var(--dark-blue-50); }
.bg-dark-blue-25 { background-color: var(--dark-blue-25); }
.bg-cool-grey { background-color: var(--cool-grey); }
.bg-cool-grey-50 { background-color: var(--cool-grey-50); }

.bg-yellow { background-color: var(--yellow); }
.bg-red { background-color: var(--red); }
.bg-purple { background-color: var(--purple); }
.bg-green { background-color: var(--green); }
.bg-cyan { background-color: var(--cyan); }


.bg-light-red { background-color: var(--redXLight); }


/* Custom styles for Axiom */
body, button, input, select, textarea {
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-weight: var(--normal);
}
strong, b {
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-weight: var(--semi-bold);
}
a {
    color: var(--brandBlueDark) 
}
h1, h2, h3, h4 {
    margin: 30px 0 10px 0;
}
.item-page h2, .item-page h3, .item-page h4, .item-page h5, .item-page h6 {
    margin-top: 1.5em;
}
.h4, h4 {
    font-size: 1.4rem;
}
.intro {
    font-size: 19px;
}
.intro.center {
    text-align: center;
}
.navbar-brand.logo.logo-text img {
    max-width: 55%;
    margin: 10px 0;
}
#logo img {
    height: 40px;
}
.navbar-brand.logo.logo-text {
    margin-right: 148px;
}
.navbar .nav>li>a:focus {
    outline: 0 none;
}
p.lead {
    margin-bottom: 50px;
    font-size: 20px;
}
footer {
    margin-top: 50px;
}
footer hr,
footer small {
    width: 100%;
    color: var(--greyBase);
}

kbd {
    font-size: 80%;
    background-color: var(--white);
    color: var(--greyDark);
    border: 1px solid var(--greyLight);
    border-radius: 5px;
}
hr {
    margin-top: 50px;
}
.leftbody {
    padding-right: 40px;
}
.leftbody .nav.menu.mod-list li.current {
    background-color: var(--blueXLight);
}

h4#related-reading {
    margin-top: 80px;
}
h2.item-title, .item-title h2, .item-page .page-header h2, h1, h2, h3, h4 {
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-weight: var(--ultra-light);
}
.item-page .page-header h2 {
    font-size: 36px;
    margin-top: 10px;
}
.item-page li {
    margin-bottom: 10px;
}

.rl_modals_wrapper .item-page .page-header h2 {
    margin-top: 10px;
}
.off-menu_95 dl .productnum, .off-menu_95 dl.level1 .productnum {
    background: var(--light-blue-75) !important;
}
blockquote {
    border-left: 5px solid var(--greyLight) ;
    padding: 0 16px;
    font-size: 90%;
}

code {
    font-family: Hack, monospace;
}

dl.article-info.muted .article-info-term,
dl.article-info.muted .modified .icon-calendar {
    display: none;
}
dl.article-info.muted .modified {
    color: var(--greyBase);
    font-size: 80%;
    margin-top: 100px;
}

/* Icons */
.fa-fw {
    margin-right: 10px;
}

/* Hide the frontend Joomla menu */
.page-header+.icons {
    display: none;
}


/* React components */
.item-page iframe, .preview {
    border: 1px solid var(--greyLight);
    width: 100%;
    padding: 15px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom: none;
}
.item-page iframe.height-100 {
    height: 100px;
}
.item-page iframe.height-150 {
    height: 150px;
}
.item-page iframe.height-200 {
    height: 200px;
}
.item-page iframe.height-300 {
    height: 300px;
}
.item-page iframe.height-400 {
    height: 400px;
}
.item-page iframe.height-500 {
    height: 500px;
}
.item-page iframe.height-550 {
    height: 550px;
}
.item-page iframe.height-600 {
    height: 600px;
}
.item-page iframe.height-700 {
    height: 700px;
}
.CodeMirror {
    height: 100% !important;
    border: 1px solid var(--greyLight);
}
.CodeMirror-scroll {
    height: auto !important;
    max-height: 300px;
    overflow-y: hidden;
    overflow-x: auto;
}
iframe+.CodeMirror {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-bottom: 20px;
    margin-top: -6px;
}
#props {
    margin-bottom: 50px;
}
.preview p {
    text-align: center;
    margin-top: 120px;
}


/* Top menu */
.headermenu .nav>li>a {
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-weight: var(--light);
    text-transform: uppercase;
}
.headermenu .nav>li.active a {
    border-bottom: 4px solid var(--brandBlueDark);
}
#developer-resources .headermenu li.deeper.parent > a,
#style-guidelines .headermenu li.deeper.parent > a,
#elements .headermenu li.deeper.parent > a,
#practices .headermenu li.deeper.parent > a {
    border-bottom: 4px solid var(--brandBlueDark);
    padding-bottom: 8px;
}
.nav-header {
    color: var(--light-blue-75);
}
li.deeper.parent {
    position: relative;
}
li.deeper.parent:hover ul.nav-child.unstyled.small {
    display: block;
    padding-left: 0;
    position: absolute;
    left: 10px;
    top: 25px;
    background-color: var(--white);
    width: 220px;
    border: 1px solid var(--greyLight);
    z-index: 1;
}
li.deeper.parent ul.nav-child.unstyled.small {
    display: none;
    font-size: 90%;
    font-weight: var(--light);
}
.headermenu .nav > li.deeper a:hover {
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: none;
    -webkit-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    color: var(--light-blue-75);
}
li.deeper.parent ul.nav-child.unstyled.small li:hover {
    display: block;
}
ul.nav-child.unstyled.small li {
    padding: 5px;
}
ul.nav-child.unstyled.small li:last-child {
    padding-bottom: 10px;
}
ul.nav-child.unstyled.small li:hover {
    background-color: var(--light-blue-75);
}
ul.nav-child.unstyled.small li:hover a {
    color: var(--white);
}


/* Left menu */
.leftbody .nav.menu.mod-list li {
    padding: 0;
}
.leftbody .nav.menu.mod-list li a {
    font-size: 90%;
    color: var(--dark-blue-100);
    padding: 5px;
}
.leftbody .nav.menu.mod-list li.current.active {
    background: var(--light-blue-10);
}
.leftbody .nav.menu.mod-list li:hover>a, .leftbody .nav.menu.mod-list li a:hover, .leftbody .nav.menu.mod-list li.current.active a:hover {
    background-color: transparent;
    color: var(--white);
}
.leftbody .nav.menu.mod-list li:hover, .leftbody .nav.menu.mod-list li.current.active:hover {
    background-color: var(--light-blue-75);
    color: var(--white);
}


/* Colors & swatches */
#brand-palette h3, #brand-palette h4, #product-palette h4 {
    clear: both;
    padding: 20px 0 0 0;
}
#brand-palette h3+p {
    clear: both;
}
.swatches ul {
    padding-left: 0;
}
.swatches li {
    margin: 0 20px 20px 0;
    width: 170px;
    display: inline-block;
    text-align: center;
}
.swatches li:first-child {
    margin-left: 0;
}
li[class*="xlight"] {
    clear: left;
}
.swatches li i {
    display: block;
}
.swatches li span {
    font-size: 70%;
    display: block;
    text-align: center;
}
.swatches li span:nth-child(2) {
    font-size: 85%;
}
.swatches li span:nth-child(4), 
.swatches li span:nth-child(5) {
    display: none 
}
.fas.fa-dot-circle {
    font-size: 5em;
}
.dontuse {
    color: var(--greyBase) 
}


/* Display white swatch on white bg */
li.white .swatch-circle, li.white .swatch-circle:after {
    border: 1px solid var(--greyLight);
}


/* Buttons */
.btn-primary {
    background-color: var(--brandBlueBase);
    border-color: var(--brandBlueDark);
    color: var(--white);
    font-size: 14px;
    font-weight: var(--normal);
    border-radius: 8px;
    background-image: none;
}
.btn:focus, .btn:hover {
    color: var(--white);
    background: var(--brandBlueBase);
    border-color: var(--brandBlueDark);
}


/* Login form */
#login-form input {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
#login-form .input-prepend .add-on {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}


/* Dos and Donts */
.callout {
    border: none;
    border-radius: 0px;
    border-left: var(--callout-border-width) solid var(--smokeBase);
}
.callout.callout-info {
    border-left: var(--callout-border-width) solid var(--brandBlueLight);
}
.callout.callout-green {
    border-left: var(--callout-border-width) solid var(--greenBase);
}
.callout.callout-red {
    border-left: var(--callout-border-width) solid var(--redBase);
}
.text-green {
    color: var(--greenBase);
}
.text-red {
    color: var(--redBase);
}


/* Source code formatting */
#props, .source, .copy {
    position: relative;
    z-index: 2;
}
.copy .bt {
    background: var(--white);
    float: right;
    display: inline-block;
    margin-top: -20px;
    margin-right: 20px;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    padding: 0px 5px 3px 4px;
    border: 1px solid var(--smokeDark);
}
.source .copy {
    display: block;
    width: 16px;
}
.copy #icon-copy {
    width: 16px;
    height: 16px;
}
.item-page .prettyprint {
    background: var(--brandPurpleDark);
}
code:not(.inline) {
    /* background: var(--brandPurpleDark); */
    display: block;
    padding: 1px 15px;
}
.source-copy {
    color: var(--greyBase);
    display: inline-block;
    float: right;
    margin-top: -20px;
}
#typography pre {
    /* height: 200px; */
    /* border: 1px solid #d6d6d6; */
    /* border-radius: 5px; */
}
#typography code {
    font-size: 90%;
}


/* "Sons of Obsidian" theme for code samples */
.str {
    color: #EC7600;
}
.kwd {
    color: #93C763;
}
.com {
    color: #66747B;
}
.typ {
    color: #678CB1;
}
.lit {
    color: #FACD22;
}
.pun {
    color: #F1F2F3;
}
.pln {
    color: #F1F2F3;
}
.tag {
    color: #8AC763;
}
.atn {
    color: #E0E2E4;
}
.atv {
    color: #EC7600;
}
.dec {
    color: purple;
}
pre.prettyprint {
    border: 0px solid #888;
}
ol.linenums {
    margin-top: 0;
    margin-bottom: 0;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
    color: #555;
    list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
    background: #111;
}
#helper-classes code {
    display: initial;
    background: #ccc;
    color: var(--black);
}
@media print {
    .str {
        color: #060;
    }
    .kwd {
        color: #006;
        font-weight: var(--bold);
    }
    .com {
        color: #600;
        font-style: italic;
    }
    .typ {
        color: #404;
        font-weight: var(--bold);
    }
    .lit {
        color: #044;
    }
    .pun {
        color: #440;
    }
    .pln {
        color: #000;
    }
    .tag {
        color: #006;
        font-weight: var(--bold);
    }
    .atn {
        color: #404;
    }
    .atv {
        color: #060;
    }
}


/* CodeMirror code formatting */
.item-page .CodeMirror {
    background: #303030;
    color: #f8f8f8;
    font-size: 1.2em;
    z-index: 1;
}
.item-page div.CodeMirror-selected {
    background: #27007A;
}
.item-page .CodeMirror-line::selection, .item-page .CodeMirror-line>span::selection, .item-page .CodeMirror-line>span>span::selection {
    background: rgba(39, 0, 122, 0.99);
}
.item-page .CodeMirror-line::-moz-selection, .item-page .CodeMirror-line>span::-moz-selection, .item-page .CodeMirror-line>span>span::-moz-selection {
    background: rgba(39, 0, 122, 0.99);
}
.item-page CodeMirror-gutters {
    background: #0a001f;
    border-right: 1px solid #aaa;
}
.item-page .CodeMirror-guttermarker {
    color: #FFBD40;
}
.item-page .CodeMirror-guttermarker-subtle {
    color: #f8f8f8;
}
.item-page .CodeMirror-linenumber {
    color: #f8f8f8;
}
.item-page .CodeMirror-cursor {
    border-left: 1px solid white;
}
.item-page span.cm-keyword {
    color: #FFBD40;
}
.item-page span.cm-atom {
    color: #6C8CD5;
}
.item-page span.cm-number {
    color: #90ecb6;
}
.item-page span.cm-def {
    color: #FFF;
    text-decoration: underline;
}
.item-page span.cm-variable {
    color: #FFF;
}
.item-page span.cm-variable-2 {
    color: #EEE;
}
.item-page span.cm-variable-3, .cm-s-xq-dark span.cm-type {
    color: #DDD;
}
.item-page span.cm-property {
}
.item-page span.cm-operator {
}
.item-page span.cm-comment {
    color: gray;
}
.item-page span.cm-string {
    color: #EC7600;
}
.item-page span.cm-meta {
    color: yellow;
}
.item-page span.cm-qualifier {
    color: #FFF700;
}
.item-page span.cm-builtin {
    color: #30a;
}
.item-page span.cm-bracket {
    color: #cc7;
}
.item-page span.cm-tag {
    color: #8AC763;
}
.item-page span.cm-attribute {
    color: #FFF;
}
.item-page span.cm-error {
    color: #f00;
}
.item-page .CodeMirror-activeline-background {
    background: #27282E;
}
.item-page .CodeMirror-matchingbracket {
    outline: 1px solid grey;
    color: white !important;
}
.item-page .CodeMirror-lines {
    padding: 5px 10px !important;
}


/* Code on icons page */
#oui-react-icons .prettyprint {
    background: transparent;
}
#oui-react-icons .prettyprint .pun {
    color: #660;
}
#oui-react-icons .prettyprint .pln {
    color: #888;
}


/* Table formatting */
table.typography {
    width: 100%;
}
table.typography th:first-child {
    padding-left: 8px;
}
table.typography td {
    padding: 16px 4px;
}

.item-page table td, .item-page table th {
    border-right: 1px solid var(--greyLight);
    border-bottom: 1px solid var(--greyLight);
    text-align: center;
}
.item-page table th {
    background-color: var(--smokeBase);
    font-weight: var(--medium);
    font-size: 14px;
}
.item-page table td:nth-child(5), .item-page table th:nth-child(5) {
    text-align: left;
}
.item-page table td:first-child, .item-page table th:first-child, .item-page table.left2 td:nth-child(2), .item-page table.left3 td:nth-child(3), .item-page table.left4 td:nth-child(4), .item-page table.left6 td:nth-child(6), .item-page table.left7 td:nth-child(7), .item-page table.left8 td:nth-child(8) {
    text-align: left;
}
.item-page table.typography td:nth-child(5), 
.item-page table.typography th:nth-child(5) {
    text-align: center;
}


#properties table, #properties-2 table {
    width: 100%;
}
.item-page table tr:last-child td {
    border-bottom: 0;
}
.item-page table td:last-child, .item-page table th:last-child {
    border-right: 0;
}
td.h1 {
    font-size: 29px;
    font-weight: var(--ultra-light);
}
td.h2 {
    font-size: 26px;
    font-weight: var(--ultra-light);
}
td.h3 {
    font-size: 23px;
    font-weight: var(--light);
}
td.h4 {
    font-size: 20px;
    font-weight: var(--normal);
}
td.h5 {
    font-size: 18px;
    font-weight: var(--normal);
}
td.subhead {
    font-size: 14px;
    font-weight: var(--semi-bold);
}
td.body {
    font-size: 14px;
    font-weight: var(--normal);
}
td.xs {
    font-size: 12px;
    font-weight: var(--normal);
}
td.xxs {
    font-size: 11px;
    font-weight: var(--normal);
}
td.caption {
    font-size: 13px;
    font-weight: var(--normal);
}


/* Tags (Top of articles) */
.tags.inline {
    padding-left: 0;
}
.tags.inline li {
    list-style-type: none;
    display: inline-block;
    margin-right: 3px;
}
.tags.inline .label-info[href] {
    border-radius: 17px;
    font-size: 10px;
    padding: 3px 8px;
    color: var(--white);
    background-color: var(--black);
    
    
    /* Disable links for now */
    text-decoration: none;
    cursor: default;
}
.tags.inline li.atom a.label, .tags.inline li.molecule a.label, .tags.inline li.organism a.label, .tags.inline li.template a.label, .tags.inline li.page a.label, .tags.inline li.needs-review a.label, .tags.inline li.done a.label, .tags.inline li.needs-examples a.label, .tags.inline li.roadmap a.label, .tags.inline li.deprecated a.label {
    text-transform: uppercase;
}
.tags.inline li.atom a.label {
    background-color: var(--dark-blue-30);
}
.tags.inline li.molecule a.label {
    background-color: var(--dark-blue-50);
}
.tags.inline li.organism a.label {
    background-color: var(--dark-blue-75);
}
.tags.inline li.template a.label {
    background-color: var(--dark-blue-100);
}
.tags.inline li.page a.label {
    background-color: var(--light-blue-100);
}
.tags.inline li.needs-review a.label {
    background-color: var(--orangeBase);
}
.tags.inline li.needs-examples a.label, .tags.inline li.done a.label, .tags.inline li.deprecated a.label {
    background-color: var(--redBase);
}
.tags.inline li.roadmap a.label {
    background-color: var(--orangeBase);
}


/* Labels/Badges */
.label.atom::after, .label.molecule::after, .label.organism::after, .label.template::after, .label.page::after, .label.deprecated::after {
    position: initial;
    margin-left: 0;
}


/* .needs-review {
    float: right;
    color: var(--orangeBase);
    font-size: 80%;
    text-transform: uppercase;
    position: relative;
    width: 120px;
    margin-top: 7px;
}
.needs-review a:link, .needs-review a:visited, .needs-review a:hover, .needs-review a:active {
    color: var(--orangeBase);
}
.needs-review svg {
    fill: var(--orangeBase);
    width: 18px;
}
.needs-review span {
    position: absolute;
    top: 2px;
    left: 24px;
}
*/

/* Inline Badges */
.badge {
    display: inline-block;
    border-radius: 17px;
    font-weight: var(--semi-bold);
    text-transform: uppercase;
    margin-right: 10px;
    padding: 2px 8px;
    
}

.badge.new {
    background-color: var(--blueBase);
    color: var(--white);
}



/* Atomic Design page */
table.atomic-elements {
    margin-top: 30px;
}
table.atomic-elements .atomic-icon, table.atomic-elements .atomic-icon img {
    width: 64px;
    height: 64px;
}
table.atomic-elements .atomic-icon {
    margin: 0 auto;
}
.item-page table.atomic-elements td {
    border-bottom: 1px solid var(--greyLight);
    border-right: 0 none;
    text-align: left;
    padding-left: 20px;
}
.item-page table.atomic-elements td:first-child {
    text-align: center;
    padding-left: 0px;
    height: 120px;
}


/* Toolkit page */
.toolkits {
    margin-top: 30px;
}
.toolkits .kit-icon, table.toolkits .kit-icon img {
    width: 64px;
    height: 64px;
}
.toolkits .kit-icon {
    margin: 20px auto;
    text-align: center;
}
.item-page table.toolkits td {
    border-bottom: 1px solid var(--greyLight);
    border-right: 0 none;
    text-align: left;
    padding-left: 20px;
}
.item-page table.toolkits td:first-child {
    text-align: center;
    padding-left: 0px;
}

/* Side menu & menu tags */
.leftbody a.atom::after, .leftbody a.molecule::after, .leftbody a.organism::after, .leftbody a.template::after, .leftbody a.roadmap::after, .leftbody a.deprecated::after, .leftbody a.beta::after, .leftbody a.new::after, .label.atom::after, .label.molecule::after, .label.organism::after, .label.template::after, .label.page::after, .label.roadmap::after, .label.deprecated::after, .label.beta::after, .label.new::after {
    color: var(--white);
    display: inline-block;
    border-radius: 17px;
    font-size: 10px;
    font-weight: var(--normal);
    text-transform: uppercase;
    margin-left: 10px;
    padding: 1px 6px;
    position: absolute;
    top: 8px;
    right: 5px;
}
.leftbody h6 {
    margin-left: 5px;
    color: var(--greyBase);
    margin-top: 20px;
}

table.atomic-elements .label.atom::after, table.atomic-elements .label.molecule::after, table.atomic-elements .label.organism::after, table.atomic-elements .label.template::after, table.atomic-elements .label.page::after, table.atomic-elements .label.roadmap::after, table.atomic-elements .label.deprecated::after, table.atomic-elements .label.beta::after {
    position: static;
    margin-left: 0;
}
/* .leftbody a.atom::after, .label.atom::after{
    content:"ATOM";
    background-color: var(--dark-blue-30);
}
.leftbody a.molecule::after, .label.molecule::after{
    content:"MOLECULE";
    background-color: var(--dark-blue-50);
}
.leftbody a.organism::after, .label.organism::after{
    content:"ORGANISM";
    background-color: var(--dark-blue-75);
}
.leftbody a.template::after, .label.template::after{
    content:"TEMPLATE";
    background-color: var(--dark-blue-100);
}
.leftbody a.page::after, .label.page::after{
    content:"PAGE";
    background-color: var(--light-blue-100);
}
*/
.leftbody a.new::after, .label.new::after {
    content: "NEW!";
    background-color: var(--blueBase);
}
.leftbody a.roadmap::after, .label.roadmap::after {
    content: "ROADMAP";
    background-color: var(--orangeBase);
}
.leftbody a.deprecated::after, .label.deprecated::after {
    content: "DEPRECATED";
    background-color: var(--redBase);
}
.leftbody a.beta::after, .label.beta::after {
    content: "BETA";
    background-color: var(--greenBase);
}
.leftbody .nav.menu.mod-list li {
    position: relative;
    border-bottom: 1px solid var(--smokeBase);
}
#off-menu_95 .off-menu_95 dt, #off-menu_95 .off-menu_95 dl.level1 dt {
    padding: 7px 5px 7px 15px;
}


/* Icons */
table#oui-react-icons {
    width: 99%;
}
.item-page table#oui-react-icons td, .item-page table#oui-react-icons th {
    text-align: left;
    padding: 8px;
    border-right: 0 none;
    border-bottom: 0 none;
    border-top: 1px solid var(--smokeBase);
}
.item-page table#oui-react-icons td:first-child {
    width: 80px;
}
table#oui-react-icons svg {
    float: left;
    width: auto;
    height: 36px;
}


/* Product Colors */
ul#colors {
    padding: 0;
    max-width: 760px;
}


/* Modals */
#rl_modals .item-page .page-header h2 {
    font-size: 26px;
    margin-top: 10px;
}


/* Glossary */
#tab_group_id dt.tabs h3 {
    font-size: 1.1em;
    margin-top: 5px;
}
dl#tab_group_id.tabs dt.open {
    background: var(--white);
}
dl#tab_group_id.tabs dt {
    border-radius: 3px 3px 0 0;
}
dd.tabs div.termname {
    float: none;
}
div.current dd.tabs {
    padding: 20px !important;
}


/* Changelog */
.updates {
    margin-top: 30px;
    padding-left: 10px;
}
h2.version {
    font-family: "Inter", Helvetica, Arial, sans-serif;
    margin-top: 20px;
}
p.date {
    color: var(--greyBase);
    text-transform: uppercase;
    font-size: 90%;
    margin: 0;
}
.updates .update .date:before {
    width: 18px;
    height: 18px;
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    margin-top: 1px;
    background: var(--white);
    border: 4px solid var(--greyLight);
    border-radius: 100px;
}
.updates .update {
    border-left: 3px solid var(--greyLight);
    padding: 30px;
    list-style-type: none;
    position: relative;
}
.updates .update.latest {
    padding-top: 0;
}
.changes ul {
    margin-left: 4px;
    padding-left: 0;
}
.changes li, .roaditem li {
    list-style-type: none;
}
.roaditem ul {
    margin-left: 0;
    padding-left: 0;
    margin-top: 10px;
}
.changes li i {
    margin-right: 10px;
}
.far.fa-newspaper {
    color: var(--greenBase);
}
.fas.fa-star {
    color: var(--brandBlueBase);
}
.fas.fa-bug {
    color: var(--redBase);
}


/* Glossary */
div.termname {
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-weight: var(--medium);
    font-size: 110%;
}


/* Storybook */
#storybook {
    width: 16px;
    height: auto;
    margin-top: -2px;
    margin-left: 5px;
}
.storybook-icon {
    float: right;
    margin: -20px 5px 10px 20px;
}


/* Beta Badge*/
.page-header {
    width: 100%;
}
.rightheader {
    float: right;
}
.deprecated-badge, .beta-badge {
    color: var(--white);
    display: inline-block;
    border-radius: 17px;
    font-size: 12px;
    font-weight: var(--medium);
    text-transform: uppercase;
    padding: 1px 6px 3px 6px;
    background-color: var(--redBase);
}


/* Component-only View (DesignKit app) */
body.component-only {
    margin-top: 30px;
}


/* Hub styles */

h1.big-header {
    font-size: 60px;
}
.page-header h1 {
    display: inline-block;
}
.page-header .hubtitle {
    display: inline-block;
    float: right;
    width: 70px;
    margin-right: 50px
}
#logo {
    margin: 0 0 30px 5px;
}



/* Axiom logo */
.axiom-logo {
    width: 320px;
    height: 320px;
    margin: 0 auto;
    clip-path: circle(160px at center);
    font-size: 0px;
    transform: scale(0.55);
    margin-bottom: -60px;
    margin-top: -60px;
}
.axiom-logo .square {
    width: 64px;
    height: 64px;
    background-color: transparent;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    transition: all .5s ease-in;
}
.axiom-logo .square:hover {
    opacity: 0;
}
.axiom-logo .logo-row:first-child .square:first-of-type, .axiom-logo .logo-row:last-child .square:last-of-type {
    background-color: #0a20f8;
}
.axiom-logo .logo-row:nth-child(1) .square:nth-of-type(2), .axiom-logo .logo-row:nth-child(2) .square:nth-of-type(1), .axiom-logo .logo-row:last-child .square:nth-of-type(4), .axiom-logo .logo-row:nth-child(4) .square:nth-of-type(5) {
    background-color: #3352f9;
}
.axiom-logo .logo-row:nth-child(1) .square:nth-of-type(3), .axiom-logo .logo-row:nth-child(2) .square:nth-of-type(2), .axiom-logo .logo-row:nth-child(3) .square:nth-of-type(1), .axiom-logo .logo-row:nth-child(3) .square:nth-of-type(5), .axiom-logo .logo-row:nth-child(4) .square:nth-of-type(4), .axiom-logo .logo-row:nth-child(5) .square:nth-of-type(3) {
    background-color: #6f86fa;
}
.axiom-logo .logo-row:nth-child(1) .square:nth-of-type(4), .axiom-logo .logo-row:nth-child(2) .square:nth-of-type(3), .axiom-logo .logo-row:nth-child(2) .square:nth-of-type(5), .axiom-logo .logo-row:nth-child(3) .square:nth-of-type(2), .axiom-logo .logo-row:nth-child(3) .square:nth-of-type(4), .axiom-logo .logo-row:nth-child(4) .square:nth-of-type(1), .axiom-logo .logo-row:nth-child(4) .square:nth-of-type(3), .axiom-logo .logo-row:nth-child(5) .square:nth-of-type(2) {
    background-color: #b1c1fc;
}
.axiom-logo .logo-row:nth-child(1) .square:nth-of-type(5), .axiom-logo .logo-row:nth-child(2) .square:nth-of-type(4), .axiom-logo .logo-row:nth-child(3) .square:nth-of-type(3), .axiom-logo .logo-row:nth-child(4) .square:nth-of-type(2), .axiom-logo .logo-row:nth-child(5) .square:nth-of-type(1) {
    background-color: #e4e8f7;
}


/* Big Optimizely logo & animation */
.upper-circle {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border: 30px solid var(--brandBlueDark);
    position: absolute;
    left: 35px;
    animation-name: enterTop;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-iteration-count: 1;
}
.lower-circle {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: transparent;
    box-sizing: border-box;
    border: 30px solid var(--brandBlueDark);
    position: absolute;
    top: 35px;
    animation-name: enterBottom;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-iteration-count: 1;
}
.circle-mask {
    position: absolute;
    top: -30px;
    left: -30px;
    bottom: -30px;
    right: -30px;
    display: flex;
    justify-content: space-evenly;
    transform: rotate(45deg);
}
.mask-line {
    background-color: var(--white);
    width: 7%;
}
@keyframes enterBottom {
    from {
        transform: translateX(17px) translateY(-17px) scale(0.75);
        opacity: 0.0;
    }
    to {
        transform: translateX(0px) translateY(0px) scale(1.0);
        opacity: 1.0;
    }
}
@keyframes enterTop {
    from {
        transform: translateX(-17px) translateY(17px) scale(0.75);
    }
    to {
        transform: translateX(0px) translateY(0px) scale(1.0);
    }
}
.logo-container {
    position: relative;
    transform: scale(2.6);
    transform-origin: top left;
    float: left;
}
.logo-container.small {
    transform: scale(.3);
    top: 10px;
}
@media (max-width: 990px) {
    .logo-container {
        transform: scale(1.8);
        height: 120px;
    }
}
@media (max-width: 767px) {
    .logo-container {
        transform: scale(1.6);
        height: 120px;
    }
}


/* Feed module */
.rss-container {
    border: 1px solid var(--greyLight);
    border-radius: 8px;
    padding: 20px 30px 0px 25px;
}
h4.rssfeed_title {
    font-size: 18px;
    font-weight: var(--medium);
    margin-top: 0;
}
.rssfeed_desc {
    font-size: 12px;
    line-height: 120%;
    font-style: italic;
    margin-bottom: 15px;
}
.rssfeed_item {
    font-size: 14px;
    line-height: 140%;
    padding-bottom: 10px;
    padding-top: 10px;
    list-style-type: none;
    border-bottom: 1px solid var(--greyLight)
}
.rssfeed_item:last-child {
    border-bottom: 0 none;
}
li.rssfeed_item span.rssfeed_date {
    font-style: normal;
    float: right;
}
li.rssfeed_item span.rssfeed_date:before, li.rssfeed_item span.rssfeed_date:after {
    content: "";
}

/* palette swatches */
.swatch-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
    margin: 15px auto 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swatch-circle::after {
    content: '';
    width: 30%;
    height: 30%;
    position: absolute;
    border-radius: 50%;
    z-index: 10;
    background: var(--white);
    margin: 0;
}
img {
    max-width: 100%;
}


/* Assets */
#product-assets .item-page ul {
    padding-left: 0;
}
#product-assets .item-page ul li {
    list-style-type: none;
    margin-bottom: 40px;
}
#product-assets .item-page ul li p {
    margin-bottom: 0;
    font-size: 80%;
}
#product-assets .item-page ul li p:first-child {
    font-weight: var(--semi-bold);
    margin-bottom: 0;
}
#product-assets .item-page ul li img {
    width: 25%;
    margin-bottom: 15px;
}

#product-assets .item-page ul.symbol li img {
    width: 10%;
}
#product-assets .item-page ul li .dark {
    background-color: var(--black);
    padding: 10px;
}
#product-assets .item-page ul.fonts li {
    margin: 0;
    font-size: 80%;
}

/* Icons */
table.faicons td {
    text-align: left;
    padding: 8px;
}
table.faicons td:first-child {
    padding-right: 12px;
}
.rl_tabs>ul.nav-tabs>li>a {
    font-size: 85%;
}
th {
    background-color: transparent !important;
}
input.faicon-search {
    border: 1px solid #9e9e9e;
    border-radius: 5px;
    padding: 7px 7px 7px 32px;
    width: 100%;
    margin: 24px 0;
    outline-offset: 0;
    font-size: .875rem;
}
input.search:active,
input.search:focus {
    box-shadow: 0px 0px 3px #0037ff;
}
#icons-list {
    margin-bottom:10px
}
.search-input-wrap {
    position: relative;
}
.search-input-wrap .search-icon-left {
    position: absolute;
    left: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    position: absolute;
    top: 48%;
}
.search-input-wrap .search-icon-left svg {
    display: inline
}
.iconmania {
    border-color: #e6ebff;
    background-color: #ccd7ff;
    padding: 16px;
    border-radius: 5px;
}
table.faicons,
.no-results {
    margin-bottom: 100px;
}

/* Floating TOC */
.table-of-contents-ck {
    padding-left: 0;
    padding-top: 10px;
    width: 50%;
    border-top: 4px solid var(--light-blue-100);
}
.table-of-contents-ck li {
    list-style-type: none;
    line-height: 32px;
}
.table-of-contents-ck > li > ol,
.item-page .table-of-contents-ck  {
    display: none;
}







/* CODE MIRROR */


/* BASICS */
.CodeMirror {
    /* Set height, width, borders, and global font properties here */
    font-family: monospace;
    height: 300px;
    color: var(--black);
    direction: ltr;
}

/* PADDING */
.CodeMirror-lines {
    padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
    padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */
.CodeMirror-gutters {
    border-right: 1px solid #ddd;
    background-color: #f7f7f7;
    white-space: nowrap;
}
.CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    min-width: 20px;
    text-align: right;
    color: #999;
    white-space: nowrap;
}
.CodeMirror-guttermarker {
    color: var(--black);
}
.CodeMirror-guttermarker-subtle {
    color: #999;
}


/* CURSOR */
.CodeMirror-cursor {
    border-left: 1px solid var(--black);
    border-right: none;
    width: 0;
}

/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
    width: auto;
    border: 0 !important;
    background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1;
}
.cm-fat-cursor-mark {
    background-color: rgba(20, 255, 20, 0.5);
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite;
}
.cm-animate-fat-cursor {
    width: auto;
    border: 0;
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite;
    background-color: #7e7;
}
@-moz-keyframes blink {
    0% {
    }
    50% {
        background-color: transparent;
    }
    100% {
    }
}
@-webkit-keyframes blink {
    0% {
    }
    50% {
        background-color: transparent;
    }
    100% {
    }
}
@keyframes blink {
    0% {
    }
    50% {
        background-color: transparent;
    }
    100% {
    }
}


/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {
}
.cm-tab {
    display: inline-block;
    text-decoration: inherit;
}
.CodeMirror-rulers {
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    bottom: -20px;
    overflow: hidden;
}
.CodeMirror-ruler {
    border-left: 1px solid #ccc;
    top: 0;
    bottom: 0;
    position: absolute;
}

/* DEFAULT THEME */
.cm-s-default .cm-header {
    color: blue;
}
.cm-s-default .cm-quote {
    color: #090;
}
.cm-negative {
    color: #d44;
}
.cm-positive {
    color: #292;
}
.cm-header, .cm-strong {
    font-weight: var(--bold);
}
.cm-em {
    font-style: italic;
}
.cm-link {
    text-decoration: underline;
}
.cm-strikethrough {
    text-decoration: line-through;
}
.cm-s-default .cm-keyword {
    color: #708;
}
.cm-s-default .cm-atom {
    color: #219;
}
.cm-s-default .cm-number {
    color: #164;
}
.cm-s-default .cm-def {
    color: #00f;
}
.cm-s-default .cm-variable, .cm-s-default .cm-punctuation, .cm-s-default .cm-property, .cm-s-default .cm-operator {
}
.cm-s-default .cm-variable-2 {
    color: #05a;
}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
    color: #085;
}
.cm-s-default .cm-comment {
    color: #a50;
}
.cm-s-default .cm-string {
    color: #a11;
}
.cm-s-default .cm-string-2 {
    color: #f50;
}
.cm-s-default .cm-meta {
    color: #555;
}
.cm-s-default .cm-qualifier {
    color: #555;
}
.cm-s-default .cm-builtin {
    color: #30a;
}
.cm-s-default .cm-bracket {
    color: #997;
}
.cm-s-default .cm-tag {
    color: #170;
}
.cm-s-default .cm-attribute {
    color: #00c;
}
.cm-s-default .cm-hr {
    color: #999;
}
.cm-s-default .cm-link {
    color: #00c;
}
.cm-s-default .cm-error {
    color: #f00;
}
.cm-invalidchar {
    color: #f00;
}
.CodeMirror-composing {
    border-bottom: 2px solid;
}

/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {
    color: #0b0;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #a22;
}
.CodeMirror-matchingtag {
    background: rgba(255, 150, 0, .3);
}
.CodeMirror-activeline-background {
    background: #e8f2ff;
}
/* END */


/* The rest of this file contains styles related to the mechanics of the editor. You probably shouldn't touch them. */
.CodeMirror {
    position: relative;
    overflow: hidden;
    background: white;
}
.CodeMirror-scroll {
    overflow: scroll !important; /* Things will break if this is overridden */
    /* 30px is the magic margin used to hide the element's real scrollbars */
    /* See overflow: hidden in .CodeMirror */
    margin-bottom: -30px;
    margin-right: -30px;
    padding-bottom: 30px;
    height: 100%;
    outline: none;
    /* Prevent dragging from highlighting the element */
    position: relative;
}
.CodeMirror-sizer {
    position: relative;
    border-right: 30px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling before actual scrolling happens, thus preventing shaking and flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none;
}
.CodeMirror-vscrollbar {
    right: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.CodeMirror-hscrollbar {
    bottom: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
    right: 0;
    bottom: 0;
}
.CodeMirror-gutter-filler {
    left: 0;
    bottom: 0;
}
.CodeMirror-gutters {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100%;
    z-index: 3;
}
.CodeMirror-gutter {
    white-space: normal;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -30px;
}
.CodeMirror-gutter-wrapper {
    position: absolute;
    z-index: 4;
    background: none !important;
    border: none !important;
}
.CodeMirror-gutter-background {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
}
.CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection {
    background-color: transparent 
}
.CodeMirror-gutter-wrapper ::-moz-selection {
    background-color: transparent 
}
.CodeMirror-lines {
    cursor: text;
    min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
    /* Reset some styles that the rest of the page might have set */
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal;
}
.CodeMirror-linebackground {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}
.CodeMirror-linewidget {
    position: relative;
    z-index: 2;
    padding: 0.1px; /* Force widget margins to stay inside of the container */
}
.CodeMirror-rtl pre {
    direction: rtl;
}
.CodeMirror-code {
    outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.CodeMirror-cursor {
    position: absolute;
    pointer-events: none;
}
.CodeMirror-measure pre {
    position: static;
}
div.CodeMirror-cursors {
    visibility: hidden;
    position: relative;
    z-index: 3;
}
div.CodeMirror-dragcursors {
    visibility: visible;
}
.CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible;
}
.CodeMirror-selected {
    background: #d9d9d9;
}
.CodeMirror-focused .CodeMirror-selected {
    background: #d7d4f0;
}
.CodeMirror-crosshair {
    cursor: crosshair;
}
.CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {
    background: #d7d4f0;
}
.CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection {
    background: #d7d4f0;
}
.cm-searching {
    background-color: #ffa;
    background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border {
    padding-right: .1px;
}
@media print {
    /* Hide the cursor when printing */
    .CodeMirror div.CodeMirror-cursors {
        visibility: hidden;
    }
}


/* See issue #2901 */
.cm-tab-wrap-hack:after {
    content: '';
}


/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
    background: none;
}
.cm-s-neat span.cm-comment {
    color: #a86;
}
.cm-s-neat span.cm-keyword {
    line-height: 1em;
    font-weight: var(--bold);
    color: blue;
}
.cm-s-neat span.cm-string {
    color: #a22;
}
.cm-s-neat span.cm-builtin {
    line-height: 1em;
    font-weight: var(--bold);
    color: #077;
}
.cm-s-neat span.cm-special {
    line-height: 1em;
    font-weight: var(--bold);
    color: #0aa;
}
.cm-s-neat span.cm-variable {
    color: black;
}
.cm-s-neat span.cm-number, .cm-s-neat span.cm-atom {
    color: #3a3;
}
.cm-s-neat span.cm-meta {
    color: #555;
}
.cm-s-neat span.cm-link {
    color: #3a3;
}
.cm-s-neat .CodeMirror-activeline-background {
    background: #e8f2ff;
}
.cm-s-neat .CodeMirror-matchingbracket {
    outline: 1px solid grey;
    color: black !important;
}


/* Native dark mode - Safari only */

/* Disabled until it can be tested @media(prefers-color-scheme:dark) {
    html body, .card {
        color: var(--white) !important;
        background-color: var(--black) !important;
    }
    a {
        color: var(--greyLight);
    }
}
*/


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Override boostrap to make the page a little wider at the max size breakpoint. This is to allow for wider examples. */
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1340px;
    }
}