:root {
    --primary: #16191a;
    --pageHeader: #16191a;
    --codePrimary: #1a1e21;
    --secondary: #1a1e21;
    --darker: #25272b;
    --backGround: #121212;
    --accent: #1b7eff;
    --hover: #2b3236;
    --textColor: #e3e3e3;
    --dimText: #a6a6a6;
    --noteText: #767676;
    --borderColor: #3a3d41;
    --textHilight: #1a4a7d;
    --blurColor: #16191a6c;
    --boxShadow: rgba(0, 0, 0, 0.2);
    --href-color: #3aadff;
    --checkardPatternA: #999999;
    --checkardPatternB: #676767;
}

:root {
    --font-xxSmall: 0.7rem;
    /* 11px */
    --font-xSmall: 0.75rem;
    /* 12px */
    --font-small: 0.80rem;
    /* 13px */
    --font-med: 0.9rem;
    /* 14px */
    --font-large: 0.93rem;
    /* 15px */
    --font-xlarge: 0.98rem;

    --font-xxlarge: 1.1rem;
    /* 16px */
    --codeFontWeight: 400;
}

:root {
    --token-default-fg: #9CDCFE;
    --token-default-bg: #1E1E1E;
    --token-invalid-fg: #f44747;
    --token-variable-fg: #74B0DF;
    --token-variable_predefined-fg: #4864AA;
    --token-variable_parameter-fg: #dcdcaa;
    --token-constant-fg: #569CD6;
    --token-comment-fg: #608B4E;
    --token-number-fg: #B5CEA8;
    --token-number_hex-fg: #5BB498;
    --token-regexp-fg: #B46695;
    --token-annotation-fg: #cc6666;
    --token-type-fg: #dcdcaa;
    --token-delimiter-fg: #DCDCDC;
    --token-delimiter_html-fg: #808080;
    --token-delimiter_xml-fg: #808080;
    --token-tag_html-fg: #569CD6;
    --token-tag-fg: #d7ba7d;
    --token-tag_id_pug-fg: #4F76AC;
    --token-tag_class_pug-fg: #4F76AC;
    --token-meta_scss-fg: #A79873;
    --token-meta_tag-fg: #CE9178;
    --token-metatag-fg: #DD6A6F;
    --token-metatag_content_html-fg: #9CDCFE;
    --token-metatag_html-fg: #569CD6;
    --token-metatag_xml-fg: #569CD6;
    --token-key-fg: #dcdcaa;
    --token-string_key_json-fg: #9CDCFE;
    --token-string_value_json-fg: #CE9178;
    --token-attribute_name-fg: #9CDCFE;
    --token-attribute_value-fg: #CE9178;
    --token-attribute_value_number_css-fg: #B5CEA8;
    --token-attribute_value_unit_css-fg: #B5CEA8;
    --token-attribute_value_hex_css-fg: #CE9178;
    --token-string-fg: #CE9178;
    --token-string_sql-fg: #FF0000;
    --token-keyword-fg: #569CD6;
    --token-keyword_flow-fg: #C586C0;
    --token-keyword_json-fg: #CE9178;
    --token-keyword_flow_scss-fg: #569CD6;
    --token-operator_scss-fg: #909090;
    --token-operator_sql-fg: #778899;
    --token-operator_swift-fg: #909090;
    --token-predefined_sql-fg: #FF00FF;
    --token-custom_function-fg: #FF2FD1;
    --token-keyword_function-fg: #FFD515;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 30px;
    min-width: 30px;
    min-height: 30px;
    max-height: 30px;
    margin-right: -5px;
    transition: transform 0.3s;
    margin-left: 5px;
    margin-top: 0px;
    border-radius: 50%;
    padding: 0px;
    background: transparent;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    margin-right: 10px;
}

.logo {
    width: 71%;
    transition: transform 0.3s ease;
    margin-left: -1px;
}

a:visited {
    color: #ab68ff;
}

:root {
    --font-family-inter: 'Inter', sans-serif;
    --font-family-ibm-plex-mono: 'IBM Plex Mono', monospace;
    --font-family-Sans: 'DM Sans', sans-serif;
    --font-family-quickSand: "Quicksand", sans-serif;
    --font-family-nunito: "Nunito Sans", sans-serif;
    --font-family-IBM: "IBM Plex Sans", sans-serif;
    --font-family-editor: "Noto Sans Mono", monospace;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111111;
    /* semi-transparent backdrop */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999999999999999999999999999999999999999999999999999999999;

}

.loading-container {
    width: 10%;
    min-width: 200px;
    /* Adjust width as per your requirement */
    height: 5px;
    background-color: #FFFFFF;
    /* border: 2px solid #1b7eff; */
    border-radius: 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.loading-text {
    font-family: var(--font-family-IBM);
    margin-bottom: 20px;
    margin-top: 30px;
}

.loading-bar {
    height: 100%;
    width: 0;
    background-color: #1b7eff;
    transition: width 2s;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: width 0.3s ease-out;
    margin-left: -2px;
}

.loading-key {
    display: none;
    color: #1b7eff;
    margin-left: -20px;
    margin-right: -20px;
    font-size: 70px;
    margin-top: -14px;
    position: relative;
}

.loading-key::after {
    content: '';
    position: absolute;
    width: 20px;
    /* Adjust the size as needed */
    height: 35px;
    /* Adjust the size as needed */
    background-color: #FFFFFF;
    right: -10px;
    /* Adjust positioning as needed */
    top: 25px;
    /* Adjust positioning as needed */

}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background-color: var(--primary);
    color: var(--textColor);
    font-size: var(--font-med);
    font-family: var(--font-family-IBM);
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* Hide default checkbox */
.custom-checkbox {
    display: none;
    pointer-events: none;
}

.checkboxLabelCustom {
    background: transparent;
    color: transparent;
    width: 0px;
    margin-right: -8px;
}

/* Style the label */
.custom-checkbox+label {
    position: relative;
    padding-left: 0px;
    cursor: pointer;
    white-space: none;
    margin: 2px;

}

label a {
    margin-left: 5px;
}

.input-wrapper {
    white-space: none;
    display: flex;
    justify-content: flex-start;

}

/* Create custom checkbox */
.custom-checkbox+label::before {
    content: "\f111";
    font-family: 'NerdFontSymbols';
    position: relative;
    left: 0px;
    top: -3px;
    font-size: 0.9rem;
    border: none;
    background: var(--hover);
    text-align: center;
    color: var(--noteText);
    white-space: none;
    margin-right: 5px;
    border: 0px solid var(--hover);
    border-radius: 30px;
    padding-right: 12px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.2s;

}

.control-wrapper {
    margin-top: -2px;

}

.controls-container .control-wrapper span {
    color: var(--dimText);
}

.control-wrapper #gpt-model-select {
    margin-top: 2px;

}

.control-wrapper.gpt-model-wrapper {
    flex-direction: row;
    display: flex;
}

.custom-checkbox+label[for="context-checkbox"].checkboxLabelCustom {
    max-width: 10px;
    max-height: 10px;
    margin-right: -3px;
    top: 3px;

}

/* Change icon when checked */
.custom-checkbox:checked+label::before {
    content: "\f111";
    /* background: var(--noteText); */
    color: var(--accent);
    padding-right: 0px;
    padding-left: 12px;
    border: 0px solid var(--noteText);

}

::-webkit-scrollbar-track {
    background: var(--primary);
}

::-webkit-scrollbar-thumb {
    background: var(--hover);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hover);
}

::-webkit-scrollbar {
    width: auto;
    height: auto;
}

* {
    scrollbar-width: auto;
    scrollbar-color: var(--hover) var(--primary);
}

/* -------------------------------- Main Containers -------------------------------- */
#pageHeader {
    background-color: var(--pageHeader);
    color: var(--textColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 45px;
    width: 100%;
    border-bottom: 1px solid var(--borderColor);
}

#editButtonWrapper,
#fullscreenButtonWrapper {
    color: var(--textColor);
    z-index: 1000;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background-color: var(--hover);
    padding: 3px;
    padding-right: 15px;
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

#fullscreenButtonWrapper {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 0;
}

#editButtonWrapper {
    padding: 0px;
    background-color: transparent;
}

#pageContent {
    display: flex;
    flex-grow: 1;
    height: calc(100vh - 50px);
}

#toolbarHeader {
    padding: 5px 0px;
    padding-top: 5px;
    background-color: var(--secondary);

    padding-left: 0px;
    display: flex;

}

.toolbar-span {
    font-size: var(--font-small);

}

.toolbar-span::before {
    font-family: 'NerdFontSymbols';
    content: "\eb6d";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--textColor);
    margin-right: 4px;
    font-size: var(--font-large);
    position: relative;
    top: -1px;
}


#toolbar {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    background-color: var(--secondary);
    padding: 0px;
    overflow: none;
    height: 29px;
}

#toolbarbody {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hover) var(--primary);
    padding-top: 3px;
    padding-right: 5px;
    margin-left: 5px;
}

#toolbarbody.hidden {
    display: none;
    /* This will hide the element */
}

#toolbarbody.show {
    display: block;
}


#toolbarbody::-webkit-scrollbar {
    width: 8px;
}

.toolbar-button {
    margin-bottom: 2px;
}

.tool-button-container {
    display: flex;
    align-items: center;
    /* Center-align button and label vertically */
    margin-bottom: 2px;
    /* Space between each button-container */
    cursor: pointer;
    padding: 2px;
    height: 21px;
    padding-left: -3px;
    background-color: var(--secondary);
    color: var(--dimText);

}

.tool-button-container:hover {
    background-color: var(--nav-hover);
    border-radius: 8px;
    color: var(--textColor);
}

.tool-button-container>.file-button {
    margin: 0px !important;
    padding: 0px !important;
    position: relative !important;
    top: 0px !important;
    background-color: transparent !important;
    transition: all 0.0s !important;

}

.tool-button-container:last-child {
    margin-bottom: 5px;
}

.tool-button-container:hover>.file-button {
    border-radius: 30px;
    background-color: var(--darker);
    color: var(--textColor);
}

.tool-button-container>.file-button::before {
    margin: 0px !important;
    padding: 0px !important;
    position: relative !important;
    top: -1px !important;
    font-size: var(--font-small) !important;
    transition: all 0.0s !important;
}

.button-label {

    margin-left: 7px;
    font-size: var(--font-med);
    /* Space between button and label */
}


#mainContent {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    overflow: hidden;
}

#editorsWrapper {
    display: flex;
    flex-grow: 1;
    background-color: var(--primary);
    /* padding-right: 3px; */
}

#editorsWrapper {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    background-color: var(--primary);
}

#editorContainer,
#editorContainer2,
#editorContainer3,
#editorContainer4 {
    flex-grow: 1;
    position: relative;
    /*overflow: auto;*/
    margin-left: -1px;
}

#container4,
#container3 {
    border-top: 1px solid var(--borderColor);
}

.container {
    /* border-radius: 6px; */
    /* margin: 2px; */
    margin-right: 0px;
    margin-bottom: 0px;
    /* border: 1px solid var(--borderColor); */
}

#container,
#container2 {
    margin-top: 0px !important;
    /* margin-bottom: 2px!important; */
}

#container3,
#container4 {
    /* margin-top: 2px !important; */
}

#container {}

.iframe-overlay,
.image-overlay {
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% + 22px);
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    background-color: var(--editor-background);
    color: var(--editor-foreground);
    z-index: 2;
    padding: 0px;

}

.image-overlay img {
    width: 100%;
    /* Ensure image fills the container */
    height: 100%;
    object-fit: contain;
    /* Scale the image to fit the container */
    object-position: center;
    /* Center the image */
}

.image-overlay button {
    position: absolute;
    top: -24px;
    right: -2px;
    height: 23px;
    background-color: var(--secondary);
    color: var(--textColor);
    border: 1px solid var(--secondary);
    border-left: 3px solid var(--hover);
    border-top: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    border-radius: 0px 0px 0px 0px;
    padding: 0px 10px;
    padding-right: 10px;
    padding-right: 5%;
    ;
    cursor: pointer;
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 1;
    width: 220px;
    text-align: left;
}

.image-overlay button.copy-url-button {
    right: 218px;
}

.image-overlay button::before {
    font-family: 'NerdFontSymbols';
    content: "\f02eb";
    position: relative;
    top: -1px;
    font-size: var(--font-xSmall);
    margin-right: 5px;
    color: var(--accent);
    transition: all 0.2s;
}

.image-overlay button.copy-url-button::before {
    content: "\f018f";
}

.image-overlay button:hover::before {
    color: white;
}

.image-overlay button:hover {
    filter: brightness(1.0);
    background-color: var(--accent);
    color: var(--backGround);
    opacity: 1;
}

.image-overlay img {
    /* border: 1px solid var(--primary); */
}

.iframe-overlay {
    top: 38px;
    left: 0px;
    width: calc(100% - 0px);
    border-radius: 0px;

}

.image-overlay {
    position: absolute;
    top: 24px;
    left: 0px;
    /* border-top: 1px solid white;
    border-bottom: 1px solid white; */
    height: calc(100% - 1px);
}

.image-overlay img {
    max-width: 100%;
    max-height: 100%;
}

.iframe-overlay-message,
.image-overlay-message {
    margin: 20%;
    max-width: 400px;
    position: relative;
}

.iframe-overlay-message::before,
.image-overlay-message::before {
    font-family: 'NerdFontSymbols';
    content: "\f421";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: #cbc93d;
    margin-right: 4px;
    font-size: var(--font-large);
    position: absolute;
    top: -5px;
    left: -28px;
}

.iframe-overlay-message::before {
    font-size: 20px;
    content: "\f26c";
    top: -7px;
    left: -33px;
    color: #519aba;
}

.audio-player {
    width: 80%;
    max-width: 350px;
    min-width: 190px;
    background-color: var(--hover);
    border: 1px solid var(--borderColor);
    border-radius: 50px;
    overflow: hidden;
    margin: 5px;
}

/* Style the audio controls (limited support) */
audio::-webkit-media-controls-panel {
    background-color: var(--textColor);
    color: #333;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline {
    /* Your styling here */
}

/* Mozilla Firefox */
audio::-moz-focus-inner,
audio::-moz-focus-outer {
    border: 0;
}

.editor-instance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 24px;
    display: none;

}

.my-error-decoration {
    background-color: #f8524933;
    /* border: 1px solid#f85249be; */

    color: #f85249;
    border-radius: 4px;
}

.my-error-decoration::before {
    /* font-family: 'NerdFontSymbols';
    content: "\f421";
    background-color: transparent;
    padding: 0px;
    border-radius: 5px;
    color: #f85249;


    font-size: var(--font-small);
    position: relative;
    top: 0px; */

}

/* monaco hover menus */
.monaco-hover-content {
    background-color: var(--codePrimary) !important;
}

/* div.hover-row.status-bar {
    background-color: var(--primary)!important;
} */
/* Hides the parameter hints widget */
/* .monaco-editor .monaco-editor-hover .parameter-hints-widget {
    display: none; 
} */

.monaco-menu {
    background-color: var(--darker);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border-radius: 11px !important;
    position: fixed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);


}

.monaco-menu .monaco-menu {
    margin-top: -35px;
    /* Moves the submenu up by 35px */
    border-radius: 11px !important;
}

.monaco-menu .action-item {
    height: 32px;
    padding-top: 2px;
    padding-bottom: -2px;
    position: relative;
}

.monaco-menu .action-item:last-child {
    margin-bottom: -4px;
}

.monaco-menu .action-item:first-child {
    margin-top: -4px;

}

.monaco-menu .action-item:hover {
    background-color: var(--codeHeader);
    color: var(--textColor);
}

/* this is the dividers */
.monaco-menu .disabled {
    max-height: 1px;
    background-color: var(--hover);
    cursor: default;
    pointer-events: none;
}

.monaco-menu .action-item span:nth-child(3) {
    color: var(--noteText);
}

.monaco-menu .action-item span:nth-child(2)::before {
    font-family: 'NerdFontSymbols';
    content: "";
    background-color: transparent;
    padding: 0px;
    border-radius: 5px;
    color: var(--dimText);
    margin-right: 10px;
    margin-left: -17px;
    font-size: var(--font-small);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.monaco-menu .action-item:hover span:nth-child(2)::before {
    color: var(--textColor);
}

/* .monaco-menu .action-item:nth-child(1) span:nth-child(2)::before{
    content: "\e612";
}
.monaco-menu .action-item:nth-child(2) span:nth-child(2)::before{
    content: "\e612";
}
.monaco-menu .action-item:nth-child(3) span:nth-child(2)::before{
    content: "\e612";
}
.monaco-menu .action-item:nth-child(4) span:nth-child(2)::before{
    content: "\e612";
}
.monaco-menu .action-item:nth-child(5) span:nth-child(2)::before{
    content: "\e612";
}
.monaco-menu .action-item:nth-child(6) span:nth-child(2)::before{
    content: "\e612";
}
.monaco-menu .action-item:nth-child(7) span:nth-child(2)::before{
    content: "\e612";
} */

.decorationsOverviewRuler {
    background-color: var(--editor-background);

}

.monaco-scrollable-element>.visible,
.visible.scrollbar.horizontal {
    /* background-color: var(--hover);  */
}

/* .slider{
    background-color: var(--editor-foreground)!important;
    opacity: 0.20;
}
.slider.active{

    background-color: var(--editor-foreground)!important;
    opacity: 0.35;
} */
.minimap-decorations-layer {
    /* border-right: 1px solid var(--secondary);*/
    /* border-left: 1px solid var(--editor-lineHighlightBorder); */
    border-right: 1px solid var(--editor-lineHighlightBorder);
}


.monaco-editor .find-widget {
    background-color: var(--editor-background) !important;
    border: 1px solid var(--editor-lineHighlightBorder) !important;
    border-top: none !important;
}

.monaco-inputbox>.ibwrapper {
    background-color: var(--editor-lineHighlightBorder) !important;
    border: none !important;
}

.monaco-inputbox {
    border: 1px solid var(--editor-lineHighlightBorder) !important;
    /* border-radius: 8px!important; */
    margin-left: 6px !important;
}

.monaco-editor .find-widget .button.left {
    margin-left: 2px !important;
    margin-top: 3px !important;
}

.monaco-editor .find-widget .button.toggle {
    height: 25px !important;
    border-radius: 5px !important;
}



.colorpicker-color-decoration {
    /* border: 1px solid var(--editor-foreground) !important;
    border-radius: 0px !important;
    width: 0.83em !important;
    height: 0.83em !important; */
}



.file-path-display {
    background-color: transparent;
    color: var(--editor-foreground);
    padding: 3px;
    /* Some padding for space */
    padding-bottom: 0px;
    padding-left: 10px;
    font-size: var(--font-xSmall);
    /* Appropriate font size */
    max-height: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    margin-left: 0px;
    /* border-bottom: 1px solid var(--editor-lineHighlightBorder); */

    filter: brightness(0.85);
    font-family: var(--font-family-IBM);
}

.editor-instance {
    background-color: var(--editor-background);
}

.editor-mode .file-path-display {
    min-height: 28px;
    border-bottom: 1px solid var(--darker);
    font-size: var(--font-xlarge);
    padding-top: 10px;
    margin-left: 0px;
}

.file-path-display:hover,
.file-path-display:hover::before {
    color: var(--href-color);
    filter: brightness(1);
}

.file-path-display:before {
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    color: var(--editor-foreground);
    background: transparent;
    cursor: pointer;
    font-size: 0.6rem;
    content: "\f018f";
    margin-right: 5px;
    position: relative;
    top: -1px;

}

/* .preview-markdown-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 23px;
    background-color: var(--accent);
    color: var(--backGround);
    border: 1px solid var(--hover);
    border-radius: 0px 0px 0px 8px;
    border: none;
    padding: 0px 20px;
    cursor: pointer;
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    transition: all 0.2s;
    white-space: nowrap;
    filter: brightness(0.9);
}

.preview-markdown-btn:hover {
    filter: brightness(1.0);
    background-color: var(--accent);
    color: var(--backGround);
} */
/* .preview-markdown-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px; 
    height: 40px;
    background-color: var(--secondary);
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 0px;
    cursor: pointer;
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    transition: all 0.2s;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    z-index: 1000;
opacity: 0.5;
} */
/* .preview-markdown-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 23px;
    background-color: var(--primary);
    color: var(--accent);
    border: none;
    border-left: 5px solid var(--accent);
    border-radius: 0px;
    padding: 0px 20px;
    cursor: pointer;
    font-family: var(--font-family-IBM);
    font-size: 22px;
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 0.8;
} */
.preview-markdown-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 23px;
    background-color: var(--secondary);
    color: var(--textColor);
    border: 1px solid var(--secondary);
    border-left: 3px solid var(--hover);
    border-top: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

    border-radius: 0px 0px 0px 0px;
    padding: 0px 10px;
    padding-right: 15%;
    cursor: pointer;
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 1;
    z-index: 1000;
}

.preview-markdown-btn::before {
    font-family: 'NerdFontSymbols';
    content: "\e609";
    position: relative;
    top: -1px;
    font-size: var(--font-xSmall);
    margin-right: 5px;
    color: var(--accent);
    transition: all 0.2s;
}

.preview-markdown-btn:hover::before {
    color: white;
}

.preview-markdown-btn:hover {
    filter: brightness(1.0);
    background-color: var(--accent);
    color: var(--backGround);
    opacity: 1;

}

.row {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 100px;
    /* border-radius: 4px; */
    overflow: hidden;
    background-color: var(--primary);
    min-height: 100px;
}

.gutter {
    border-radius: 50px;
    background-color: transparent;
    transition: background-color 0.0s;
    z-index: 1111;
}

.gutter:hover {
    background-color: var(--accent);
    transition: background-color 0.5s;
    /* Instant change when mouse leaves */
    /* min-width: 3px;
    min-height: 3px; */
}

.gutter:hover::before {
    transition: background-color 0.5s;
    background-color: var(--accent);
}

.gutter-horizontal {
    position: relative;
    /* Ensure the pseudo-element positions relative to this */
    cursor: col-resize;
    /* border-right: 4px solid var(--secondary); */
    background-color: var(--borderColor);

}

.gutter-horizontal::before {
    content: '';
    /* Required for the pseudo-element to be generated */
    position: absolute;
    right: -2px;
    /* Extend the clickable area to the right */
    top: 0;
    bottom: 0;
    width: 4px;
    /* Adjust the width of the clickable area as needed */
    pointer-events: auto;
    /* Make sure the pseudo-element is clickable */
    z-index: 11111111111111111111111111111110;
    /* Ensure it's above the sibling elements */
    transition: background-color 0.0s;
    background-color: transparent;
    border-radius: 8px;
}

.gutter-vertical {
    background-color: transparent;
    position: relative;
    /* Ensure the pseudo-element positions relative to this */
    cursor: row-resize;
    /* Use row-resize for vertical resizing */
}

.gutter-vertical::before {
    content: '';
    /* Required for the pseudo-element to be generated */
    position: absolute;
    top: -2px;
    /* Extend the clickable area upwards */
    left: 0;
    right: 0;
    height: 4px;
    /* Adjust the height of the clickable area as needed */
    pointer-events: auto;
    /* Make sure the pseudo-element is clickable */
    z-index: 11111111111111111111111111111110;
    /* Ensure it's above the sibling elements */
    transition: background-color 0.0s;
    background-color: transparent;
    border-radius: 8px;
}


#fileContainer .gutter-vertical {
    /* border-radius: 0px; */
    background-color: var(--hover);
    transition: background-color 0.0s;
    max-width: calc(100% - 20px);
    margin-left: 12px;
    margin-top: 5px;
    /* margin-bottom: 0px;
    border-bottom: 4px solid var(--secondary);
    border-top: 4px solid var(--secondary); */
}

#fileContainer .gutter-vertical:hover {
    background-color: var(--accent);
    transition: background-color 0.5s;
}

.gallery-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3px;
    background-color: var(--primary);
    border-bottom: 1px solid var(--secondary);
    height: 35px;
    font-family: var(--font-family-IBM);

}

.gallery-save-all,
.gallery-clear-all {
    font-family: var(--font-family-IBM);
    color: var(--textColor);
    background-color: var(--darker);
    border: 1px solid var(--darker);
    cursor: pointer;
    padding: 2px 8px;
    margin: 3px;
    border-radius: 8px;
    opacity: 1;
    font-size: var(--font-med);
    white-space: nowrap;
}

.gallery-save-all::before,
.gallery-clear-all::before {
    font-family: 'NerdFontSymbols';
    content: "\f014";
    background-color: transparent;
    margin-right: 5px;
    color: #ff575b;
    font-size: var(--font-xSmall);
    position: relative;
    top: -1px;
}

.gallery-save-all::before {
    color: #519aba;
    content: "\eaef";
}

.gallery-save-all:hover,
.gallery-clear-all:hover {
    background-color: var(--hover);
    color: var(--textColor);
    border: 1px solid var(--hover);

}

