:root {
    --panel-card-expand: 30rem;
    --nav-bar-height: 5rem;
    --digits-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
    --ai-code-font-family: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
    --white: #fff;
    --black: #21272a;
    --gray-hover-1: #e5e5e5;
    --gray-hover-2: #e8e8e8;
    --gray-hover-selected: #cacaca;
    --cool-gray-1: #f8faff;
    --cool-gray-5: #f4f6fb;
    --cool-gray-10: #f2f4f8;
    --cool-gray-15: #e8eaf0;
    --cool-gray-20: #dde1e6;
    --cool-gray-30: #c1c7cd;
    --cool-gray-40: #a2a9b0;
    --cool-gray-50: #878d96;
    --cool-gray-60: #697077;
    --cool-gray-70: #4d5358;
    --cool-gray-80: #343a3f;
    --cool-gray-85: #242a2f;
    --cool-gray-90: #21272a;
    --cool-gray-100: #121619;
    --gray-5: #f8f8f8;
    --gray-10: #f4f4f4;
    --gray-20: #e0e0e0;
    --gray-30: #c6c6c6;
    --gray-40: #a8a8a8;
    --gray-50: #8d8d8d;
    --gray-60: #6f6f6f;
    --gray-70: #525252;
    --gray-80: #393939;
    --gray-90: #262626;
    --gray-100: #161616;
    --teal-10: #d9fbfb;
    --teal-20: #9ef0f0;
    --teal-30: #3ddbd9;
    --teal-40: #08bdba;
    --teal-50: #009d9a;
    --teal-60: #007d79;
    --teal-70: #005d5d;
    --teal-80: #004144;
    --teal-90: #022b30;
    --teal-100: #081a1c;
    --blue-10: #edf5ff;
    --blue-20: #d0e2ff;
    --blue-30: #a6c8ff;
    --blue-40: #78a9ff;
    --blue-50: #4589ff;
    --blue-60: #0f62fe;
    --blue-70: #0043ce;
    --blue-80: #002d9c;
    --blue-90: #001d6c;
    --blue-100: #001141;
    --cyan-10: #e5f6ff;
    --cyan-20: #bae6ff;
    --cyan-30: #82cfff;
    --cyan-40: #33b1ff;
    --cyan-50: #1192e8;
    --cyan-60: #0072c3;
    --cyan-70: #00539a;
    --cyan-80: #003a6d;
    --cyan-90: #012749;
    --cyan-100: #061727;
    --purple-10: #f6f2ff;
    --purple-20: #e8daff;
    --purple-30: #d4bbff;
    --purple-40: #be95ff;
    --purple-50: #a56eff;
    --purple-60: #8a3ffc;
    --purple-70: #6929c4;
    --purple-80: #491d8b;
    --purple-90: #31135e;
    --purple-100: #1c0f30;
    --red-10: #fff1f1;
    --red-20: #ffd7d9;
    --red-30: #ffb3b8;
    --red-40: #ff8389;
    --red-50: #fa4d56;
    --red-60: #da1e28;
    --red-70: #a2191f;
    --red-80: #750e13;
    --red-90: #520408;
    --red-100: #2d0709;
    --green-40: #42be65;
    --green-60: #198038;
    --green-support-2: #24a148;
    --orange: #eb7200;
    --ai-overlay-1: rgba(22, 22, 22, 0.5);
    --ai-overlay-2: rgba(22, 22, 22, 0.6);
    --btn-hover: #0050e6;
    --btn-secondary-hover: #474747;
    --btn-danger-hover: #b81922;
    --filter-img-gray-10: invert(99%) sepia(2%) saturate(281%) hue-rotate(207deg) brightness(114%) contrast(91%);
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

h1 {
    font-size: 5rem;
    margin: 4rem 0;
    letter-spacing: 4px;
}

h2 {
    font-size: 3rem;
    margin: 3rem 0;
    letter-spacing: 2px;
}

h3 {
    font-size: 2rem;
    margin: 2rem 0;
    letter-spacing: 2px;
}

h4 {
    font-size: 1.4rem;
    margin: 1.4rem 0;
}

h5 {
    font-size: 1.2rem;
    margin: 1.2rem 0;
}


html,
body {
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif !important;
    -webkit-animation-duration: 0.1s;
    background-color: var(--gray-10);
    animation-duration: 0.1s;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    margin: 0;
    height: 100%;
    overflow-y: hidden;
}

.w3-bar .w3-bar-item {
    text-decoration: none;
    transition: 0.3s all;
    border-bottom: 0px solid var(--blue-70);
}

.w3-bar-item:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}

.ai-header>*>.w3-bar-item:not(.no-hover):hover {
    border-bottom: 4px solid var(--blue-70);
}

a.w3-bar-item.ai-tab {
    margin-bottom: 0;
}

i {
    color: inherit;
    vertical-align: middle;
}


.ai-empty-state {
    display: none;
}

.ai-empty-state:only-child {
    display: block;
}



.ai-combo-list {
    position: absolute;
    display:flex ;
    flex-direction: column;
    right: 0px;
    top: 58px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 2;
    width: 180px;
    font-weight: 300;
}
.ai-combo-list li{
    border: 2px solid transparent!important;
}
.ai-combo-list li:hover{
border: 2px solid var(--blue-60)!important;
}


.ai-dropdown {
    max-height: inherit;
    /* padding-left: 1rem; */
    z-index: 2;
    min-width: 100%;
    overflow-y: auto;
    max-width: inherit;
    height: inherit;
    width: auto;
}

.ai-dropdown-header button {
    padding-right: 2rem !important;

}

.ai-dropdown-header .accordion_mark {
    height: 20px;
    right: 0;
    top: 12px;
    position: absolute;
}

.ai-dropdown a {
    padding-right: 2rem !important;
    z-index: 2;

}

.ai-dropdown li {
    list-style: none;
    padding-left: 0;
}

.ai-dropdown>li {
    user-select: none;
    font-weight: 300;
}

.ai-dropdown li ul li {
    list-style: none;
    padding: 0;
}

.ai-dropdown a.dark.marked {
    background: #393939;
}

.ai-dropdown a.marked {
    background: #e8e8e8;
}

.ai-dropdown .checkmark {
    height: 18px;
    position: absolute;
    right: 0;
    top: 16px;
}

.ai-dropdown-header {
    width: inherit;
    max-width: inherit;
    max-height: inherit;
    height: inherit;

}

.ai-dropdown-header button {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai-filter {
    position: sticky;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 100;
    text-align-last: center;
}

.filter-input {
    width: 90%;
    margin: auto;

}

/* Button */
.ai-button {
    background: var(--blue-60);
    position: relative;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    writing-mode: horizontal-tb !important;
    user-select: none;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    vertical-align: bottom;
    box-sizing: border-box;
    margin: 0em;
    font-weight: 300;
    font-size: inherit;
    padding: 0.8rem 1.5rem;
    border: 1px solid #0000;
    min-width: 8rem;
    height: 50px;
    color: white;
    outline: 2px solid transparent;
    outline-offset: -2px;
    border-radius: inherit;
}

.ai-button:active {
    background-color: var(--blue-80);
    color: var(--white);
}

.ai-button:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    border-color: var(--blue-60);
    box-shadow: 0 0 0 1px var(--blue-60), inset 0 0 0 2px var(--gray-10);
}

.ai-button:hover {
    background-color: var(--btn-hover);
}

.ai-button:disabled {
    background: var(--gray-30);
    border-color: var(--gray-30);
    box-shadow: none;
    color: var(--gray-50);
    cursor: not-allowed;
}

.ai-button.secondary {
    background: var(--gray-70);
}

.ai-button.secondary:active {
    background-color: var(--gray-60);
}

.ai-button.secondary:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    border-color: var(--blue-60);
    box-shadow: inset 0 0 0 1px var(--blue-60), inset 0 0 0 2px #f4f4f4;
}

.ai-button.secondary:hover {
    background-color: var(--btn-secondary-hover);
}

.ai-button.tertiary {
    background: rgba(0, 0, 0, 0);
    color: var(--blue-60);
    border: 1px solid var(--blue-60);
}

.ai-button.tertiary:active {
    background-color: var(--blue-80);
    border-color: #0000;
    color: var(--white);
}

.ai-button.tertiary:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    background: var(--blue-60);
    color: var(--white);
}

.ai-button.tertiary:hover {
    background: var(--btn-hover);
    color: var(--white);
}

.ai-button.danger {
    background: var(--red-60);
    color: var(--white);
}

.ai-button.danger:active {
    background-color: var(--red-80);
}

.ai-button.danger:hover {
    background: var(--btn-danger-hover);
}

.ai-button.ghost {
    background: none;
    border: 1px solid transparent;
    color: black;
}

.ai-button.ghost:hover {
    background: var(--gray-hover-1);
}

.ai-button.ghost:active {
    background: var(--gray-30);
}

.ai-button.ghost:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    border: 1px solid var(--blue-60);
}

.ai-button.ghost:disabled {
    border: 0;
    color: var(--gray-30);
    background-color: transparent;
}

.ai-button.ghost:disabled:hover {
    background: none;
}

.ai-button.field {
    height: 40px;
    padding: 0.5rem 0.75rem;
}

.ai-button.tight {
    padding: 0 0.5rem;
    font-size: 14px;
    line-height: 1.5rem;
    height: auto;
    text-align: left;
}

.ai-button i {
    color: inherit;
    float: right;
    position: relative;
    padding-left: 1rem;
}

