html {
    scroll-behavior: smooth;
}


/* .bg-trans-dark {
    background-color: rgba(4, 4, 29, 0.192) !important;
} */

.bg-trans-dark {
    background-color: rgba(14, 4, 44, 0.397) !important;
}


.details-label {
    font-weight: 500;
    font-size: 12px;
    font-family: 'Urbanist', sans-serif;
    color: #D7D7D7;
}

.details-description {
    font-weight: 700;
    font-size: 16px;
    font-family: 'Urbanist', sans-serif;
    color: #FFF;
}

.switch {
    --button-width: 3.5em;
    --button-height: 2em;
    --toggle-diameter: 1.5em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 3em;
    --color-grey: rgba(121, 93, 237, 0.2);
    --color-green: #795DED;
}

.slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
}

.slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked+.slider {
    background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
    display: none;
}

.switch input[type="checkbox"]:active+.slider::after {
    width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}



/* MODAL CSS */

.modal-main-container {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;


}








/* SDK CREATE STEPS CSS */


.multi-step-form {
    transition: 1s .35s ease;
    width: calc(100% * 5);
    transform: translateX(calc(0% / -5));
}

.multi-step-form.step-2 {
    transform: translateX(calc(100% / -5));

}

.multi-step-form.step-3 {
    transform: translateX(calc(200% / -5));

}

.multi-step-form.step-4 {
    transform: translateX(calc(300% / -5));

}

.multi-step-form.step-5 {
    transform: translateX(calc(400% / -5));

}

.step-indicator-line {

    width: calc(20% * 0);
}

.step-indicator-line.step-2 {
    width: calc(20% * 1);

}

.step-indicator-line.step-3 {
    width: calc(20% * 2);

}

.step-indicator-line.step-4 {
    width: calc(20% * 3);

}

.step-indicator-line.step-5 {
    width: calc(20% * 4);

}

.step-indicator.active div:first-child {
    background-color: #795DED !important;
}

.step-indicator.active div:last-child {
    color: #795DED !important;
}


.input-error {
    border: solid rgb(187, 2, 2) 1px !important;
}

.error-form-input input,
.error-form-input textarea,
.error-form-input select {
    border: solid rgba(209, 7, 7, 0.692) 1px !important;
    background-color: rgba(255, 0, 0, 0.116);

}

.error-form-input .error-message {
    font-size: 0.8rem;
    margin-top: 2px;


}


.dataTables_wrapper .dataTables_info {
    color: #795DED !important;

}

/* 
/* FLOATER HEAD */

   .head-floater-container:hover  .head-floater-infos{
        transform: translate(0, -220px);
        transform-origin: bottom;
        opacity: 1;
    } 


    .head-floater-container:hover  img{
        transform: scale(1.2);
         
    }


.head-floater-infos {
    pointer-events: none;
    transform: translate(0, -100px);
    width: 300px;
    height: 200px;
    /* background-color: #0d052b !important; */
    border-radius: 20px;
    overflow: hidden;
}




    .head-floater-infos h3 {
        font-size: 1.2rem;
    }

    .head-floater-infos h4 {
        font-size: 1rem;
    }




.head-floater-infos .upper-info {
    /* border: solid red 1px ; */
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}

.head-floater-infos .upper-info .cover-bkg {
    width: 100%;
    height: 100%;
    border-radius: 0px !important;
    position: absolute;
    background-position: top;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    /* filter: blur(10px); */
    /* background: linear-gradient(45deg ,rgb(46, 4, 46),blue); */
    z-index: -1;
}

.head-floater-infos .upper-info .cover-bkg::before {
    content: ' ';
    width: 300px !important;
    position: absolute;
    height: 100px;
    backdrop-filter: blur(10px);
    background-color: #ffffffb6;
    top: 0;
    left: 0;

    z-index: 10;
}

html[data-theme-mode="dark"] .upper-info .cover-bkg::before {
    background-color: #0d052b42 !important;
}