.gallery-text-container {

    overflow: auto;
    /* Enable scrolling for overflowing text */
    margin-left: 10px;
    /* Space between button and text */
    flex-grow: 1;
    /* Take available space */
    max-height: 100%;
    color: var(--dimText);
    max-width: 80%;
}

.gallery-instruction-text {
    margin: 0;
    font-size: var(--font-med);
    font-family: var(--font-family-IBM);
    color: var(--textColor);
}


.gallery-image-container {
    position: relative;
    display: inline-block;
    width: 180px;
    /* Set a fixed width */
    height: 180px;
    /* Set a fixed height */
    overflow: hidden;
    /* Ensures content doesn't overflow */
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: var(--secondary);
    transition: all 0.2s;
}

.gallery-image-container:hover {
    border: 1px solid var(--borderColor);
    background-color: var(--backGround);

}

.gallery-image-download-button,
.gallery-image-add-button,
.gallery-image-close-button {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--secondary);
    color: var(--dimText);
    border: none;
    cursor: pointer;
    padding: 2px 7px;
    padding-top: 0px;
    margin: 3px;
    border-radius: 50%;
    opacity: 0.2;
    font-size: var(--font-xSmall);
    transition: all 0.3s;
    width: 25px;
    height: 25px;
    /* border: 1px solid var(--dimText); */

}

.gallery-image-download-button,
.gallery-image-add-button {
    opacity: 0;
}

.gallery-image-close-button:hover {
    /* border: 1px solid var(--textColor); */
    background-color: #cc3633;
    color: white;
    opacity: 1;
}

.gallery-image-download-button:hover::before,
.gallery-image-add-button:hover::before,
.gallery-image-download-button:hover,
.gallery-image-add-button:hover {
    color: var(--textColor);
    opacity: 1;
}

.gallery-image-container:hover .gallery-image-download-button,
.gallery-image-container:hover .gallery-image-add-button,
.gallery-image-container:hover .gallery-image-close-button {
    opacity: 0.7;
}

.gallery-image-container:hover .gallery-image-download-button:hover,
.gallery-image-container:hover .gallery-image-add-button:hover,
.gallery-image-container:hover .gallery-image-close-button:hover {
    opacity: 1;
}

.gallery-image-download-button {
    left: 0px
}

.gallery-image-add-button {
    left: 32px
}

.gallery-image-download-button::before,
.gallery-image-add-button::before {
    font-family: 'NerdFontSymbols';
    content: "\f409";
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dimText);
    font-size: var(--font-med);
}

.gallery-image-add-button::before {
    content: "\f4d0";
}

.gallery-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 5px;
    border: 1px solid var(--secondary);
    height: 100%;
    width: 100%;
    width: calc(100% - 20px);
    height: calc(100% - 55px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--primary);
    padding: 10px;
    justify-content: start;
    /* Align grid items to the start horizontally */
    align-content: start;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.gallery-image-container:hover::after {
    content: "\f03cc";
    /* Your icon's Unicode, adjust if using a different library */
    font-family: 'NerdFontSymbols';
    /* Adjust based on the icon font you're using */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center the icon */
    font-size: 21px;
    /* Adjust size as needed */
    background-color: #696969;
    color: white;
    padding: 5px 7px;
    border-radius: 5px;
    z-index: 10;
    pointer-events: none;
    opacity: 0.4;
}

.gallery-container {
    padding: 1px;
    padding-right: 2px;
    padding-bottom: 2px;
}

.dependencies-container,
.github-container,
.notes-container,
.graph-container,
.gallery-container,
.color-picker-container,
.preview-container {
    height: 100%;
    width: 100%;
    background-color: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.notes-container {
    border-top: 1px solid var(--hover);
}

.github-iframe,
.notes-iframe,
.graph-iframe,
.color-picker-iframe,
.preview-iframe {
    width: 100%;
    height: 100%;
    border: none;

}

#resultFrame {
    max-height: calc(100% - 38px);
}

.preview-header {
    font-family: var(--font-family-IBM);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    padding-right: 10px;
    background-color: var(--primary);
    border-bottom: 1px solid var(--darker);
    height: 27px;
    max-height: 27px;
}

.preview-header button {
    cursor: pointer;
    padding: 2px;
    margin-right: 5px;
    background-color: transparent;
    color: var(--dimText);
    border: none;
    border-radius: 3px;
}

#toggle-server-button::before,

#toggle-live-button::before,
#gallery-save-button::before,
#preview-refresh-button:before,
#preview-add-button:before,
#preview-save-button::before,
#preview-forward-button::before,
#preview-back-button::before {
    font-family: 'NerdFontSymbols';
    content: "\f030d";
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--dimText);
    font-size: var(--font-xlarge);

    filter: brightness(0.8);

}

#toggle-live-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f26c";
    font-size: var(--font-large);
    left: -2px;
    position: relative;
}

#toggle-live-button.active::before {
    color: var(--accent);
}

#toggle-live-button {
    height: 23px;
    background-color: var(--darker);
    padding: 2px 4px;
    padding-left: 10px;
    border-radius: 0px 5px 5px 0px;
    margin-left: -5px;
    z-index: 2;
    margin-right: 10px;
}

#toggle-server-button::before {
    font-family: 'NerdFontSymbols';
    font-weight: 500;
    content: "\f059f";
    font-size: 17px;
    left: -2px;
    position: relative;
    top: -1px;
}

#toggle-server-button.active::before {
    color: var(--accent);
    filter: brightness(1);
}

#toggle-server-button {
    height: 23px;
    background-color: var(--darker);
    padding: 2px 4px;
    padding-left: 7px;
    border-radius: 0px;
    margin-left: -5px;
    z-index: 2;
    margin-right: 5px;
    border-right: 1px solid var(--primary);
}


#preview-forward-button::before:hover,
#preview-back-button::before:hover {
    color: var(--textColor) !important;

}


#preview-back-button::before {
    font-size: 20px;
    padding: 0px;
    margin-right: 5px;
    margin-left: 5px;
}

#preview-forward-button::before {
    content: "\f030d";
    transform: scaleX(-1);
    font-size: 20px;
    padding: 0px;
    margin-right: 5px;
}

#preview-refresh-button:before {
    content: "\f0453";
    font-size: 21px;
    padding: -2px;
    margin-right: 5px;
}

#gallery-save-button::before {
    content: "\f0976";
}

#preview-save-button::before {
    content: "\f409";
}

#preview-add-button::before {
    content: "\f4d0";
}

.preview-header button:hover::before,
.preview-header button:hover {
    filter: brightness(1.0) !important;

}

#toggle-live-button.active::before:hover {
    color: var(--accent) !important
}

.preview-header input {
    flex-grow: 1;
    height: 25px;
    margin-right: 5px;
    font-family: var(--font-family-IBM);
    flex-basis: 58%;
    padding: 5px;
    background-color: var(--darker);
    color: var(--textColor);
    border: 1px solid var(--secondary);
    border-radius: 0px;
    box-sizing: border-box;
    /* filter: brightness(0.7); */
}

.preview-header input::placeholder {
    color: var(--dimText);
}

.preview-header input:focus {
    border: 1px solid var(--accent);
    outline: none;
    box-shadow: none;
    filter: brightness(1);
    color: var(--dimText);
}

.color-picker-container {
    background-color: var(--primary);
}

.color-picker-iframe {
    border-top: 1px solid var(--hover);
    /* border-bottom: 1px solid var(--hover); */
    max-height: 500px;
}

.tab-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 30px;
    background-color: var(--darker);
    overflow: hidden;

}

.tab-header::before {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0px;
    right: 100px;
    height: 1px;
    pointer-events: auto;
    z-index: 1;
    transition: background-color 0.0s;
    background-color: var(--borderColor);
    border-radius: 8px;
    width: 100%;
}

.tab-header::-webkit-scrollbar {
    width: 8px;
}

.tab-header {
    top: 0px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--hover) var(--primary);
    background-color: var(--darker);
    white-space: nowrap;
    display: flex;
    overflow-x: auto;
    min-height: 30px;
    width: 100%;

}

.tab {

    display: flex;
    flex: 1;
    padding: 7px 30px 7px 10px;
    padding: 0px 5px;
    padding-right: 25px;
    cursor: pointer;
    border-bottom: none;
    background-color: var(--darker);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    min-width: 55px;
    max-width: 95px;
    transition: all 0.3s;
    font-size: var(--font-med);
    /* border-right:1px solid var(--hover); */
    border-top: 1px solid transparent;
    align-items: center;
    border-right: 1px solid var(--borderColor);

}

.tab:not(.active-tab) .tab-new-chat-button {
    display: none;
}

@keyframes iconPulse {
    0% {
        color: #519aba;
        filter: brightness(1.0);
        margin-right: 2px;
    }

    50% {
        color: var(--textColor);
        /* margin-right:0px; */
        font-size: var(--font-med);
    }

    100% {
        color: #519aba;
        filter: brightness(1.0);
        font-size: var(--font-med);
        margin-right: 2px;

    }
}


.tab.addedImage .tab-text::before {
    animation: iconPulse 0.5s ease-out 1;

}



.tab-new-chat-button::before {
    font-family: 'NerdFontSymbols';
    content: "\f014";
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--dimText);
    font-size: var(--font-small);
    margin-right: -2px;
    margin: 0px;
    padding: 1px 2px;
    padding-bottom: 1px;
    padding-top: 3px;
    padding-right: 3px;
    position: relative;
    top: -1px;
}

.tab-new-chat-button:hover::before {
    color: #cc3e44;
}

.tab-new-chat-button {
    border-radius: 5px;
    position: relative;
    top: -0px;
    ;
}

.tab-new-chat-button:hover {
    background-color: var(--darker);
}

.tab-close-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 3px;
    padding-top: 3px;
    margin-top: -1px;
    padding-bottom: 4px;
    background-color: transparent;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10px;
    width: 10px;
}

.tab-close-button::before {
    font-family: 'NerdFontSymbols';
    content: "\f467";
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--dimText);
    font-size: var(--font-small);
    font-size: var(--font-large);
    /* font-weight: bold; */
    position: relative;
    top: 0px;
}


.inactive-tab .tab-close-button::before {
    color: transparent;
}

.inactive-tab:hover .tab-close-button::before {
    color: var(--dimText);
}

.tab-close-button:hover::before {
    color: var(--textColor);

}

.tab-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 40px;
    padding-left: 5px;
    padding-right: 3px;
}

.tab-close-button:hover {
    background-color: var(--hover);
}

.active-tab {
    background-color: var(--primary);
    color: var(--textColor);
    border-top: 1px solid var(--accent);
    max-width: 120px;
    min-width: 85px;
    /* top:1px; */
    z-index: 2;
}

.active-tab .tab-close-button:hover {
    background-color: var(--darker);
    color: var(--textColor);
}

.inactive-tab {
    background-color: var(--darker);
    color: var(--dimText);
    border-top: 1px solid var(--darker);
}

.inactive-tab:hover {
    color: var(--textColor);
    /* border-right:1px solid var(--primary); */
    filter: brightness(1.15);

}

.tab-buttons-expand,
.tab-buttons-left,
.tab-buttons {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 2px;
    white-space: nowrap;
    background-color: var(--darker);
    /* border-left: 1px solid var(--hover); */
    position: relative;

}

.tab-buttons-expand::before,
.tab-buttons-left::before,
.tab-buttons::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0px;
    right: 100px;
    height: 1px;
    pointer-events: auto;
    z-index: 1;
    transition: background-color 0.0s;
    background-color: var(--borderColor);
    border-radius: 8px;
    width: 100%;
}

.tab-buttons-left {
    display: none;
    padding-right: 5px;
    background-color: var(--darker);
    /* border-right: 1px solid var(--borderColor); */
}

.tab-button {
    margin-left: 3px;
    position: relative;
    overflow: hidden;

}

.tab-button.close-button,
.tab-button {
    font-family: 'NerdFontSymbols';
    padding: 3px;
    border: none;
    color: var(--dimText);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-med);
}

.tab-button:hover {
    color: var(--textColor);
    background: transparent;
}

.tab-button.open,
.tab-button.toggle-tools {
    margin-left: auto;
    margin-right: 5px;
}

.tab-button.toggle-tools::before {
    content: "\eab5";
    font-size: var(--font-xSmall);
    top: -2px;
    left: -2px;
    position: relative;

}

.tab-button.file-explorer {
    color: var(--dimText);
}

.tab-button.file-explorer:hover {
    color: var(--textColor);
}

.tab-button.open::before {
    content: "\eaf3";
    font-size: var(--font-xSmall);
    top: -2px;
    left: -2px;
    position: relative;
}

.tab-button.file-explorer {
    /* display: none; */
}

.tab-button.file-explorer::before {
    content: "\f10ab";
    font-size: var(--font-large);
}

.tab-button.expand-left,
.tab-button.expand-right {
    padding-right: 2px;
}

.tab-button.expand-left::before {
    content: "\f514";
    font-size: var(--font-large);

}

.tab-button.expand-left.close::before {
    content: "\f514";
    font-size: var(--font-large);
}

.tab-button.expand-right::before {
    content: "\f515";
    font-size: var(--font-large);
}

.tab-button.expand-right.close::before {
    content: "\f515";
    font-size: var(--font-large);
}

.tab-button.close {
    display: inline-block;
    transform: scaleX(-1);

}

.tab-button.split-y::before {
    content: "\eb57";
    font-size: var(--font-large);
}

.tab-button.split-hide {
    display: none !important;
}

.tab-button.split-show {
    display: block !important;
}

.tab-button.split-h::before {
    content: "\eb56";
    font-size: var(--font-large);
}

.tab-button.split-y::before {
    content: "\eb57";
}

.tab-button.console-add::before {
    content: "\f018d";
}

.tab-button.preview-add::before {
    content: "\f1889";
}

.tab-button.close-button::before {
    content: "\ea76";
    font-size: var(--font-small);
    position: relative;
    top: -1px;
    padding-right: 3px;
}

.tab-button.project-download-button::before,
.tab-button.project-upload-button::before,
.tab-button.console-tab-button::before,
.tab-button.preview-tab-button::before {
    font-size: 18px;
    color: var(--dimText)
}

.tab-button {
    padding: 2px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 4px;
    background-color: transparent;
}




.file-button {
    border-radius: 4px;
    font-family: 'NerdFontSymbols';
    padding: 3px;
    border: none;
    color: var(--dimText);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-large);
    position: relative;
    /* background-color: var(--secondary); */
    border-radius: 5px;
    padding: 3px;
    height: 25px;
    width: 25px;
    transition: all 0.2s;
}

#toolbar .file-button::before {
    position: relative;
    top: 7px;
    padding: 0px;
    font-size: var(--font-med);
    margin-right: -10px;
}

.file-button::before {
    font-size: 17px;
    position: relative;
    top: -2px
}

.file-button.toggle-tab-button {
    /* margin-right: auto; */
}

.file-button.toggle-tab-button::before {
    content: "\f10aa";
    font-size: var(--font-large);
    top: -1px;
    left: -3px;
}

.file-button.dropdown-toggle {
    font-size: var(--font-small);
    /* background-color: var(--hover); */
}

.file-button.dropdown-toggle::before {
    content: "\ea7c";
    font-size: var(--font-large);
    top: 1px;
}

.file-button:hover::before {
    color: var(--textColor);
}

.file-button:hover {
    /*background-color: var(--hover);*/
    transition: all 0.2s ease-out;
    /* background-color: var(--hover); */

}


.file-button.project-upload-button::before {
    content: "\f40a";
    font-size: var(--font-large);
    top: 0px;
}

.file-button.project-upload-button:hover::before {
    /* color: #8dc149; */

}


.file-button.project-download-button::before {
    content: "\f1c6";
    font-size: var(--font-large);
    top: 0px;
}

.file-button.project-download-button:hover::before {
    /* color: #cc3633; */
}

.file-button.folder-upload-button::before {
    content: "\ea83";
    font-size: var(--font-xlarge);
    top: 0px;
}

.file-button.folder-upload-button::after {
    content: "\eaa1";
    font-size: 9px;
    margin-left: -9px;
    position: relative;
    top: 3px;
    left: 1px;
    background-color: var(--secondary);

    padding: 2px 1px;
    border-radius: 50%;
    font-weight: bold;
}

.file-button.file-upload-button::before {
    content: "\eb60";
    font-size: 14.5px;
    top: 0px;
}

.file-button.file-upload-button::after {
    content: "\eaa1";
    font-size: 9px;
    margin-left: -9px;
    position: relative;
    top: 3px;
    left: 1px;
    background-color: var(--secondary);

    padding: 2px 1px;
    border-radius: 50%;
    font-weight: bold;
}

.file-button.folder-create-button::before {
    content: "\ea80";

}

.file-button.file-create-button::before {
    content: "\ea7f";

}

.file-button.file-create-button,
.file-button.folder-create-button {
    padding-top: 6px;
}

.file-button.file-upload-button:hover::after,
.file-button.folder-upload-button:hover::after,
.file-button.folder-upload-button:hover::before,
.file-button.file-upload-button:hover::before {
    /* color: #8dc149; */
    color: var(--textColor);
    /* background-color: var(--hover); */

}

.file-button.folder-create-button:hover::before,
.file-button.file-create-button:hover::before {
    /* color: #519aba; */
}

.file-button.dependencies-tab-button,
.file-button.dependencies-tab-button::before,
.file-button.github-tab-button,
.file-button.github-tab-button::before,
.file-button.ai-imager-tab-button,
.file-button.ai-imager-tab-button::before,
.file-button.mint-tab-button,
.file-button.mint-tab-button::before,
.file-button.notes-tab-button,
.file-button.notes-tab-button::before,
.file-button.graph-tab-button,
.file-button.graph-tab-button::before,
.file-button.gallery-tab-button,
.file-button.gallery-tab-button::before,
.file-button.color-picker-tab-button,
.file-button.color-picker-tab-button::before,
.file-button.explorer-tab-button,
.file-button.console-tab-button,
.file-button.preview-tab-button,
.file-button.AI-tab-button,
.file-button.explorer-tab-button::before,
.file-button.console-tab-button::before,
.file-button.preview-tab-button::before,
.file-button.AI-tab-button::before {
    font-size: 18px;
    padding: 2px;
    margin: 0px;
    margin-bottom: 15px;
}

.file-button.mint-tab-button {
    /* margin-top: auto; */
}

.file-button.dependencies-tab-button::before {
    content: "\f4f9";

}

.file-button.explorer-tab-button::before {
    content: "\f0253";
    /* Default icon */
}

.file-button.explorer-tab-button.icon-hidden::before {
    content: "\f024b";
    /* Icon when hidden */
}


.file-button.explorer-tab-button:hover::before {
    color: #8dc149;
}

.file-button.console-tab-button::before {
    content: "\f018d";
}

.file-button.console-tab-button:hover::before {
    color: #cbc93d;
}

.file-button.preview-tab-button::before {
    content: "\f1889";
}

.file-button.preview-tab-button:hover::before {
    color: #519aba;
}

.file-button.gallery-tab-button::before {
    content: "\f02ef";
}

.file-button.gallery-tab-button:hover::before {
    color: #519aba;
}


.file-button.AI-tab-button::before {
    content: "\f1170";
    color: var(--dimText);

}

.file-button.AI-tab-button:hover::before {
    color: #ab68ff;
}

.file-button.color-picker-tab-button::before {
    content: "\f0266";
}

.file-button.color-picker-tab-button:hover:before {
    color: #cc3e44;
}

.file-button.ai-imager-tab-button::before {
    content: "\f0525";
}

.file-button.ai-imager-tab-button:hover::before {
    color: #ab68ff;
}

.file-button.graph-tab-button::before {
    content: "\f437";
}

.file-button.graph-tab-button:hover:before {
    color: #519aba;
}

.file-button.notes-tab-button::before {
    content: "\f1a7c";
}

.file-button.github-tab-button::before {
    content: "\ea84";
    font-size: 16px !important;
    top: 0px !important;
    position: relative;
}

.file-button.notes-tab-button:hover:before {
    color: var(--textColor);
}

.file-button.mint-tab-button::before {
    content: "\f0ac8";
}

.file-button.mint-tab-button:hover:before {
    color: #2885ff;
}

.header-button {
    font-family: "Font Awesome 5 Free";
    padding: 7px;
    border: none;
    color: var(--dimText);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-xlarge);
    margin-left: 7px;
    font-weight: 900;
}

.header-button:hover::before {
    transition: all 0.1s ease-out;
    color: var(--textColor);
}

.header-button::before {
    font-size: 17px;
    color: var(--dimText)
}

.header-button.home-button::before {
    content: "\f015";
    margin-left: -5px;
}

.header-button.header-menu-button::before {
    content: "\f0c9";
    font-size: var(--font-xxlarge);
}

.header-button.header-menu-button {
    background-color: var(--pageHeader);
    /* border: 1px solid var(--borderColor); */
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 0px 0px;
    border-right: none;
    color: var(--textColor);
    margin-left: 5px;
    font-size: var(--font-xxlarge);
}

.header-button.header-menu-button:hover {
    background-color: var(--hover);
}

.header-button.live-button::before {
    content: "\f26c";
}

.header-button.live-button.active::before {
    color: var(--accent);
}

.header-button.pan-zoom-button::before {
    content: "\f256";
}

.header-button.undo-button::before {
    content: "\f2ea";

}

.header-button.undo-button {
    margin-left: auto;
    display: none;
}

.header-button.redo-button::before {
    content: "\f2f9";
    display: none;
}

.header-button.minify-button::before {
    content: "\f066";
}

.header-button.tidy-button::before {
    content: "\f55d";

}

.header-button.run-code-button::before {
    content: "\f04b";
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--font-xxlarge);
}

.header-button.fullscreen-button,
.header-button.stop-code-button,
.header-button.run-code-button {
    background-color: var(--pageHeader);
    /* border: 2px solid var(--hover); */
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 0px 0px;
    color: var(--textColor);
    margin-left: 5px;
    font-size: var(--font-xxlarge);
    margin-right: 10px;
}

.header-button.fullscreen-button {
    /* opacity: 0.5; */
    /* margin-left: auto; */
}

.header-button.fullscreen-button:hover,
.header-button.stop-code-button:hover,
.header-button.run-code-button:hover {
    background-color: var(--hover);
    opacity: 1;
}

.header-button.run-code-button {
    margin-left: auto;
}

.header-button.fullscreen-button,
.header-button.stop-code-button {
    margin-left: 0px;
}

.header-button.run-code-button.running-state::before {
    color: var(--accent);
}

.header-button.fullscreen-button::before {
    content: "\f065";
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--font-xxlarge);
}

.header-button.fullscreen-button.active::before {
    content: "\f066";

}

.header-button.stop-code-button::before {
    content: "\f04d";
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--font-xxlarge);
}

.header-button.settings-button {
    background-color: var(--pageHeader);
    /* border: 1px solid var(--borderColor); */
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 0px 0px;
    border-right: none;
    color: var(--textColor);
    margin-left: 5px;
    font-size: var(--font-xxlarge);
}

.header-button.settings-button::before {
    font-size: var(--font-xxlarge);
    content: "\f013";
}


.header-button.settings-button:hover {
    background-color: var(--hover);
}

/* -------------------------------- New Tab List -------------------------------- */
.new-tab-list-container {
    color: var(--textColor);
    background-color: transparent;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;

}

.open-file-button,
.new-file-button {
    background-color: var(--darker);
    color: var(--textColor);
    padding: 7px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.open-file-button {
    margin-top: 5px;
    border: none;
    border: 1px solid var(--hover);
    border-bottom: 1px solid var(--hover);
    cursor: default;
    border-radius: 8px 8px 0px 0px;
    background-color: var(--secondary);
}

.open-file-button::before,
.new-file-button::before {
    font-family: "NerdFontSymbols";
    padding: 7px;
    border: none;
    color: var(--dimText);
    background: transparent;
    cursor: pointer;
    font-size: 17px;
    margin-left: 12px;
    font-weight: 100;
}

.new-file-button::before {
    content: "\ea7f";
    margin-left: -5px;
}

.open-file-button::before {
    content: "\eaf0";
    margin-left: -5px;
}

.new-file-button:hover {
    background-color: var(--hover);
}

.file-list {
    list-style-type: none;
    padding: 0px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid var(--borderColor);
    border-top: none;
}

.new-file-item {
    background-color: var(--secondary);
    color: var(--textColor);
    padding: 7px;
    padding-left: 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* border-bottom: 1px solid var(--hover); */

    /* border: 1px solid var(--borderColor); */
    border-top: none;
    border-bottom: none;
}

.new-file-item:last-child {
    /* border: 1px solid var(--borderColor);  */
}

.new-file-item:hover {
    background-color: var(--hover);
}

.button-container {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    row-gap: 5px;
    margin-bottom: 5px;
}

.square-button {
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    background-color: var(--darker);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    white-space: nowrap;
}

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

.new-tab-dependencies-button::before,
.new-tab-github-button::before,
.new-tab-notes-button::before,
.new-tab-graph-button::before,
.new-tab-gallery-button::before,
.new-tab-color-picker-button::before,
.new-tab-AI-button::before,
.new-tab-console-button::before,
.new-tab-preview-button::before {
    font-family: 'NerdFontSymbols';
    content: "\e612";
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--dimText);
    font-size: 14px;
    margin-right: 5px;
}