.ai-button.compact i {
    padding-left: 0.25rem;
}

.ai-button.icon {
    padding-left: 65px;
}

.ai-button.icon-only {
    width: 50px;
    min-width: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-button.icon-only i {
    width: 100%;
    padding: 0;
}

.ai-button.icon-only.small {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
}

.ai-button.ai-tab {
    background: none;
    color: black;
}

.ai-button img {
    height: 24px;
    filter: invert(1);
}

.ai-button.ghost img {
    filter: invert(0);
}

.ai-button.tertiary img {
    filter: invert(22%) sepia(89%) saturate(3266%) hue-rotate(219deg) brightness(105%) contrast(99%);
    /* blue-60 */
}

.ai-button.tertiary:hover img,
.ai-button.tertiary:focus img {
    filter: invert(1);
}

.ai-button:disabled img {
    filter: invert(0.75);
}

.ai-button:not(.icon-only) img {
    margin: 0 8px;
}

.ai-button.tag {
    background: none;
    border: 1px solid transparent;
    color: black;
    width: 1rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.125rem;
}

.ai-overflow-content>button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* text-align: left; */
}

ul {
    /* padding: 0;
    margin: 0; */
}

.markup-answer {
    font-size: 20px;
}
.markup-answer ul{
    /* padding: unset !important;
    margin: unset !important; */
}
.markup-answer-medium {
    font-size: 24px;
}

.markup-answer-large {
    font-size: 32px;
}

.markup-answer h1 {
    font-size: 24px;
}

.markup-answer h2 {
    font-size: 22px;
}

.markup-answer h3 {
    font-size: 20px;
}

.markup-answer h4 {
    font-size: 18px;
}

.ai-panel {
    max-height: 1500px;
    width: 100%;
    outline: 1px solid transparent;
    outline-offset: -1px;
}

.ai-babyblue {
    background-color: #b1d4e0;
}

.ai-padding {
    padding: 11.6rem 7rem 9rem 7rem;
}

.ai-padding-small {
    padding: 4rem 7rem 9rem 7rem;
}

.ai-padding>.ai-padding {
    padding-left: 0px;
}

.ai-padding-large {
    padding: 2rem;
}

.ai-padding-medium {
    padding: 1.5rem;
}

.ai-padding-16 {
    padding: 1rem;
}

.ai-padding-small {
    padding: 0.5rem;
}

.ai-padding-xsmall {
    padding: 0.25rem;
}

.ai-padding-top-large {
    padding-top: 2rem;
}

.ai-padding-right-large {
    padding-right: 2rem;
}

.ai-padding-bottom-large {
    padding-bottom: 2rem;
}

.ai-padding-left-large {
    padding-left: 2rem;
}

.ai-padding-top-medium {
    padding-top: 1.5rem;
}

.ai-padding-right-medium {
    padding-right: 1.5rem;
}

.ai-padding-bottom-medium {
    padding-bottom: 1.5rem;
}

.ai-padding-left-medium {
    padding-left: 1.5rem;
}

.ai-padding-top-16 {
    padding-top: 1rem;
}

.ai-padding-right-16 {
    padding-right: 1rem;
}

.ai-padding-bottom-16 {
    padding-bottom: 1rem;
}

.ai-padding-left-16 {
    padding-left: 1rem;
}

.ai-padding-top {
    padding-top: 1rem;
}

.ai-padding-right {
    padding-right: 1rem;
}

.ai-padding-bottom {
    padding-bottom: 1rem;
}

.ai-padding-left {
    padding-left: 1rem;
}

.ai-padding-top-small {
    padding-top: 0.5rem;
}

.ai-padding-right-small {
    padding-right: 0.5rem;
}

.ai-padding-bottom-small {
    padding-bottom: 0.5rem;
}

.ai-padding-left-small {
    padding-left: 0.5rem;
}

.ai-padding-top-xsmall {
    padding-top: 0.25rem;
}

.ai-padding-right-xsmall {
    padding-right: 0.25rem;
}

.ai-padding-bottom-xsmall {
    padding-bottom: 0.25rem;
}

.ai-padding-left-xsmall {
    padding-left: 0.25rem;
}

.ai-padding-top-xxsmall {
    padding-top: 0.125rem;
}

.ai-padding-right-xxsmall {
    padding-right: 0.125rem;
}

.ai-padding-bottom-xxsmall {
    padding-bottom: 0.125rem;
}

.ai-padding-left-xxsmall {
    padding-left: 0.125rem;
}

.ai-panel-image {
    object-fit: cover;
    height: 100%;
}



.ai-node-sidebar {
    min-width: 200px;
    width: 100%;
    margin: 0rem 0 0 0rem;
    padding: 10px;
    overflow: none;
    position: relative;
    /*background: white;*/
    vertical-align: middle;
    border: none; /*1px solid #cccccc;*/
    line-break: anywhere;
    /*box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);*/
    display: inline-block;
    outline: 2px solid transparent;
    /* for high contrast mode accessibility */
    outline-offset: -2px;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid #cccccc; 
    /*height:300px;*/
}

.ai-node-sidebar-hover {
    visibility: hidden;
}

.ai-node-sidebar:hover .ai-node-sidebar-hover,
.ai-node-sidebar:focus .ai-node-sidebar-hover {
    visibility: visible;
}

.ai-node-sidebar:hover {
    background-color: var(--gray-20);
    border-radius: 8px;
    /*var(--gray-hover-1);*/
}

.ai-node-sidebar:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}

.ai-node-sidebar header {
    /*padding: 2rem 1rem 1rem 1rem;*/
    /*text-transform: uppercase;*/
    font-weight: normal;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*letter-spacing: 1.5px;*/
    font-size: 14px;
}

.ai-node-sidebar>div {
    /*padding: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;*/
}

.ai-node-sidebar.selected {
    background-color: var(--cool-gray-20);
    /*border-left: 4px solid var(--blue-60);*/
    border-radius: 8px;
    
}

.ai-node-sidebar .node-title {
    font-size: 20px;
    font-weight: 430;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    width: 80%;
}


.ai-node-sidebar .node-info>div {
    margin-bottom: 0.25rem;
    width: 100%;
}







.ai-node {
    min-width: 200px;
    width: 20%;
    margin: 1rem 0 0 0rem;
    padding: 0.2rem 1rem 1rem 1rem;
    overflow: none;
    position: relative;
    background: white;
    vertical-align: middle;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
    display: inline-block;
    outline: 2px solid transparent;
    /* for high contrast mode accessibility */
    outline-offset: -2px;
    /*height:300px;*/
}

.ai-node-hover {
    visibility: hidden;
}

.ai-node:hover .ai-node-hover,
.ai-node:focus .ai-node-hover {
    visibility: visible;
}

.ai-node:hover {
    background-color: var(--cool-gray-10);
    /*var(--gray-hover-1);*/
}

.ai-node:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}

.ai-node.big{
    width:25%;
}

.ai-node header {
    padding: 2rem 1rem 1rem 1rem;
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 1.5px;
    font-size: 20px;
}