.head-floater-infos .upper-info .upper-left {
    width: 30%;
    height: 100%;
    position: relative;

}

.head-floater-infos .upper-info .upper-left img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    bottom: -40px;
}

.head-floater-infos.contributor-left .upper-info .upper-left img {
    height: 50px;
    width: auto;

}

.head-floater-infos .upper-info .upper-right {
    width: 70%;
    padding-left: 10px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
}

.head-floater-infos .upper-info .upper-right h3 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.head-floater-infos .lower-info {

    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;

}

.head-floater-infos .lower-upper-info {
    width: 100%;
    height: 50%;
    padding-left: calc(300px - 70% + 10px);

}

.head-floater-infos .lower-upper-info h4 {
    width: 100%;
   overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}



.head-floater-infos .lower-lower-info {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    padding: 10px;
    padding-left: 20px;

}

.head-floater-infos.contributor-left {
    height: max-content;

    padding: 10px;
}

.head-floater-infos.contributor-left .upper-info {
    flex-direction: column;
    gap: 20px;

}




.contributor-left-infos {
    display: flex;
    flex-direction: row;
    gap: 0px;
    /* border: solid red; */

}

.contributor-left-infos img {
    margin: auto;
    height: 50px;
    width: auto;
    position: relative;
}

.contributor-left-infos .upper-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.head-floater-container:hover .head-floater-infos.contributor-left {
    transform: translate(0, -150px);
    transform-origin: bottom;
    opacity: 1;
}















/* OVERIDESS CSS */

.dataTables_filter Label {
    color: white !important;
}



.my-2.col-span-full.overflow-x-auto {
    overflow-x: visible !important;
}


/* SUmmnernote link modal */
.note-modal.link-dialog.open {

    position: absolute !important;
    z-index: 10000 !important;
}

.note-modal-backdrop {
    z-index: -1 !important;
}

.note-modal.link-dialog.open input {

    color: #2f2b3f !important;
}


.note-dropdown-menu,
.note-modal-content {
    background: #080212 !important;
    border: none !important;
    border-radius: 10px !important;

}


.note-editor.note-frame {
    background: rgb(4 4 29) !important;
    border: none !important;
    font-family: 'Urbanist', sans-serif !important;
}


.header-container {
    padding: 10px !important;
    position: sticky !important;
    border-radius: 10px 10px 0px 0px !important;
    top: 10px;
    background: #211852e8 !important;
    backdrop-filter: blur(5px);
    z-index: 2;
}





.note-toolbar {
    border: none !important;
    border-top: 1px solid #795DED !important;
    /* background: rgb(17, 17, 49) !important; */
    border-radius: 0px 0px 10px 10px !important;
    padding: 10px !important;

    position: sticky !important;
    /* top: 90px; */
    background: #2a206061 !important;


    z-index: 2;

    backdrop-filter: blur(5px);
}

.note-editable {
    background: rgb(4 4 29) !important;
    color: #FFFFFF !important;
    font-family: 'Urbanist', sans-serif !important;
    padding: 20px !important;


    p {
        margin: 0 !important;
        padding: 0 !important;

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

        &.text-right {
            text-align: right !important;
        }

        &.text-left {
            text-align: left !important;
        }
    }
}

.note-editable p {
    text-align: start !important;
}

.note-editable p.text-center {
    text-align: center !important;
}

.note-editable p.text-right {
    text-align: right !important;
}

.note-editable p.text-left {
    text-align: left !important;
}

.note-toolbar .note-btn-group button:not(.note-color-btn) {
    background: none !important;
    color: white;
    border: none;

}


.note-modal-header {
    border: none !important;
}

.note-modal-header button,
.note-form-label,
.note-modal-body label {
    color: #FFF !important;
}

.note-modal-body label input {
    margin-right: 10px !important;
}

.note-modal-body span {
    color: white ;
}

.note-modal-body kbd {
    background: #795DED !important;
}