.new-tab-dependencies-button::before {
    content: "\f4f9";

}

.new-tab-notes-button::before {
    content: "\f1a7c";
}

.new-tab-github-button::before {
    content: "\ea84";
    font-size: 16px;
}

.new-tab-github-button:hover::before {
    color: var(--textColor);
}

.new-tab-notes-button:hover::before {
    color: var(--textColor);
}

.new-tab-graph-button::before {
    content: "\f437";
}

.new-tab-graph-button:hover::before {
    color: #519aba;
}

.new-tab-preview-button::before {
    content: "\f1889";
}

.new-tab-gallery-button::before {
    content: "\f02ef";
}

.new-tab-gallery-button:hover::before {
    color: #519aba;
}

.new-tab-console-button::before {
    content: "\f018d";
}

.new-tab-AI-button::before {
    content: "\f1170";
    color: var(--dimText);
}

.new-tab-color-picker-button::before {
    content: "\f0266";
}

.new-tab-preview-button:hover::before {
    color: #519aba;
}

.new-tab-console-button:hover::before {
    color: #cbc93d;
}

.new-tab-AI-button:hover::before {
    color: var(--textColor);
}

.new-tab-color-picker-button:hover::before {
    color: #cc3e44;
}


/* -------------------------------- File System -------------------------------- */
#fileContainer {
    height: 100%;
    width: 260px;
    min-width: 160px;
    background-color: var(--secondary);
    /* border-right: 1px solid var(--borderColor); */
    /* border: none; */
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    /* border-radius: 5px 0px 0px 0px; */
    /* margin-left: 5px; */
}

#fileViewer {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    scrollbar-width: thin;
    scrollbar-color: var(--hover) var(--primary);


}


#fileViewer::-webkit-scrollbar {
    width: 8px;
}

#fileHeader {
    /* border-radius: 5px 0px 0px 0px; */
    height: 30px;
    max-height: 30px;
    min-height: 30px;

    background-color: var(--primary);
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 0px 0px;
    /* padding-top: 10px; */
    /* border-top: 1px solid var(--borderColor); */
    margin-left: 10px;
    margin-right: 10px;
    /* border-bottom: 1px solid var(--darker); */

    margin-bottom: 5px;
    /* padding-top: 5px; */
    /* padding-bottom: 5px; */
    /* background-color: var(--darker);
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 2px; */
    /* border-radius: 5px 5px 0px 0px; */
}

.file-header-label {
    margin-right: auto;
    margin-left: -4px;
    color: var(--textColor);
    font-size: var(--font-med);
    top: 0px;
    position: relative;
}

.dropdown {
    position: relative;
    display: inline-block;
    /* This makes the dropdown align with other inline or inline-block elements (like buttons) */

}

.dropdown-content.files {
    position: absolute;
    top: 100%;
    /* Adjust if your button is taller, this assumes button height is the '100%' */
    right: 0;
    z-index: 4;
    /* Ensures the dropdown content will be on top of other content */
    /* Add your other styling properties (background, border, etc.) */
}

.empty-placeholder,
.directory-item,
.file-item {
    cursor: pointer;
    position: relative;
    padding: 1px;
    padding-left: 15px;
    background-color: var(--secondary);
    user-select: none;
    white-space: nowrap;
    position: relative;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    /* height: 22px; */
    border-radius: 5px;
    margin-right: 3px;
    margin-left: 5px;
    border: 2px solid var(--secondary);
    color: var(--dimText);
    border-radius: 8px;
}

.file-item:hover~.file-item:last-child {
    /* border-bottom: 1px solid var(--borderColor); */
}

.directory-item {
    padding-left: 2px;
}

.file-item {
    color: var(--dimText);
}

.active-file {
    color: var(--textColor);
}

.empty-placeholder {
    color: var(--noteText);
    font-style: italic;
    padding: 0px;
    padding-left: 3px;
    cursor: default;
    user-select: none;
}

.directory-item {
    /* border-radius: 8px; */
}

.sortable-drag {
    opacity: 0.35;
}

.sortable-ghost {
    opacity: 1.0;
    color: var(--textColor);
    filter: brightness(1.15);
}

.file-item.sortable-chosen.sortable-ghost {
    opacity: 0.35;

}


.highlight-drop-target {
    /* color: var(--accent); */
    /* border: 1px solid var(--accent);
    border-left: 2px solid var(--accent); */
    /* border-radius: 5px; */
    background-color: var(--hover);
    color: var(--textColor);

}

.directory-children {
    transition: height 0.2s;
}

.directory-children {
    transition: min-height 0.2s ease-in-out;
    /* Adjust duration and easing function as needed */
    min-height: 0;
}

.directory-item.highlight-drop-target+.directory-children {
    min-height: 10px;
}

.text-content[data-type="false"]::after {
    content: "\00a0";
    color: var(--accent);
    margin-left: 3px;
    font-style: normal;
    border: 1px dashed transparent;
    border-radius: 11px;
    top: -2px;
    left: -3px;
    position: absolute;
    width: calc(100% + 27px);
    height: 22px;
    padding: 0px;
    margin: 0px;

}

.directory-item.highlight-drop-target .text-content[data-type="false"]::after {
    border: 1px dashed var(--accent);
}

/* Highlight the container of the children */
.directory-item.highlight-drop-target+.directory-children::before {
    background-color: var(--accent);
    width: 1px;
    /* opacity: 1; */
    /* Or any other styling you prefer */
}

/* .directory-item.highlight-drop-target+.directory-children {
border-radius: 11px;
border: 1px dashed var(--accent);
filter: brightness(0.8);

} */

.directory-item.highlight-drop-target+.directory-children::after {
    display: block;
    border: 1px dashed var(--accent);
    height: calc(100% + 26px);
    /* background-color: var(--hover); */
}

.directory-item.highlight-drop-target+.directory-children::before {
    content: "";
    display: block;
    position: absolute;
    top: -27px;
    left: 5px;
    width: calc(100% - 10px);
    right: 0;
    bottom: 0;
    border-radius: 12px;
    border: 1px transparent;
    pointer-events: none;
    z-index: 110;
    transition: height 0.0s;
    height: 27px;
    opacity: 0.91;
    display: block;
    border: 1px solid var(--accent);
    height: calc(100% + 26px);
    opacity: 0.05 !important;
}

.directory-children::after {
    content: "";
    display: block;
    position: absolute;
    top: -27px;
    left: 5px;
    width: calc(100% - 10px);
    right: 0;
    bottom: 0;
    border-radius: 12px;
    border: 1px transparent;
    pointer-events: none;
    z-index: 110;
    transition: height 0.0s;
    height: 27px;
    /* opacity: 0.25; */
    transition: opacity 0.3s ease-out;
}

.directory-children {
    /* transition: all 0.0s; */
    border-radius: 11px;
}

/* #fileViewer > .directory-children {
    min-height: calc(100% - 30px);
} */
.directory-item.highlight-drop-target .text-content::before,
.directory-item.highlight-drop-target .menu-button {
    /* color: var(--accent); */
}

.directory-children {
    position: relative;
    padding-left: 10px;
}

.directory-children::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    width: 1px;
    background-color: var(--noteText);
    z-index: 1;
    opacity: 0.4;
    /* transition: all 0.3s ease-out; */
}

.directory-item.root-folder+.directory-children {
    min-height: calc(100% - 29px);
}

.directory-item.root-folder+.directory-children>.file-item:last-child {}

.directory-item:hover+.directory-children::before,
.directory-children:hover::before {
    background-color: var(--noteText);
    opacity: 1;
}

.directory-item:hover,
.file-item:hover {
    background-color: var(--nav-hover);
    color: var(--textColor);
}

.file-item.active-file {
    background-color: var(--hover);
    color: var(--textColor);
}

.directory-item:hover::before,
.file-item:hover::before {
    /* content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    background-color: var(--darker);
    z-index: 0;
    border-radius: 0px 5px 5px 0px; */
}

.file-item.active-file::before {
    /* content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    z-index: 0;
    background-color: var(--hover) !important;
        border-radius: 0px 5px 5px 0px; */

}

.file-item.modified::after {
    font-family: 'NerdFontSymbols';
    content: "\f111";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--dimText);
    margin-right: 4px;
    font-size: 5px;
    left: -11px;
    position: absolute;
    top: 5px;
    z-index: 3;
}

.directory-item.published .text-content {
    font-style: italic;
}

/* .directory-item.published::after {
    font-family: 'NerdFontSymbols';
    content: "\f005";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: #cbc93d;
    color: var(--secondary);
    margin-right: 4px;
    font-size: 10px;
    left: 17px;
    position: absolute;
    top: 3px;
    z-index: 3;
} */
.tab.modified::after {
    font-family: 'NerdFontSymbols';
    content: "\f111";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--dimText);
    margin-right: 4px;
    font-size: 6px;
    right: 15px;
    position: absolute;
    top: 7px;
    z-index: 3;
}

.tab.modified .tab-text {
    max-width: 94%;
}

.menu-button {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 3;
    user-select: none;
    color: var(--dimText);
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    padding: 5px;
    padding-right: 8px;
    /* opacity: 0.5; */
    display: block;
}

.menu-button::before {
    font-weight: 400;
    font-family: 'NerdFontSymbols';
    content: "\f0c9";
    background-color: transparent;
    padding: -20px;
    margin: -5px;
    margin-right: -5px;
    border-radius: 5px;
    color: transparent;
    margin-right: 10px;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    right: -3px;
    opacity: 0.9
}

/* .file-item.active-file .menu-button::before{
    color: var(--noteText);
} */

/* .file-item.active-file .menu-button::before, */
.file-item:hover .menu-button::before,
.directory-item:hover .menu-button::before {
    /* display: block;
    opacity: 1;
    width: 20px; */
    color: var(--dimText);
}

.menu-button:hover::before {
    color: var(--textColor) !important;
}

.file-item:hover .menu-button,
.directory-item:hover .menu-button {
    display: block;
    opacity: 1;
    width: 20px;
    color: var(--textColor);
}

/* .header-button.header-menu-button {
    margin-left: 2px;
} */

.dropdown-content-main-menu,
.dropdown-content {
    display: none;
    position: absolute;
    right: 2px;
    top: 25px;
    background-color: var(--darker);
    border: 1px solid var(--borderColor);
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /* z-index: 1;
    z-index: 4; */
    border-radius: 11px;
    /* overflow: hidden; */
    z-index: 11111111111111111111111111111111;
}

.dropdown-content-main-menu {
    left: 15px;
    top: 41px;
    width: 200px;

}

.dropdown-content-main-menu button,
.dropdown-content button {
    font-family: var(--font-family-IBM);
    color: var(--textColor);
    padding: 6px 10px;
    text-decoration: none;
    display: block;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    height: 30px;


}

.dropdown-content-main-menu button:hover,
.dropdown-content button:hover {
    background-color: var(--codeHeader);
}

.dropdown-submenu {
    position: relative;
    display: inline-block;
    width: 200px;

}

button[data-action="open-project"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    max-width: 200px;
}


.dropdown-content-submenu {
    display: none;
    position: absolute;
    left: 200px;
    /* Positions the submenu to the right of the parent menu */
    top: 0px;
    z-index: 1;
    background-color: var(--darker);
    width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
    border-radius: 11px;
    border: 1px solid var(--borderColor);
    overflow: hidden;
}

.dropdown-button:hover .shortcut-note.arrow {
    color: var(--textColor);

}

.dropdown-button-container:hover .dropdown-button,
.dropdown-content-submenu:hover~.dropdown-button-container .dropdown-button {
    background-color: var(--hover);
}



.dropdown-button.disabled {
    color: var(--noteText);
}

.dropdown-button.disabled::before {
    color: var(--noteText);
}

.dropdown-content-submenu:hover {
    /* background-color: var(--codeHeader); */
    /* border-radius: 0px 11px 11px 0px; */


}

.dropdown-submenu:hover .dropdown-content-submenu {
    display: block;
}

/* Basic styles for visibility */

.dropdown-content-submenu {

    opacity: 0;
    /* Start fully transparent */

    transition: opacity 200ms ease 200ms;
}



.dropdown-submenu:hover .dropdown-content-submenu {
    display: block;
    opacity: 1;
}

.dropdown-separator {
    height: 1px;
    background-color: var(--hover);
    margin: 0px 0;
}

.dropdown-button {
    /* display: flex !important; */
    align-items: center;

}

/* Apply rounded corners to the last .dropdown-button that is not .open-menu-button */
.dropdown-button:not(.open-menu-button):last-child {
    border-radius: 0px 0px 11px 11px;
}

/* Apply rounded corners to the first .dropdown-button that is not .open-menu-button */
.dropdown-button:not(.open-menu-button):first-child {
    border-radius: 11px 11px 0px 0px;
}

.dropdown-button.open-home {
    border-radius: 0px 0px 11px 11px;
}

.shortcut-note {
    position: absolute;

    right: 10px;
    color: var(--noteText);
    margin-left: 20px;
    vertical-align: middle;
}

.shortcut-note.arrow {
    color: var(--noteText);
    font-size: 18px;

    font-family: var(--font-family-Sans);
    top: 3px;
}

.dropdown-button:hover .shortcut-note.arrow::after {
    color: var(--textColor);

}

.shortcut-note.arrow::after {
    font-family: 'NerdFontSymbols';
    content: "\eab6";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--noteText);
    margin-right: 3px;
    /* margin-left: 6px; */
    font-size: var(--font-xSmall);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 0px;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.hidden {
    display: none;
}

.hidden2 {
    display: none;
}

button[data-action]::before,
button[data-action="addFile"]::before,
button[data-action="addFolder"]::before,
button[data-action="uploadFile"]::before,
button[data-action="uploadFolder"]::before,
button[data-action="rename"]::before,
button[data-action="remove"]::before {
    font-family: 'NerdFontSymbols';
    content: "\e612";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--dimText);
    margin-right: 5px;
    font-size: var(--font-xSmall);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.dropdown-content-main-menu button:hover::before,
.dropdown-content button:hover::before {
    color: var(--textColor);
}

.dropdown-content-main-menu button[data-action="remove"]:hover::before,
.dropdown-content button[data-action="remove"]:hover::before {
    color: #ff575b;
}

button[data-action="cancel"]::before,
button[data-action="confirm"]::before {
    content: "";
    display: none;
}

button[data-action]::before {
    content: "\e60e";
}

button[data-action="addFile"]::before {
    content: "\ea7f";
}

button[data-action="addFolder"]::before {
    content: "\ea80";
}

button[data-action="uploadFile"]::before {
    content: "\eb60";
}

button[data-action="uploadFolder"]::before {
    content: "\ea83";
}

button[data-action="rename"]::before {
    content: "\f448";
}

button[data-action="copyPath"]::before {
    content: "\f018f";
}

button[data-action="remove"]::before {
    content: "\f014";
    color: #ff575b;
}

button[data-action="new"]::before {
    content: "\f503";
}

button[data-action="new-template"]::before {
    content: "\f504";
}

button[data-action="save"]::before {
    content: "\f0c7";

}

button[data-action="save-fork"]::before {
    content: "\f126";

}

button[data-action="check-fork"]::before {
    content: "\f402";

}

.other-span,
.no-projects,
.recent-span {
    display: flex;
    justify-content: center;
    /* This centers all children horizontally */
    padding: 5px;

    color: var(--noteText);
    user-select: none;
    pointer-events: none;
}

.other-span,
.recent-span {
    justify-content: flex-start;
    margin-left: 0px;
    font-size: var(--font-small);
    padding-bottom: 0px;
    /* padding-top: 10px; */
    margin-left: 10px;
}

.other-span::before,
.recent-span::before {
    font-family: 'NerdFontSymbols';
    content: "\f13c1";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--noteText);
    margin-right: 3px;
    /* margin-left: 6px; */
    font-size: var(--font-small);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-left: -5px;
}

.other-span::after,
.recent-span::after {
    font-family: 'NerdFontSymbols';
    content: "\eab4";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--noteText);
    margin-right: 3px;
    /* margin-left: 6px; */
    font-size: var(--font-xSmall);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-left: 45px;
}

.other-span::after {
    margin-left: 37px;
}

.other-span::before {
    content: "\f1632";
}

button[data-action="open-project"]::before {
    content: "\f03cc";
}

button[data-action="open"]::before {
    content: "\f03cc";
}

button[data-action="github"]::before {
    content: "\ea84";
    font-size: var(--font-med);
    margin-right: 3px;
    margin-left: -1px;
}

button[data-action="list"]::before {
    content: "\eb28";
}

button[data-action="download"]::before {
    content: "\f409";
}

button[data-action="upload"]::before {
    content: "\f40a";
}

button[data-action="share"]::before {
    content: "\f50f";
}

button[data-action="share-live"]::before {
    content: "\f484";
}

button[data-action="share-editor"]::before {
    content: "\f121";
}

button[data-action="share-project"]::before {
    content: "\f502";
}

button[data-action="embed"]::before {
    content: "\e796";
}

button[data-action="settings"]::before {
    content: "\f423";
}

button[data-action="publish"]::before {
    content: "\f005";
}

button[data-action="login"]::before {
    content: "\f05fd";
}

button[data-action="signout"]::before {
    content: "\f000d";
}

button[data-action="signup"]::before {
    content: "\f0014";
}

button[data-action="account"]::before {
    content: "\eb99";
}

button[data-action="explore"]::before {
    content: "\f0985";
}

button[data-action="home"]::before {
    content: "\f02dc";
}

button[data-action="docs"]::before {
    content: "\eaee";
}

button[data-action="chat"]::before {
    content: "\f0365";
}

button[data-action="shorts"]::before {
    content: "\f0e7";
}