.ai-node>div {
    padding: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.ai-node.selected {
    background-color: var(--gray-20);
}

.ai-node .node-title {
    font-size: 20px;
    font-weight: 430;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    width: 80%;
}

.ai-node .node-title-small {
    font-size: 18px;
    font-weight: 430;
    vertical-align: middle;
    display: inline-block;
    width: 80%;
}

.ai-node .node-info>div {
    margin-bottom: 0.25rem;
    width: 100%;
}

.ai-card {
    min-height: 300px;
    border-radius: 1rem;
    min-width: 300px;
    vertical-align: middle;
    margin: 8px;
    padding: 0px;
    position: relative;
    background: white;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
    display: inline-block;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-card header {
    padding: 20px;
    text-transform: uppercase;
    border-radius: 1rem 1rem 0px 0px;
    height: 60px;
    font-weight: bold;
    letter-spacing: 1.5px;
    font-size: 18px;
}

.ai-card>div {
    padding: 20px;
    height: 240px;
    overflow-y: auto;
    border-radius: 0px 0px 1rem 1rem;
}

.ai-card>img {
    overflow-y: auto;
    border-radius: 0px 0px 1rem 1rem;
    width: 100%;
}

.ai-card.dark {
    background-color: rgb(22, 23, 49);
    color: white;
}

.ai-card.dark>header {
    padding: 20px;
    border-radius: 10px 10px 0px 0px;
    height: 60px;
    font-weight: bold;
    letter-spacing: 1.5px;
    font-size: 18px;
}

.ai-card.dark>div {
    background-color: rgb(22, 23, 49);
    padding: 20px;
    height: 240px;
    color: white;
    overflow-y: auto;
    border-radius: 0px 0px 10px 10px;
}

.ai-text-trim {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-text-upper {
    text-transform: uppercase;
}

.ai-text-capitalize {
    text-transform: capitalize;
}

.ai-text-no-transform {
    text-transform: none;
}

.ai-text-light {
    font-weight: 300;
}

.ai-text-bold-medium {
    font-weight: 500;
}

.ai-text-bold {
    font-weight: 600;
}

.ai-text-italic {
    font-style: italic;
}

.ai-text-compact-small {
    line-height: 1rem;
}

.ai-text-compact-medium {
    line-height: 1.25rem;
}

.ai-text-tall-medium {
    line-height: 1.875rem;
}

.ai-text-tall-large {
    line-height: 2rem;
}

.ai-text-xsmall {
    font-size: 0.75rem;
}

.ai-text-small {
    font-size: 0.875rem;
}

.ai-text-18 {
    font-size: 1.125rem;
}

.ai-text-20 {
    font-size: 1.25rem;
}

.ai-text-normal {
    font-size: 1rem;
}

.ai-text-medium {
    font-size: 1.4rem;
}

.ai-text-large {
    font-size: 1.6rem;
}

.ai-text-xlarge {
    font-size: 2rem;
}

.ai-text-xxlarge {
    font-size: 2.4rem;
}

.ai-text-xxxlarge {
    font-size: 2.6rem;
}

.ai-text-xxxxlarge {
    font-size: 3.4rem;
}

.ai-text-space-1 {
    letter-spacing: 1px;
}

.ai-text-space-2 {
    letter-spacing: 2px;
}

.ai-text-black,
.ai-hover-text-black:hover {
    color: var(--black) !important;
}

.ai-text-white,
.ai-hover-text-white:hover {
    color: var(--white) !important;
}

.ai-text-blue-10,
.ai-hover-text-blue-10:hover {
    color: var(--blue-10) !important;
}

.ai-text-blue-20,
.ai-hover-text-blue-20:hover {
    color: var(--blue-20) !important;
}

.ai-text-blue-30,
.ai-hover-text-blue-30:hover {
    color: var(--blue-30) !important;
}

.ai-text-blue-40,
.ai-hover-text-blue-40:hover {
    color: var(--blue-40) !important;
}

.ai-text-blue-50,
.ai-hover-text-blue-50:hover {
    color: var(--blue-50) !important;
}

.ai-text-blue-60,
.ai-hover-text-blue-60:hover {
    color: var(--blue-60) !important;
}

.ai-text-blue-70,
.ai-hover-text-blue-70:hover {
    color: var(--blue-70) !important;
}


.ai-text-blue-80,
.ai-hover-text-blue-80:hover {
    color: var(--blue-80) !important;
}

.ai-text-blue-90,
.ai-hover-text-blue-90:hover {
    color: var(--blue-90) !important;
}

.ai-text-blue-100,
.ai-hover-text-blue-100:hover {
    color: var(--blue-100) !important;
}

.ai-text-gray-10,
.ai-hover-text-gray-10:hover {
    color: var(--gray-10) !important;
}

.ai-text-gray-20,
.ai-hover-text-gray-20:hover {
    color: var(--gray-20) !important;
}

.ai-text-gray-30,
.ai-hover-text-gray-30:hover {
    color: var(--gray-30) !important;
}

.ai-text-gray-40,
.ai-hover-text-gray-40:hover {
    color: var(--gray-40) !important;
}

.ai-text-gray-50,
.ai-hover-text-gray-50:hover {
    color: var(--gray-50) !important;
}

.ai-text-gray-60,
.ai-hover-text-gray-60:hover {
    color: var(--gray-60) !important;
}

.ai-text-gray-70,
.ai-hover-text-gray-70:hover {
    color: var(--gray-70) !important;
}

.ai-text-gray-80,
.ai-hover-text-gray-80:hover {
    color: var(--gray-80) !important;
}

.ai-text-gray-90,
.ai-hover-text-gray-90:hover {
    color: var(--gray-90) !important;
}

.ai-text-gray-100,
.ai-hover-text-gray-100:hover {
    color: var(--gray-100) !important;
}

.ai-text-teal-10,
.ai-hover-text-teal-10:hover {
    color: var(--teal-10) !important;
}

.ai-text-teal-20,
.ai-hover-text-teal-20:hover {
    color: var(--teal-20) !important;
}

.ai-text-teal-30,
.ai-hover-text-teal-30:hover {
    color: var(--teal-30) !important;
}

.ai-text-teal-40,
.ai-hover-text-teal-40:hover {
    color: var(--teal-40) !important;
}

.ai-text-teal-50,
.ai-hover-text-teal-50:hover {
    color: var(--teal-50) !important;
}

.ai-text-teal-60,
.ai-hover-text-teal-60:hover {
    color: var(--teal-60) !important;
}

.ai-text-teal-70,
.ai-hover-text-teal-70:hover {
    color: var(--teal-70) !important;
}

.ai-text-teal-80,
.ai-hover-text-teal-80:hover {
    color: var(--teal-80) !important;
}

.ai-text-teal-90,
.ai-hover-text-teal-90:hover {
    color: var(--teal-90) !important;
}

.ai-text-teal-100,
.ai-hover-text-teal-100:hover {
    color: var(--teal-100) !important;
}

.ai-text-purple-10,
.ai-hover-text-purple-10:hover {
    color: var(--purple-10) !important;
}

.ai-text-purple-20,
.ai-hover-text-purple-20:hover {
    color: var(--purple-20) !important;
}

.ai-text-purple-30,
.ai-hover-text-purple-30:hover {
    color: var(--purple-30) !important;
}

.ai-text-purple-40,
.ai-hover-text-purple-40:hover {
    color: var(--purple-40) !important;
}

.ai-text-purple-50,
.ai-hover-text-purple-50:hover {
    color: var(--purple-50) !important;
}

.ai-text-purple-60,
.ai-hover-text-purple-60:hover {
    color: var(--purple-60) !important;
}

.ai-text-purple-70,
.ai-hover-text-purple-70:hover {
    color: var(--purple-70) !important;
}

.ai-text-purple-80,
.ai-hover-text-purple-80:hover {
    color: var(--purple-80) !important;
}

.ai-text-purple-90,
.ai-hover-text-purple-90:hover {
    color: var(--purple-90) !important;
}

.ai-text-purple-100,
.ai-hover-text-purple-100:hover {
    color: var(--purple-100) !important;
}

.ai-text-cyan-10,
.ai-hover-text-cyan-10:hover {
    color: var(--cyan-10) !important;
}

.ai-text-cyan-20,
.ai-hover-text-cyan-20:hover {
    color: var(--cyan-20) !important;
}

.ai-text-cyan-30,
.ai-hover-text-cyan-30:hover {
    color: var(--cyan-30) !important;
}

.ai-text-cyan-40,
.ai-hover-text-cyan-40:hover {
    color: var(--cyan-40) !important;
}

.ai-text-cyan-50,
.ai-hover-text-cyan-50:hover {
    color: var(--cyan-50) !important;
}

.ai-text-cyan-60,
.ai-hover-text-cyan-60:hover {
    color: var(--cyan-60) !important;
}

.ai-text-cyan-70,
.ai-hover-text-cyan-70:hover {
    color: var(--cyan-70) !important;
}

.ai-text-cyan-80,
.ai-hover-text-cyan-80:hover {
    color: var(--cyan-80) !important;
}

.ai-text-cyan-90,
.ai-hover-text-cyan-90:hover {
    color: var(--cyan-90) !important;
}

.ai-text-cyan-100,
.ai-hover-text-cyan-100:hover {
    color: var(--cyan-100) !important;
}

.ai-text-red-60,
.ai-hover-text-red-60:hover {
    color: var(--red-60) !important;
}

.ai-text-green-40,
.ai-hover-text-green-40:hover {
    color: var(--green-40) !important;
}

.ai-text-green-60,
.ai-hover-text-green-60:hover {
    color: var(--green-60) !important;
}

.ai-text-orange,
.ai-hover-text-orange:hover {
    color: var(--orange) !important;
}

/* Header */

.ai-header-main {
    font-size: 1rem;
    font-weight: 500;
    padding: 20px;
    line-height: 1.8rem;
    border-bottom: 1px solid var(--gray-20);
    height: var(--nav-bar-height);
    /*display: flex;*/
    align-items: center;
    /*position: absolute;*/
    width: 100%;
    z-index: 1000;
    background-color: var(--white);
}

.ai-header {
    font-size: 1rem;
    font-weight: 500;
    padding: 20px;
    line-height: 1.8rem;
    border-bottom: 1px solid var(--gray-20);
    height: var(--nav-bar-height);
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: var(--white);
}

.ai-header.gray-100 {
    background-color: var(--gray-100);
    color: var(--gray-10);
    border-color: var(--gray-100);
}

.ai-header.gray-100 * {
    color: var(--gray-10);
}

.ai-header.gray-100 .ai-button.ghost {
    color: var(--gray-10);
}

.ai-header.gray-100 .ai-button.ghost:active {
    background: #8d8d8d66;
}

.ai-header.gray-100 .ai-button.ghost:focus {
    box-shadow: inset 0 0 0 1px var(--white), inset 0 0 0 2px var(--gray-10);
}

.ai-header.gray-100 .ai-button.ghost:hover {
    background: var(--gray-90);
}

.ai-header.no-border {
    border-bottom: none;
}

.ai-header nav {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 1rem;
}

.ai-header nav.left-line::before {
    background-color: var(--gray-20);
    content: "";
    display: block;
    height: 1.5rem;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: .0625rem;
}

.ai-header.gray-100 nav.left-line::before {
    background-color: var(--gray-80);
}

.ai-header .asset-name {
    font-size: 1rem;
    padding: 0 2rem 0 1rem;
}

.ai-header .asset-name a {
    text-decoration: none;
}

.ai-header .ai-header-item {
    padding: 0.5rem 1rem;
}

.ai-header .ai-header-item:hover,
.ai-header .ai-header-item:focus {
    background-color: var(--gray-hover-1);
}

.ai-header .ai-header-item:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}

.ai-header a:active {
    color: inherit;
}

.ai-header a.ai-button:active {
    color: var(--white);
}

.ai-header a.ai-button.ai-button.ghost:active {
    color: var(--black);
}

.ai-header .ai-button:not(.icon-only) {
    padding: 0.65rem 1.25rem;
    margin-right: -1px;
}

/* Dark theme header */
.ai-header.gray-100 {
    background-color: var(--gray-100);
    color: white;
}

.ai-header.gray-100 img:not(.logo) {
    filter: var(--filter-img-gray-10);
}

.ai-header.gray-100 .ai-button.ghost {
    color: white;
}

.ai-header.gray-100 .ai-button.ghost:active {
    background: #8d8d8d66;
}

.ai-header.gray-100 .ai-button.ghost:focus {
    box-shadow: inset 0 0 0 1px var(--white), inset 0 0 0 2px var(--gray-10);
}

.ai-header.gray-100 .ai-button.ghost:hover {
    background: var(--gray-90);
}

.ai-header.gray-100 .ai-input.inline:hover {
    background-color: inherit;
}

.ai-header.gray-100 select.ai-input option {
    background-color: var(--gray-100);
}

.ai-left-nav-panel {
    background-color: var(--cool-gray-15);
    min-width: 3.5rem;
    width: 3.5rem;
    overflow: hidden;
    padding-top: 1rem;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    height: 100vh;
}
.ai-left-nav-panel.chat{
    background-color: white;
}

.ai-left-nav-panel.expanded {
    width: 15.5rem;
}

.ai-left-nav-panel ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
}

.ai-left-nav-panel .ai-button.icon-only {
    min-width: 54px;
    width: 54px;
}

.ai-left-nav-panel .ai-button.icon-only.expanded {
    min-width: 100%;
    width: 100%;
    justify-content: start;
    padding-left: 1rem;
}

.ai-left-nav-panel .ai-button.icon-only:hover {
    background-color: white;
    /*var(--gray-30);*/
}

.ai-left-nav-panel .ai-button.icon-only img {
    height: 20px;
}


.ai-config-nav-panel {
    background-color: var(--cool-gray-15);
    min-width: 3.5rem;
    width: 3.5rem;
    overflow: hidden;
    padding-top: 1rem;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ai-config-nav-panel.expanded {
    width: 12.5rem;
}

.ai-config-nav-panel ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    margin-top: 0;
}

.ai-config-nav-panel .ai-button.icon-only {
    min-width: 54px;
    width: 54px;
}

.ai-config-nav-panel .ai-button.icon-only.expanded {
    min-width: 100%;
    width: 100%;
    justify-content: start;
    padding-left: 1rem;
}

.ai-config-nav-panel .ai-button.icon-only:hover {
    background-color: white;
    /*var(--gray-30);*/
}

.ai-config-nav-panel .ai-button.icon-only img {
    height: 20px;
}


.ai-badge {
    border-radius: 50%;
    padding: 0.5rem 1rem;
    outline: 2px solid transparent;
}

.ai-badge:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: 2px;
}