.note-toolbar .note-btn-group button.active {
    background: none !important;
    color: rgb(136, 38, 216);
    border: none;

}

.note-modal-content input {
    border-radius: 10px;
}

.note-modal-footer input {

    border-radius: 10px;
    font-weight: 500 !important;
    color: white !important;
    background: #795DED;
}

.note-modal-footer input:hover {

    border-radius: 10px;
    font-weight: 500 !important;
    color: #795DED !important;
    background: #f3f2f8;
}

.note-dropdown-menu a {
    color: white !important;
    width: max-content;
}

.note-dropdown-menu a:hover {
    color: #080212 !important;
}


.note-palette {
    color: rgb(230, 230, 230);
}

.note-editor .note-dropzone.hover,
.note-editor .note-dropzone {
    color: white !important;
    background: none !important;
}

.note-control-selection {
    border: solid #795DED 1px !important;
}

.note-handle .note-control-selection .note-control-sizing {
    background: #795DED !important;
}


/* PAGINAITON OVERRIDES */

.dataTables_paginate.paging_simple_numbers a {
    background: rgba(121, 93, 237, 0.2) !important;

}



/* POPUP MODAL OVVERRIRDES */
.popover-target li a {
    width: 100% !important;
}

.popover-target li button {
    width: 100% !important;
}



/* overrides texts */

.table-auto td h1,
.table-auto td h2,
.table-auto td h3,
.table-auto td h4,
.table-auto td h5,
.table-auto td h6,
.table-auto td a,

.table-auto td p,
.table-auto td:not(:first-child) {
    max-width: 20ch;
    /* border: solid red; */
    overflow: hidden;
    text-overflow: ellipsis;

}

.table-auto td:last-child {
    overflow: visible;
}

#project-list-view a,
#project-grid-view a,
#project-list-view h6,
#project-grid-view h6 {
    max-width: 25ch;
    /* border: solid rgb(4, 0, 255); */
    overflow: hidden;

    text-overflow: ellipsis;
}

#project-list-view p,
#project-grid-view p {
    max-width: 50ch;
    /* border: solid rgb(0, 255, 76); */

    overflow: hidden;

    text-overflow: ellipsis;
}

#project-list-view .card-description {
    max-height: 5ch;
    max-width: 50ch;
    overflow: hidden;
    /* border: solid rgb(0, 255, 76); */
    text-overflow: ellipsis;
}

#project-grid-view .card-description {
    max-height: 5ch;
    max-width: 30ch;
    overflow: hidden;
    /* border: solid rgb(0, 255, 76); */
    text-overflow: ellipsis;
}



/* OVERRIDE TABLE */


/* View page content styling */
#content-area {
    background: #070727;
    border-radius: 10px;
    padding: 20px;
}

#content-area .prose {
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: #fff;
    --tw-prose-invert-links: #795DED;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: #fff;
    --tw-prose-invert-bullets: #795DED;
    --tw-prose-invert-hr: #795DED;
    --tw-prose-invert-quotes: #fff;
    --tw-prose-invert-quote-borders: #795DED;
    --tw-prose-invert-captions: #fff;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: #fff;
    --tw-prose-invert-pre-bg: #04041d;
    --tw-prose-invert-th-borders: #795DED;
    --tw-prose-invert-td-borders: #795DED;
}

#content-area .prose-invert {
    --tw-prose-body: #fff;
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
}

/* .dataTables_wrapper .my-2.col-span-full.overflow-x-auto {
        overflow-x: auto !important;
        overflow-y: clip !important;
    }
    */


/* OVERRIDE Collapsed Nav */

#app-menu-drawer {
    position: fixed !important;
}


/* wowers */



/* DRAFTPAD SIDEBAR */



.draftpad-parent.active {
    background: rgb(163, 65, 8) !important;
}



.text-base-color {
    color: #795DED !important;
}

.child-hovered {
    color: #ffffff !important;
}

.text-base-color:hover {
    color: #ffffff !important;
}




