/* Example using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

/* Apply the custom font to the body and all elements */
body {
    font-family: 'Roboto', sans-serif;
    color: #2A1243;
}

/* Override specific elements if needed */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    color: #2A1243!important;
}

a, button, .sl-btn-primary, .sl-tag, .sl-menu, .sl-menu-item, .sl-code, .sl-code-live, .sl-code-editor {
    font-family: 'Roboto', sans-serif;
}

/* HEADINGS */
h1 {
    font-size: 48px;
}

h2 {
    font-size: 32px;
}

@media only screen and (max-width: 1024px) {
    h1 {
        font-size: 40px;
    }
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 36px;
    }
    h2 {
        font-size: 24px;
    }
}


/* SIDEBAR */
.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100.sl-border-r,
.sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-4.sl-bg-canvas-100,
.sl-my-3 .ElementsTableOfContentsItem.sl-block.sl-no-underline,
.sl-my-3 .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-4.sl-bg-canvas-100,
.sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-canvas-100,
.sl-bg-primary-tint {
    font-family: 'Poppins', sans-serif;
    background: none;
    border: none;
}

.sl-elements-api.sl-flex.sl-inset-0.sl-h-full > .sl-flex {
    margin-left: 0.5%;
    width: 280px;
}

.sl-elements-api.sl-flex.sl-inset-0.sl-h-full > .sl-flex .sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100.sl-border-r {
    min-width: 280px!important;
    width: 280px!important;
}

.sl-elements-api.sl-flex.sl-inset-0.sl-h-full > .sl-flex .sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100.sl-border-r .sl-flex.sl-items-center.sl-px-4.sl-py-3.sl-border-t,
.svg-inline--fa.fa-bullseye.sl-icon,
.sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-canvas-100 .sl-flex.sl-items-center.sl-text-xs,
.sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-primary-tint.sl-cursor-pointer.sl-select-none .sl-flex.sl-items-center.sl-text-xs {
    display: none;
}

.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-flex-grow.sl-flex-shrink .sl-overflow-y-auto.sl-w-full.sl-bg-canvas-100 {
    background: none;
    border: 1px solid #9788A3;
    border-radius: 20px;
    padding: 20px;
}

.sl-overflow-y-auto.sl-w-full.sl-bg-canvas-100 .sl-my-3 .sl-pl-4 {
    padding: 0;
}

.sl-h-md {
    height: auto;
}


.sl-flex-1.sl-items-center.sl-text-base.sl-truncate {
    letter-spacing: 0.016em;
    font-size: 16px;
    color: #2A1243!important;
    font-weight: 500;
    transition: .3s ease;
}
.sl-flex-1.sl-items-center.sl-text-base.sl-truncate:hover {
    color: #AAA0B4!important;
}

.sl-my-3 > .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-4.sl-bg-canvas-100 {
    height: 30px;
    margin-top: 10px;
}

a > .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-canvas-100,
a > .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-primary-tint.sl-cursor-pointer.sl-select-none {
    padding: 0;
}

a > .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-canvas-100 .sl-flex-1.sl-items-center.sl-text-base.sl-truncate,
a > .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-primary-tint.sl-cursor-pointer.sl-select-none .sl-flex-1.sl-items-center.sl-text-base.sl-truncate{
    margin: 0;
    font-size: 12px;
    color:#59406B!important;
}
a > .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-canvas-100 .sl-flex-1.sl-items-center.sl-text-base.sl-truncate:hover{
    color:#AAA0B4!important;
}

a > .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-8.sl-bg-primary-tint.sl-cursor-pointer.sl-select-none .sl-flex-1.sl-items-center.sl-text-base.sl-truncate {
    text-decoration: underline;
}

.SendButtonHolder {
  display: none;
}