.ai-focus:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
}

.ai-panel-card {
    color: #ffffff;
    width: 15rem;
    cursor: pointer;
    height: 30rem;
    margin: 0 1rem 0 0;
    overflow: hidden;
    position: relative;
    background: #1e2d3d;
    text-align: left;
    transition: width 0.66s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: inline-block;
    white-space: initial;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.side-stack,
.main-stack {
    transition: transform 0.66s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s;
    position: absolute;
    width: 100%;
    top: 25%;
}

.side-stack {
    bottom: 0;
    position: absolute;
}

.ai-panel-card .main-stack {
    opacity: 1;
    transform: translate(0%, 0);
}

.ai-panel-card:hover .main-stack {
    opacity: 0;
    transform: translate(-100%, 0);
}

.ai-panel-card .side-stack {
    opacity: 0;
    width: var(--panel-card-expand);
    transform: translate(100%, 0);
    z-index: 10px;
}

.ai-panel-card:hover .side-stack {
    opacity: 1;
    transform: translate(0%, 0);
}

.ai-panel-card:last-child {
    margin: 0;
}

.ai-panel-card:hover {
    width: var(--panel-card-expand);
}

.ai-panel-card .background-stack {
    height: 100%;
    width: 100%;
    position: absolute;
}

.ai-panel-card:hover .background-stack {
    opacity: 0.1;
}

.ai-link {
    color: var(--blue-60);
    cursor: pointer;
}

.ai-link.inline {
    text-decoration: underline;
}

.ai-link:hover {
    text-decoration: underline;
    color: var(--blue-70);
}

.ai-link-nav {
    display: block;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: .16px;
    line-height: 1.28572;
    min-height: 2rem;
    outline: 2px solid #0000;
    outline-offset: -2px;
    padding: 0.5rem 1rem;
    position: relative;
    text-decoration: none;
    transition: color .11s, background-color .11s, outline .11s;
}

.ai-link-nav:hover {
    background-color: var(--gray-10);
    text-decoration: none;
}

.ai-link-nav.active {
    font-weight: 600;
    background-color: var(--gray-20);
}

.ai-link-nav.active::before {
    background-color: var(--blue-60);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

.ai-input-container {
    position: relative;
}



.ai-input {
    background-color: var(--gray-10);
    border: none;
    border-bottom: 1px solid var(--gray-50);
    height: 40px;
    padding: 0.5rem 1rem;
    width: 100%;
    vertical-align: bottom;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-input.field {
    padding-top: 0;
    padding-bottom: 0;
}

.ai-input input {
    background-color: var(--gray-10);
    border: none;
}

.ai-input:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 0px solid var(--blue-60);
    outline-offset: -2px;
}

.ai-input::placeholder {
    text-transform: none;
}

.ai-input.inline {
    display: inline-block;
    width: auto;
    background: none;
    border: none;
}

.ai-search,
.ai-password {
    position: relative;
}

.ai-advanced-input{
    line-break: anywhere;
    resize: none;
    overflow-x: hidden;
    overflow-y: hidden;
    height: fit-content;
}

.ai-search{
    flex: 1;
}
.ai-search:not(.toolbar) input {
    padding-left: 3.5rem;
}

.ai-search.toolbar input {
    padding-right: 3.5rem;
    border-bottom: none;
    height: 48px;
}

.ai-search i {
    position: absolute;
    top: 0.5rem;
}

.ai-search:not(.toolbar) i {
    left: 1rem;
}

.ai-search.toolbar i {
    right: 2rem;
    top: 0.75rem;
}

.ai-password input {
    padding-right: 2.5rem;
}

.ai-password img {
    position: absolute;
    right: 0.5rem;
    height: 24px;
}



/* Fluid input  */

.ai-fluid-wrapper {
    position: relative;
}

.ai-fluid-wrapper label {
    position: absolute;
    top: 0.75rem;
    left: 0.875rem;
    color: var(--gray-80);
}

.ai-fluid-wrapper input,
.ai-fluid-wrapper textarea {
    margin-top: 2rem;
    width: auto;
}

.ai-fluid-wrapper.white,
.ai-fluid-wrapper.white * {
    background-color: white;
}

.ai-fluid-wrapper.gray-10,
.ai-fluid-wrapper.gray-10 * {
    background-color: var(--gray-10);
}

.ai-fluid-wrapper:focus-within {
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}

.ai-fluid-wrapper .ai-input:focus {
    outline: none;
}


/* Select Input */

select.ai-input {
    cursor: pointer;
}

button.ai-input {
    cursor: pointer;
}

select.ai-input:hover {
    background-color: var(--gray-hover-1);
}

.ai-input-label {
    line-height: 2.5rem;
    margin: 0 0.5rem 0 1.5rem;
}

/* Form Validation */

.ai-validation:invalid {
    outline: 2px solid var(--red-60);
    outline-offset: -2px;
}

.ai-validation:valid:not(:focus) {
    outline: none;
}

.ai-validation-warning {
    position: absolute;
    right: 1rem;
    top: 0.65rem;
}

.ai-input-container.password .ai-validation-warning {
    right: 2rem;
}


/* Checkbox */

.ai-check {
    margin-right: 8px;
    width: 18px !important;
    height: 18px !important;
    vertical-align: sub;
    accent-color: var(--gray-100);
}

.ai-check:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: 2px;
    outline-style: auto;
}

/* File Uploader */

.ai-file-uploader input {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    visibility: inherit;
    white-space: nowrap;
    width: 1px;
}

.ai-uploaded-file {
    padding: 1rem 4rem 1rem 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-height: 52px;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-uploaded-file:not(:first-child) {
    margin-top: 0.5rem;
}

.ai-uploaded-file-invalid {
    outline: 2px solid var(--red-60);
}

.ai-file-uploader.drag-n-drop {
    padding: 0.5rem 1rem;
}

.ai-file-uploader.drag-n-drop .supported-files {
    font-weight: 300;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.ai-file-uploader.drag-n-drop .drop-area {
    border: 1px dashed var(--gray-30);
    padding: 2rem;
    padding-bottom: 2.5rem;
    color: var(--blue-70);
    width: 30%;
}

.ai-file-uploader.drag-n-drop .drop-area:hover {
    border-color: var(--blue-70);
    border-style: solid;
    text-decoration: underline;
    cursor: pointer;
}

/* AI Tab */

.ai-tablist {
    display: flex;
}

.ai-tablist .ai-tab {
    flex-grow: 1;
}

.ai-tab {
    border-bottom: 3px solid var(--gray-20);
    cursor: pointer;
    height: 40px;
    text-align-last: center;
    line-height: 2rem;
    min-width: 160px;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-tab:hover {
    border-bottom: 3px solid var(--gray-50);
}

.ai-tab:focus,
.ai-tab:focus-within {
    /* For accessibility compliance - keyboard access focus visibility */
    /* outline: 2px solid var(--blue-60); */
}

.ai-tab.active {
    border-bottom: 3px solid var(--blue-60);
    font-weight: 600;
}

.ai-tab.active.white {
    background-color: white;
}

.ai-tab.disabled,
.ai-tab.disabled:hover {
    border-bottom: 3px solid var(--gray-10);
    cursor: not-allowed;
    outline: none;
}

.ai-tab.contained {
    background-color: var(--gray-20);
    border-bottom: 0;
}

.ai-tab.contained.active.white {
    background-color: white;
}

.ai-tab.contained.active {
    box-shadow: inset 0 2px 0 0 var(--blue-60);
    background-color: var(--gray-10);
    border-bottom: 0;
}


/* Overflow Menu */

.ai-overflow-content {
    display: none;
    position: absolute;
    font-size: 0.85rem;
    background-color: var(--gray-10);
    border-radius: 0;
    min-width: 14rem;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 2;
    text-align: left;
    margin-top: 0.5rem;
    margin-left: -16px;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-overflow-content>* {
    padding: 1rem;
    text-align: left;

}

.ai-overflow-content>*:hover {
    background-color: var(--gray-20);
}

.ai-overflow-content>.delete:hover {
    background-color: var(--red-60);
    color: #fff;
}

/* Data Table */

.ai-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-table thead {
    font-weight: 600;
    line-height: 1.125rem;
    background-color: var(--gray-20);
    border: 0;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-table thead th {
    padding: 0.875rem 1rem;
    text-align: left;
    color: var(--gray-100);
}

.ai-table.sticky thead th {
    padding: 0.875rem 1rem;
    text-align: left;
    color: var(--gray-100);
    border-bottom: 1px solid var(--gray-30);
}

.ai-table.sticky thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.ai-table.white {
    background-color: white;
}

.ai-table.gray-10 {
    background-color: var(--gray-10);
}

.ai-table.zebra tr:nth-child(even) {
    background-color: var(--gray-20);
}

.ai-table tbody tr:hover {
    background-color: var(--gray-hover-1);
}

.ai-table.no-hover tbody tr,
.ai-table.zebra tbody tr {
    background-color: transparent;
}

.ai-table tr {
    border: none;
    height: 3rem;
    width: 100%;
}

.ai-table td,
.ai-table tbody th {
    color: var(--gray-80);
    border-top: 1px solid var(--gray-10);
    border-bottom: 1px solid var(--gray-20);
    padding: 0.875rem 1rem;
    border-radius: 0 !important;
}

.ai-table.white.horizontal tr:first-child th {
    border-top: 1px solid var(--gray-20);
}

.ai-table tr:first-child:not(.selected) td {
    border-top: 1px solid var(--gray-20);
}

.ai-table tr.selected td {
    background-color: var(--gray-20);
    border-top: 1px solid var(--gray-30);
    border-bottom: 1px solid var(--gray-30);
}

.ai-table.head-left-align th {
    text-align: left;
}

.ai-table.compact td,
.ai-table.compact th {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.ai-table.extra-compact tr {
    height: 1rem;
}

.ai-table.extra-compact td,
.ai-table.extra-compact th {
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
}

.ai-table.short td {
    padding-top: 0.4375rem;
    padding-bottom: 0.375rem;
}

.ai-table.tall td {
    padding-top: 1rem;
}

.ai-table.taller td {
    padding: 1.5rem;
}

.ai-table tr.merge-rows td {
    border-bottom: none;
}

.ai-table.break-word td {
    word-break: break-word;
}

.ai-table-search {
    border: none;
    padding: 0 3rem;
    font-weight: 400;
    line-height: 1.125rem;
    letter-spacing: 0.16px;
    height: 50px;
    width: 100%;
}

.ai-table-search:hover {
    background-color: var(--gray-hover-1);
}

.ai-table-search:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}


.ai-table-batch-actions {
    display: flex;
    background-color: var(--blue-60);
    color: var(--white);
}

.ai-table-batch-actions .batch-summary {
    margin-left: 1rem;
}

.ai-table-batch-actions .batch-summary p {
    font-weight: 400;
    line-height: 1.125rem;
    letter-spacing: 0.16px;
}

.ai-table-batch-actions .action-list {
    margin-left: auto;
}

.ai-table tbody tr:hover .ai-tag.blue,
.ai-table tbody tr.selected .ai-tag.blue {
    background-color: var(--blue-30);
}

.ai-table tbody tr:hover .ai-tag.blue:hover,
.ai-table tbody tr.selected .ai-tag.blue:hover {
    background-color: var(--blue-60);
    color: var(--white);
}

.ai-table .ai-button.ghost:hover:not(:disabled) {
    background-color: var(--gray-hover-selected);
}

.ai-table td.text-blue-60 {
    color: var(--blue-60);
}

.ai-table td.parameter {
    vertical-align: top;
    padding-top: 2rem;
}

/* Tags */

.ai-tag {
    display: inline-block;
    background-color: var(--gray-80);
    color: var(--white);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0.32px;
    padding: 0.4rem 0.85rem;
    height: 1.8rem;
    max-width: 100%;
    min-width: 2rem;
    margin: 0.25rem;
    border-radius: 0.99rem;
    cursor: pointer;
    user-select: none;
    word-break: break-all;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-tag.filter {
    display: inline;
    line-height: 2.5rem;
}

.ai-tag.small {
    font-size: 0.75rem;
}

.ai-tag.blue {
    background-color: #d0e2ff;
    color: var(--blue-70);
}

.ai-tag.blue:not(.no-hover):hover {
    background-color: var(--blue-60);
    color: var(--white);
}

.ai-tag.gray {
    background-color: var(--gray-80);
    color: var(--white);
}

.ai-tag.gray:not(.no-hover):hover {
    background-color: var(--gray-100);
    color: var(--white);
}

.ai-tag.cyan {
    background-color: #bae6ff;
    color: var(--cyan-70);
}

.ai-tag.purple {
    background-color: #e8daff;
    color: var(--purple-80);
}

.ai-tag.teal {
    background-color: #9ef0f0;
    color: var(--teal-80);
}

.ai-tag.filter-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.2rem 0.875rem;
    height: auto;
    line-height: 0.875rem;
    cursor: default;
}


/* Accordions */

.ai-accordion {
    list-style: none;
    width: 100%;
}

.ai-accordion-item {
    -webkit-transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
    transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
    border-top: 1px solid var(--gray-70);
    color: var(--gray-100);
    padding: 1px;
}

.ai-accordion-item i.expand-icon {
    color: var(--gray-70);
}

.ai-accordion-item.icon-right i.expand-icon {
    margin-left: auto;
}

.ai-accordion-item.icon-left button:not(.icon-only) {
    flex-direction: row-reverse;
}

.ai-accordion-item>button:not(.icon-only) {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1rem;
}

.ai-accordion-item:last-child {
    border-bottom: 1px solid var(--gray-70);
}

.ai-accordion-content {
    display: block;
    padding: 1rem 1rem 1.5rem 1.25rem;
    -webkit-transition: padding-top cubic-bezier(0, 0, 0.38, 0.9) 110ms, padding-bottom cubic-bezier(0, 0, 0.38, 0.9) 110ms;
    transition: padding-top cubic-bezier(0, 0, 0.38, 0.9) 110ms, padding-bottom cubic-bezier(0, 0, 0.38, 0.9) 110ms;
}

.ai-accordion.nav .ai-accordion-content {
    padding: 0;
}


/* List (ul/ol) */

.ai-list {
    margin-left: 1.5rem;
    padding: 0.5rem;
    line-height: 2rem;
}

.ai-list.no-bullets {
    list-style-type: none;
}

.ai-list.compact {
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0.5rem;
}

.ai-list.compact li {
    line-height: 1.5rem;
    margin-top: 0.25rem;
}

.ai-list.compact.space-between li:not(:first-child) {
    margin-top: 1rem;
}

.ai-list.no-margin {
    margin-left: 0;
}

.ai-list.tall {
    line-height: 2.5rem;
}

.ai-anchor-list {
    list-style: none;
    margin: 2.5rem 1rem;
}

.ai-anchor-list-item a {
    color: var(--gray-100);
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: .5rem;
    margin-left: 1.5rem;
    position: relative;
    text-decoration: none;
    transition: color .25s;
}

.ai-anchor-list-item a::before {
    color: currentColor;
    content: "↳";
    cursor: pointer;
    left: -1.5rem;
    position: absolute;
}

.ai-anchor-list-item a:hover {
    color: var(--blue-60);
}

.ai-anchor-list-item a:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: 2px;
}

.ai-code-font {
    font-family: var(--ai-code-font-family);
}

.ai-code-snippet {
    background-color: var(--gray-10);
    color: var(--gray-100);
    margin: 1rem 0;
    display: flex;
    position: relative;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-code-snippet .code-container {
    width: 85%;
}

.ai-code-snippet code {
    font-family: var(--ai-code-font-family);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.32px;
    line-height: 1.33333;
}

.ai-code-snippet.text-medium code {
    font-size: 1rem;
}

.ai-code-snippet.inline {
    display: inline-block;
}

.ai-code-snippet.inline.white button {
    background: var(--white);
}

.ai-code-snippet.inline code {
    padding: 0 0.5rem;
}

.ai-code-snippet.inline button {
    border: 1px solid #0000;
    border-radius: 4px;
    color: var(--gray-100);
    cursor: pointer;
    display: inline;
    padding: 0.25rem;
    position: relative;
    text-align: left;
}

.ai-code-snippet.inline button:hover {
    background-color: var(--gray-hover-2);
}

.ai-code-snippet.inline button:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: 2px;
}

.ai-code-snippet.multi {
    padding: 1rem;
}

.ai-code-snippet.multi .code-container {
    max-height: 15rem;
    min-height: 3rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.ai-code-snippet pre {
    margin: 0;
}

.ai-code-snippet button {
    width: auto;
    text-align: center;
}

.ai-code-snippet.single {
    align-items: center;
    justify-content: space-between;
}

.ai-code-snippet.single .code-container {
    padding: 0 1rem;
}

.ai-code {
    padding: 2px 4px;
    font-family: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
    font-size: 0.875rem;
    background-color: var(--gray-10);
    color: var(--cyan-60);
    border: 1px solid #d5d9e0;
}

/* chat bubbles */

.ai-chat-bubble-container {
    display: flex;
}

.ai-chat-bubble-container.user {
    flex-direction: row-reverse;
}

.ai-chat-bubble-container.bot {
    flex-direction: row;
}

.ai-chat-bubble.user {
    color: white;
    background: var(--blue-70);
    padding: 1rem;
    position: relative;
    margin-right: 1rem;
    margin-left: 20%;
    margin-bottom: 1rem;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-chat-bubble.user::before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 10px;
    bottom: -20px;
    border: 16px solid;
    border-color: var(--blue-70) var(--blue-70) transparent transparent;
}

.ai-chat-bubble.bot {
    color: black;
    background: var(--blue-10);
    padding: 1rem;
    position: relative;
    margin-left: 1rem;
    margin-right: 20%;
    margin-bottom: 1rem;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-chat-bubble.bot::before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 10px;
    right: auto;
    bottom: -20px;
    border: 16px solid;
    border-color: var(--blue-10) transparent transparent var(--blue-10);
}

/* chat bubbles */

.ai-code.white {
    background-color: var(--white);
}


/* Borders */

.ai-border {
    border: 1px solid var(--gray-70);
}

.ai-border-top {
    border-top: 1px solid var(--gray-20);
}

.ai-border-right {
    border-right: 1px solid var(--gray-20);
}

.ai-border-bottom {
    border-bottom: 1px solid var(--gray-70);
}

.ai-border-left {
    border-left: 1px solid var(--gray-20);
}

.ai-border-2 {
    border-width: 2px;
}

.ai-border-3 {
    border-width: 2px;
}

.ai-border-dashed {
    border-style: dashed;
}

.ai-border-gray-40 {
    border-color: var(--gray-40);
}

.ai-border-gray-10 {
    border-color: var(--gray-10);
}

.ai-border-gray-20 {
    border-color: var(--gray-20);
}

.ai-border-gray-30 {
    border-color: var(--gray-30);
}

.ai-border-gray-40 {
    border-color: var(--gray-40);
}

.ai-border-gray-50 {
    border-color: var(--gray-50);
}

.ai-border-gray-60 {
    border-color: var(--gray-60);
}

.ai-border-gray-70 {
    border-color: var(--gray-70);
}

.ai-border-gray-80 {
    border-color: var(--gray-80);
}

.ai-border-gray-90 {
    border-color: var(--gray-90);
}

.ai-border-gray-100 {
    border-color: var(--gray-100);
}

.ai-border-blue-60 {
    border-color: var(--blue-60);
}

.ai-border-red {
    border-color: var(--red-60);
    border-width: 2px;
}

.ai-border-round-xsmall {
    border-radius: 2px;
}

.ai-border-round-small {
    border-radius: 4px;
}

.ai-border-round-medium {
    border-radius: 6px;
}

.ai-border-round {
    border-radius: 1rem;
}

.ai-border-round-large {
    border-radius: 1.5rem;
}

/* Margin */

.ai-margin-left {
    margin-left: 1rem;
}

.ai-margin-right {
    margin-right: 1rem;
}

.ai-margin-top {
    margin-top: 1rem;
}

.ai-margin-bottom {
    margin-bottom: 1rem;
}

.ai-margin-xxsmall {
    margin: 0.25rem;
}

.ai-margin-left-xxsmall {
    margin-left: 0.125rem;
}



.ai-margin-right-xxsmall {
    margin-right: 0.125rem;
}

.ai-margin-left-xxxsmall {
    margin-left: 0.0625rem;
}

.ai-margin-right-xxxsmall {
    margin-right: 0.0625rem;
}

.ai-margin-top-xxsmall {
    margin-top: 0.125rem;
}

.ai-margin-bottom-xxsmall {
    margin-bottom: 0.125rem;
}

.ai-margin-xsmall {
    margin: 0.25rem;
}

.ai-margin-left-xsmall {
    margin-left: 0.25rem;
}

.ai-margin-right-xsmall {
    margin-right: 0.25rem;
}

.ai-margin-top-xsmall {
    margin-top: 0.25rem;
}

.ai-margin-bottom-xsmall {
    margin-bottom: 0.25rem;
}

.ai-margin-small {
    margin: 0.5rem;
}

.ai-margin-left-small {
    margin-left: 0.5rem;
}

.ai-margin-right-small {
    margin-right: 0.5rem;
}

.ai-margin-top-small {
    margin-top: 0.5rem;
}

.ai-margin-bottom-small {
    margin-bottom: 0.5rem;
}

.ai-margin-medium {
    margin: 1.5rem;
}

.ai-margin-left-medium {
    margin-left: 1.5rem;
}

.ai-margin-right-medium {
    margin-right: 1.5rem;
}

.ai-margin-top-medium {
    margin-top: 1.5rem;
}

.ai-margin-bottom-medium {
    margin-bottom: 1.5rem;
}

.ai-margin-large {
    margin: 2rem;
}

.ai-margin-left-large {
    margin-left: 2rem;
}

.ai-margin-right-large {
    margin-right: 2rem;
}

.ai-margin-top-large {
    margin-top: 2rem;
}

.ai-margin-bottom-large {
    margin-bottom: 2rem;
}

.ai-margin-xlarge {
    margin: 2.5rem;
}

.ai-margin-left-xlarge {
    margin-left: 2.5rem;
}

.ai-margin-right-xlarge {
    margin-right: 2.5rem;
}

.ai-margin-top-xlarge {
    margin-top: 2.5rem;
}

.ai-margin-bottom-xlarge {
    margin-bottom: 2.5rem;
}

.ai-margin-xxlarge {
    margin: 3rem;
}

.ai-margin-left-xxlarge {
    margin-left: 3rem;
}

.ai-margin-right-xxlarge {
    margin-right: 3rem;
}

.ai-margin-top-xxlarge {
    margin-top: 3rem;
}

.ai-margin-bottom-xxlarge {
    margin-bottom: 3rem;
}

.ai-left {
    float: left !important;
}

.ai-right {
    float: right !important;
}

.ai-center {
    text-align: center !important;
}

.ai-quarter {
    width: 24.9999%;
}

.ai-third {
    width: 33.3333%;
}

.ai-half {
    width: 49.9999%;
}

.ai-twothird {
    width: 66.6666%;
}

.ai-threequarters {
    width: 74.9999%;
}

/* MultiSelect Dropdown */

.ai-multiselect button {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    display: inline-flex;
    font-family: inherit;
    font-size: 100%;
    height: calc(100% + 1px);
    margin: 0;
    outline: none;
    overflow: hidden;
    padding: 0 3rem 0 1rem;
    position: relative;
    text-align: start;
    text-overflow: ellipsis;
    vertical-align: baseline;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;
}


/* MultiSelect Dropdown */

/* Sidebar */

.ai-sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    color: var(--gray-70);
    border-right: 1px solid var(--gray-20);
    min-width: 18rem;

}

.ai-sidebar.gray-10 {
    background-color: var(--gray-10);
    color: var(--gray-100);
}

/* Sidebar */

/* Modal */

.ai-modal-container {
    align-items: center;
    background-color: hsla(0, 0%, 9%, 0.5);
    content: "";
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    visibility: inherit;
    width: 100vw;
    z-index: 9999;
}

.ai-modal {
    display: flex;
    flex-direction: column;
    z-index: 9999;
    outline: 3px solid transparent;
    background-color: var(--gray-10);
    max-height: 90%;
    width: 50%;
    animation: animatetop 0.25s;
}

.ai-modal .header {
    display: flex;
}

.ai-modal .body {
    padding: 0.5rem 1rem 2.5rem 1rem;
}

.ai-modal .footer {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.ai-modal .footer button {
    width: auto;
    flex: 0 1 50%;
    height: 4rem;
    text-align: start;
    font-size: 0.875rem;
    padding-bottom: 2rem;
    padding-top: 0.875rem;
}

.ai-modal.white {
    background-color: var(--white);
}

/* Modal */

/* LOADING */

.ai-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--ai-overlay-2);
    -webkit-transition: background-color 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
    transition: background-color 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
    z-index: 8000;
}

.ai-loading {
    display: flex;
    margin: 15%;
    align-items: center;
    justify-content: center;
}

.ai-loading.row {
    flex-direction: row;
}

.ai-loading.row-reverse {
    flex-direction: row-reverse;
}

.ai-loading.column {
    flex-direction: column;
}

.ai-loading.column-reverse {
    flex-direction: column-reverse;
}

.ai-loading.inline {
    margin: 0;
    justify-content: normal;
}

.ai-loading-container {
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 690ms;
    animation-duration: 690ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    width: 10.5rem;
    height: 10.5rem;
    /* margin: 15% auto; */
}

.ai-loading-overlay .ai-loading-container {
    margin: 15% auto;
}

.ai-loading.medium .ai-loading-container {
    height: 5.5rem;
    width: 5.5rem;
}

.ai-loading.small .ai-loading-container {
    height: 2.5rem;
    width: 2.5rem;
}

.ai-loading-container>svg {
    fill: transparent;
    -webkit-transition: fill 250ms;
    transition: fill 250ms;
    overflow: hidden;
}

.ai-loading-container>svg>circle {
    -webkit-animation-name: init-stroke;
    animation-name: init-stroke;
    -webkit-animation-duration: 10ms;
    animation-duration: 10ms;
    -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
    animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);

    stroke-width: 8;
    stroke-linecap: butt;
    stroke-dasharray: 240;

    stroke: var(--blue-60);
    stroke-dashoffset: 40;
}

.ai-loading.medium .ai-loading-container>svg>circle {
    stroke-width: 10;
}

.ai-loading.small .ai-loading-container>svg>circle {
    stroke-width: 14;
}

.ai-loading .ai-loading-text {
    font-size: 2.5rem;
}

.ai-loading.medium .ai-loading-text {
    font-size: 1rem;
}

.ai-loading.small .ai-loading-text {
    font-size: 0.875rem;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes init-stroke {
    0% {
        stroke-dashoffset: 240;
    }

    100% {
        stroke-dashoffset: 40;
    }
}

.ai-no-select {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* COLORS */

.ai-transparent {
    background-color: #0000;
}

.ai-blue-10,
.ai-hover-blue-10:hover {
    background-color: var(--blue-10);
    color: var(--black);
}

.ai-blue-20,
.ai-hover-blue-20:hover {
    background-color: var(--blue-20);
    color: var(--black);
}

.ai-blue-30,
.ai-hover-blue-30:hover {
    background-color: var(--blue-30);
    color: var(--black);
}

.ai-blue-40,
.ai-hover-blue-40:hover {
    background-color: var(--blue-40);
    color: var(--black);
}

.ai-blue-50,
.ai-hover-blue-50:hover {
    background-color: var(--blue-50);
    color: var(--black);
}

.ai-blue-60,
.ai-hover-blue-60:hover {
    background-color: var(--blue-60);
    color: white;
}

.ai-blue-70,
.ai-hover-blue-70:hover {
    background-color: var(--blue-70);
    color: white;
}

.ai-blue-80,
.ai-hover-blue-80:hover {
    background-color: var(--blue-80);
    color: white;
}

.ai-blue-90,
.ai-hover-blue-90:hover {
    background-color: var(--blue-90);
    color: white;
}

.ai-blue-100,
.ai-hover-blue-100:hover {
    background-color: var(--blue-100);
    color: white;
}

.ai-teal-10,
.ai-hover-teal-10:hover {
    background-color: var(--teal-10);
    color: var(--black);
}

.ai-teal-20,
.ai-hover-teal-20:hover {
    background-color: var(--teal-20);
    color: var(--black);
}

.ai-teal-30,
.ai-hover-teal-30:hover {
    background-color: var(--teal-30);
    color: var(--black);
}

.ai-teal-40,
.ai-hover-teal-40:hover {
    background-color: var(--teal-40);
    color: var(--black);
}

.ai-teal-50,
.ai-hover-teal-50:hover {
    background-color: var(--teal-50);
    color: var(--black);
}

.ai-teal-60,
.ai-hover-teal-60:hover {
    background-color: var(--teal-60);
    color: white;
}

.ai-teal-70,
.ai-hover-teal-70:hover {
    background-color: var(--teal-70);
    color: white;
}

.ai-teal-80,
.ai-hover-teal-80:hover {
    background-color: var(--teal-80);
    color: white;
}

.ai-teal-90,
.ai-hover-teal-90:hover {
    background-color: var(--teal-90);
    color: white;
}

.ai-teal-100,
.ai-hover-teal-100:hover {
    background-color: var(--teal-100);
    color: white;
}

.ai-cyan-10,
.ai-hover-cyan-10:hover {
    background-color: var(--cyan-10);
    color: var(--black);
}

.ai-cyan-20,
.ai-hover-cyan-20:hover {
    background-color: var(--cyan-20);
    color: var(--black);
}

.ai-cyan-30,
.ai-hover-cyan-30:hover {
    background-color: var(--cyan-30);
    color: var(--black);
}

.ai-cyan-40,
.ai-hover-cyan-40:hover {
    background-color: var(--cyan-40);
    color: var(--black);
}

.ai-cyan-50,
.ai-hover-cyan-50:hover {
    background-color: var(--cyan-50);
    color: var(--black);
}

.ai-cyan-60,
.ai-hover-cyan-60:hover {
    background-color: var(--cyan-60);
    color: white;
}

.ai-cyan-70,
.ai-hover-cyan-70:hover {
    background-color: var(--cyan-70);
    color: white;
}

.ai-cyan-80,
.ai-hover-cyan-80:hover {
    background-color: var(--cyan-80);
    color: white;
}

.ai-cyan-90,
.ai-hover-cyan-90:hover {
    background-color: var(--cyan-90);
    color: white;
}

.ai-cyan-100,
.ai-hover-cyan-100:hover {
    background-color: var(--cyan-100);
    color: white;
}

.ai-purple-10,
.ai-hover-purple-10:hover {
    background-color: var(--purple-10);
    color: var(--black);
}

.ai-purple-20,
.ai-hover-purple-20:hover {
    background-color: var(--purple-20);
    color: var(--black);
}

.ai-purple-30,
.ai-hover-purple-30:hover {
    background-color: var(--purple-30);
    color: var(--black);
}

.ai-purple-40,
.ai-hover-purple-40:hover {
    background-color: var(--purple-40);
    color: var(--black);
}

.ai-purple-50,
.ai-hover-purple-50:hover {
    background-color: var(--purple-50);
    color: var(--black);
}

.ai-purple-60,
.ai-hover-purple-60:hover {
    background-color: var(--purple-60);
    color: white;
}

.ai-purple-70,
.ai-hover-purple-70:hover {
    background-color: var(--purple-70);
    color: white;
}

.ai-purple-80,
.ai-hover-purple-80:hover {
    background-color: var(--purple-80);
    color: white;
}

.ai-purple-90,
.ai-hover-purple-90:hover {
    background-color: var(--purple-90);
    color: white;
}

.ai-purple-100,
.ai-hover-purple-100:hover {
    background-color: var(--purple-100);
    color: white;
}

.ai-gray-5,
.ai-hover-gray-5:hover {
    background-color: var(--gray-5);
    color: var(--black);
}

.ai-gray-10,
.ai-hover-gray-10:hover {
    background-color: var(--gray-10);
    color: var(--black);
}

.ai-gray-20,
.ai-hover-gray-20:hover {
    background-color: var(--gray-20);
    color: var(--black);
}

.ai-gray-30,
.ai-hover-gray-30:hover {
    background-color: var(--gray-30);
    color: var(--black);
}

.ai-gray-40,
.ai-hover-gray-40:hover {
    background-color: var(--gray-40);
    color: var(--black);
}

.ai-gray-50,
.ai-hover-gray-50:hover {
    background-color: var(--gray-50);
    color: var(--black);
}

.ai-gray-60,
.ai-hover-gray-60:hover {
    background-color: var(--gray-60);
    color: var(--white);
}

.ai-gray-70,
.ai-hover-gray-70:hover {
    background-color: var(--gray-70);
    color: var(--white);
}

.ai-gray-80,
.ai-hover-gray-80:hover {
    background-color: var(--gray-80);
    color: var(--white);
}

.ai-gray-90,
.ai-hover-gray-90:hover {
    background-color: var(--gray-90);
    color: var(--white);
}

.ai-gray-100,
.ai-hover-gray-100:hover {
    background-color: var(--gray-100);
    color: var(--white);
}

.ai-cool-gray-100,
.ai-hover-cool-gray-100:hover {
    background-color: var(--cool-gray-100);
    color: var(--white);
}

.ai-cool-gray-1,
.ai-hover-cool-gray-1:hover {
    background-color: var(--cool-gray-1);
    color: var(--black);
}

.ai-cool-gray-10,
.ai-hover-cool-gray-10:hover {
    background-color: var(--cool-gray-10);
    color: var(--black);
}

.ai-cool-gray-20,
.ai-hover-cool-gray-20:hover {
    background-color: var(--cool-gray-20);
    color: var(--black);
}

.ai-red-60,
.ai-hover-red-60:hover {
    background-color: var(--red-60);
    color: var(--white);
}

.ai-green-60,
.ai-hover-green-60:hover {
    background-color: var(--green-60);
    color: var(--white);
}

.ai-black,
.ai-hover-black:hover {
    background-color: var(--black);
    color: var(--white);
}

.ai-white,
.ai-hover-white:hover {
    background-color: var(--white);
    color: var(--black);
}

.ai-img-white {
    filter: invert(100%);
}

.ai-img-gray-10 {
    filter: var(--filter-img-gray-10);
}

.ai-img-gray-20 {
    filter: invert(98%) sepia(4%) saturate(1710%) hue-rotate(209deg) brightness(114%) contrast(76%) !important;
}

.ai-img-gray-30 {
    filter: invert(99%) sepia(0%) saturate(1449%) hue-rotate(163deg) brightness(84%) contrast(84%) !important;
}

.ai-img-gray-60 {
    filter: invert(47%) sepia(0%) saturate(1466%) hue-rotate(200deg) brightness(88%) contrast(76%) !important;
}

.ai-img-gray-70 {
    filter: invert(30%) sepia(2%) saturate(0%) hue-rotate(4deg) brightness(102%) contrast(91%) !important;
}

.ai-img-blue-70 {
    filter: invert(12%) sepia(82%) saturate(4966%) hue-rotate(221deg) brightness(102%) contrast(102%) !important;
}

.ai-img-green-60 {
    filter: invert(33%) sepia(85%) saturate(414%) hue-rotate(86deg) brightness(100%) contrast(95%);
}

.ai-img-red-60 {
    filter: invert(14%) sepia(65%) saturate(6956%) hue-rotate(351deg) brightness(91%) contrast(86%);
}

.ai-img-purple-60 {
    filter: invert(28%) sepia(86%) saturate(1973%) hue-rotate(248deg) brightness(94%) contrast(111%);
}

/* COLORS */

.ai-simple-pagination button {
    cursor: pointer;
}

.ai-simple-pagination a,
.ai-simple-pagination button {
    float: left;
    color: var(--gray-80);
    font-size: 1rem;
    line-height: 1rem;
    font-weight: normal;
    text-align: center;
    border: 1px solid var(--gray-30);
    min-width: 14px;
    padding: 8px 12px;
    margin: 0 5px 0 0;
    background: var(--gray-10);
}

.ai-simple-pagination.white a,
.ai-simple-pagination.white button {
    background: var(--white);
}

.ai-simple-pagination button.ellipse.clickable {
    background-color: transparent;
}

.ai-simple-pagination a:focus,
.ai-simple-pagination button:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}

.ai-simple-pagination a:hover,
.ai-simple-pagination li:not(.disabled):not(.active) button:not(.ellipse):hover {
    text-decoration: none;
    background: var(--gray-hover-1);
}

.ai-simple-pagination .current,
.ai-simple-pagination.white .current {
    background: var(--gray-60);
    color: var(--white);
    border-color: var(--gray-70);
    cursor: default;
}

.ai-simple-pagination .ellipse {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    cursor: default;
}

.ai-simple-pagination .ellipse input {
    margin-top: -6px;
    width: auto;
    height: 1.8rem;
}

.ai-simple-pagination .active {
    border-style: none !important;
}

.ai-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 0.125rem;
    background: var(--gray-20);
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    background: linear-gradient(to right, var(--gray-100) 0%, var(--gray-100) 50%, var(--gray-20) 50%, var(--gray-20) 100%);
    outline: 1px solid transparent;
}

.ai-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.ai-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--gray-100);
    cursor: pointer;
    outline: 1px solid transparent;
}

think {
  /* make it behave like a block-level preformatted element */
  display: block;
  /*white-space: pre;*/
  font-family: monospace;
  font-size: 1em;
  margin: 0;
  padding: 0;
  /*background-color: #f5f5f5;
  border: 1px solid #ccc;
  overflow: auto;*/
}

.ai-slider::-moz-range-thumb {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--gray-100);
    cursor: pointer;
    outline: 1px solid transparent;
}