/* -------------------------------- File Icons -------------------------------- */
@font-face {
    font-family: 'NerdFontSymbols';
    src: url('NerdFontsSymbolsOnly/SymbolsNerdFontMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.text-content {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 25px;
    height: 100%;
    height: 22px;
    align-self: center;
    top: 2px;
}

.text {
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.inline-rename-input {
    width: 100%;
    margin: -1px;
    margin-left: -3px;
    margin-top: -5px;
    border: 1px solid var(--accent);
    outline: none;
    box-sizing: border-box;
    background-color: transparent;
    color: var(--textColor);
    font-size: var(--font-med);
    font-family: var(--font-family-IBM);
    z-index: 222222222222222222222222222111115 !important;
    user-select: auto !important;
    pointer-events: all !important;
    height: 20px;
    border-radius: 2px;

}

.new-file-item::before,
.tab-text::before,
.text-content::before {
    font-family: 'NerdFontSymbols';
    content: "\e612";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--textColor);
    margin-right: 2px;
    font-size: 10px;
    margin-left: -8px;
    font-style: normal;
}

.new-file-item::before,
.tab-text::before {
    position: relative;
    top: -1px;
}

.tab-text[data-type="dependencies"]::before {
    content: "\f4f9";
    color: var(--accent);
    font-size: var(--font-med);
}

.tab-text[data-type="AIImager"]::before {
    content: "\f0525";
    color: #ab68ff;
    font-size: var(--font-med);
}

.tab-text[data-type="Mint"]::before {
    content: "\f0ac8";
    color: #2885ff;
    font-size: var(--font-med);
}

.tab-text[data-type="notes"]::before {
    content: "\f1a7c";
    color: var(--textColor);
    font-size: var(--font-small);
}

.tab-text[data-type="github"]::before {
    content: "\ea84";
    color: var(--textColor);
    font-size: var(--font-med);
    top: -2px;
    position: relative;
}

.tab-text[data-type="graph"]::before {
    font-size: var(--font-med);
    content: "\f437";
    color: #519aba;
}

.tab-text[data-type="publish_project"]::before {
    font-size: var(--font-xSmall);
    content: "\f005";
    color: #cbc93d;
    top: -2px;
}

.tab-text[data-type="Color_Picker"]::before {
    font-size: var(--font-med);
    content: "\f0266";
    color: #cc3e44;
}

.tab-text[data-type="Settings_Menu"]::before {
    font-size: var(--font-med);
    content: "\f423";
    color: var(--dimText)
}

.tab-text[data-type="New_Tab"]::before {
    font-size: var(--font-med);
    content: "\f04e9";
    color: var(--dimText)
}

.tab-text[data-type="preview"]::before {
    font-size: var(--font-med);
    content: "\f1889";
    color: #519aba;
}

.tab-text[data-type="gallery"]::before {
    font-size: var(--font-med);
    content: "\f02ef";

    color: #519aba;
}

.tab-text[data-type="console"]::before {
    font-size: var(--font-med);
    content: "\f018d";
    color: #cbc93d;
}

.tab-text[data-type="AI"]::before {
    font-size: var(--font-med);
    content: "\f1170";
    color: var(--dimText);
}

/* .directory-item.published .text-content[data-type="false"]::before {
    font-size: var(--font-med);
    padding: 3px;
    content: "\f47c   \f024b   \f005";
    color: var(--textColor);
    margin-left: -3px;
} */
.directory-item.published .menu-button::after {
    font-family: 'NerdFontSymbols';
    content: "\e612";
    background-color: transparent;
    padding: 2px;
    border-radius: 5px;
    color: var(--textColor);
    margin-right: -1px;
    font-size: var(--font-xSmall);
    padding: 0px;
    content: "\f005";
    color: var(--accent);
    margin-left: 4px;
    font-style: normal;
    position: relative;
    top: -2px;
    left: -40px;
}

/* .directory-item.published .text-content[data-type="true"]::before{
    font-size: var(--font-med);
    padding: 3px;
    content: "\f47c   \f0770   \f005";
    color: var(--textColor);
    margin-left: -3px;
} */

.directory-item.published .text-content[data-type="false"]::after,
.directory-item.published .text-content[data-type="true"]::after {
    font-family: 'NerdFontSymbols';
    content: "";
    background-color: transparent;
    padding: 2px;
    border-radius: 5px;
    color: var(--textColor);
    margin-right: -1px;
    font-size: var(--font-xSmall);
    padding: 0px;
    content: "\00a0\00a0\00a0\00a0";
    color: var(--accent);
    margin-left: 4px;
    font-style: normal;
    position: relative;
    top: -2px;
}

.directory-item.published .text-content[data-type="false"]::after {
    width: 10px;
}

.text-content::before {
    top: -1px;
    position: relative;
}

.text-content[data-type="false"]::before {
    font-size: var(--font-med);
    padding: 3px;
    content: "\f460   \f024b";
    color: var(--textColor);
    margin-left: -3px;
}

.text-content[data-type="true"]::before {
    font-size: var(--font-med);
    padding: 3px;
    content: "\f47c   \f0770";
    color: var(--textColor);
    margin-left: -3px;
}

/* Style for HTML file icon */
.new-file-item[data-type="html"]::before,
.tab-text[data-type="html"]::before,
.text-content[data-type="html"]::before {
    content: "\e60e";
    color: #e3732e;
}

.text-content.source-doc::before {
    color: var(--accent);
}

.text-content.source-doc[data-type="html"]::before {
    opacity: 1;
    color: var(--accent);
    content: "\e60e";
    /* Two Unicode values next to each other */
    animation: spinAndScaleIcon 0.25s ease forwards;

    margin-right: 4px;
}

.text-content.source-doc[data-type="html"]::after {
    font-family: "Font Awesome 5 Free";
    margin-left: -1px;
    margin-right: -5px;
    font-size: 9px;
    font-weight: 900;
    color: var(--accent);
    content: "\f04b";
    animation: spinAndScaleIcon 0.25s ease forwards;
    position: absolute;
    background-color: transparent;
    padding: 3px;
    background-color: transparent;
    border-radius: 0px 5px 5px 0px;
    padding-right: 2px;
    top: 1px;


}

.text-content.source-doc[data-type="md"]::before {
    opacity: 1;
    color: var(--accent);
    content: "\e60e";
    /* Two Unicode values next to each other */
    animation: spinAndScaleIcon 0.25s ease forwards;

    margin-right: 4px;
}

.text-content.source-doc[data-type="md"]::after {
    font-family: "Font Awesome 5 Free";
    margin-left: -1px;
    margin-right: -5px;
    font-size: 9px;
    font-weight: 900;
    color: var(--accent);
    content: "\f04b";
    animation: spinAndScaleIcon 0.25s ease forwards;
    position: absolute;
    background-color: transparent;
    padding: 3px;
    background-color: transparent;
    border-radius: 0px 5px 5px 0px;
    padding-right: 2px;
    top: 1px;

}

/* Style for JavaScript file icon */
.new-file-item[data-type="js"]::before,
.tab-text[data-type="js"]::before,
.text-content[data-type="js"]::before {
    content: "\e60c";
    color: #cbc93d;
}

/* Style for jsx file icon */
.new-file-item[data-type="jsx"]::before,
.tab-text[data-type="jsx"]::before,
.text-content[data-type="jsx"]::before {
    content: "\f0708";
    color: #519aba;
    font-size: 12px;
}

.new-file-item[data-type="ts"]::before,
.tab-text[data-type="ts"]::before,
.text-content[data-type="ts"]::before {
    content: "\e628";
    color: #cbc93d;
    font-size: 13px;
}

/* Style for CSS file icon */
.new-file-item[data-type="css"]::before,
.tab-text[data-type="css"]::before,
.text-content[data-type="css"]::before {
    content: "\e614";
    color: #519aba;
}

.new-file-item[data-type="txt"]::before,
.tab-text[data-type="txt"]::before,
.text-content[data-type="txt"]::before {
    content: "\e612";
    color: var(--textColor)
}

.new-file-item[data-type="json"]::before,
.tab-text[data-type="json"]::before,
.text-content[data-type="json"]::before {
    content: "\e60b";
    color: #cbc93d;
    /* JSON file color */
}

.new-file-item[data-type="md"]::before,
.tab-text[data-type="md"]::before,
.text-content[data-type="md"]::before {
    content: "\f449";
    color: #519aba;
    /* Markdown file color */
}

.new-file-item[data-type="py"]::before,
.tab-text[data-type="py"]::before,
.text-content[data-type="py"]::before {
    content: "\e606";
    color: #519aba;
    /* Python file color */
}

.new-file-item[data-type="cs"]::before,
.tab-text[data-type="cs"]::before,
.text-content[data-type="cs"]::before {
    content: "\e648";
    color: #519aba;
    /* XML file color */
}

.new-file-item[data-type="java"]::before,
.tab-text[data-type="java"]::before,
.text-content[data-type="java"]::before {
    content: "\e66d";
    color: #cc3e44;
    /* Java file color */
}

.new-file-item[data-type="php"]::before,
.tab-text[data-type="php"]::before,
.text-content[data-type="php"]::before {
    content: "\e608";
    color: #a074c4;
    /* PHP file color */
}

.new-file-item[data-type="webp"]::before,
.new-file-item[data-type="png"]::before,
.new-file-item[data-type="jpg"]::before,
.new-file-item[data-type="jpeg"]::before,
.tab-text[data-type="webp"]::before,
.text-content[data-type="webp"]::before,
.tab-text[data-type="png"]::before,
.text-content[data-type="png"]::before,
.tab-text[data-type="jpg"]::before,
.text-content[data-type="jpg"]::before,
.tab-text[data-type="jpeg"]::before,
.text-content[data-type="jpeg"]::before {
    content: "\e60d";
    color: #a074c4;
    /* Image file color */
}

.new-file-item[data-type="ogg"]::before,
.tab-text[data-type="ogg"]::before,
.text-content[data-type="ogg"]::before {
    content: "\e60d";
    color: #a074c4;
}

.new-file-item[data-type="ico"]::before,
.tab-text[data-type="ico"]::before,
.text-content[data-type="ico"]::before {
    content: "\e60d";
    color: #8dc149;
}

.new-file-item[data-type="svg"]::before,
.tab-text[data-type="svg"]::before,
.text-content[data-type="svg"]::before {
    content: "\e698";
    color: #a074c4;
    /* SVG file color */
}

.new-file-item[data-type="otf"]::before,
.tab-text[data-type="otf"]::before,
.text-content[data-type="otf"]::before,
.new-file-item[data-type="ttf"]::before,
.tab-text[data-type="ttf"]::before,
.text-content[data-type="ttf"]::before {
    content: "\e659";
    color: #cc3633;
    /* SVG file color */
}

.new-file-item[data-type="mp4"]::before,
.new-file-item[data-type="mp3"]::before,
.new-file-item[data-type="wav"]::before,
.tab-text[data-type="mp4"]::before,
.text-content[data-type="mp4"]::before,
.tab-text[data-type="mp3"]::before,
.text-content[data-type="mp3"]::before,
.tab-text[data-type="wav"]::before,
.text-content[data-type="wav"]::before {
    content: "\e638";
    color: #a074c4;
    /* Audio file color */
}

.new-file-item[data-type="ogg"]::before,
.tab-text[data-type="ogg"]::before,
.text-content[data-type="ogg"]::before {
    content: "\e638";
    color: #8dc149;
}

.new-file-item[data-type="pdf"]::before,
.tab-text[data-type="pdf"]::before,
.text-content[data-type="pdf"]::before {
    content: "\e67d";
    color: #cc3633;
    /* PDF file color */
}

.new-file-item[data-type="vert"]::before,
.tab-text[data-type="vert"]::before,
.text-content[data-type="vert"]::before {
    content: "\f0bc2";
    color: #519aba;
}

.new-file-item[data-type="frag"]::before,
.tab-text[data-type="frag"]::before,
.text-content[data-type="frag"]::before {
    content: "\f0bc2";
    color: #8dc149;

}

.new-file-item[data-type="pde"]::before,
.tab-text[data-type="pde"]::before,
.text-content[data-type="pde"]::before {
    content: "\f0bc2";
    color: #cbc93d;

}

.new-file-item[data-type="xml"]::before,
.tab-text[data-type="xml"]::before,
.text-content[data-type="xml"]::before {
    content: "\e619";
    color: #e37933;
    /* XML file color */
}

.new-file-item[data-type="zip"]::before,
.tab-text[data-type="zip"]::before,
.text-content[data-type="zip"]::before {
    content: "\e6aa";
    color: var(--textColor);
}

.new-file-item[data-type="tar"]::before,
.new-file-item[data-type="gz"]::before,
.tab-text[data-type="tar"]::before,
.text-content[data-type="tar"]::before,
.tab-text[data-type="gz"]::before,
.text-content[data-type="gz"]::before {
    content: "\e612";
    color: var(--textColor);
    /* Archive file color */
}

.new-file-item[data-type="sql"]::before,
.tab-text[data-type="sql"]::before,
.text-content[data-type="sql"]::before {
    content: "\e706";
    color: #f55385;
    /* SQL file color */
}

.new-file-item[data-type="c"]::before,
.tab-text[data-type="c"]::before,
.text-content[data-type="c"]::before {
    content: "\e649";
    color: #519aba;
    /* C file color */
}

.new-file-item[data-type="cpp"]::before,
.tab-text[data-type="cpp"]::before,
.text-content[data-type="cpp"]::before {
    content: "\e646";
    color: #519aba;
    /* C++ file color */
}

.new-file-item[data-type="go"]::before,
.tab-text[data-type="go"]::before,
.text-content[data-type="go"]::before {
    content: "\e65e";
    color: #519aba;
}

.new-file-item[data-type="go"]::before,
.text-content[data-type="go"]::before {
    content: "\e65e";
    color: #519aba;
    /* Go file color */
    /* margin-left: 1px; */
    margin-right: 3px;
    font-size: var(--font-xlarge);
    padding: 0px;
    padding-right: 2px;
}

.new-file-item[data-type="yaml"]::before,
.new-file-item[data-type="yml"]::before,
.tab-text[data-type="yml"]::before,
.text-content[data-type="yml"]::before,
.tab-text[data-type="yaml"]::before,
.text-content[data-type="yaml"]::before {
    content: "\e6a8";
    color: #a074c4;
    /* YML file color */
}

.new-file-item[data-type="sh"]::before,
.tab-text[data-type="sh"]::before,
.text-content[data-type="sh"]::before {
    content: "\e691";
    color: #8dc149;
    /* Shell script color */
}

.new-file-item[data-type="doc"]::before,
.new-file-item[data-type="docx"]::before,
.tab-text[data-type="doc"]::before,
.text-content[data-type="doc"]::before,
.tab-text[data-type="docx"]::before,
.text-content[data-type="docx"]::before {
    content: "\e6a5";
    color: #519aba;
    /* Word Document file color */
}

.new-file-item[data-type="pptx"]::before,
.new-file-item[data-type="ppt"]::before,
.tab-text[data-type="ppt"]::before,
.text-content[data-type="ppt"]::before,
.tab-text[data-type="pptx"]::before,
.text-content[data-type="pptx"]::before {
    content: "\e62a";
    color: #cc3633;
    /* PowerPoint file color */
}

.new-file-item[data-type="xls"]::before,
.new-file-item[data-type="xlsx"]::before,
.tab-text[data-type="xls"]::before,
.text-content[data-type="xls"]::before,
.tab-text[data-type="xlsx"]::before,
.text-content[data-type="xlsx"]::before {
    content: "\e6a6";
    color: #8dc149;
    /* Excel file color */
}

.new-file-item[data-type="conf"]::before,
.tab-text[data-type="conf"]::before,
.text-content[data-type="conf"]::before {
    content: "\f013";
    color: var(--textColor);
    /* Shell script color */
}

.new-file-item[data-type="cursorignore"]::before,
.tab-text[data-type="cursorignore"]::before,
.text-content[data-type="cursorignore"]::before,
.new-file-item[data-type="gitignore"]::before,
.tab-text[data-type="gitignore"]::before,
.text-content[data-type="gitignore"]::before {
    content: "\e702";
    color: var(--textColor);
    /* Shell script color */
}

.new-file-item[data-type="mtl"]::before,
.tab-text[data-type="mtl"]::before,
.text-content[data-type="mtl"]::before {
    content: "\e698";
    color: #519aba;
    /* Shell script color */
}

.new-file-item[data-type="obj"]::before,
.tab-text[data-type="obj"]::before,
.text-content[data-type="obj"]::before {
    content: "\f01a7";
    color: #519aba;
    /* Shell script color */
}

.new-file-item[data-type="stl"]::before,
.tab-text[data-type="stl"]::before,
.text-content[data-type="stl"]::before {
    content: "\f01a7";
    color: #519aba;
    /* Shell script color */
}

.new-file-item[data-type="mustache"]::before,
.tab-text[data-type="mustache"]::before,
.text-content[data-type="mustache"]::before {
    content: "\e60f";
    color: #519aba;
    margin-left: -4px;
    margin-right: 2px;
    font-size: var(--font-xlarge);
}

/* -------------------------------- Publish styles -------------------------------- */
.publish-menu {
    border-top: 1px solid var(--borderColor);
    background-color: var(--primary);
    color: var(--textColor);
    padding: 0px;
    overflow-y: auto;
    height: 100%;
    font-size: var(--font-med);
    border: none;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-family-IBM);
    max-height: calc(100% - 10px);
}

.publish-menu span {
    margin-bottom: 15px;
    margin-left: 0px;
    font-size: var(--font-large);
    /* font-weight: bold; */
    font-family: var(--font-family-IBM);

    color: var(--textColor);

}

.publish-setting-title {
    font-size: 1.0rem !important;
    margin-left: -5px !important;
}

.publish-menu span.setting-info {
    white-space: nowrap;
    min-width: 200px;
    font-weight: normal;
    font-family: var(--font-family-IBM);
    color: var(--dimText);
    position: relative;
    top: -2px;
}

.publish-menu span.setting-info.cover-image-info {
    white-space: normal;
}




.setting-container:last-child {
    padding-bottom: 100px;
}

.setting-container img {
    height: 250px;
    width: 250px;
    display: block;
    margin: 0;
    object-fit: cover;
    min-height: 235px;
    max-height: 235px;
    min-width: 370px;
    max-width: 370px;
    background: var(--secondary);
    border: 1px solid var(--borderColor);
    border-radius: 14px;
    padding: 5px;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 10px;
    font-family: var(--font-family-IBM);

}


.cover-image-info {
    /* margin: 0px !important;
    margin-left: 10px !important; */
    margin: auto !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    /* color: var(--noteText)!important; */

}

.setting-container textarea {
    font-size: var(--font-med);

    resize: none;
    width: calc(100% - 25px);
    height: 100px;
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    border-radius: 11px;
    color: var(--textColor);
    padding: 10px;
    margin-bottom: 20px;
    font-family: var(--font-family-IBM);
    resize: vertical;

}

.setting-container textarea:focus {
    outline: none;
    border: 1px solid var(--accent);
}

.publish-button {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 8px !important;
}

.publish-button-button {
    border-radius: 30px !important;
}

.publish-button-button,
.unpublish-button {
    padding: 10px !important;
    color: var(--textColor) !important;
    background-color: var(--secondary) !important;

}

.publish-button:hover {

    background-color: var(--hover) !important;
}

.unpublish-button {
    padding: 10px !important;
    /* border: 1px solid #cc3e44 !important; */

}

.unpublish-button:hover {
    background-color: #cc3e44 !important;
    border: 1px solid #cc3e44 !important;
    color: white !important;
}

.publish-publish-button {
    padding: 10px !important;
    /* border: 1px solid var(--accent) !important; */
}

.publish-publish-button:hover {
    color: var(--backGround) !important;
    border: 1px solid var(--accent) !important;
    background-color: var(--accent) !important;
}

/* -------------------------------- Settings styles -------------------------------- */
.settings-menu {
    border-top: 1px solid var(--borderColor);
    background-color: var(--primary);
    color: var(--textColor);
    padding: 0px;
    overflow-y: auto;
    height: 100%;
    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: var(--font-med);
    border: none;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(100% - 10px);
    font-family: var(--font-family-IBM);

}

.setting-container {
    padding: 20px;
    border-bottom: 1px solid var(--borderColor);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    filter: brightness(1);
    font-family: var(--font-family-IBM);

}

.publish-container {
    padding: 20px;
    padding-top: 20px;
    padding-bottom: 150px;
    border-bottom: 1px solid var(--borderColor);
    display: flex;
    flex-direction: row;
    /* filter: brightness(0.85); */
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: calc(100% - 10px);
}

.setting-container:hover {
    /* filter: brightness(1.0);
    background-color: var(--secondary); */
}

.setting-info {
    padding-bottom: 20px;
    color: var(--dimText);
    margin-left: 5px;
    overflow-y: auto;
    font-size: var(--font-large);
    font-family: var(--font-family-IBM);
    color: var(--dimText);
}

.slider-wrapper {
    display: flex;
    align-items: center;
}

.value-display {
    margin-left: 10px;
    /* Space between slider and value display */
    white-space: nowrap;
    color: var(--textColor);
    position: relative;
}

#claude-api-key-value-display,
#gemini-api-key-value-display,
#api-key-value-display {
    color: var(--dimText);
}

#claude-api-key-value-display::before,
#gemini-api-key-value-display::before,
#api-key-value-display::before {
    position: relative;
    white-space: nowrap;
    font-family: 'NerdFontSymbols';
    content: "\f073a";
    background-color: transparent;
    border-radius: 5px;
    color: #cc3633;
    font-size: 21px;
    margin-right: 5px;

}

.api-key-input:focus {
    border-color: var(--accent);
    outline: none;
}

#claude-api-key-value-display.value-display.api-key-stored::before,
#gemini-api-key-value-display.value-display.api-key-stored::before,
#api-key-value-display.value-display.api-key-stored::before {
    content: "\f0995";
    color: #8dc149;
}

.setting-container .settings-label {
    font-family: var(--font-family-IBM);
    display: block;
    margin-right: 10px;
    flex-basis: 40%;
    flex-shrink: 0;
    /* font-weight: bold; */
    color: var(--textColor);
    text-align: left;
    padding-bottom: 20px;
    font-size: 1.0rem;
}


.setting-container input,
.setting-container select {
    flex-basis: 58%;
    /* Adjust as needed */
    padding: 5px;
    margin-bottom: 0;
    /* Align with the label */
    background-color: var(--secondary);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    box-sizing: border-box;
    /* Include padding and border in width */
    font-family: var(--font-family-IBM);
    font-size: var(--font-med)
}

.setting-container select {
    margin-top: -10px;
    cursor: pointer;
    padding-left: 10px;
}

.publish-container button,
.reset-button,
.setting-container button {
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    flex-basis: 58%;
    /* Adjust as needed */
    padding: 5px;
    background-color: var(--secondary);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    cursor: pointer;
    margin-left: 5px;
    white-space: nowrap;
    display: flex;
    /* Use flexbox to align items in a row */
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Center items horizontally */
    padding: 2px;
    padding-left: 8px;
    padding-right: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: all 0.2s;
}

button.save-api-key-button,
button.remove-api-key-button {
    /* background-color: var(--hover); */
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 0px;
}

.publish-container button:hover,
.reset-button:hover,
.setting-container button:hover {
    background-color: var(--hover);
}

.reset-button::before {
    white-space: nowrap;
    font-family: 'NerdFontSymbols';
    content: "\e612";
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--dimText);
    font-size: 21px;
    margin-right: 5px;
    content: "\f0453";

}

.setting-container input[type=checkbox] {
    margin-right: 15px;
    cursor: pointer;
    width: auto;
    margin-bottom: 0;
}

.setting-container input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--hover);
    cursor: pointer;
    border: none;
    padding: 0px;
    height: 8px;
    margin: 12px;
    border: 1px solid var(--borderColor);

}

/* Styling for range slider thumb for WebKit browsers */
.setting-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--accent);
    height: 25px;
    width: 7px;
    border-radius: 10px;
}

/* Styling for range slider thumb for Firefox */
.setting-container input[type=range]::-moz-range-thumb {
    background: var(--accent);
    height: 25px;
    width: 7px;
    border-radius: 10px;
    border: none;
}

.fork-false,
.fork-true {
    color: var(--accent);
    margin-bottom: -30px;
    background-color: var(--secondary);
    border-radius: 8px;
    padding: 7px 10px;
    padding-right: 15px;
    border: thin solid var(--borderColor);
    cursor: pointer;
}

.fork-false:hover,
.fork-true:hover {
    background-color: var(--hover);
}

.fork-false::before,
.fork-true::before {
    font-family: 'NerdFontSymbols';
    content: "\f467";
    margin-right: 8px;
    font-size: 1rem;
}

.fork-true::before {
    content: "\eab2";
}

.fork-false {
    color: #cc3e44;
}

.type-project-wrapper {
    display: flex;
    gap: 10px;
    padding: 0px;
    margin-top: -15px;
    width: 100%;
}

.project-type-info {
    white-space: normal !important;
}

.publish-info-wrapper {
    padding: 30px;
    /* Adjust as needed */
    padding-bottom: 10px;
}

.project-publish-info {
    color: var(--noteText) !important;
}

.type-project-button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: var(--secondary);
    color: var(--textColor);
    transition: background-color 0.3s, color 0.3s;
    font-family: var(--font-family-Sans);
    font-size: var(--font-med);
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    min-width: 120px;
    max-width: 120px;
    min-height: 35px;
}

.code-short-project {
    margin-right: auto;
}

.type-project-button.active-project-type:hover,
.type-project-button:hover {
    background-color: var(--hover);
    color: var(--textColor);
}

/* Style for the active project type */
.type-project-button.active-project-type {
    background-color: var(--accent);
    color: var(--backGround);
    border: 1px solid var(--accent);
}

.help-button {
    font-size: 15px;
    color: var(--dimText);
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    margin-left: auto;
    height: 33px;
    /* Fixed height */
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center-align text */
    padding: 0;
    /* Remove extra padding to maintain height */
    transition: color 0.3s, background-color 0.3s;
    margin-left: auto;
}

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

/* -------------------------------- End Settings styles -------------------------------- */
/* -------------------------------- console styles -------------------------------- */

.console {
    background-color: transparent;
    color: var(--textColor);
    padding: 0px;
    overflow-y: auto;
    height: 100%;
    max-height: calc(100% - 0px);
    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: var(--font-small);
    border: none;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.log-container {
    padding: 0px;
    border-top: 1px solid var(--borderColor);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;/
}

.log-container:last-child {
    border-bottom: 1px solid var(--borderColor);
}

.response-button {
    padding: 0px 5px;
    margin-left: 2px;
    margin-right: 2px;
    border: none;
    border-radius: 5px;
    background-color: var(--secondary);
    color: var(--dimText);
    cursor: pointer;
    border: 1px solid var(--borderColor);
    color: var(--textColor);
    background-color: var(--hover);
    position: relative;
}

.response-button:hover {
    color: var(--textColor);
    background-color: var(--hover);
    filter: brightness(1.1);
}

.response-button[data-action="open"]:hover::before {
    color: #8dc149;
}

.response-button[data-action="add"]:hover::before {
    color: #519aba;
}

.response-button[data-action="open"]::before,
.response-button[data-action="add"]::before {
    font-family: 'NerdFontSymbols';
    content: "\e612";
    background-color: transparent;
    padding: 0px;
    border-radius: 5px;
    color: var(--textColor);
    margin-right: 5px;
    font-size: var(--font-small);
    display: inline-block;
    vertical-align: middle;
    content: "\ea7f";
    color: var(--textColor);
    margin-right: 4px;
}

.response-button[data-action="open"]::before {
    content: "\f03cc";
    font-size: var(--font-xxSmall);
    padding-bottom: 2px;
    padding-top: 1px;
    top: -0px;
}

.response-button[data-action="add"]::before {
    top: -0px;
}

.gpt-button {
    padding: 5px 8px;
    background-color: var(--secondary);
    color: var(--textColor);
    border: none;
    cursor: pointer;
    order: -1;
    white-space: nowrap;
}

.gpt-button:before {
    font-family: 'NerdFontSymbols';
    content: "\e612";
    background-color: transparent;
    padding: 0px;
    border-radius: 5px;
    color: var(--textColor);
    margin-right: 5px;
    font-size: var(--font-large);
    display: inline-block;
    vertical-align: middle;
    content: "\f0f99";
    color: #cbc93d;
    margin-right: 8px;
}

.gpt-button[data-type="log"]::before {
    content: "\f0f99";
    color: var(--dimText);
}

.gpt-button[data-type="warn"]::before {
    content: "\f0f99";
    color: #cbc93d;
}

.gpt-button[data-type="error"]::before {
    content: "\f0f99";
    color: #cc3633;
}

.gpt-button[data-type="info"]::before {
    content: "\f0f99";
    color: #519aba;
}

.gpt-button:hover {
    filter: brightness(1.1);
}

.object-wrapper,
.table {
    margin: 0px;
    background-color: var(--secondary);
    color: var(--textColor);
    padding: 10px;
    border-radius: 4px;
    width: 95%;
}

.object-wrapper {
    border-right: 1px solid var(--primary);
    white-space: pre-wrap;
    overflow-x: auto
}

.table-header {
    cursor: pointer;
    padding: 2px 5px;
    background-color: var(--hover);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border-radius: 4px 4px 0px 0px;
}

.table-header:hover {
    filter: brightness(1.1);
}

.table-body {
    display: none;


}

table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 0px 0px 14px 4px;
}

th,
td {
    border-top: none;
    border-top: 1px solid var(--borderColor);
    border-bottom: 1px solid var(--borderColor);
    border-left: 1px solid var(--borderColor);
    border-right: 1px solid var(--borderColor);
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

tr {
    background-color: var(--primary);
}

th,
tr:nth-child(even) {
    background-color: var(--secondary);
}

.log-message {
    color: var(--textColor);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    /* margin-left: 5px; */
    font-family: var(--font-family-IBM);
    width: 95%;
    /* border-radius: 4px; */
    word-wrap: break-word;

}

.log-message pre {
    background-color: var(--secondary);
    color: var(--textColor);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    /* margin-left: 5px; */
    font-family: var(--font-family-IBM);
    width: 95%;
    /* border-radius: 4px; */
    word-wrap: break-word;
}

.log-message:hover {
    filter: brightness(1.05);
    /* Brighten the element on hover */
}

.warn {
    background-color: #dac95f;
    color: #1f1b1b;
}

.error {
    background-color: #902e2b;
    color: #D4D4D4;
}

.info {
    background-color: #255595;
    color: #D4D4D4;
}

.table,
.log {
    margin-top: 2px;
    margin-bottom: 2px;
    color: var(--textColor);
    padding-left: 15px;
    padding-right: 15px;
    font-family: var(--font-family-IBM);
}

.object {
    color: var(--textColor);
    margin-left: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-top: bottompx;
    font-family: var(--font-family-IBM);
    border-left: 1px dashed var(--dimText);

}

.object-key {
    color: var(--textColor);
}

.object-value {
    display: inline;
    color: var(--dimText);
}

.object-child:hover {
    cursor: pointer;
    background-color: #f5f5
}

.table-header::before {
    margin-right: 8px;
}

.table-header:not(.expanded):before,
.object-key:not(.no-expand):before {
    cursor: pointer;
    margin-left: 8px;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.3s;
    font-family: 'NerdFontSymbols';
    font-size: var(--font-xSmall);
    content: "\f054";
}

.object-key:not(.no-expand),
.object-key.expanded {
    background-color: var(--hover);
    cursor: pointer;
    padding: 3px;
    margin: 3px;
}

.object-key.expanded:hover,
.object-key:not(.no-expand):hover {
    filter: brightness(1.1);
}

.table-header.expanded:not(.no-expand):before,
.object-key.expanded:not(.no-expand):before {
    font-family: 'NerdFontSymbols';

    content: "\f0140";
}








.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Fill the parent container */
    max-height: calc(100% - 1px);
    /* Prevent it from growing beyond its parent */
    overflow: hidden;
    background-color: var(--primary);
    border-top: 1px solid var(--secondary);
    width: 100%;
    max-width: 950px;
    min-width: 100px;
    margin: auto;
}

