.bg-token-main-surface-secondary {
    background-color: #038d9c;
}

.text-token-text-secondary {
    color: #f3efef;
    font-size: 20px;
}

.rounded-t-md {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

.bg-token-main-surface-secondary {
    background-color: #424242;
    height: 35px;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-2 {
    padding-bottom: .5rem;
    padding-top: .5rem;
}

.font-sans {
    font-family: sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol;
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}

.justify-between {
    justify-content: space-between;
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #d0dfdf;
    background-clip: border-box;
    border: 1px solid rgba(21, 21, 203, 0.125);
    border-radius: .25rem;
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--main-color);
    ;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.card-title {
    margin-bottom: .75rem;
    color: white;
}

.card .card-body {
    float: left;
    padding: 1.25em;
    position: relative;
    width: 100%;
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: rgba(13, 13, 13, 1);
}

.rowgrid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.card .card-top,
.card .card-footer {
    background: #fafafa;
    border-bottom: 1px solid #e8e9ef;
    float: left;
    padding: .75em 1.125em;
    width: 100%;
}

.card .card-top .card-title,
.card .card-footer .card-title {
    color: #343a40;
    font-size: .875em;
    font-weight: 600;
    padding-top: 5px;
    text-transform: capitalize;
}

.card .card-top button,
.card .card-footer button {
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #868e96;
    font-size: 12px;
    padding: 0 5px;
}

.card .card-top[class*="bg"] .card-title,
.card .card-footer[class*="bg"] .card-title {
    color: #fff;
}

.card .card-top[class*="bg"] button,
.card .card-footer[class*="bg"] button {
    color: #fff;
}

.card .card-top.p-0 .card-title,
.card .card-footer.p-0 .card-title {
    padding: 1.125em;
}

.card .card-top.bg-flat-color-1,
.card .card-footer.bg-flat-color-1 {
    background: #5c6bc0;
    border: none;
}

.card .card-top.bg-flat-color-2,
.card .card-footer.bg-flat-color-2 {
    background: #42a5f5;
    border: none;
}

.card .card-top.bg-flat-color-3,
.card .card-footer.bg-flat-color-3 {
    background: #ffa726;
    border: none;
}

.card .card-top.bg-flat-color-4,
.card .card-footer.bg-flat-color-4 {
    background: #ef5350;
    border: none;
}

.card .card-top.bg-flat-color-5,
.card .card-footer.bg-flat-color-5 {
    background: #4dbd74;
    border: none;
}

.card .card-top.bg-flat-color-6,
.card .card-footer.bg-flat-color-6 {
    background: #66bb6a;
    border: none;
}

.card .card-left {
    width: 60%;
}

.card .card-right {
    width: 40%;
}

.card .card-body {
    float: left;
    padding: 1.25em;
    position: relative;
    width: 100%;
}

.card h4 {
    font-size: 1.1rem;
}

.card .user-header .media img {
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-border-radius: 50%;
}

.card .card-header .card-actions button {
    display: block;
    float: left;
    width: 50px;
    padding: .75rem 0;
    margin: 0 !important;
    color: #fff;
    outline: 0;
    text-align: center;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(120, 130, 140, 0.4);
}

.card .card-footer {
    padding: 0.65rem 1.25rem;
    background-color: #f0f3f5;
    border-top: 1px solid #c2cfd6;
}

.card .card-footer ul {
    display: table-cell;
    padding: 0 1rem;
    text-align: center;
}

.card .nav-tabs {
    margin-bottom: -1px;
}

.card .nav-tabs a {
    border-radius: 0;
    color: #b5bcc2;
    font-size: 12px;
    font-weight: 700;
    padding: .25em .5em;
    text-transform: uppercase;
}

.card .nav-tabs a:hover {
    border-color: transparent;
}

.card .nav-tabs .active a {
    border-color: #e8e9ef;
    color: #868e96 !important;
}

.tdbtn {
    display: flexbox;
    width: 80px;
    height: 30px;
    margin-left: 20px;
}

pre {
    display: block;
    font-family: monospace;
    unicode-bidi: isolate;
    white-space: pre;
    margin: 1em 0px;
}

.prose :where(pre):not(:where([class~=not-prose] *)) {
    background-color: transparent;
    border-radius: .375rem;
    color: currentColor;
    font-size: .875em;
    font-weight: 400;
    line-height: 1.7142857;
    margin: 0;
    overflow-x: auto;
    padding: 0;
}



code,
pre {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
}

code,
kbd,
pre,
samp {
    font-feature-settings: normal;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    font-size: 1em;
    font-variation-settings: normal;
}

.prose {
    color: white;
    max-width: 65ch;
}

.dark {
    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-quaternary: var(--gray-500);
    --text-error: var(--red-500);
    --border-light: hsla(0, 0%, 100%, .1);
    --border-medium: hsla(0, 0%, 100%, .15);
    --border-heavy: hsla(0, 0%, 100%, .2);
    --border-xheavy: hsla(0, 0%, 100%, .25);
    --main-surface-primary: var(--gray-800);
    --main-surface-secondary: var(--gray-750);
    --main-surface-tertiary: var(--gray-700);
    --sidebar-surface-primary: var(--gray-900);
    --sidebar-surface-secondary: var(--gray-800);
    --sidebar-surface-tertiary: var(--gray-750);
    --link: #7ab7ff;
    --link-hover: #5e83b3;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.bg-gray-950 {

    background-color: rgba(13, 13, 13, 1);
    width: 100%;
}

.rounded-md {
    border-radius: .375rem;
    width: 100%;
}

.border-token-border-medium {
    border-color: hsla(0, 0%, 100%, .15);
}

.border-\[0\.5px\] {
    border-width: .5px;
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
    color: #df3079;
    font-size: 20px;
    /* padding-left: 50px; */
}



code.hljs,
code[class*=language-],
pre[class*=language-] {
    word-wrap: normal;
    background: none;
    color: #fff;
    -webkit-hyphens: none;
    hyphens: none;
    line-height: 1.5;
    tab-size: 4;
    text-align: left;
    white-space: nowrap;
    word-break: normal;
    word-spacing: normal;
}

.\!whitespace-pre {
    white-space: pre !important;
}

.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-string {
    color: #00a67d;
    font-size: 20px;
}



.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}

.font-sans {
    font-family: sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol;
}

.py-2 {
    padding-bottom: .5rem;
    padding-top: .5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.bg-token-main-surface-secondary {
    background-color: #424242;
    height: 35px;

}

.rounded-t-md {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.flex {
    display: flex;
}

.relative {
    position: relative;
}

.text-token-text-secondary {
    color: #f3efef;
    font-size: 20px;
}

.bg-token-main-surface-secondary {
    background-color: #038d9c;
}

.hljs-comment {
    color: hsla(0, 0%, 100%, .6);
    font-size: 20px;
}

.hljs-meta {
    color: hsla(0, 0%, 100%, .6);
    font-size: 20px;
}


.hljs-keyword {
    color: white;
    font-size: 20px;
    /* padding-left: 50px; */
}

.hljs-title {
    color: orangered;
    font-size: 20px;
}

code {
    font-family: monospace;
    font-size: 1em;
    font-size: 20px;
    color: rgb(220, 6, 152);
    word-wrap: break-word;
}

.lesson_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.lesson_container p {
    font-size: 19px;
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword,
.hljs-literal {
    color: #2e95d3;
}

.hljs-notation {
    color: white;
    font-size: 20px;

}

.text-white {
    color: #00695C;
}

.display-6 {
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 600;
    line-height: 1.2;
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
    background: rgba(13, 13, 13, 1);
}

.bg-lesson {
    position: relative;
    padding-block: 2rem;
    background-color: fff;
    /* var(--clr-neutral-150) !important; */
    padding-left: 10px;
    --bs-bg-opacity: 1;
    /* background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; */
}

/* .bg-lesson {
    
    
} */


.tutorial-toc {
    border: 1px solid var(--clr-neutral-200);
    background-color: var(--clr-neutral-50);
    border-radius: .50rem;
    padding-bottom: 4rem;
    background-color: #fff;
    align-self: start;
    height: calc(100svh - 100px);
    position: sticky;
    top: 100px;
    overflow: auto;
    padding-left: 10px;
}

.tutorial-toc .mini-logo {
    display: flex;
    flex-direction: column;

    gap: .5rem;
}

.tutorial-toc li.heading,
.tutorial-toc li.sreading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-weight: 700;
    background-color: #016770;
    padding: .5rem .5rem;
    border: solid 1px var(--main-color);
    ;
}



h2.heading {
    width: 100%;
    font-size: 18px;
    height: 69.78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    background-color: #2c9d30;
    padding: 1.4rem 1rem;
    margin-bottom: 10px;
}


.tutorial-toc ul {
    overflow: hidden;
    display: grid;
    gap: .4rem;
}

.tutorial-toc li {
    padding: 0 1rem;
    border-bottom: 1px solid #eeeeee;
    color: #000;
}

.tutorial-toc a[aria-current=page] {
    font-weight: 700;
}

.tutorial-toc a {
    transition: .3s ease;
    display: inline-block;
    width: 100%;
    border-radius: 0vmax;
    padding: .3rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: solid 1px #ffffff;
    font-family: var(--ff-poppins);
    font-size: 18px;
}

.tutorial-toc a::after {
    content: '';
    background-image: url('../img/arrowShort.svg');
    background-position: right;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    opacity: 0;
    transform: translateX(-50%);
    transition: .3s ease;
}

.dar k .tutorial-toc a::after {
    background-image: url('../img/arrowShortWhite.svg');
}

.tutorial-toc a:hover {
    background-color: #e6fbf9;
    border: solid 1px #075b64;
    color: #000;

}

.tutorial-toc a.active {
    background-color: #e6fbf9;
    border: solid 1px #075b64;
    color: #000;

}



.toc __toggle img {
    transform: rotate(180deg);
}

.toc --neutral button {
    background-color: #000;
    color: #f9f7f7;
}

.toc__toggle[aria-expanded=true] img {
    transform: rotate(0);
}

@media (max-width: 840px) {

    .accent-nav__right-list {
        display: none;
    }

    .library-desktop-only-ads {
        display: none;
    }

    .tutorial-toc {
        z-index: 9;
        height: 100vh;
        min-width: 300px;
        position: absolute;
        left: 0;
        top: 0;
        overflow-y: scroll;
        box-shadow: 1.42px 1.87px 15px 0px rgba(75, 75, 75, 0.50);
        transform: translateX(-110%);
        transition: transform .4s ease-in-out;
    }

    .tutorial-toc.sticky {
        position: fixed;
        top: 45px;
    }

    .tutorial-toc::-webkit-scrollbar {
        width: 0.4rem;
        height: 5px;
    }

    .tutorial-toc::-webkit-scrollbar-track {
        border-radius: 100vmax;
        background-color: #C5C5C5;
    }

    .tutorial-toc::-webkit-scrollbar-thumb {
        border-radius: 100vmax;
        background-color: #06141c;
    }

    .dark .tutorial-toc-toggle {
        background-image: url("../img/hamburger-white.svg");
    }

    .tutorial-toc[data-visible] {
        transform: translateX(0);
    }

    .tutorial-toc-toggle {
        display: block;
        cursor: pointer;
        border: 0;
        background: transparent;
        background-image: url("../images/hamburger.svg");
        background-repeat: no-repeat;
        min-width: 25px;
        height: 25px;
        margin-right: min(3vw, 1rem);
    }

    .tutorial-toc-toggle[aria-expanded="true"] {
        background-image: url("../images/hamburger-accent.svg");
    }
}

@media(min-width: 1200px) {


    .tutorial-toc li {
        font-size: 14px;
    }
}

@media(min-width: 1400px) {

    .tutorial-toc li {
        padding-left: 7px !important;
        font-size: 15px !important;
    }

}

.tutorial-toc a:hover::after,
.tutorial-toc a.active::after {
    transform: translateX(0);
    opacity: 1;
    /*border: solid 1px #e6fbf9;*/
    color: #000;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    border: none;
}

/* Flex container */
.flex-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50px;
}

.flex-container column {
    background-color: #f1f1f1;
    /* Example background */
    padding: 5px;
    /* Example padding */
    flex: 1;
    /* Optionally flex the columns to take up available space */
}

/* Button styling */
.center-button {
    padding: 10px 50px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: 1px;
    border-radius: 5px;
    cursor: pointer;
}

.dark\:bg-token-main-surface-secondary:is(.dark *) {
    background-color: var(--main-color);
}

.p-4 {
    padding: 1rem;
}

.overflow-y-auto {
    overflow-y: auto;
}

/** {*/
/*    scrollbar-color: #424242 transparent;*/
/*}*/

/*.dark :hover {*/
/*    scrollbar-color: #676767 transparent;*/
/*}*/

.dark\:bg-gray-950:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(14 14 14);
}


.dg-code-block {
    border: 1px solid #444;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: black;
    color: white;
    font-family: monospace;
}

.dg-code-header {
    background-color: #038d9c;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    font-size: 0.9rem;
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dg-code-content {
    padding: 1rem;
    overflow-x: auto;
    background-color: black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
     font-size: 1rem;
}

.dg-comment {
    color: hsla(0, 0%, 100%, 0.6);
}

.dg-copy-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.dg-code-span {
    display: block;
    font-size: 1.1rem;
    color: rgb(220, 6, 152);
}
.dg-code-span-space-4 {
    display: block;
    font-size: 1.1rem;
    padding-left: 4em;
    color:rgb(220, 6, 152);
}
.dg-code-span-tab {
    display: block;
    font-size: 1.1rem;
    padding-left: 2em;
    color:rgb(220, 6, 152);
}
 .dg-code-strong {
        font-weight: bold;
        font-size: 1.1rem;
    }