/* OVERRIDE Collapsed Nav */

#app-menu-drawer {
    position: fixed !important;
}


/* wowers */



/* DRAFTPAD SIDEBAR */



.draftpad-parent.active {
    background: rgb(163, 65, 8) !important;
}



.text-base-color {
    color: #795DED !important;
}

.child-hovered {
    color: #ffffff !important;
}

.text-base-color:hover {
    color: #ffffff !important;
}

/* View page content styling */
#content-area {
    background: #070727;
    border-radius: 10px;
    padding: 20px;
}

#content-area .prose {
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: #fff;
    --tw-prose-invert-links: #795DED;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: #fff;
    --tw-prose-invert-bullets: #795DED;
    --tw-prose-invert-hr: #795DED;
    --tw-prose-invert-quotes: #fff;
    --tw-prose-invert-quote-borders: #795DED;
    --tw-prose-invert-captions: #fff;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: #fff;
    --tw-prose-invert-pre-bg: #04041d;
    --tw-prose-invert-th-borders: #795DED;
    --tw-prose-invert-td-borders: #795DED;
}

#content-area .prose-invert {
    --tw-prose-body: #fff;
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
}




/* OVERRIDE Collapsed Nav */

#app-menu-drawer {
    position: fixed !important;
}


/* wowers */



/* DRAFTPAD SIDEBAR */



.draftpad-parent.active {
    background: rgb(163, 65, 8) !important;
}



.text-base-color {
    color: #795DED !important;
}

.child-hovered {
    color: #ffffff !important;
}

.text-base-color:hover {
    color: #ffffff !important;
}

/* View page content styling */
#content-area {
    background: #070727;
    border-radius: 10px;
    padding: 20px;
}

#content-area .prose {
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: #fff;
    --tw-prose-invert-links: #795DED;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: #fff;
    --tw-prose-invert-bullets: #795DED;
    --tw-prose-invert-hr: #795DED;
    --tw-prose-invert-quotes: #fff;
    --tw-prose-invert-quote-borders: #795DED;
    --tw-prose-invert-captions: #fff;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: #fff;
    --tw-prose-invert-pre-bg: #04041d;
    --tw-prose-invert-th-borders: #795DED;
    --tw-prose-invert-td-borders: #795DED;
}

#content-area .prose-invert {
    --tw-prose-body: #fff;
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
}




/* OVERRIDE Collapsed Nav */

#app-menu-drawer {
    position: fixed !important;
}


/* wowers */



/* DRAFTPAD SIDEBAR */

li:not(.draftpad-main-dropbox) .active:first-child {
    border-radius: 10px !important;
}

.dropdown-button:hover~.dropdown-content,
.dropdown-content:hover {
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

.draftpad-parent.active {
    background: rgb(163, 65, 8) !important;
}



.text-base-color {
    color: #795DED !important;
}

.child-hovered {
    color: #ffffff !important;
}

.text-base-color:hover {
    color: #ffffff !important;
}

/* View page content styling */
#content-area {
    background: #070727;
    border-radius: 10px;
    padding: 20px;
}

#content-area .prose {
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: #fff;
    --tw-prose-invert-links: #795DED;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: #fff;
    --tw-prose-invert-bullets: #795DED;
    --tw-prose-invert-hr: #795DED;
    --tw-prose-invert-quotes: #fff;
    --tw-prose-invert-quote-borders: #795DED;
    --tw-prose-invert-captions: #fff;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: #fff;
    --tw-prose-invert-pre-bg: #04041d;
    --tw-prose-invert-th-borders: #795DED;
    --tw-prose-invert-td-borders: #795DED;
}

#content-area .prose-invert {
    --tw-prose-body: #fff;
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
}




/* OVERRIDE Collapsed Nav */

#app-menu-drawer {
    position: fixed !important;
}


/* wowers */



/* DRAFTPAD SIDEBAR */



.draftpad-parent.active {
    background: rgb(163, 65, 8) !important;
}