.ai-digits-font {
    font-family: var(--digits-font-family);
}


/* Tag Toggle */
.ai-tag-toggle {
    opacity: 0;
    position: absolute;
    left: -9000px;
    top: -9000px;
}

.ai-tag-toggle + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.5em 1.2em;
    border-radius: 1.2em;
    background: none;
    color: var(--gray-100);
    font-size: 1rem;
    font-weight: 400;
    user-select: none;
    transition: background 0.2s, color 0.2s;
    border: 1px solid var(--gray-30);
    outline: 2px solid transparent;
    outline-offset: 2px;
    min-width: 2.5em;
}

.ai-tag-toggle:focus + label {
    outline: 2px solid var(--blue-60);
}

.ai-tag-toggle:checked + label {
    background: var(--blue-50); /* or your desired active color */
    color: var(--white);
}

.ai-tag-toggle:disabled + label,
.ai-tag-toggle:disabled + label:hover {
    background: var(--gray-10);
    color: #777;
    cursor: not-allowed;
    opacity: 0.7;
}

/*
.ai-tag-toggle + label:hover{
    background: var(--gray-30);
    color: black;
}*/


/* Size variants */
.ai-tag-toggle.small + label {
    font-size: 0.875rem;
    padding: 0.25em 0.9em;
    min-width: 2em;
}
.ai-tag-toggle.medium + label {
    font-size: 1.25rem;
    padding: 0.45em 1.5em;
    min-width: 3em;
}
.ai-tag-toggle.large + label {
    font-size: 1.5rem;
    padding: 0.6em 2em;
    min-width: 3.5em;
}