#chat {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    max-height: calc(100% - 170px);
    /* Adjust based on the height of #user-input */
    min-height: calc(100% - 170px);
    border-bottom: 1px solid var(--secondary);
    font-family: var(--font-family-inter)
}

#chat strong {
    font-family: var(--font-family-Sans);
}

.controls-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Vertically centers the content */
    justify-content: flex-start;
    /* Aligns content to the start horizontally, you can adjust this as needed */
    height: 20px;
    padding: 4px;
    margin: 5px;
    padding-right: 5px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0px;
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    border-radius: 5px 5px 0px 0px;
    /* filter: brightness(0.7); */
    opacity: 0.5;
    user-select: none;
    transition: all 0.3s;
    border-bottom: none;
}

.controls-container:hover {
    /* filter: brightness(0.95); */
    opacity: 1;
}

.gpt-model-wrapper {
    margin-left: auto;
}

#gpt-model-select {
    font-family: var(--font-family-Sans);
    flex-basis: 58%;
    padding: 7px 10px;
    padding-bottom: 5px;
    padding-left: 35px;
    padding-right: 35px;
    margin-bottom: 0;
    background-color: var(--secondary);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border: none;
    border-left: 1px solid var(--borderColor);
    border-radius: 0px;
    box-sizing: border-box;
    cursor: pointer;
    margin-right: 0px;
    font-size: var(--font-small);
    display: none;
}

.dropdown-icon {
    content: "";
    background-image: url('images/icons/gpt.png');
    background-size: cover;
    background-position: center;
    width: 17px;
    height: 17px;

    color: transparent;
    border-radius: 50%;
    background-color: #ab68ff;
    position: relative;
    top: 7px;
    margin-right: -26px;
    pointer-events: none;
}

.dropdown-icon.gpt-35-color {

    background-color: #19c37d;
}

.dropdown-icon.gemini-color {
    background-image: url('images/icons/gemini.svg');
    background-color: transparent
}

.dropdown-icon.claude-color {
    background-image: url('images/icons/claude.png');
    background-color: transparent
}

.controls-container span {
    color: var(--textColor);
    font-size: var(--font-small);
    margin-right: 5px;
    margin-left: 0px;
}

/* Styles for the file name span */
#file-name-span {
    color: var(--dimText);
    position: relative;
}


#file-name-span::before {
    content: "\f15b";
    font-family: 'NerdFontSymbols';
    margin-right: 3px;
    font-size: 10px;
    border: none;
    background: transparent;
    text-align: center;
    color: var(--dimText);
    white-space: nowrap;
    position: relative;
    top: -2px;
}

#user-input {
    display: flex;
    padding: 10px;
    padding-top: 0px;
    height: 90px;
    /* Fixed height for input area */
    /* border-top: 1px solid var(--secondary); */
    background-color: var(--primary);

    max-width: 950px;
    min-width: 100px;
    margin: auto;
}


/* ... other styles ... */


#user-input input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--darker);
    border-radius: 5px;
    margin-right: 10px;
    height: 40px;
    /* Fixed height for input */
}

.message {
    display: flex;
    align-items: flex-start;
    /* Align items to the top */
    margin-bottom: 10px;
    color: var(--textColor);
    max-width: 950px;
    min-width: 100px;
    margin: auto;
    /* animation: fadeIn 0.3s ease-in-out; */
}

.message.user-message {
    align-items: flex-end;
    margin-bottom: 10px;
}

/* Add these styles to your existing CSS */
.user-message .message-content {
    background-color: var(--secondary);
    /* Light blue background for user message */
    border: 1px solid var(--borderColor);
    /* Optional: add a border */
    padding: 10px;
    margin: 2px;
    border-radius: 12px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 8px;
    min-width: calc(100% - 35px);
}

.bot-message .message-content {
    background-color: var(--primary);
    /* Different shade of blue for bot message */
    /* border: 1px solid var(--backGround); */
    /* Optional: add a border */
    padding: 5px;
    margin: 2px;
    border-radius: 4px;
    padding-left: 15px;
    padding-right: 15px;
    min-width: calc(100% - 35px);
}

.icon-label-container {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    margin-top: 10px;
    padding: 9px;
    /* background-color: var(--hover); */
    border-radius: 15px;
    color: var(--textColor);
    font-weight: 600;
    font-family: var(--font-family-Sans);
}

.icon-label-container i {
    margin-right: 5px;
    margin-bottom: 0px;
    color: #519aba;
}

.message.user-message .icon-label-container {
    /* background-color: var(--secondary); */
    border-radius: 30px;
    padding: 5px 5px;
    padding-left: 10px;
    margin-bottom: 5px;

}

.message.bot-message .icon-label-container {
    /* background-color: var(--secondary); */
    border-radius: 30px;
    padding: 5px 5px;
    padding-right: 15px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.message.user-message .icon-label-container i {
    margin-right: 0px;
    margin-left: 8px;
}

.icon-label-container i.fa-user::before {
    /* display: none; */
    border-radius: 4px;
    font-family: 'NerdFontSymbols';
    padding: 2px;
    border: none;
    background: transparent;
    content: "\f2bd";
    font-size: 24px;
    position: relative;
    left: -2px;
}

.icon-label-container i.fa-user {
    /* content: ""; */
    /* background-image: url('images/aijsv5.png'); */
    background-size: cover;
    background-position: center;
    width: 25px;
    height: 25px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;
    /* background-color: #ab68ff; */
}

/* .icon-label-container i.fa-robot.gemini-color::before {
    border-radius: 4px;
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    background: transparent;
    cursor: pointer;
    content: "\f0ae2";
    font-size: 21px;
    padding: 4px 2px;
} */
.icon-label-container i.fa-robot.gemini-color {
    content: "";
    background-image: url('images/icons/gemini.svg');
    background-size: cover;
    background-position: center;
    width: 25px;
    height: 25px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;
    /* background-color: #ab68ff; */
}

.icon-label-container i.fa-robot.claude-color {
    content: "";
    background-image: url('images/icons/claude.png');
    background-size: cover;
    background-position: center;
    width: 25px;
    height: 25px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;
    /* background-color: #ab68ff; */
}

.icon-label-container i.fa-robot.gemini-color::before,
.icon-label-container i.fa-robot.gpt-35-color::before,
.icon-label-container i.fa-robot.gpt-4-color::before {
    display: none;
}

.icon-label-container i.fa-robot.gpt-35-color,
.icon-label-container i.fa-robot.gpt-4-color {
    content: "";
    background-image: url('images/icons/gpt.png');
    background-size: cover;
    background-position: center;
    width: 25px;
    height: 25px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;
    background-color: #ab68ff;
}

.icon-label-container i.fa-robot.gpt-35-color {
    background-color: #19c37d;
}

.icon-label-container i.fa-robot {
    color: #19c37d;
}

.icon-label-container i.fa-robot.gpt-4-color {
    color: #ab68ff;
}

.icon-label-container i.fa-robot.gpt-35-color {
    color: #19c37d;
}

.icon-label-container i.fa-robot.gemini-color {
    color: #87a9ff;
}

.message-content {
    margin-left: 34px;

    /* Align the text under the icon-label, adjust as needed */
}

/* Adjust the .message class if needed to ensure proper spacing and alignment */
.message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    /* Space between messages, adjust as needed */
}


.user-icon i,
.bot-icon i {
    font-size: 20px;
    /* Adjust icon size */
}

/* General text elements */
.message-content {
    line-height: 1.5;
    color: var(--textColor);

}

/* Headings */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.message-content h1 {}

.message-content h2 {}

.message-content h3 {}

/* Paragraphs */
.message-content p {
    margin-top: 0;
    margin-bottom: 0px;
}

/* Lists */
.message-content ul,
.message-content ol {
    padding-left: 2em;
    margin-top: 0;
    margin-bottom: 10px;
}

.message-content li {
    margin-top: 0.25em;
}

/* Links */
.message-content a {
    color: var(--href-color);
    text-decoration: none;
}

.message-content a:hover {
    text-decoration: underline;
}

/* Blockquotes */
.message-content blockquote {
    margin: 0;

    color: var(--dimText);
    border-left: 0.25em solid var(--borderColor);
    background-color: var(--darker);
}

/* Code Blocks and Inline Code */
.message-content pre,
.message-content code {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    /* font-family: var(--font-family-editor); */

}

pre[class*="language-"] code {
    padding: 0px !important;
}

.message-content pre {
    margin-bottom: 10px;
    /* Reset default margin */
    padding: 0px;
    /* Maintain padding for internal spacing */
    background-color: transparent;
    /* Background color */
    color: var(--textColor);
    /* Text color */
    overflow-x: auto;
    border-radius: 5px;

}

.message-content pre {}

.message-content code {
    background-color: var(--hover);
    border-radius: 5px;
    /* padding: 1px 5px; */
    /* font-weight: bold; */
    font-weight: var(--codeFontWeight);
}

.message-content code[class*="language-"] {
    padding: 0px;
}

.message-content pre {
    /* border-radius: 11px;
    border: thin solid var(--borderColor);
    overflow: hidden; */
}

.message-content {
    display: inline-block;

    border-radius: 5px;
    padding: 5px;
    margin-left: 34px;
    color: var(--textColor);
    line-height: 1.5;
    word-break: break-word;
    /* Remove max-width to allow the size to fit the content */
}

.message-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}


#input-box {
    white-space: pre-wrap;
    /* Allows line breaks and preserves whitespace */
    overflow-wrap: break-word;
    width: 100%;
    margin-right: 0px;
    resize: none;
    background-color: var(--codePrimary);
    background-color: var(--secondary);
    font-size: var(--font-med);
    border-radius: 0px 0px 0px 4px;
    border-right: none;
    scrollbar-width: thin;
    scrollbar-color: var(--hover) var(--primary);
    color: var(--editor-foreground);
    color: var(--textColor);
}

#input-box::placeholder {
    color: var(--noteText);
    /* color: var(--editor-foreground); */
}

#input-box::-webkit-scrollbar {
    width: 8px;
}

.user-input {
    width: 100%;
    padding: 10px;
    font-family: 'Arial', sans-serif;

    border: 1px solid var(--borderColor);
    border-radius: 4px;

    transition: border-color 0.3s;
    color: var(--textColor);


}

.user-input::placeholder {
    color: var(--textColor);
    /* font-style: italic; */
}

.user-input:focus {
    border: 1px solid var(--borderColor);
    outline: none;
    box-shadow: none;
}



#send-button {
    background-color: transparent;
    color: var(--editor-foreground);
    border: none;
    border-radius: 4px;
    padding: 0px 25px;
    /* color: var(--dimText); */
    cursor: pointer;
    font-size: 19px;

    border-radius: 0px 0px 4px 0px;
    height: 88px;
    margin-top: 1px;
    border: 1px solid var(--borderColor);
    border-left: none;
    transition: all 0.2s;
}

#send-button:hover {
    /* background-color: var(--hover); */
    color: var(--accent);
    filter: brightness(1.10);
}

.chat-icon {
    font-size: 24px;
    color: var(--accent);
    margin-right: 10px;
}

.bot-response-content {
    display: flex;
    flex-direction: column;
    /* Other styles as needed */
}

.gpt-response-buttons {
    display: flex;
    justify-content: flex-start;
    padding: 0px;
    /* background-color: var(--secondary);
    border: 1px solid var(--borderColor); */
    border-radius: 55px;
    overflow: hidden;
    background-color: transparent;
    border: none;
    max-width: 950px;
    min-width: 100px;
    margin: auto;
}

.gpt-regenerate-button {
    padding: 0px;
    color: var(--dimText);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 55px;
    width: 40px;
    height: 40px;
}

.gpt-regenerate-button::before {
    border-radius: 4px;
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    background: transparent;
    cursor: pointer;
    content: "\f0453";
    font-size: 21px;
}

.gpt-regenerate-button:hover {
    /* background-color: var(--secondary); */
    color: var(--textColor);
}



/* General Styles for pre and code */

code {
    /* display: block; */
    /*width: 100%;*/
    /* Full width */
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;

    white-space: pre-wrap;

}

pre {
    /* display: block; */
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;

    white-space: pre-wrap;
    background-color: var(--primary);

}

/* Styles specifically for pre elements */
pre {
    padding: 0px;
    margin: 0px;
    overflow-x: auto;
    /* Horizontal scrolling */
    /* background-color: var(--accent); */
    /* Black background */
    color: var(--textColor);
    /* White text */
    margin-top: 10px;
    overflow: hidden;

}

/* Styles for code elements inside pre */
pre code {
    background-color: transparent;
    /* Clear background */
    color: inherit;
    /* Inherit text color from parent */
    padding: 0px;
    /* No additional padding */
    border-radius: 0;
    margin-bottom: -5px;
    overflow: hidden;

}

.message-content code {}

.code-block {
    margin-top: 0px;
    overflow: hidden;
    /* Ensures child elements do not overflow the border-radius */

    font-size: var(--font-med);
}

.code-header {
    display: flex;
    justify-content: flex-start;
    background-color: var(--codeHeader);
    color: var(--textColor);
    padding: 3px 4px;
    padding-left: 10px;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    margin-bottom: -10px;
    margin-top: 0px;
    font-family: var(--font-family-IBM);
    border: 1px solid var(--borderColor);
    border-bottom: none;
    min-height: 30px;
}

.code-language {
    /* font-weight: bold; */
    font-family: var(--font-family-Sans);
    color: var(--dimText);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-language::before {
    font-family: 'NerdFontSymbols';
    content: "\f44f";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--dimText);
    margin-right: 8px;
    font-size: 13px;
    position: relative;
    top: 0px;
    transition: all 0.2s;
}

.insert-button,
.copy-button {
    background-color: var(--codeHeader);
    color: var(--dimText);
    border: none;
    padding: 3px 5px;
    padding-right: 8px;
    margin-bottom: 3px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    font-family: var(--font-family-Sans);
}


.button-container-code-buttons {
    position: absolute;
    bottom: 5px;
    /* Adjust these values as needed */
    right: 5px;
}

.code-block {
    position: relative;
    /* This makes the positioning of the button-container relative to the code-block */
}

.second-insert-button,
.second-copy-button {
    position: relative;
    background-color: var(--editor-background);
    color: var(--editor-foreground);
    background-color: var(--codePrimary);
    opacity: 0.2;
    min-height: 27px;
    font-family: var(--font-family-Sans);
}

.insert-button {
    margin-left: auto;
    margin-right: 3px;
}

.insert-button:hover,
.copy-button:hover {
    background-color: var(--secondary);
    color: var(--textColor);
    opacity: 1;
}

.second-copy-button:hover,
.second-insert-button:hover {
    background-color: var(--editor-background);
    color: var(--editor-foreground);
    opacity: 1;
}

.copy-button::before,
.insert-button::before {
    font-family: 'NerdFontSymbols';
    content: "\f09a8";
    background-color: transparent;
    padding: 4px;
    border-radius: 5px;
    color: var(--noteText);
    margin-right: 2px;
    font-size: 10px;
    position: relative;
    top: -2px;
    transition: all 0.2s;
}

.copy-button:hover::before,
.insert-button:hover::before {
    color: var(--textColor);
}

.copy-button::before {
    content: "\f018f";
}

pre[class*="language-"] {
    background-color: var(--codePrimary);
    color: var(--textColor);
    padding: 0px;
    margin: 0;
    overflow-x: auto;
    max-width: 100%;
    font-size: var(--font-xSmall);
}

/* Remaining CSS stays the same */
pre[class*="language-"] {
    background: var(--codePrimary) !important;
    border-radius: 0px 0px 11px 11px !important;
    border: 1px solid var(--borderColor) !important;
    margin-bottom: 0px !important;
}

pre[class*="language-"] code {
    white-space: pre-wrap;
    background: var(--codePrimary);
    padding: 5px;
    font-size: 0.85rem;
}

/* Customize tokens like keywords, strings, etc. */
.token.keyword {
    color: #ff79c6;
}

.token.string {
    color: #f1fa8c;
}

pre[class*="language-"],
code[class*="language-"] {
    color: var(--textColor);
    font-size: var(--font-small);
    text-shadow: none;
    font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
    font-family: var(--font-family-editor);

    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.monaco-editor {
    font-family: var(--font-family-editor);
}

pre[class*="language-"]::selection,
code[class*="language-"]::selection,
pre[class*="language-"] *::selection,
code[class*="language-"] *::selection {
    text-shadow: none;
    background: var(--textHilight);
    /* color:var(--backGround); */
}

@media print {

    pre[class*="language-"],
    code[class*="language-"] {
        text-shadow: none;
    }
}

pre[class*="language-"] {
    padding: 1em;
    padding-bottom: 35px;
    margin: .5em 0;
    overflow: auto;
    background: var(--token-default-bg);
}

:not(pre)>code[class*="language-"] {
    padding: .1em .3em;
    border-radius: .3em;
    color: #db4c69;
    background: var(--primary);
}

/*********************************************************
* Tokens
*/
.namespace {
    opacity: .7;
}

.token.doctype .token.doctype-tag {
    color: var(--token-metatag-html-fg);
}

.token.doctype .token.name {
    color: var(--token-metatag-content-html-fg);
}

.token.comment,
.token.prolog {
    color: var(--token-comment-fg);

}

.token.punctuation,
.language-html .language-css .token.punctuation,
.language-html .language-javascript .token.punctuation {
    color: var(--token-default-fg);
}


.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.inserted,
.token.unit {
    color: var(--token-number-fg);
}

.token.property {
    color: var(--token-attribute-name-fg);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.deleted {
    color: var(--token-string-fg);
}

.language-css .token.string.url {
    text-decoration: underline;
}

.token.operator,
.token.entity {
    color: var(--token-delimiter-fg);
}

.token.operator.arrow {
    color: var(--token-keyword-fg);
}

.token.atrule {
    color: var(--token-string-fg);
}

.token.atrule .token.rule {
    color: var(--token-keyword-flow-fg);
}

.token.atrule .token.url {
    color: var(--token-default-fg);
}

.token.atrule .token.url .token.function {
    color: var(--token-type-fg);
}

.token.atrule .token.url .token.punctuation {
    color: var(--token-type-fg);
}

.token.keyword {
    color: var(--token-keyword-fg);
}

.token.keyword.module,
.token.keyword.control-flow {
    color: var(--token-keyword-flow-fg);

}


.token.function .token.maybe-class-name {
    color: var(--token-default-fg);
}

.token.function {
    color: var(--token-functionName-fg);
}

.token.regex {
    color: var(--token-regexp-fg);

}

.token.important {
    color: var(--token-keyword-fg);
}

.token.italic {
    font-style: italic;
}

.token.constant {
    color: var(--token-default-fg);

}

.token.class-name,
.token.maybe-class-name {
    color: var(--token-type-fg);
}

.token.console {
    color: var(--token-default-fg);

}

.token.parameter {
    color: var(--token-default-fg);

}

.token.interpolation {
    color: var(--token-default-fg);

}

.token.punctuation.interpolation-punctuation {
    color: var(--token-keyword-fg);
}

.token.boolean {
    color: var(--token-keyword-fg);
}


.token.variable,
.token.imports .token.maybe-class-name,
.token.exports .token.maybe-class-name {
    color: var(--token-default-fg);

}

.token.selector {
    color: var(--token-tag-fg);
}

.token.escape {
    color: var(--token-tag-fg);
}

.token.tag {
    color: var(--token-tag-html-fg);
}

.token.tag .token.punctuation {
    color: var(--token-delimiter-html-fg);
}

.token.cdata {
    color: var(--token-delimiter-html-fg);
}

.token.attr-name {
    color: var(--token-attribute-name-html-fg);

}

.token.attr-value,
.token.attr-value .token.punctuation {
    color: var(--token-string-fg);
}

.token.attr-value .token.punctuation.attr-equals {
    color: var(--token-delimiter-fg);
}

.token.entity {
    color: var(--token-keyword-fg);
}

.token.namespace {
    color: var(--token-delimiter-fg);
}

/*********************************************************
* Language Specific
*/
pre[class*="language-"],
code[class*="language-"] {
    color: var(--token-default-fg);
}

pre[class*="language-javascript"],
code[class*="language-javascript"],
pre[class*="language-jsx"],
code[class*="language-jsx"],
pre[class*="language-typescript"],
code[class*="language-typescript"],
pre[class*="language-tsx"],
code[class*="language-tsx"] {
    color: var(--token-default-fg);

}

pre[class*="language-css"],
code[class*="language-css"] {
    color: var(--token-tag-fg);
}

pre[class*="language-html"],
code[class*="language-html"] {
    color: var(--token-default-fg);
}

pre[class*="language-css"],
code[class*="language-css"] {
    color: var(--token-attribute-value-css-fg);
}

.language-regex .token.anchor {
    color: var(--token-type-fg);
}

.language-html .token.punctuation {
    color: var(--token-delimiter-html-fg);
}

/*********************************************************
* Line highlighting
*/
pre[class*="language-"]>code[class*="language-"] {
    position: relative;
    z-index: 1;
}

.line-highlight.line-highlight {
    background: #f7ebc6;
    box-shadow: inset 5px 0 0 #f7d87c;
    z-index: 0;
}



.mint-menu {
    border-top: 1px solid var(--borderColor);
    background-color: var(--primary);
    color: var(--textColor);
    padding: 0px;
    overflow-y: auto;
    height: 100%;
    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: var(--font-med);
    border: none;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-family-IBM);
    max-height: calc(100% - 20px);
    max-width: calc(100% - 2px);
    padding: 10px;
}

.dynamic-content-button {
    background-color: var(--darker);
    color: var(--dimText);
    border: none;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s, transform 0.2s;
    margin: 0 10px;
    flex: 1;
    font-size: var(--font-large);
    /* max-width: 250px; */
}

.dynamic-content-button:first-child {
    /* background-color: var(--accent); */
    border: 1px solid var(--accent);
    color: var(--textColor);

}

.dynamic-content-button-left {
    background-color: var(--secondary);
    color: var(--textColor);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 20px;
    transition: background-color 0.2s, transform 0.2s;
    /* border: 1px solid var(--borderColor); */

    font-size: var(--font-med);
}

.dynamic-content-button-left:hover {
    background-color: var(--hover);
}

.dynamic-content-button:hover {
    filter: brightness(1);
    background-color: var(--hover);
    color: var(--textColor);
}

.dynamic-content-button:first-child:hover {
    color: white;
    background-color: var(--accent);
    filter: brightness(1.15);
}

.dynamic-content-container {
    display: flex;
    background-color: var(--secondary);
    border: 1px solid transparent;


    overflow: hidden;
    box-shadow: 0 4px 6px var(--boxShadow);
    margin: auto;

    min-width: 350px;
    margin-top: 0px;
    margin-bottom: 10px;
    border-radius: 5px;
    /* border-left: 2px solid var(--hover); */
}

.dynamic-content-left,
.dynamic-content-right {
    flex: 1;
    padding: 10px;
    background-color: var(--primary);
}

.dynamic-content-left {
    justify-content: flex-start;
    max-width: 36%;
    min-width: 150px;
    border-right: 1px solid var(--secondary);
}

.dynamic-content-right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--secondary);
}

.right-buttons-wrapper {
    position: absolute;
    top: 60px;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}


.dynamic-content-section {
    margin-bottom: 10px;
}

.dynamic-content-container:hover {
    border: 1px solid var(--borderColor);
    /* border-left: 2px solid var(--hover); */
}

.dynamic-content-label {
    display: block;

    color: var(--dimText);
    width: 80%;
    font-size: var(--font-med);
}

.dynamic-content-field {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 5px;
}

.dynamic-content-field:last-child {}

.dynamic-content-label {
    margin-right: 10px;
    color: var(--dimText);
    display: inline-block;
}

.img-button-wrapper {
    display: flex;
    align-items: left;
    justify-content: flex-start;
    gap: 0px;
    background-color: var(--secondary);
    border: 1px solid var(--hover);
    border-radius: 30px;
    margin-bottom: 10px;
    padding: 3px;
    overflow: hidden;
    min-height: 32px;
    ;
}

.dynamic-content-button-top {
    border-radius: 20px;
    padding: 5px 6px;
    margin: 0;
    margin-left: 5px;
    font-size: 17px;
    border: none;
    background-color: transparent;
    background-color: var(--secondary);
    color: var(--textColor);
    cursor: pointer;
    margin-right: auto;
}