.text-base-color {
    color: #795DED !important;
}

.child-hovered {
    color: #ffffff !important;
}

.text-base-color:hover {
    color: #ffffff !important;
}

/* View page content styling */
#content-area {
    background: #070727;
    border-radius: 10px;
    padding: 20px;
}

#content-area .prose {
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: #fff;
    --tw-prose-invert-links: #795DED;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: #fff;
    --tw-prose-invert-bullets: #795DED;
    --tw-prose-invert-hr: #795DED;
    --tw-prose-invert-quotes: #fff;
    --tw-prose-invert-quote-borders: #795DED;
    --tw-prose-invert-captions: #fff;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: #fff;
    --tw-prose-invert-pre-bg: #04041d;
    --tw-prose-invert-th-borders: #795DED;
    --tw-prose-invert-td-borders: #795DED;
}

#content-area .prose-invert {
    --tw-prose-body: #fff;
    --tw-prose-headings: #fff;
    --tw-prose-lead: #fff;
    --tw-prose-links: #795DED;
    --tw-prose-bold: #fff;
    --tw-prose-counters: #fff;
    --tw-prose-bullets: #795DED;
    --tw-prose-hr: #795DED;
    --tw-prose-quotes: #fff;
    --tw-prose-quote-borders: #795DED;
    --tw-prose-captions: #fff;
    --tw-prose-code: #fff;
    --tw-prose-pre-code: #fff;
    --tw-prose-pre-bg: #04041d;
    --tw-prose-th-borders: #795DED;
    --tw-prose-td-borders: #795DED;
}


.changelog-content {
    font-size: 0.9rem;
    /* Slightly smaller text */
    line-height: 1.4;
    /* Improved line spacing */
    color: #e0e0e0;
    /* Softer white color */
    margin: 0.5rem 0;
    /* Spacing between items */
}

.changelog-content h2 {
    font-size: 1.2rem;
    /* Smaller heading size */
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.changelog-content ul {
    list-style-type: disc;
    /* Use disc bullets */
    padding-left: 1.5rem;
    /* Indent the list */
    margin-bottom: 1rem;
}

.changelog-content li {
    margin: 0.2rem 0;
}

.changelog-content .version-header {
    color: #ffffff;
    /* Keep version headers white */
    font-weight: bold;
}




/* CUSTOM DATATABLE PRJECT */
.view-toggle.active {
    background-color: #9c84f4;
    color: white;
}

.view-toggle.active i {
    color: white;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.project-card:hover {
    transform: translateY(-2px);
}

/* List View Styles */
#projects-grid.list-view {
    display: block;
}



#projects-grid.list-view .project-card {
    display: flex;
    max-width: 100%;
    margin-bottom: 1rem;
}

#projects-grid.list-view .project-card > div:first-child.card-header {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    position: relative;
}

#projects-grid.list-view .project-card a.card-header-anchor  {
    width: 40%;
    /* border: solid red 2px; */
}
#projects-grid.list-view .card-header .card-header-info {
    bottom: 30%;
}

#projects-grid.list-view .project-card .p-6 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#projects-grid.list-view .project-card .flex.items-center.justify-between {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* Dark mode adjustments */
.dark #projects-grid.list-view .project-card .flex.items-center.justify-between {
    border-top-color: #374151;
}





/* EMPTY STATE */

#empty-state {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover animations for feature cards */
#empty-state .text-center:hover .w-12.h-12 {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

/* Pulse animation for decorative elements */
#empty-state .absolute.w-6.h-6,
#empty-state .absolute.w-4.h-4,
#empty-state .absolute.w-3.h-3 {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #empty-state .grid-cols-1.sm\\:grid-cols-3 {
        gap: 1rem;
    }
    
    #empty-state .max-w-md {
        max-width: 100%;
    }
}




.logo-upload-hover {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.logo-upload-group:hover .logo-upload-hover {
    opacity: 1;
}