/***********************/






/* Toggle */

.ai-toggle {
    opacity: 0;
    position: absolute;
    left: -9000px;
    top: -9000px;
}



.ai-toggle+label {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    color: var(--gray-100);
    font-size: 1rem;
    user-select: none;
}

/* slider part */
.ai-toggle+label::before {
    --uiSwitchBorderRadius: 1.25rem;
    --uiSwitchSize: 3rem;
    width: var(--uiSwitchSize);
    height: calc((var(--uiSwitchSize) / 2));
    border-radius: var(--uiSwitchBorderRadius);
    content: "";
    background-color: var(--gray-50);
    margin-right: 0.275rem;
    transition: background-color 200ms ease-in-out;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

/* toggle part */
.ai-toggle+label::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: "";
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--white);
    box-sizing: border-box;
    border-radius: 1.25rem;
    transition: opacity 0.2s ease-out 0.1s, transform 0.2s ease-out 0.1s;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-toggle:focus+label::before {
    /* For accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-60);
    outline-offset: 2px;
}

.ai-toggle:checked+label::before {
    background-color: var(--green-60);
}

.ai-toggle:checked+label::after {
    content: "";
    transform: translateX(140%);
    background-color: var(--white);
}

/* disabled */
.ai-toggle:disabled {
    cursor: not-allowed;
}

.ai-toggle:disabled+label {
    color: #777;
}

.ai-toggle:disabled+label::before {
    background-color: var(--gray-10);
}

.ai-toggle:disabled+label::after {
    background-color: var(--gray-30);
}

/* small */
.ai-toggle.small+label::before {
    --uiSwitchSize: 2.5rem;
}

.ai-toggle.small+label::after {
    width: 0.875rem;
    height: 0.875rem;
}

.ai-toggle.small:checked+label::after {
    transform: translateX(120%);
}

.ai-toggle.small+label {
    font-size: 0.875rem;
}

/* medium */
.ai-toggle.medium+label::before {
    --uiSwitchSize: 3.5rem;
}

.ai-toggle.medium+label::after {
    width: 1.25rem;
    height: 1.25rem;
}

.ai-toggle.medium:checked+label::after {
    transform: translateX(130%);
}

.ai-toggle.medium+label {
    font-size: 1.25rem;
}

/* large */
.ai-toggle.large+label::before {
    --uiSwitchSize: 4.5rem;
}

.ai-toggle.large+label::after {
    width: 1.55rem;
    height: 1.55rem;
}

.ai-toggle.large:checked+label::after {
    transform: translateX(150%);
}

.ai-toggle.large+label {
    font-size: 1.5rem;
}

.ai-widget {
    background-color: white;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.ai-widget.gray-10 {
    background-color: var(--gray-10);
}

.ai-hover-gray:hover {
    background-color: var(--gray-hover-1);
}

.ai-empty-state h3,
.ai-empty-state h4 {
    color: var(--gray-90);
}

.ai-empty-state>div {
    color: var(--gray-70);
}

.ai-doc-img {
    box-shadow: 9px -10px 20px 4px rgb(0 0 0 / 10%);
    margin-top: 2rem;
}

.w3-modal-content,
.w3-dropdown-content,
.ai-account {
    outline: 2px solid transparent;
    outline-offset: -2px;
    cursor: pointer;
}

.ai-line-height-medium p {
    line-height: 2rem;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--gray-10) inset !important;
    -webkit-text-fill-color: black;
}


@media (prefers-contrast) {
    .ai-tab.active {
        outline-style: dotted;
    }

    .ai-simple-pagination .current {
        border-style: dashed;
    }

    img {
        filter: invert(0) !important;
    }
}

@media (prefers-contrast) and (prefers-color-scheme: light) {
    img {
        filter: invert(0) !important;
    }
}

@media (prefers-contrast) and (prefers-color-scheme: dark) {
    img {
        filter: invert(1) !important;
    }
}

.ai-hidden {
    display: none !important;
}

.ai-not-visible {
    visibility: hidden !important;
}

@keyframes animatetop {
    0% {
        top: -1000px;
        opacity: 0;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}


.accordion {
    background-color: white;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: 1px solid #cecece;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active,
.accordion:hover {
    background-color: #eeeeee;
}

.accordion:after {
    content: '\2193';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

/* .active:after {
    content: "\2191";
  }
   */
.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
#documents-list{
    list-style-type: none; /* no bullets */
  margin: 0;             /* remove default indent */
  padding: 0;            /* remove default indent */
}