.dynamic-content-button-top:hover {
    background-color: var(--hover);
}

.dynamic-content-image {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: contain;
    background-color: white;
    /* background-color: var(--backGround); */
    padding: 5px;
    position: relative;
    top: 1px;
    left: 1px;
}

.supporter-indicator,
.partnership-indicator {
    /* Example positioning; adjust as needed */
    position: relative;
    top: 0dvb;

    padding: 5px;
    margin-left: 5px;
    cursor: pointer;
    background-color: var(--primary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
}

.supporter-indicator:hover,
.partnership-indicator:hover {
    background-color: var(--hover);


}

.supporter-indicator::before,
.partnership-indicator::before {
    content: "\f09f2";
    font-family: 'NerdFontSymbols';
    font-weight: 500;
    display: block;
    font-size: 20px;
    color: #19c37d;
    text-align: center;
    line-height: 22px;
}

.partnership-indicator::before {
    content: "\f15a1";
    color: #2885ff;
}

.blockchain-icon {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: contain;
    background-color: transparent;
    padding: 2px;
    margin-left: 5px;
    cursor: pointer;
}


.info-section {
    background-color: var(--primary);
    border: 1px solid var(--secondary);
    padding: 10px;
    text-align: left;
    gap: 10px;
    font-size: var(--font-med);
    border-radius: 5px;
    margin-bottom: 10px;
}

.info-section:hover {
    border: 1px solid var(--borderColor);
}

.info-section span {
    margin-top: 10px;
    background-color: var(--secondary);
    color: var(--textColor);
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--borderColor);
}

.info-button {
    background-color: var(--darker);
    color: var(--textColor);
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 5px;
    transition: background-color 0.2s, transform 0.2s;
    font-size: var(--font-large);
}

.info-button:hover {
    background-color: var(--hover);
    color: var(--textColor);
}

.dynamic-content-button-close {
    background-color: var(--darker);
    color: var(--textColor);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.2s, transform 0.2s;

    font-size: var(--font-small);
    margin-top: 20px;
    margin-bottom: 5px;
    /* margin-left: auto; */
}

.dynamic-content-button-close:hover {
    background-color: var(--hover);
}

.dynamic-content-button-close::before {
    content: "\f138";
    font-family: 'NerdFontSymbols';
    font-weight: 500;
    font-size: var(--font-med);
    color: var(--dimText);
    text-align: center;
    position: relative;
    margin-right: 5px;
    top: -1px;
}

.info-content {
    display: none;
    color: var(--textColor);
    background-color: var(--primary);
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--boxShadow);
}

.info-content.show {
    display: block;
    /* Show this content when button is clicked */
}

.info-section-button {
    background-color: var(--darker);
    color: var(--textColor);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.2s, color 0.2s;
    margin-right: 10px;
    /* Adjust based on layout */
    font-size: var(--font-med);
    /* Adjust based on preference */
    text-align: center;

}

.info-section-button:hover,
.info-section-button:focus {
    color: white;
    background-color: var(--accent);
    filter: brightness(1);
}

.info-section-button.active {
    background-color: var(--accent);
    color: var(--secondary);
    border-color: var(--accent);
}

.dynamic-content-about {
    background-color: var(--secondary);
    color: var(--textColor);
    padding: 10px 15px;
    border-radius: 5px;
    margin: 10px 0;
    font-family: var(--font-family-IBM);

    border: 1px solid var(--borderColor);
    border-radius: 5px;

}

.dynamic-content-button-about {
    margin-bottom: 0px;
    background-color: var(--darker);
    border: none;
    padding: 5px 10px;
    color: var(--textColor);
    cursor: pointer;
    margin-top: 112px;
    border-radius: 30px;
    align-self: flex-start;
    white-space: nowrap;
    flex-direction: row;

}

.dynamic-content-button-about:hover {
    background-color: var(--hover);

}

.dynamic-content-button-about::before {
    content: "\f138";
    font-family: 'NerdFontSymbols';
    font-weight: 500;
    font-size: var(--font-med);
    color: var(--dimText);
    text-align: center;
    position: relative;
    margin-right: 5px;
    top: -1px;
}



/*********************** AI imager  **************************/
.ai-imager-menu {
    border-top: 1px solid var(--borderColor);
    background-color: var(--primary);
    color: var(--textColor);
    padding: 0px;
    overflow-y: auto;
    height: 100%;
    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: var(--font-med);
    border: none;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-family-IBM);
    max-height: calc(100% - 0px);
    max-width: calc(100% - 2px);
    padding: 0px;
}

#stableDiffusionContainer {
    display: flex;
    flex-direction: column;
    height: calc(100% - 15px);
    background-color: var(--primary);
    color: var(--textColor);
    overflow: hidden;
    padding: 10px;
    padding-bottom: 0px;
    padding-bottom: 5px;
}


.ai-top-div {
    flex: 85%;
    box-sizing: border-box;
    overflow: hidden;
}

.ai-bottom-div {
    flex: 15%;
    gap: 0px;
    padding: 0px;
    box-sizing: border-box;
    min-height: 100px;
    background-color: var(--secondary);

}

.ai-preview-container {
    display: flex;
    height: calc(100% - 10px);
    gap: 10px;
}

.ai-code-preview,
.ai-output-preview {
    flex: 1;
    padding: 0px;
    border-radius: 11px;
}

.ai-code-preview,
.ai-output-preview {
    background-color: var(--primary);
}

.ai-bottom-div {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0px;
    /* background-color: var(--secondary); */
    border: 1px solid var(--borderColor);
    border-radius: 11px;
    overflow: hidden;
}

.ai-hash-container,
.ai-controls-div,
.ai-prompt-div {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0px 0px;

}

.ai-controls-div {
    padding: 5px 5px;
    background-color: var(--darker);
    border-bottom: 1px solid var(--borderColor);
}

.ai-hash-container label,
.ai-controls-div label {
    white-space: nowrap;

    font-size: var(--font-med);
    padding: 5px 5px;
}

.ai-hash-container input,
.ai-controls-div input,
.ai-prompt-div textarea {
    flex-grow: 1;
}

.ai-prompt-div {
    flex-direction: row;
    flex-grow: 1;
}

.ai-prompt-div textarea {
    height: 100%;
    resize: vertical;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0px 0px 0px 5px;
    border: none;
    background-color: var(--secondary);
    color: var(--textColor);
    resize: none;
    margin-right: 10px;
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    outline: none;
    min-height: 0px;
    margin-top: 0px;
    margin-top: 1px;
}

.ai-prompt-div textarea:focus {
    /* border: 1px solid var(--accent); */
}

.ai-bottom-div input {
    outline: none;
    border: 1px solid var(--borderColor);
    background-color: var(--secondary);
    color: var(--dimText);
    padding: 4px 5px;
    border-radius: 5px;
    min-width: 10px;
    font-size: var(--font-med)
}

.ai-bottom-div input:focus {
    border: 1px solid var(--accent);
}

#widthInput,
#heightInput {
    max-width: 50px;
}

#hashInput {
    color: var(--noteText);
    max-width: 90px;
}

#ai-generate-hash-button {
    background-color: var(--darker);
    padding: 2px 5px;
    border: none;
    color: var(--textColor);
    border-radius: 5px;
    margin-right: 5px;
}

#ai-generate-hash-button:hover {
    background-color: var(--hover)
}

.gallery-ai-button,
.download-ai-button {
    background-color: transparent;
    padding: 2px 5px;
    border: none;
    color: var(--dimText);
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
}

.gallery-ai-button {
    margin-left: auto;
}

.gallery-ai-button:hover,
.download-ai-button:hover {
    color: var(--textColor);
}

.gallery-ai-button::before,
.download-ai-button::before,
#ai-generate-hash-button::before {
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    background: transparent;
    font-size: var(--font-large);
    content: "\f074";
    position: relative;
    top: 0px;
}

.gallery-ai-button::before {
    content: "\f0976";

}

.download-ai-button::before {
    content: "\f409";
}

.ai-hash-container label::before,
.ai-controls-div label::before {
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    color: #cbc93d;
    background: transparent;
    font-size: var(--font-large);
    content: "\f0e62";
    margin-right: 5px;
    position: relative;
    top: -1px;
}

.ai-controls-div label[for="hashInput"]::before {
    content: "\f032a";
    color: #8dc149;
    font-size: var(--font-med);
}

.ai-controls-div label[for="widthInput"]::before {
    content: "\f0c8e";
    color: #519aba;
}

.ai-controls-div label[for="heightInput"]::before {
    content: "\f0c8e";
    color: #519aba;
}

.ai-controls-div button {
    cursor: pointer;
}

.ai-code-preview,
.ai-output-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-code-preview-header,
.ai-output-preview-header {
    font-size: var(--font-large);
    color: var(--textColor);
    /* background-color: var(--darker); */
    margin-bottom: 0px;
    padding: 7px 15px;
    border-radius: 5px 5px 0px 0px;
    white-space: nowrap;
    display: flex;
    padding-right: 5px;
}

.ai-output-preview-header {
    align-items: flex-end;
}

.ai-code-preview-header::before,
.ai-output-preview-header::before {
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    color: #ff575b;
    background: transparent;
    font-size: var(--font-large);
    content: "\e796";
    margin-right: 10px;
    position: relative;
    top: 2px;
}

.ai-output-preview-header::before {
    content: "\f02e9";
    color: #519aba;
    top: -2px;
}

.ai-code-preview iframe {
    flex: 1;
    width: 100%;
    border: none;
    background-color: var(--secondary);
    border-radius: 11px;
}

.ai-output-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary);
    border-radius: 11px;
    overflow: hidden;

}

.ai-output-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

}

#aiRetryButton,
#generateButton {
    width: 150px;
    padding: 7px 3px;
    padding-right: 9px;
    border-radius: 30px;
    margin-right: 0px;
    margin-bottom: 10px;
    border: none;
    outline: none;
    color: var(--textColor);
    background-color: var(--darker);
    /* border: 1px solid var(--hover); */
    font-size: var(--font-xlarge);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-family-IBM);
    white-space: nowrap;
    border-radius: 30px 0px 0px 30px;
    height: 35px;
}

#aiRetryButton {
    width: auto;
    aspect-ratio: 1/1;
    margin-right: 15px;
    padding: 7px;
    height: 35px;
    margin-left: -5px;
    border-radius: 0px 30px 30px 0px;
    border-left: none;
    color: var(--dimText);
}

#aiRetryButton::before {
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;

    background: transparent;
    font-size: 21px;
    content: "\f0453";
    position: relative;
    top: -2px;
    right: -1px
}

#aiRetryButton:hover,
#generateButton:hover {
    /* border: 1px solid var(--accent); */
    background-color: var(--hover);
    color: var(--textColor);
}

#generateButton::before {
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    color: var(--accent);
    background: transparent;
    font-size: var(--font-xlarge);
    content: "\f0ae2";
    margin-right: 10px;
    position: relative;
    top: -1px;
}






.account-area {
    display: flex;
    align-items: center;
    background-color: var(--pageHeader);
    padding: 2px 10px;

    margin-left: 0px;
    /* padding-left: 5px; */
    height: 40px;
    margin-left: auto;
}

.account-area:hover {
    /* background-color: var(--secondary); */

}

.profile-picture-profile {

    width: 33px;
    height: 33px;
    background-color: var(--primary);
    border-radius: 50%;

    background-size: cover;


}

.profile-picture-profile::before {
    border-radius: 4px;
    font-family: 'NerdFontSymbols';
    padding: 2px;
    border: none;
    background: transparent;
    content: "\f2bd";
    font-size: 34px;
    position: relative;
    left: 0px;
    top: 0px;
    color: var(--hover);

}

@-moz-document url-prefix() {
    .profile-picture-profile::before {
        left: -3px;
        top: -3px;
    }
}

.profile-picture-profile.logged-in::before {
    display: none;
    /* This will hide the ::before content */
}

.user-info {
    display: flex;
    flex-direction: column;
    font-size: var(--font-med);
    color: var(--textColor);

}

.user-info span {
    margin: 0px 0;
    padding-right: 20px;
    padding-left: 5px;
}

.dropdown-button-profile {
    margin-left: 0px;
    cursor: pointer;
    position: relative;
}

.dropdown-content-profile {
    display: none;
    position: absolute;
    background-color: var(--darker);
    border: 1px solid var(--borderColor);
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1005;
    border-radius: 11px;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% +1px);
    /* Add this line */
    overflow: hidden;
}

.dropdown-profile {
    position: relative;
    /* Add this line */
}

.dropdown-profile:hover .dropdown-content-profile {
    display: block;
    color: var(--textColor);
}

/* .account-area:hover .dropdown-content-profile {
    display: block;
    color: var(--textColor);
} */

.dropdown-button {
    font-family: var(--font-family-IBM);
    width: 100%;
    margin: 0px;
    padding: 5px 12px;
    border: none;
    background-color: transparent;
    color: var(--textColor);
    cursor: pointer;
    text-align: left;
}

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

.dropdown-button-profile::before {
    font-family: 'NerdFontSymbols';
    padding: 0px;
    border: none;
    color: var(--textColor);
    background: transparent;
    font-size: var(--font-med);
    content: "\eab4";
    margin-right: 10px;
    position: relative;
    top: -1px;
}

#languageSelector2 {
    padding: 5px;
    margin: 10px;
    width: 150px;
    background-color: var(--secondary);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
    border-radius: 4px;
    margin-top: 0px;
    margin-left: auto;
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    cursor: pointer;
}

#languageSelector {
    padding: 5px;
    margin-bottom: 0;
    background-color: var(--primary);
    color: var(--textColor);
    border: 1px solid var(--primary);
    border-radius: 4px;
    box-sizing: border-box;
    font-family: var(--font-family-IBM);
    font-size: var(--font-med);
    margin-left: 0px;
    margin-right: 5px;
    display: none;
}

.slider-wrapper .reset-button {
    flex-basis: auto !important;
}




/******************************* color picker ****************************************/
.color-picker-menu {
    border-top: 1px solid var(--borderColor);
    background-color: var(--primary);
    color: var(--textColor);
    padding: 0px;
    overflow-y: auto;
    height: 100%;
    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: var(--font-med);
    border: none;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-family-IBM);
    max-height: calc(100% - 0px);
    max-width: calc(100% - 2px);
    padding: 0px;
}


#colorPickerContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--checkardPatternB);
    background-image: linear-gradient(45deg, var(--checkardPatternA) 25%, transparent 25%, transparent 75%, var(--checkardPatternA) 75%, var(--checkardPatternA)),
        linear-gradient(45deg, var(--checkardPatternA) 25%, transparent 25%, transparent 75%, var(--checkardPatternA) 75%, var(--checkardPatternA));
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

#colorDisplay {
    width: 100%;
    min-height: 40px;
    display: flex;
    transition: all 0.1s;
}

#colorPickerSubContainer {
    border-top: 5px solid var(--backGround);
    border-bottom: 5px solid var(--backGround);
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: var(--backGround);
    max-height: calc(100% - 50px);
}

#colorPicker {
    position: relative;
    width: calc(100% - 210px);
    height: calc(100% - 0px);
    display: inline-block;
    vertical-align: top;
}

.gradient-background {
    width: 100%;
    height: 100%;
    cursor: crosshair;
    background: linear-gradient(to bottom, transparent, black),
        linear-gradient(to right, #000000, hsl(0, 100%, 50%));
    background-blend-mode: multiply;
}

#selectedColorDisplay {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0 0 2px #00000057;
    background: transparent;
}

#copyButton {
    margin: 0px;
    border: 0px;
    border-radius: 0px;
    border: 0px;
    cursor: pointer;
    border-radius: 0px;
    padding: 3px 13px;
    color: var(--textColor);
    background-color: var(--secondary);
    margin-left: 0px;
    height: 100%;
}

#copyButton:hover {
    background-color: var(--hover);
}

#colorCode {
    text-align: left;
    font-family: Arial, sans-serif;
    margin-top: 5px;
    color: var(--textColor);
    padding: 3px 6px;
    border-radius: 30px;
    margin-top: 5px;
    display: inline-block;
    height: 20px;
    margin-left: 5px;
    transition: all 0.1s;
    background-color: transparent;
    border: 2px solid transparent;
    display: flex;
    font-family: var(--font-family-IBM);
    font-size: var(--font-large);

}

#colorCode:focus {
    /* border: 2px solid var(--borderColor); */
    outline: none;
}

#copyButton::before,
#colorCode::before {
    font-family: "NerdFontSymbols";
    content: "\f1fc";
    background-color: transparent;
    padding: 0px;
    font-size: 15px;
    margin-right: 8px;
    position: relative;
    top: -1px;
}

#copyButton::before {
    content: "\f018f";
    margin-right: 0px;
    top: 0px;
}

#alphaSliderContainer,
#hueSliderContainer {
    position: relative;
    min-width: 30px;
    max-width: 30px;
    height: 100%;
    margin-left: 10px;
    padding: 0px;
    background-color: var(--checkardPatternB);
    background-image: linear-gradient(45deg, var(--checkardPatternA) 25%, transparent 25%, transparent 75%, var(--checkardPatternA) 75%, var(--checkardPatternA)),
        linear-gradient(45deg, var(--checkardPatternA) 25%, transparent 25%, transparent 75%, var(--checkardPatternA) 75%, var(--checkardPatternA));
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

#alphaSlider,
#hueSlider {
    border-top: none;
    border-bottom: none;
    width: 100%;
    height: calc(100% - 0px);
    background: linear-gradient(to bottom,
            hsl(0, 100%, 50%),
            hsl(60, 100%, 50%),
            hsl(120, 100%, 50%),
            hsl(180, 100%, 50%),
            hsl(240, 100%, 50%),
            hsl(300, 100%, 50%),
            hsl(360, 100%, 50%));
    transition: all 0.1s;
    cursor: pointer;
}

#alphaSlider {
    background: linear-gradient(to bottom, #000000, #00000000);
}

#alphaSliderKnob,
#hueSliderKnob {
    position: absolute;
    left: -2px;
    width: 34px;
    height: 7px;
    background-color: transparent;
    border: 1px solid black;
    cursor: grab;
    box-shadow: 0 0 0 2px #ffffff;
    box-sizing: border-box;
    top: 0px;
    border-radius: 0px;
}

.grabbing {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
}

#formatButtonsContainer {
    display: flex;
    flex-direction: column;
    width: 180px;
    border-left: 5px solid var(--backGround);
    background-color: var(--primary);
    overflow-y: auto;
    overflow-x: none;
    margin-left: 5px;
    padding: 5px;
    padding-right: 10px;

}

.formatButton {
    width: calc(100% - 10px);
    min-height: 25px;
    max-height: 25px;
    margin-left: 5px;
    border: none;
    border-radius: 8px;
    background-color: var(--d);
    color: var(--textColor);
    padding: 5px 10px;
    padding-bottom: 20px;
    margin-bottom: 5px;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.formatButton.active {
    background-color: var(--hover);
    border-radius: 8px;
}

.formatButton.active:hover {
    border-radius: 8px;
    background-color: var(--hover);
}

.formatButton:hover::after,
.formatButton.active::after {
    font-family: "NerdFontSymbols";
    content: "\eac6";
    background-color: transparent;
    font-size: 15px;
    position: absolute;
    top: calc(50% - 1px);
    right: 8px;
    transform: translateY(-50%);/
}

.formatButton:hover::after {
    color: var(--noteText);
}

.formatButton.active:hover::after {
    color: var(--textColor);
}

.formatButton:hover {
    border-radius: 8px;
    background-color: var(--darker);
}

#paletteButtonsContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--secondary);
    overflow-y: auto;
    overflow-x: none;
    max-height: 100%;
    border-radius: 11px;
    margin-top: 5px;
    padding: 10px 3px;
    padding-top: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--hover) var(--primary);
    min-height: 32px;
}

#paletteButtonsContainer::-webkit-scrollbar {
    width: 8px;
}

#addColorButton {
    width: 27px;
    height: 27px;
    margin: 3px;
    margin-right: 5px;
    border: none;
    border-radius: 50%;
    background-color: var(--darker);
    color: var(--textColor);
    font-size: 20px;

    cursor: pointer;
    position: relative;

}

#addColorButton:hover {
    background-color: var(--hover);
}

#addColorButton::before {
    font-family: "NerdFontSymbols";
    content: "\f44d";
    background-color: transparent;
    padding: 0px;
    font-size: 13px;
    margin-right: 0px;
    position: absolute;
    top: calc(50% + 1px);
    right: calc(25% + 1px);
    transform: translateY(-50%);
}

.colorButtonContainer {
    width: 24px;
    height: 24px;
    margin: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--checkardPatternB);
    background-image: linear-gradient(45deg, var(--checkardPatternA) 25%, transparent 25%, transparent 75%, var(--checkardPatternA) 75%, var(--checkardPatternA)),
        linear-gradient(45deg, var(--checkardPatternA) 25%, transparent 25%, transparent 75%, var(--checkardPatternA) 75%, var(--checkardPatternA));
    background-size: 10px 10px;
    border: 3px solid var(--secondary);
    transition: all 0.2s;
    background-position: 0 0, 5px 5px;
    overflow: none;
}

.paletteColorButton {
    width: 100%;
    height: 100%;
    border: 3px solid var(--secondary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.1s;
    transform: scale(1.05)
}

.paletteColorButton:hover {
    /* border: 2px solid var(--dimText); */
}

.paletteColorButton.active {
    border: 2px solid white;
    box-sizing: border-box;
}

.paletteColorButton.active::after {
    border-radius: 50%;
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px dashed black;
    box-sizing: border-box;
}

.paletteColorButton:hover::after {
    border: 3px dashed var(--backGround);
}

.colorDeleteButton {
    position: absolute;
    top: -13px;
    left: 22px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    width: 17px;
    height: 17px;
    z-index: 5;
    border: none;
    background-color: var(--hover);
    color: var(--textColor);
    border-radius: 50%;
    transition: opacity 0.2s, visibility 0.2s;
    /* Transition for opacity and visibility */
}

.colorButtonContainer:hover .colorDeleteButton {
    opacity: 1;
    visibility: visible;
}

.colorButtonContainer:hover {
    /* border-radius: 4px; */
    border: 3px solid var(--textColor)
}

.colorDeleteButton:hover {
    color: white;
    background-color: #cc3e44;
    filter: brightness(1.15);
}

.colorDeleteButton::before {
    font-family: "NerdFontSymbols";
    content: "\f467";
    background-color: transparent;
    padding: 0px;
    font-size: 13px;
    margin-right: 0px;
    position: absolute;
    top: calc(50% + 0px);
    right: calc(25% - 2px);
    transform: translateY(-50%);
}

.colorButtonContainer:hover .colorDeleteButton {
    display: block;
    position: absolute;

}


.themes-grid {

    flex-wrap: wrap;
    gap: 10px;
    max-height: 200px;
    overflow-y: scroll;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: calc(100% - 25px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

.theme-div {
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    height: 45px;
    white-space: wrap;
    border-radius: 8px;
    transition: all 0.2s;
    overflow: hidden;
    border: 2px solid transparent;
}

.theme-div.active-theme {
    border: 2px solid var(--borderColor);
    /* border-radius: 15px; */

}

.theme-div:hover {
    border: 2px solid var(--borderColor);
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.color-div {
    height: 10px;
    margin-top: 3px;
    border-radius: 3px;
}

.theme-div .color-1 {
    width: 40%;
    margin-bottom: 5px;
}

.theme-div .color-3 {
    width: 80%;
}

.theme-div[data-theme="aijs"] {
    background-color: #16191a;
}

.theme-div[data-theme="aijs"] .color-1 {
    background-color: #1b7eff;
}

.theme-div[data-theme="aijs"] .color-3 {
    background-color: #1a1e21;
}

.theme-div[data-theme="aijs"] .color-2 {
    background-color: #2b3236;
}

.theme-div[data-theme="aijs_blue"] {
    background-color: #171628;
}

.theme-div[data-theme="aijs_blue"] .color-1 {
    background-color: #316afb;
}

.theme-div[data-theme="aijs_blue"] .color-2 {
    background-color: #203260;
}

.theme-div[data-theme="aijs_blue"] .color-3 {
    background-color: #232a45;
}

.theme-div[data-theme="aijs_dark"] {
    background-color: #202020;
}

.theme-div[data-theme="aijs_dark"] .color-1 {
    background-color: #ab68ff;
}

.theme-div[data-theme="aijs_dark"] .color-2 {
    background-color: #424242;
}

.theme-div[data-theme="aijs_dark"] .color-3 {
    background-color: #262626;
}

.theme-div[data-theme="aijs_dark_modern"] {
    background-color: #131314;
}

.theme-div[data-theme="aijs_dark_modern"] .color-1 {
    background-color: #ab68ff;
}

.theme-div[data-theme="aijs_dark_modern"] .color-2 {
    background-color: #333537;
}

.theme-div[data-theme="aijs_dark_modern"] .color-3 {
    background-color: #1b1b1c;
}

/* AIJS Light */
.theme-div[data-theme="aijs_light"] {
    background-color: #ffffff;
}

.theme-div[data-theme="aijs_light"] .color-1 {
    background-color: #ab68ff;
}

.theme-div[data-theme="aijs_light"] .color-2 {
    background-color: #e9e9e9;
}

.theme-div[data-theme="aijs_light"] .color-3 {
    background-color: #f7f7f7;
}

/* AIJS Sleek */
.theme-div[data-theme="aijs_sleek"] {
    background-color: #0b1318;
}

.theme-div[data-theme="aijs_sleek"] .color-1 {
    background-color: #ab68ff;
}

.theme-div[data-theme="aijs_sleek"] .color-3 {
    background-color: #1d2129;
}

.theme-div[data-theme="aijs_sleek"] .color-2 {
    background-color: #2d2936;
}

/* Anysphere Dark */
.theme-div[data-theme="anysphere_dark"] {
    background-color: #181818;
}

.theme-div[data-theme="anysphere_dark"] .color-1 {
    background-color: #d6d6dd;
}

.theme-div[data-theme="anysphere_dark"] .color-3 {
    background-color: #222122;
}

.theme-div[data-theme="anysphere_dark"] .color-2 {
    background-color: #3c3b3c;
}

/* Discord Dark */
.theme-div[data-theme="discord_dark"] {
    background-color: #2b2d31;
}

.theme-div[data-theme="discord_dark"] .color-1 {
    background-color: #5865F2;
}

.theme-div[data-theme="discord_dark"] .color-3 {
    background-color: #313338;
}

.theme-div[data-theme="discord_dark"] .color-2 {
    background-color: #4e5058;
}


/* Gemini Dark */
.theme-div[data-theme="gemini_dark"] {
    background-color: #1b1b1c;
}

.theme-div[data-theme="gemini_dark"] .color-1 {
    background-color: #87a9ff;
}

.theme-div[data-theme="gemini_dark"] .color-3 {
    background-color: #212222;
}

.theme-div[data-theme="gemini_dark"] .color-2 {
    background-color: #393b3d;
}

/* Genify Dark */
.theme-div[data-theme="genify_dark"] {
    background-color: #151515;
}

.theme-div[data-theme="genify_dark"] .color-1 {
    background-color: #c26ad2;
}

.theme-div[data-theme="genify_dark"] .color-3 {
    background-color: #1c1c1c;
}

.theme-div[data-theme="genify_dark"] .color-2 {
    background-color: #333333;
}

/* genuary Dark */
.theme-div[data-theme="genuary_dark"] {
    background-color: #0d0d0d;
}

.theme-div[data-theme="genuary_dark"] .color-1 {
    background-color: #00ffcc;
}

.theme-div[data-theme="genuary_dark"] .color-3 {
    background-color: #131313;
}

.theme-div[data-theme="genuary_dark"] .color-2 {
    background-color: #333333;
}

/* GitHub Dark */
.theme-div[data-theme="github_dark"] {
    background-color: #0D1117;
}

.theme-div[data-theme="github_dark"] .color-1 {
    background-color: #f78166;
}

.theme-div[data-theme="github_dark"] .color-3 {
    background-color: #161b22;
}

.theme-div[data-theme="github_dark"] .color-2 {
    background-color: #20262c;
}

/* GPT Dark */
.theme-div[data-theme="gpt_dark"] {
    background-color: #0d0d0d;
}

.theme-div[data-theme="gpt_dark"] .color-1 {
    background-color: #00897b;
}

.theme-div[data-theme="gpt_dark"] .color-3 {
    background-color: #171717;
}

.theme-div[data-theme="gpt_dark"] .color-2 {
    background-color: #2f2f2f;
}

/* Groovy Dark */
.theme-div[data-theme="one_dark"] {
    background-color: #282c34;
}

.theme-div[data-theme="one_dark"] .color-1 {
    background-color: #c678dd;
}

.theme-div[data-theme="one_dark"] .color-2 {
    background-color: #323842;
}

.theme-div[data-theme="one_dark"] .color-3 {
    background-color: #30353f;
}

/* HC Black */
.theme-div[data-theme="hc_black"] {
    background-color: #000000;
}

.theme-div[data-theme="hc_black"] .color-1 {
    background-color: #437586;
}

.theme-div[data-theme="hc_black"] .color-2 {
    background-color: #CE9178;
}

.theme-div[data-theme="hc_black"] .color-3 {
    background-color: #569CD6;
}

/* kaplay dark */
.theme-div[data-theme="kaplay_dark"] {
    background-color: #242933;
}

.theme-div[data-theme="kaplay_dark"] .color-1 {
    background-color: #6bc46b;
}

.theme-div[data-theme="kaplay_dark"] .color-2 {
    background-color: #20252e;
}

.theme-div[data-theme="kaplay_dark"] .color-3 {
    background-color: #2a303c;
}

/* P5 Dark */
.theme-div[data-theme="p5_dark"] {
    background-color: #1c1c1c;
}

.theme-div[data-theme="p5_dark"] .color-1 {
    background-color: #ed225d;
}

.theme-div[data-theme="p5_dark"] .color-2 {
    background-color: #4d4d4d;
}

.theme-div[data-theme="p5_dark"] .color-3 {
    background-color: #242424;
}

/* P5 hc */
.theme-div[data-theme="p5_hc"] {
    background-color: #1c1c1c;
}

.theme-div[data-theme="p5_hc"] .color-1 {
    background-color: #f5dc23;
}

.theme-div[data-theme="p5_hc"] .color-2 {
    background-color: #4d4d4d;
}

.theme-div[data-theme="p5_hc"] .color-3 {
    background-color: #242424;
}

/* pen_dark */
.theme-div[data-theme="pen_dark"] {
    background-color: #1d1e22;
}

.theme-div[data-theme="pen_dark"] .color-1 {
    background-color: #47cf73;
}

.theme-div[data-theme="pen_dark"] .color-2 {
    background-color: #5a5f73;
}

.theme-div[data-theme="pen_dark"] .color-3 {
    background-color: #26282D;
}

/* VS Dark */
.theme-div[data-theme="vs_dark"] {
    background-color: #1e1e1e;
}

.theme-div[data-theme="vs_dark"] .color-1 {
    background-color: #007acc;
}

.theme-div[data-theme="vs_dark"] .color-2 {
    background-color: #37373d;
}

.theme-div[data-theme="vs_dark"] .color-3 {
    background-color: #252526;
}

/* VS Dark Modern */
.theme-div[data-theme="vs_dark_modern"] {
    background-color: #181818;
}

.theme-div[data-theme="vs_dark_modern"] .color-1 {
    background-color: #007acc;
}

.theme-div[data-theme="vs_dark_modern"] .color-3 {
    background-color: #1f1f1f;
}

.theme-div[data-theme="vs_dark_modern"] .color-2 {
    background-color: #2a2d2e;
}

/* VS Light */
.theme-div[data-theme="vs_light"] {
    background-color: #fffffe;
}

.theme-div[data-theme="vs_light"] .color-1 {
    background-color: #167abf;
}

.theme-div[data-theme="vs_light"] .color-2 {
    background-color: #e4e6f1;
}

.theme-div[data-theme="vs_light"] .color-3 {
    background-color: #f3f3f3;
}

/* Claude chat */
.theme-div[data-theme="claude_chat"] {
    background-color: #f5f5f1;
}

.theme-div[data-theme="claude_chat"] .color-1 {
    background-color: #da7a5a;
}

.theme-div[data-theme="claude_chat"] .color-2 {
    background-color: #282c34;
}

.theme-div[data-theme="claude_chat"] .color-3 {
    background-color: #e1dbc3;
}

/* Claude workbench */
.theme-div[data-theme="claude_workbench"] {
    background-color: #1b1b1b;
}

.theme-div[data-theme="claude_workbench"] .color-1 {
    background-color: #da7a5a;
}

.theme-div[data-theme="claude_workbench"] .color-2 {
    background-color: #3b3b3b;
}

.theme-div[data-theme="claude_workbench"] .color-3 {
    background-color: #242424;
}

/* Claude chat */
.theme-div[data-theme="claude_light"] {
    background-color: #f5f5f1;
}

.theme-div[data-theme="claude_light"] .color-1 {
    background-color: #da7a5a;
}

.theme-div[data-theme="claude_light"] .color-2 {
    background-color: #e1dbc3;
}

.theme-div[data-theme="claude_light"] .color-3 {
    background-color: #f0efe6;
}




/* flexoki light */
.theme-div[data-theme="flexoki_light"] {
    background-color: #FFFCF0;
}

.theme-div[data-theme="flexoki_light"] .color-1 {
    background-color: #4385BE;
}

.theme-div[data-theme="flexoki_light"] .color-2 {
    background-color: #DAD8CE;
}

.theme-div[data-theme="flexoki_light"] .color-3 {
    background-color: #F2F0E5;
}

/* flexoki dark */
.theme-div[data-theme="flexoki_dark"] {
    background-color: #100F0F;
}

.theme-div[data-theme="flexoki_dark"] .color-1 {
    background-color: #205EA6;
}

.theme-div[data-theme="flexoki_dark"] .color-2 {
    background-color: #343331;
}

.theme-div[data-theme="flexoki_dark"] .color-3 {
    background-color: #1C1B1A;
}

.theme-div[data-theme="fiddle_dark"] {
    background-color: #1e1f1f;
}

.theme-div[data-theme="fiddle_dark"] .color-1 {
    background-color: #ffb82e;
}

.theme-div[data-theme="fiddle_dark"] .color-2 {
    background-color: #272828;
}

.theme-div[data-theme="fiddle_dark"] .color-3 {
    background-color: #181919;
}

/* codium dark */
.theme-div[data-theme="codium_dark"] {
    background-color: #090c13;
}

.theme-div[data-theme="codium_dark"] .color-1 {
    background-color: #09b6a2;
}

.theme-div[data-theme="codium_dark"] .color-2 {
    background-color: #232d42;
}

.theme-div[data-theme="codium_dark"] .color-3 {
    background-color: #0f141e;
}




/* reddit dark */
.theme-div[data-theme="reddit_dark"] {
    background-color: #0b1416;
}

.theme-div[data-theme="reddit_dark"] .color-1 {
    background-color: #ff4500;
}

.theme-div[data-theme="reddit_dark"] .color-2 {
    background-color: #33464c;
}

.theme-div[data-theme="reddit_dark"] .color-3 {
    background-color: #131f23;
}



/* repl dark */
.theme-div[data-theme="repl_dark"] {
    background-color: #1c2333;
}

.theme-div[data-theme="repl_dark"] .color-1 {
    background-color: #0079f2;
}

.theme-div[data-theme="repl_dark"] .color-2 {
    background-color: #3c445c;
}

.theme-div[data-theme="repl_dark"] .color-3 {
    background-color: #20283a;
}


/* onyx dark */
.theme-div[data-theme="onyx_dark"] {
    background-color: #121212;
}

.theme-div[data-theme="onyx_dark"] .color-1 {
    background-color: #20B2AA;
}

.theme-div[data-theme="onyx_dark"] .color-2 {
    background-color: #2D2D2D;
}

.theme-div[data-theme="onyx_dark"] .color-3 {
    background-color: #181818;
}



.theme-div[data-theme="sandbox_dark"] {
    background-color: #1a1a1a;
}

.theme-div[data-theme="sandbox_dark"] .color-1 {
    background-color: #dff976;
}

.theme-div[data-theme="sandbox_dark"] .color-3 {
    background-color: #0d0d0d;
}

.theme-div[data-theme="sandbox_dark"] .color-2 {
    background-color: #37373d;
}


/* slack dark */
.theme-div[data-theme="slack_dark"] {
    background-color: #16181a;
}

.theme-div[data-theme="slack_dark"] .color-1 {
    background-color: #e8912d;
}

.theme-div[data-theme="slack_dark"] .color-2 {
    background-color: #323538;
}

.theme-div[data-theme="slack_dark"] .color-3 {
    background-color: #1a1d21;
}



/* tender dark */
.theme-div[data-theme="tender_dark"] {
    background-color: #161618;
}

.theme-div[data-theme="tender_dark"] .color-1 {
    background-color: #0091ff;
}

.theme-div[data-theme="tender_dark"] .color-2 {
    background-color: #3e3e44;
}

.theme-div[data-theme="tender_dark"] .color-3 {
    background-color: #1c1c1f;
}


.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Fill the parent container */
    max-height: calc(100% - 6px);
    /* Prevent it from growing beyond its parent */
    overflow: hidden;
    background-color: var(--primary);
    border-top: 1px solid var(--secondary);
    width: 100%;
    max-width: 100%;
    min-width: 100px;
    margin: auto;
    padding-bottom: 5px;
}

#chat {}

#chat::-webkit-scrollbar {
    /* width: 8px; */
}

#chat {
    /* scrollbar-width: thin; */
    scrollbar-color: var(--hover) var(--primary);
    border-bottom: 2px solid var(--primary);
}

.gpt-response-buttons,
.message {
    /* background-color: var(--primary) !important; */
    max-width: calc(950px - 200px) !important;
}

.user-message .message-content {
    /* background-color: var(--secondary) !important; */

}

#user-input {
    width: calc(100% - 20px);
    max-width: calc(950px - 120px);
    height: 100px !important;
    padding-bottom: 2px;
    margin-top: 0px;
    position: relative;

}

#input-box {
    border: 1px solid var(--borderColor) !important;
    border-top: 1px solid var(--secondary) !important;
    border-radius: 0px 0px 14px 14px;
    padding-right: 90px;
    margin-top: 0px;
    font-size: var(--font-large);
    font-family: var(--font-family-IBM);
}

#send-button {
    height: 96px;
    position: absolute;
    right: 30px;
    top: 15px;
    width: 60px;
    height: 60px;
    border: none;
    background-color: transparent;
    color: var(--editor-foreground);
    border-radius: 50%;

}

.fa-paper-plane {
    position: relative;
    left: -7px;
}

#chat-container {}

#controls-container {
    /* border: none; */
    border: 1px solid var(--borderColor);
    border-bottom: none;
    /* border-top: none; */
    margin: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    width: calc(100% - 31px);
    max-width: calc(950px - 131px);
    border-radius: 14px 14px 0px 0px;
    opacity: 1;
    /* box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.9); */
    /* overflow: hidden; */
    position: relative;
    background-color: var(--secondary);
}

#gpt-model-select {
    border-radius: 0px 11px 0px 0px !important;
    border-left: 1px solid var(--darker) !important;
    font-family: var(--font-family-IBM);
    font-size: var(--font-large);
}




.fake-dropdown-chat-menu {
    display: none;
    /* Initially hidden */
    position: relative;
    top: 3px;
    right: 130px;
    margin-left: -5px;
    background-color: var(--darker);
    border-radius: 5px;
    overflow: hidden;
    min-width: 100px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    z-index: 111;
    border: 1px solid var(--hover);

}

.fake-dropdown {
    display: none;
    /* Initially hidden */
    position: absolute;
    bottom: 31px;
    margin-left: -22px;

    background-color: var(--darker);
    border-radius: 11px;
    overflow: hidden;
    min-width: 140px;
    height: 137px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border: 1px solid var(--hover);
}

.fake-option-chat-menu,
.fake-option {
    color: var(--dimText);
    padding: 8px 11px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: all 0.1s;
    text-align: left;
    padding-left: 5px;
    font-family: var(--font-family-IBM);
}

.fake-option-chat-menu:hover,
.fake-option:hover {
    color: var(--textColor);
    background-color: var(--hover);
}

.fake-option::before,
.chat-rename::before,
.chat-delete::before {
    font-family: 'NerdFontSymbols';
    content: "\f014";
    background-color: transparent;
    padding: -20px;
    margin: -5px;
    border-radius: 5px;
    margin-right: 10px;
    margin-left: 5px;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0px;
    transition: all 0.2s;
    color: #cc3e44
}

.chat-rename::before {
    content: "\f448";
    color: var(--dimText);
}

.fake-option[data-value="gpt-4"]::before {
    background-image: url('images/icons/gpt.png');
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;
    background-color: #ab68ff;
}

.fake-option[data-value="gpt-3.5"]::before {
    background-image: url('images/icons/gpt.png');
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;
    background-color: #19c37d;
}

.fake-option[data-value="Gemini"]::before {
    background-image: url('images/icons/gemini.svg');
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;

}

.fake-option[data-value="Claude"]::before {
    background-image: url('images/icons/claude.png');
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
    display: inline-block;
    color: transparent;
    border-radius: 50%;

}

#dropdown-button-gpt {
    background-color: transparent;
    border: none;
    color: var(--dimText);
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--font-large);
    margin: 6px 2px;
    margin-bottom: 5px;
    cursor: pointer;
    height: 20px;

    justify-content: flex-end;
    display: flex;
    white-space: nowrap;
    margin-left: 25px;
    font-family: var(--font-family-Sans);
}

#dropdown-button-gpt:hover {
    color: var(--textColor);
}

#dropdown-button-gpt::after {

    font-family: 'NerdFontSymbols';
    content: "\eab4";
    background-color: transparent;
    padding: -20px;
    margin: -5px;
    border-radius: 5px;
    position: relative;
    top: 7px;
    margin-left: 15px;
    margin-right: 0px;
    font-size: 12px;

}




#search-container {
    position: relative;
    width: 100%;
}

/* Search input styling */
#search-input {
    width: calc(100% - 46px);
    padding: 4px;
    font-size: 0.8rem;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    background-color: var(--secondary);
    color: var(--dimText);
    outline: none;
    font-family: var(--font-family-Sans);
    transition: border-color 0.3s, box-shadow 0.3s;
    margin: 5px;
    margin-top: -8px;
    padding-right: 30px;
}

/* Focus state styling */
#search-input:focus {
    border: 1px solid var(--accent);
    box-shadow: 0 0 5px var(--focusBorder);
}

/* Styling for the clear button inside the input */
#clear-button {
    position: absolute;
    right: 15px;
    top: -7px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--noteText);
    display: none;
    /* Initially hidden */
    font-family: var(--font-family-Sans);
    font-weight: 400;

}

/* Show the clear button when there's input */
#search-input:not(:placeholder-shown)~#clear-button {
    display: block;
}

#search-input::placeholder {
    font-family: var(--font-family-Sans);
    color: var(--noteText) !important;
}

#clear-button:hover {
    color: #f85149;
    color: var(--dimText);
}

/* Text for showing "x results in x files" */
#search-summary {
    font-family: var(--font-family-Sans);
    font-size: 13px;
    color: var(--noteText);
    margin: 0px 5px;
    padding-left: 5px;
    height: 17px;
    margin-bottom: 5px;
}

/* Search results container styling */
#search-results {
    font-family: var(--font-family-Sans);
    font-size: 0.8rem;
    padding: 5px;
    overflow: auto;
    max-height: 50vh;
    border-bottom: 1px solid var(--borderColor);
    margin-bottom: 5px;
}

#search-results {
    scrollbar-width: thin;
    scrollbar-color: var(--hover) var(--primary);
}


#search-results::-webkit-scrollbar {
    width: 8px;
}

/* Initially hide the search results and summary */
#search-summary,
#search-results {
    display: none;
}

/* Group container for each file's results */
.search-result-group {
    margin-bottom: 5px;
}

.search-result-group:last-child {
    margin-bottom: 3px;

}

/* File path header styling */
.file-path-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--dimText);
    background-color: var(--nav-hover);
    border-radius: 8px;
    padding: 2px 10px;
    padding-left: 5px;
    max-height: 22px;
    min-height: 22px;
    font-family: var(--font-family-Sans);
}

.file-path-header:hover {
    background-color: var(--hover);
    color: var(--textColor);

}

.file-path-header.expanded {
    background-color: var(--hover);
    color: var(--textColor);
}

.file-path-header::before {
    font-family: 'NerdFontSymbols';
    margin-right: 2px;
    font-size: 10px;
    margin-left: -8px;
    font-style: normal;
    font-size: var(--font-med);
    padding: 3px;
    content: "\f460";
    color: var(--textColor);
    margin-left: -3px;
    transition: transform 0.3s ease;
    margin-right: 0px;
    background-color: transparent !important;
}

.file-path-header.expanded::before {
    content: "\f47c";
    /* Unicode for down arrow (expanded) */
}

/* Result container for each file's content */
.result-container {
    margin-left: 5px;
    padding-left: 5px;
    position: relative;
    /* Ensure the container is positioned for the pseudo-element */
    margin-bottom: 5px;
    display: none;
    /* Hidden by default */
}

.result-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    /* Full height of the container */
    background-color: var(--noteText);
    /* Vertical bar color */
    opacity: 0.4;
}

.result-container:hover.result-container::before {
    opacity: 1;
}

.text-content.results {
    pointer-events: none;
    top: 3px;
    margin-right: 0px;
}

.text-content.results::before {
    top: -1px;
    left: 1px;
}

.results {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    /* Set a max-width or width for the ellipsis to work */
    display: inline-block;
    /* Ensure it's an inline-block or block-level element */
    padding-left: 4px;
}

.result-count {
    white-space: nowrap;
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--textColor);
    /* Adjust based on your theme */
    background-color: var(--borderColor);
    border-radius: 30px;
    padding: 0px 5px;
    height: 17px;
    /* Same as width to keep it circular */
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-family-Sans);
}


/* Individual context result styling */
.context {
    font-size: 0.8rem;
    color: var(--dimText);
    margin-top: 5px;
    cursor: pointer;
    border-radius: 8px;
    padding: 5px;
    /* background-color: var(--nav-hover); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
}

.context:hover {
    background-color: var(--nav-hover);
}

/* Highlight the search query */
.highlight {
    background-color: var(--textHilight);
    border-radius: 5px;
    color: var(--textColor);
}


.dependencies-container {
    overflow: auto;
}

/* dependencies search */

.container-npm {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    padding-top: 0px;
}

.intro {
    margin: 10px;
    padding: 5px;
}

h1 {
    font-weight: 600;
    color: var(--textColor);
    text-align: center;
    margin-bottom: 30px;
    justify-content: flex-start;
    display: flex;
}

p {
    color: var(--textColor);
    text-align: left;
    margin-bottom: 10px;
}

.search-box {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Ensures it stays on top of other elements */
    background-color: var(--primary);
    /* Ensure background color so content doesn't overlap */
    padding: 0px;
    /* Add padding to give some breathing space */
    padding-top: 10px;
    border-radius: 0px 0px 8px 8px;
}


.search-box input {
    width: 100%;
    max-width: 800px;
    padding: 10px 20px;
    font-size: 16px;
    border: 1px solid var(--borderColor);
    background-color: var(--secondary);
    color: var(--textColor);
    border-radius: 8px 0 0 8px;
    outline: none;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border: 1px solid var(--accent);
}

.search-box button {
    padding: 0 20px;
    font-size: 16px;
    border: 1px solid var(--borderColor);
    background-color: var(--hover);
    color: var(--textColor);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    outline: none;
    border-left: none;
}

.search-box button:hover {
    filter: brightness(1.1);
}

.result-container-npm {
    background-color: var(--primary);
    border-radius: 8px;
    padding-top: 10px;
    /* border: 1px solid var(--borderColor); */

}

.result-container-npm h2 {
    margin-top: 10px;
    font-size: 1.2rem;
    color: var(--textColor);
}

.result-container-npm p {
    color: var(--dimText);
    font-size: 1rem;
}

.package-info h2 {
    font-size: 1.5rem !important;
    color: var(--textColor);
}

.select-h2 {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--noteText);
    margin-bottom: 0px;
}

#package-list {
    padding-left: 0;
    margin: 0px;
}

.package-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--borderColor);
    padding: 15px 0;
}

.package-item:last-child {
    border-bottom: none;
}

.package-logo {
    width: 100px;
    height: 100px;
    margin-right: 15px;
    border-radius: 8px;
    display: block !important;
    border-radius: 11px !important;
}

.package-logo.main-logo {
    cursor: pointer;
    margin-right: 10px !important;
    ;
}

.package-details {
    flex: 1;
}

.package-name {
    font-size: 25px;
    font-weight: 600;
    color: var(--href-color);
    text-decoration: none;
}


.package-name:hover {
    text-decoration: underline;
}

.package-description {
    color: var(--dimText);
    margin: 5px 0;
}

/* Updated styles for metadata */
.package-metadata {
    font-size: 14px;
    color: var(--noteText);
    margin-top: 10px;
}

.metadata-item {
    display: inline-block;
    background-color: var(--hover);
    color: var(--dimText);
    padding: 5px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.metadata-item.license {
    color: var(--textColor);
    background-color: var(--hover);
    /* font-weight: 600; */
}

.cdn-container {
    display: flex;
    justify-content: flex-start;
    /* Center the content horizontally */
    align-items: center;
    /* Center the content vertically */
    width: 100%;
    height: auto;
    /* Allow the container to adjust its height based on the content */
}

.cdn-support {
    background-color: #3cbe65;
    /* border: 1px solid #47cf73; */
    /* color: white; */
    /* font-weight: 600; */
    font-size: 15px;
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    padding: 5px 8px;
    margin-left: 10px;
    margin-bottom: 0px;
    white-space: noWrap;
}


.cdn-support.no-cdn {
    background-color: #cc3633;
}

.cdn-support.unknown-cdn {
    /* background-color: #cc3633; */
    /* border: 1px solid #f65128; */
}

.result-container-npm .npm-tags {
    margin-top: 10px;
}

.result-container-npm .npm-tag {
    display: inline-block;
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    color: var(--textColor);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.version-select-container {
    margin-top: -0px;

    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 20px;
    margin-left: auto;
    padding-left: 5px;
}

.version-select-container label {
    position: relative;
    top: 9px;
    font-size: 1.0rem;
}

.version-select-container select {
    padding: 6px 10px;
    font-size: 15px;
    border: 1px solid var(--borderColor);
    background-color: var(--secondary);
    color: var(--textColor);
    border-radius: 5px;
    outline: none;
    width: 100%;
    max-width: 200px;
    font-size: 0.9rem;
    font-family: var(--font-family-Sans);
    font-weight: 400 !important;
    cursor: pointer;
    min-width: 131px;
}

.script-tag-container {
    margin-top: 50px;
    position: relative;
}

.script-tag-container h3 {
    font-size: 15px;
    color: var(--dimText);
    font-weight: 400;

}

.auto-tag-min,
.auto-tag {
    background-color: var(--secondary);
    padding: 5px 10px;
    border-radius: 5px;
    white-space: noWrap;
    border: 1px solid var(--borderColor);
    display: inline-block;
    width: auto;
}

.auto-tag-min {
    display: inline-block;
    width: auto;
}

.auto-tag-min::after,
.auto-tag::after {
    margin-right: 2px;
    font-size: 13px;
    padding: 2px 7px;
    border-radius: 50%;
    content: "?";
    /* Default closed folder icon */
    color: var(--dimText);
    margin-left: 5px;
    transition: transform 0.3s ease;
    position: relative;
    left: 3px;
    font-family: var(--font-family-Sans);
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    top: -1px;
}

.script-tag-container code:not(#script-tag-code) {
    background-color: var(--secondary);
    /* padding: 10px; */
    display: block;
    color: var(--textColor);
    font-size: 13px;
    overflow-x: auto;
    position: relative;
    border-radius: 5px;
    color: var(--accent);
    padding: 12px;
    padding-bottom: 50px;
    border: 1px solid var(--borderColor);
    margin: 0px;

    scrollbar-width: thin;
    scrollbar-color: var(--hover) var(--primary);
}

.script-tag-container::-webkit-scrollbar {
    width: 8px;
}

.script-tag-container code:not(pre)>code[class*="language-"] {}

#script-tag-code {
    border: none;
    background-color: transparent;
    padding: 0px;
    margin: 0px;
}

.dependencies-container pre {
    border: 1px solid var(--borderColor);
}

.readme-container .code-btn-container {
    margin-top: 5px;
    display: flex;
    gap: 8px;
    justify-content: flex-end !important;
    align-items: center;
    width: calc(100% + 5px);
    padding: 0;
    margin-bottom: -5px;
    margin-right: -5px;
}

.readme-container .copy-button {
    margin: 0 !important;
}

.readme-container .insert-button {
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    margin-left: auto;
}

.readme-container li {
    font-size: 1rem;
    padding: 3px;
}

/* .dependencies-container .copy-button {
    position: absolute;
    top: -5px;
    right: 0;
    padding: 8px 12px;
    font-size: 14px;
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    margin-bottom: 5px;
}

.dependencies-container .copy-button:hover {
    background-color: #1a6fe0;
} */
.script-btn-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-top: -50px;
    margin-right: 10px;
    margin-bottom: 30px;
}

.dependencies-container .insert-button,
.dependencies-container .copy-button {
    margin-top: 5px;
    background-color: var(--secondary);
    color: var(--textColor);
    font-size: 13px;
    border-radius: 8px;
    padding: 5px 14px;
    padding-left: 5px;
    border: 1px solid var(--borderColor);
    position: relative;
    top: 3px;
    right: 0px;
}

.dependencies-container .insert-button {
    margin-left: auto;
}

.dependencies-container .insert-button:hover,
.dependencies-container .copy-button:hover {
    background-color: var(--hover);
    border: 1px solid var(--hover);
}

.dependencies-container .insert-button::before,
.dependencies-container .copy-button::before {
    color: var(--textColor);
}

.dependencies-error {
    color: #dc3545;
    text-align: center;
    font-size: 16px;
}

.loading {
    color: var(--noteText);
    text-align: center;
    font-size: 16px;
}

p.loading {
    margin-bottom: 20px;
    text-align: left;
    color: var(--dimText);
}

.loading-indicator {
    color: var(--dimText);
    padding: 0px 20px;
}

/* Additional styles for the package detail page */
.package-detail {
    display: flex;
    align-items: center;
    /* Vertically centers the logo */
    margin-bottom: 0px;
    margin-top: 0px;
}

.package-detail .package-logo {
    width: 100px;
    height: 100px;
    display: block;
}

.package-detail .package-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    margin: 0 auto;
    max-width: 120px;
}

.package-creator {
    font-size: 0.9remx !important;
    color: var(--dimText) !important;
    margin-top: 10px;
    text-align: center;
}


.package-detail .package-info {
    flex: 1;
    margin-left: 20px;
}

.readme-container {
    margin-top: 10px;
    font-family: var(--font-family-Sans);
}

.readme-container h3 {
    font-size: 20px;
    color: var(--textColor);
    margin-bottom: 20px;
}

.readme-title {
    margin: 0px;
    font-family: var(--font-family-Sans);
    color: var(--dimText) !important;

}


/* Lists */


/* Inline Code */
code {
    background-color: var(--hover);
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 15px;
}

/* Code Blocks */
.dependencies-container pre {
    background-color: var(--secondary);
    padding: 16px;
    border-radius: 6px;
    overflow: auto;
}

.dependencies-container pre>code {
    background-color: transparent;
}

/* Images */
.dependencies-container img {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    max-width: 200px;
    /* max-height: 100px; */
    margin: 0 auto;

    object-fit: contain;
    border-radius: 11px;
    display: block;
    box-sizing: border-box;
    align-self: center;

}

.dependencies-container a {
    color: var(--href-color) !important;
    font-family: var(--font-family-Sans) !important;
    font-weight: 400 !important;
}

.dependencies-container a img {
    border-radius: 11px;
    display: inline-block;
}

.dependencies-container pre {
    margin-bottom: 10px;
}

.dependencies-container hr {
    border: none;
    border-top: 2px solid var(--hover);
    margin-top: 30px;
    margin-bottom: 30px;
}

.dependencies-container li ul {
    display: block;
    color: var(--dimText);
}

.dependencies-container li {
    color: var(--dimText);
}

.dependencies-container li code {
    color: var(--textColor);
}

.dependencies-container strong {
    color: var(--textColor);
}

/* Collapsible folder styles */
.file-list-container {
    margin-bottom: 20px;
    padding: 0px;
    max-width: 500px;
    border-radius: 11px;
    margin: 0 auto;
    border: 1px solid var(--borderColor);
    padding: 20px;
    padding-top: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: var(--secondary);
}

ul.collapsible-file-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.file-list-container ul {
    padding-left: 15px;
}

li.folder,
li.file {
    margin: 3px 0;
    cursor: pointer;
    position: relative;
    color: var(--textColor);
    box-sizing: border-box;
    list-style-type: none;
    font-size: 13px;
}

li.file {
    display: flex;
    align-items: center;
    width: 100%;
}

li.folder span::before {
    content: '📂';
    margin-right: 5px;

}

.folder-container {
    max-width: calc(100% - 7px);
    padding-left: 4px !important;
}

.folder ul::before {
    content: '';
    position: absolute;
    top: 33px;
    left: 10px;
    width: 1px;
    height: calc(100% - 34px);
    background-color: var(--noteText);
    opacity: 0.4;
}

.folder ul:hover::before {
    opacity: 1;
}

li.folder span.opened::before {
    content: '📁';
}

li.folder.opened+.folder-container {
    background-color: var(--hover);
}

li.file span::before {
    content: '📄';
    margin-right: 5px;
}

.folder ul {
    margin: 0px;
}

li ul {
    display: none;
}

li.opened>ul {
    display: block;
}

ul.collapsible-file-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.folder-container,
.file-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 1px 8px;
    padding-right: 3px;
    /* border: 1px solid var(--borderColor); */
    background-color: var(--secondary);
    border-radius: 11px;
    min-height: 28px;
    max-height: 28px;
    font-family: var(--font-family-Sans);
}

/* Hover effect for both folders and files */
.folder-container:hover,
.file-container:hover {
    background-color: var(--nav-hover);
}

/* Folder span styling */
.folder-container span,
.file-container span {
    flex-grow: 1;
    /* Take up all available space */
    margin-right: 10px;
    /* Spacing between name and buttons */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

/* Specific file container span for additional styling */
.file-container span {
    max-width: 100%;
    /* Make sure it takes the available width */
    margin-right: auto;
    /* Push buttons to the right */
    padding-left: 4px;
}

/* Button styling for both folders and files */
.folder-container button,
.file-container button {
    margin-left: 5px;
    padding: 3px;
    cursor: pointer;
    white-space: nowrap;
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    color: var(--textColor);
    border-radius: 8px;
}

.folder-container button:hover,
.file-container button:hover {
    background-color: var(--hover);
    border-color: var(--hover);
}

/* Push the first button to the right */
.folder-container button:first-child,
.file-container button:first-child {
    margin-left: auto;
}

.npm-open-file-btn::before,
.npm-add-file-btn::before,
.npm-add-folder-btn::before {
    font-family: 'NerdFontSymbols';
    margin-right: 2px;
    font-size: 13px;
    padding: 3px;
    content: "\ea80";
    /* Default closed folder icon */
    color: var(--textColor);
    margin-left: -3px;
    transition: transform 0.3s ease;
    position: relative;
    left: 3px;
}

.npm-add-file-btn::before {
    content: "\ea7f";
}

.npm-open-file-btn::before {
    content: "\f03cc";
    font-size: 11px;
    top: -1px;
}

/* Folder icons */
.folder-container::before {
    font-family: 'NerdFontSymbols';
    margin-right: 2px;
    font-size: var(--font-med);
    padding: 3px;
    content: "\f460";
    /* Default closed folder icon */
    color: var(--textColor);
    margin-left: -3px;
    transition: transform 0.3s ease;
}

.folder-container.opened::before {
    content: "\f47c";
    /* Opened folder icon */
}

#show-more-button {
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    padding: 8px 14px;
    background-color: var(--secondary);
    color: var(--textColor);
    cursor: pointer;
    min-width: 200px;
    margin-left: calc(50% - 100px);
    margin-bottom: 30px;
    margin-top: 20px;
    font-family: var(--font-family-Sans);
}

#show-more-button:hover {
    background-color: var(--hover);
}

.jsdelivr-button-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

.npm-install-btn,
.jsdelivr-button {
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    padding: 8px 14px;
    background-color: var(--secondary);
    color: var(--textColor);
    cursor: pointer;
    margin-top: 5px;
    font-family: var(--font-family-Sans);
    background-color: #f65128;
    color: white;
    border: 1px solid #f65128;
}

.jsdelivr-button:hover {
    filter: brightness(1.2);
}

.npm-install-btn {
    display: none;
    margin-right: 10px;
    background-color: #f65128;
    color: white;
    border: 1px solid #f65128;
}

.npm-install-btn:hover {
    filter: brightness(1.2);
}

.throbber-container {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.throbber {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #008afd;
    border-bottom-color: #e74119;
    animation: throbberSpin 1.5s ease-in-out infinite;
}

.throbber::before,
.throbber::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}

.throbber::before {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-top-color: #fdac00;
    border-bottom-color: #13c9b8;
    animation: throbberSpin 2s ease-in-out infinite reverse;
}

.throbber::after {
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-top-color: #ab68ff;
    border-bottom-color: #1f96b2;
    animation: throbberSpin 1.5s ease-in-out infinite;
}

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

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



.suggestions-modal {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto multiple lines */
    flex-direction: row;
    padding: 20px;
    padding-top: 5px;
    border-radius: 12px;
    width: calc(100% - 30px);
    max-width: calc(950px - 131px);
    gap: 15px;
    color: var(--dimText);
    min-width: 100px;
    margin: auto;
    margin-bottom: 0;
    margin-top: 0;
    animation: fadeIn 0.5s ease-in-out;
    /* Fade-in animation */
    background-color: var(--primary);
}

.suggestion {
    position: relative;
    padding: 10px;
    background-color: var(--secondary);
    border: 1px solid var(--borderColor);
    border-radius: 14px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s ease;
    min-height: 100px;
    flex: 1 1 calc(25% - 45px);
    /* 4 items per row minus gap */
    min-width: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    color: var(--dimText);
}



.suggestion:hover {
    background-color: var(--hover);
    color: var(--textColor);
    transform: scale(1.02);
}

/* Icon handling */
.suggestion .icon {
    font-family: 'NerdFontSymbols';
    font-size: 16px;
    margin-bottom: 10px;
    align-self: flex-end;
}

.config-container {
    animation: fadeIn 0.5s ease-in-out;
    width: calc(100% - 30px);
    max-width: calc(950px - 131px);
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: transparent;
    min-width: 100px;
    margin: auto;
    margin-bottom: 0;
    margin-top: 0;
    margin-top: 20vh;
}

/* Styling for the Configure API Keys button */
.api-config-button {
    padding: 10px 20px;
    padding-left: 10px;
    background-color: var(--primary);
    border: 1px solid var(--borderColor);
    border-radius: 30px;
    color: var(--dimText);
    font-size: var(--font-med);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s ease;

    font-family: var(--font-family-Sans);
}

.api-config-button:hover {
    background-color: var(--secondary);
    color: var(--textColor);
}

.api-config-button::before {
    font-family: 'NerdFontSymbols';
    content: "\f423";
    font-size: 21px;
    margin-right: 10px;
    color: var(--accent);
}


/* Wrapper for the entire project creator component */
.project-fork-creator-wrapper {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: absolute;
    left: 80px;
    height: 45px;
    padding-right: 15px;
    border-right: thin solid var(--pageHeader);
    background-color: var(--pageHeader);
}

.project-fork-wrapper,
.project-creator-wrapper {
    display: flex;
    align-items: center;
    /* height: 100%; */
    max-height: 46px;
    padding: 3px 5px;
    padding-left: 5px;
    background-color: var(--pageHeader);
    transition: background-color 0.3s, box-shadow 0.3s;
    margin-left: 5px;
    border-radius: 30px;
    text-decoration: none;
    border: thin solid transparent;
    /* position: absolute;
    left: 80px; */
    max-width: 250px;
    transition: all 0.3s ease;
}

@media (max-width: 915px) {

    .project-fork-wrapper,
    .project-creator-wrapper {
        opacity: 0;
        width: 0px;
        height: 0px;
        left: -300px;
    }
}

/* Hidden state */
.fork-hidden,
.creator-hidden {
    display: none !important;
}

/* Profile picture container */
.project-fork-profile-picture,
.project-creator-profile-picture {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--darker);
}

/* Profile picture image */
.project-fork-profile-picture img,
.project-creator-profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info wrapper styling */
.project-fork-info-wrapper,
.project-creator-info-wrapper {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Project name styling */
.project-fork-project-name,
.project-creator-project-name {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--textColor);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -3px;
}

.project-fork-project-name span,
.project-creator-project-name span {
    font-size: 0.75rem;
    color: var(--dimText);
    opacity: 0.75;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 2px;
}

.project-fork-project-name {
    padding-left: 40px;
    position: relative;
}

.project-fork-project-name::before {
    content: "Fork of";
    display: block;
    color: var(--dimText);
    font-style: italic;
    text-align: center;
    position: absolute;
    left: 0px;
    top: 1px;
    font-size: 0.7rem;
    opacity: 0.75;
}

/* Username styling */
.project-fork-username,
.project-creator-username {
    font-size: 0.7rem;
    color: var(--dimText);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.75;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional: Hover Effects */
.project-fork-wrapper:hover,
.project-creator-wrapper:hover {
    background-color: var(--secondary);
    border: thin solid var(--borderColor);
    cursor: pointer;
}

.project-fork-wrapper #forkButton,
.project-creator-wrapper #likeButton {
    border: none;
    background-color: transparent;
    padding: 0px;
    border-radius: 30px;
    color: var(--noteText);
    cursor: pointer;
    transition: all 0.2s;
}

.project-fork-wrapper #forkButton::before,
.project-creator-wrapper #likeButton::before {
    font-family: 'NerdFontSymbols';
    content: "\f52a";
    background-color: transparent;
    padding: -5px;
    font-size: 1.1rem;
    margin-right: 5px;
    cursor: pointer;
}

.project-fork-wrapper #forkButton:hover {
    color: var(--textColor);
}

.project-fork-wrapper #forkButton::before {
    content: "\f126";
}

.project-creator-wrapper #likeButton::before {
    content: "\f08a";
}

.project-creator-wrapper #likeButton.liked {
    color: #f85149;
}

.project-fork-wrapper .fork-button-wrapper,
.project-creator-wrapper .like-button-wrapper {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    padding: 3px 11px;
    border-radius: 30px;
    padding-right: 15px;
    cursor: pointer;
    margin-left: 0px;
    /* padding: 0px; */
}

.project-creator-wrapper .like-button-wrapper,
.project-fork-wrapper .fork-button-wrapper {
    padding-right: 0px;
}

.project-creator-wrapper #likeCount {
    display: flex;
    text-align: bottom;
    padding: 0px;
    margin-right: 0px;
    justify-content: center;
    align-items: center;
    color: var(--dimText);
    font-size: 0.8rem;
    opacity: 0.75;
    /* display: none; */
}

.project-creator-info-wrapper,
.project-fork-info-wrapper {
    width: 0px;
    transition: width 0.1s ease, margin-left 0.1s ease, opacity 0.1s ease;
    /* Specify individual transition properties */
    margin-left: -10px;
    opacity: 0;
}

.project-fork-creator-wrapper:hover .project-creator-info-wrapper,
.project-fork-creator-wrapper:hover .project-fork-info-wrapper {
    width: 100%;
    margin-left: 15px;
    opacity: 1;
    transition: width 0.4s ease, margin-left 0.4s ease, opacity 0.4s ease;
    /* Faster transition for opening */
}


.project-fork-profile-picture,
.project-creator-profile-picture {
    width: 0px;
    height: 0px;
    transition: all 0.2s ease;
    opacity: 0;
}

.project-fork-creator-wrapper:hover .project-creator-profile-picture,
.project-fork-creator-wrapper:hover .project-fork-profile-picture {
    width: 25px;
    height: 25px;
    opacity: 1;
}

.project-fork-creator-wrapper:hover {
    /* background-color: var(--nav-hover); */
    transition: all 0.4s;
    /* border-right: thin solid var(--borderColor); */
    box-shadow: 20px 0 12px -5px var(--pageHeader);
}

.project-fork-creator-wrapper:hover .like-button-wrapper {
    padding-right: 11px;
}

.project-creator-wrapper,
.project-fork-wrapper {
    scale: 1;
}

.project-creator-wrapper:hover,
.project-fork-wrapper:hover {
    scale: 1;
}

.or-separator {
    margin-top: 15px !important;
}

#forgotPasswordLink {
    position: relative;
    top: 5px !important;
}


#fork-tree-container {
    position: fixed;
    top: 46px;
    left: -250px;
    /* Start hidden off-screen to the left */
    width: 300px;
    height: calc(100vh - 46px);
    overflow-y: auto;
    background-color: var(--primary);
    border-right: 1px solid var(--borderColor);
    box-shadow: 20px 0 12px -5px var(--primary);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    transition: left 0.2s ease-in-out;
    /* Smooth transition */
    overflow: hidden;
}

#fork-tree-container.visible {
    left: 0;
    /* Slide in to be fully visible */
}

#fork-tree-container.hidden {
    left: -250px;
    /* Slide out of view to the left */
    box-shadow: none;
}

.fork-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    padding: 0px;
    color: var(--textColor);
    font-size: var(--font-med);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    padding: 0px 10px;
    padding-right: 5px;
}

.fork-tree-header span::before {
    font-family: 'NerdFontSymbols';
    background-color: transparent;
    padding: -5px;
    font-size: 14px;
    margin-right: 5px;
    content: "\f126";
    position: relative;
    top: -1px;
    color: var(--dimText);
}

#fork-tree-container .close-button {
    background: none;
    border: none;
    color: var(--dimText);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.3s;
}

#fork-tree-container .close-button::before {
    font-family: 'NerdFontSymbols';
    content: "\f467";
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--dimText);
    font-size: var(--font-small);
    font-size: var(--font-large);
    /* font-weight: bold; */
    position: relative;
    top: 0px;
    padding: 2px;
}

#fork-tree-container .close-button:hover::before {
    color: var(--textColor);
    background-color: var(--nav-hover);
}

#fork-tree-container .close-button:hover {
    color: var(--textColor);
}

.fork-tree-content {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 0px;
    overflow: auto;
    padding: 10px;
    padding-top: 0px;
}

.fork-node {
    display: flex;
    flex-direction: column;

    padding: 0;
    border-radius: 6px;

}

.fork-node-children {
    margin-left: 25px;
    position: relative;
}

.fork-node::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 27px;
    left: -15px;
    width: 1px;
    background-color: var(--noteText);
    z-index: 1;
    opacity: 0.4;
    transition: all 0.3s ease-out;
}

.fork-node-child .fork-node::before {
    bottom: 0;
}

.fork-node-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    border: thin solid var(--borderColor);
    padding: 3px;
    padding-left: 8px;
    border-radius: 14px;
    min-height: 40px;
    position: relative;
    margin-top: 3px;
    margin-bottom: 3px;
    background-color: var(--secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.fork-node-child .fork-node-wrapper::before {
    position: absolute;
    height: 22px;
    top: 22px;
    width: 12px;
    content: '';
    /* border-left: 4px solid var(--secondary); */
    border-top: thin solid var(--noteText);
    left: -16px;
    opacity: 0.4;
}

.fork-node img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--nav-hover);
}

.current-project-fork-hilight {
    border: 2px solid var(--accent);
    background-color: var(--nav-hover);
}

.fork-removed {
    border: 2px solid #f85149;
    background-color: var(--backGround);
    opacity: 0.2;
    min-height: 25px !important;
    max-height: 25px !important;
    border-radius: 8px;
}

.fork-removed::after {
    content: "Deleted";
    display: block;
    color: #f85149;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    right: 0;
    transform: translateY(-50%);

}

.fork-removed a,
.fork-removed img,
.fork-removed .fork-node-details {
    display: none;
    height: 0px;
    width: 0px;
}

.fork-removed:hover {
    opacity: 1;
}

.fork-node-child .fork-removed.fork-node-wrapper::before {
    position: absolute;
    height: 10px;
    top: 10px;
    width: 12px;
    content: '';
    /* border-left: 4px solid var(--secondary); */
    border-top: thin solid var(--noteText);
    left: -16px;
    opacity: 0.4;
}

.fork-removed .fork-node-details {
    /* opacity: 0.5; */
}

.fork-node-details {
    display: flex;
    flex-direction: column;
    color: var(--dimText);
    font-size: 0.8rem;
    width: 100%;

}

.node-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer
}

.node-link:hover .fork-node-wrapper {
    background-color: var(--hover);
}

.fork-node-details .fork-name {
    font-weight: bold;
    color: var(--textColor);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
}

.fork-node-details .username {
    font-size: 0.7rem;
    color: var(--noteText);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
}

.fork-tree-content {
    flex: 1;
    /* Make the content take all available space */
    overflow-y: auto;
    /* Allow scrolling only for the content */
    padding: 10px;
}

.fork-tree-footer {
    padding: 20px;
    padding-bottom: 30px;
    background-color: var(--primary);
    border-top: 1px solid var(--borderColor);
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Ensure the footer doesn't shrink */
    justify-content: center;
    display: flex;
}

.fork-this-project-button {
    padding: 6px 25px;
    background-color: var(--accent);
    color: var(--backGround);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    font-size: 0.9rem;
    border: 2px solid var(--accent);
    white-space: nowrap;
}

.fork-this-project-button:hover {
    background-color: var(--hover);
    color: var(--textColor);
}

#fork-tree-container.visible {
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

#fork-tree-container.hidden {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in;
}