* {
    font-family: 'Inter', sans-serif;
    font-size: 100%;
}

#components-reconnect-modal {
    animation-name: fadeIn;
    animation-duration: 2s;
    color: red !important; 
}
:root {
    --info-color: #002c55 !important;
    --error-color: #7d0100 !important;
    --success-color: #00532e !important;
    --mud-default-borderradius: 12px !important;

}
@media (max-width: 600px) {
    @supports (-webkit-touch-callout: none) {
        .mud-table-pagination {
            position: fixed !important;
            width: 100%;
        }
    }
}
.popup-banner {
    background-color: rgb(25, 27, 43);
    border-radius: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    z-index:10000;
}
@media (min-width: 768px) { /* For PCs and larger screens */
    .project-data-grid > .mud-table-container {
        height: 119dvh !important;
    }
    div.popup-banner {
        bottom: 0%;
        margin-bottom: 250px;
        right: 0%;
        top: unset;
        left: unset;
        width: 40vw;
        transform: unset;
    }
}
@media (max-width:800px) {
    div.project-data-grid > div.mud-table-container {
        height: 121dvh !important;
    }
    

}
.mud-table-container{
    height: 115dvh !important;
}
/*@media(min-width:800px) and (min-height:1280px)
{
    .mud-table-container {
        height: 126dvh !important;
    }
}
*/
@media (min-height: 600px) and (max-height: 800px) and (max-width:1024px){ /* For medium screens */
    .project-data-grid > .mud-table-container {
        height: 110dvh !important;
    }
}

@media (min-height: 400px) and (max-height: 600px) { /* For Phones */
    .project-data-grid > .mud-table-container {
        height: 110dvh !important;
    }


}
@media (max-height: 400px)
{
    .project-data-grid > .mud-table-container {
        height: 82dvh !important;
    }
}
.mud-tabs-tabbar,
.mud-paper.mud-paper-outlined.chat-header {
    border-radius: 8px !important;
}
.mud-input.mud-input-outlined.mud-input-adorned-end.mud-shrink.mud-typography-input, .mud-input.mud-input-outlined.mud-input-adorned-end.mud-shrink.mud-typography-input {
    border-radius: 8px !important;
} 
.mud-button-filled.mud-button-filled-info {
    border: solid 2px #008cff !important;
}
.mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end, .mud-input-slot.mud-input-root.mud-input-root-outlined 
{
    text-align: inherit !important;
}
.info-new {
    background-color: #002c55 !important;
    border: 2px #008cff solid;
}

.info-new:hover {
    background-color: rgb(10,133,255) !important; /* info-darken */
}

.error-new {
    background-color: #7d0100 !important;
    border: 2px #b70000 solid;
}

.error-new:hover {
    background-color: rgb(244,47,70) !important; 
}
/* not used yet */
.success-new {
    background-color: #00532e !important;
    border: 2px #00b45e solid;
}

.success-new:hover {
    background-color: rgb(9,154,108) !important; 
}

.warning-new {
    background-color: #FF8C00 !important;
    border: 2px #FFA500 solid;
}
.warning-new:hover {
    background-color: rgb(214,143,0) !important; /* warning-darken */
}

.filtered, .mud-direction-asc {
    color: #6ea867 !important;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    top: -7px !important;
}

.mud-dialog-title {
    position: sticky !important;
    top: -20px !important;
    width: 100%;
    background: inherit;
}
.mud-dialog {
    border-radius: 16px ;
}
.mud-dialog.mud-dialog-width-md
{
    border-radius: 0px !important;
}

.mud-dialog mud-dialog-width-md {
    min-width: 300px;
}

/* When the <tr> is hovered, apply inherit to .sticky-left cells */
.mud-table-row:hover td.mud-table-cell.sticky-left {
    background-color: inherit !important;
}
th.mud-table-cell.sticky-left:hover {
    background-color: #0d0e19 !important;
}
@media (max-width:960px)
{
    .mud-table-toolbar{
        padding-inline-start: 0px !important;
        margin-left:0px!important;
    }
    .mud-icon-size-large
    {
        font-size: 2rem !important;
    }
    .sticky-left, .outlined-dialog-xl-content.mud-table-cell sticky-left, .mud-table-cell.sticky-left {
        background-color: #0d0e19 !important;
        left: auto !important;
        position: relative !important;
    }
    .mud-popover.mud-popover-open.mud-popover-top-left.mud-popover-anchor-top-left.mud-popover-overflow-flip-always.mud-paper.mud-elevation-8.pb-4 {
        width: 100vw !important;
    }
    .mud-drawer.mud-drawer-fixed.mud-drawer-pos-top.mud-drawer--open.mud-drawer-md.mud-drawer-clipped-never.mud-elevation-0.mud-drawer-temporary {
        height:auto !important;
    }

    .navmenu {
        display: flex !important;
        height: 100%;
        align-content: center;
        align-items: center;
        align-self: center;
    }
    th.mud-table-cell.sticky-left {
        background-color: #0d0e19 !important;
        position: sticky !important;
        z-index: 12 !important;
        top: 0 !important;
    }
}
.navmenu{
    display:none;
}

@media (max-width: 960px) {
    .mud-drop-container {
        max-width: 90% !important;
    }

    .main-content-sm {
        padding: 0px !important;
        margin: 0px !important;
    }

    .mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--closed {
        display: none;
    }

    .mud-table-toolbar {
        margin: 10px 5px;
        padding-top: 10px;
    }

    .mud-sm-table .mud-table-row {
        display: table !important;
        margin-bottom: 20px;
        width: 100%;
        padding: 5vw;
    }

    .mud-sm-table.mud-table-bordered .mud-table-container .mud-table-root colgroup ~ .mud-table-body .mud-table-row .mud-table-cell {
        border-right: hidden !important;
    }

    .mud-navmenu {
        height: auto !important;
    }

    .loading-screen-title {
        font-size: 2.5em !important;
    }
    .loading-text {
        font-size: 1em !important;
        height: 30% !important;
    }
    .loading-screen-container.mud-progress-circular {
        height: 50px !important;
        width: 50px !important;
    }


}

.mud-navmenu {
    height: 100%;
}

.mud-direction-desc, .mud-direction-desc:hover {
    color: #3d73f2 !important;
}
.mud-table-container {
    background-color: var(--mud-palette-surface);
    position: sticky !important;
    top: 0 !important;  
}


.mud-link.mud-link-underline-hover, .html-content-wrapper a {
    color: #1ce6e6 !important;
}




.link {
    color: rgb(219, 215, 163);
}
.link:hover {
    color: rgb(243, 234, 119) !important;
}


/* Normal (Default) */
.mud-alert .mud-alert-message a {
    color: rgb(86, 169, 242);
}

.mud-alert .mud-alert-message a:hover {
    color: rgb(15, 142, 255) !important;
}

/* Success */
.mud-alert.mud-alert-outlined-success .mud-alert-message a {
    color: rgb(180, 237, 180);
}

.mud-alert.mud-alert-outlined-success .mud-alert-message a:hover {
  color: rgb(52, 190, 67) !important;

}

/* Warning */
.mud-alert.mud-alert-outlined-warning .mud-alert-message a {
    color: rgb(219, 215, 163);
}

.mud-alert.mud-alert-outlined-warning .mud-alert-message a:hover {
    color: rgb(243, 234, 119) !important;
}

/* Error */
.mud-alert.mud-alert-outlined-error .mud-alert-message a {
    color: rgb(255, 187, 193);
}

.mud-alert.mud-alert-outlined-error .mud-alert-message a:hover {
    color: rgb(255, 98, 112) !important;
}

/* Info */
.mud-alert.mud-alert-outlined-info .mud-alert-message a {
    color: rgb(32, 199, 236);
}

.mud-alert.mud-alert-outlined-info .mud-alert-message a:hover {
    color:rgb(135, 233, 255) !important;
}


.mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end.mud-select-input
.mud-select-option-delete {
    display: none;
}






.mud-list {
    background: #151726 !important;
}
.html-content-wrapper:not(.is-outlined) .ql-editor {
    border-top: 0px solid !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 960px) {
    .outlined-dialog-max-content {
        min-width: 200px !important;
    }
    .outlined-dialog-name-content {
        min-width: 230px !important;
    }
    .outlined-dialog-lg-content{
        min-width:155px !important;
    }
    .outlined-dialog-xl-content {
        min-width: 350px !important;
    }
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 960px) {
    .outlined-dialog-max-content  {
        min-width: 200px !important;
    }
    .outlined-dialog-name-content {
        min-width: 230px !important;
    }
    .outlined-dialog-lg-content {
        min-width: 155px !important;
    }
    .outlined-dialog-xl-content {
        min-width: 250px !important;
    }
}


.outlined-dialog-md-content{
    width:123px;
}
.mud-input-control.mud-input-input-control.outlined-dialog-md-content > .mud-input-control-input-container > .mud-input.mud-input-outlined.mud-input-adorned-end.mud-shrink.mud-typography-input {
    padding: 0px !important;
}

.mud-collapse-wrapper-inner {
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: auto;
}

:root .mud-dialog.mud-dialog-width-sm {
    border-radius: 20px !important;
}

.mud-button {
    border-radius: 8px !important;
}
.mud-dialog-container
{
    height: 100vh !important;
}
.ql-snow .ql-tooltip.ql-flip {
    top: 50px !important;
    left: 100px !important;
}


.outlined-dialog-max-content, .outlined-dialog-lg-content {
    min-width: 155px;
}
.outlined-dialog-name-content {
    min-width: 180px !important;
}
.outlined-dialog-xl-content{
    min-width:350px;

}




.ql-editor li > .ql-ui {
    position: relative;
    display: inline-block;
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ql-editor li[data-list=unchecked] > .ql-ui:before {
    content: '\2610';
    color: #4a4a6a;
    opacity: 0.8;
    font-size: 1.5em;
}

.ql-editor li[data-list=checked] > .ql-ui:before {
    content: '\2611';
    color: #4CAF50;
    font-size: 1.5em;
    animation: checkmark-mega-burst 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.ql-editor {
    color: white !important;
}
.ql-editor p {
        color: white !important;
}
.ql-editor [style*="color: rgb(0, 0, 0)"] {
    color: white !important; 
}

@keyframes checkmark-mega-burst {
    0% {
        opacity: 0;
        transform: scale(0);
        text-shadow: 0 0 0 transparent;
/*        color: #2E7D32;
*/    }



    60% {
        transform: scale(1.5);
        text-shadow: 0 0 40px rgba(25, 118, 210, 0.6);
/*        color: #1565C0;
*/    }

    80% {
        transform: scale(0.9);
        text-shadow: 0 0 25px rgba(123, 31, 162, 0.5);
/*        color: #6A1B9A;
*/    }

    100% {
        opacity: 1;
        transform: scale(1.3);
        text-shadow: 0 0 15px rgba(46, 125, 50, 0.3);
/*        color: #4CAF50;
*/    }
}

.ql-editor li[data-list=checked] {
    text-decoration: line-through;
    color: #e8d5b7;
    transition: all 0.5s ease;
}

.ql-editor li[data-list=checked]:hover {
        text-decoration: line-through;
        color: #a0a0a0;
}


.loading-screen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000;
}
.mud-layout {
    z-index: 1;
    overflow-x: clip;
}

.mud-navmenu {
    z-index: 5;
}

.mud-navmenu {
    z-index: 5;
}

.loading-screen-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
}
.loading-screen-title {
    color: #FFB647;
    font: inherit;
    font-size: 4rem;
    height: auto;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 4.5em;
    line-height: 1.125;
    font-weight: 600;
    background-image: linear-gradient(275deg, #FFC700 0%, #FFFFFF 59%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mud-progress-circular {
    position: absolute;
    color: white;
    z-index: 10;
    margin-top:25%;
}

.loading-text {
    color: #f0f0f0;
    font: inherit;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.9;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    height:50%;

}
#components-reconnect-modal h5
{
    color:white;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}



/* Chats Icon */
.floating-chat-icon {
    background: var(--info-color) !important;
    min-width: 50px;
    border: solid 2px #008cff !important;
    border-radius: 6px !important;
}

.floating-chat-icon:hover {
    background-color: var(--mud-palette-info-darken) !important;
    border: solid 10px #008cff !important;
}

/* Chats Dialog */
.chat-dialog {
    overflow: inherit !important;
}
.projects-chat-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #121212;
    transition: all 0.3s ease;
}

.projects-panel {
    width: 40vw;
    min-height: 60vh;
    border-radius: 12px;
    padding: 20px;
    background-color: #161621;
    color: #E0E0E0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    overflow-y: auto;
    transition: all 0.3s ease;
    border: 2px solid #2C2C2C;
    scrollbar-width: thin;
    scrollbar-color: #efefef #012b52;
}

@media (max-width: 760px) {
    .projects-title {
        margin-left: 10px;
    }
    .project-item {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        overflow-y: auto !important;
        max-height: fit-content;
        text-align: start !important;
        align-items: start !important;
    }
    .projects-panel {
        width: 80vw !important;
    }
    .chat-popup {
        width: 80vw !important;
        padding: 0px 10px !important;
    }

    .container-for-toggles {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .unread-badge {
        bottom: 65% !important;
        right: 8% !important;
    }
    .floating-chat-container {
        width: 100% !important;
        /* Fallback for browsers that don't support dvh */
        height: 95vh !important;
        /* Modern solution that accounts for mobile browser UI */
        height: 100dvh !important;
    }
    .chat-container {
        width: 100dvw !important;
        height: 100dvh !important;
    }
    body.chat-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    .chat-panel {
        width: 100dvw !important;
        height: 100dvh !important;
    }

    .mud-input.mud-input-outlined.mud-input-adorned-end{
        padding-inline-end: 11px !important;
    }

    div.mud-input-control.mud-input-input-control.outlined-dialog-max-content >
    div.mud-input-control-input-container >
    div.mud-input.mud-input-outlined.mud-input-adorned-end.mud-shrink.mud-typography-input >
    input.mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end {
        min-width: 60px !important;
        text-align: center;
    }

}
.message-hover-options.active {
    display: flex !important;
}

.message-hover-options {
    display: none;
}

.projects-title {
    display: flex;
    align-items: center;
    color: #efefef;
    font-weight: 600;
}
.project-container {
    display: flex;
    align-items: center;
    margin: 5px 10px 5px clamp(45px, 13.5vw, 75px);
    min-width: 0;
    max-width: 100%;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
@media (min-width:760px) {
    .project-container {
        margin: 5px 10px 5px 30px !important;
    }
}

.pinned-badge{
    transform:rotate(-90deg);
}

.projects-list {
    display: flex;
    -ms-flex-direction: inherit;
    -webkit-flex-direction: inherit;
    flex-direction: inherit;
    gap: clamp(5px, 5px, 10%);
    padding: 10px 0;
    flex: 1 1;
    margin-right: 20px;
}

.project-item {
    border: 2px solid #b5b1b1;
    background-color: #38383c;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    position: relative;
    margin: 0px 15px 0px 10px;
    height: max(calc(8vh - 21px), 40px) !important;
    flex: 1 1 auto;
}
.private-border {
    border: 2px solid #e6b371 !important;
}


.project-item:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    background-color: #333333;
}
.unapproved-message {
    background-color: #4A2828;
    border: 2px solid #721414;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.unapproved-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( 45deg, rgba(114, 20, 20, 0.2), rgba(255, 50, 50, 0.2) );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.unapproved-message:hover::before {
    opacity: 1;
}

.unapproved-message::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient( 135deg, rgba(255, 0, 0, 0.1), rgba(255, 100, 0, 0.1), rgba(255, 200, 0, 0.1) );
    animation: colorPulse 3s ease-in-out infinite alternate;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.unapproved-message:hover::after {
    opacity: 1;
}

@keyframes colorPulse {
    0% {
        filter: hue-rotate(0deg) brightness(0.8);
    }

    50% {
        filter: hue-rotate(20deg) brightness(1.2);
    }

    100% {
        filter: hue-rotate(40deg) brightness(0.9);
    }
}

.unapproved-message:hover {
    box-shadow: 0 0 15px rgba(114, 20, 20, 0.5);
}
.project-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #E0E0E0;
}

.badge {
    position: absolute;
    bottom: 35%;
    right: 18%;
}

.no-projects-alert {
    margin-top: 20px;
}
 

.chat-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
    width: inherit;
    transition: all 0.3s ease;
    overflow-y: hidden;
}

.floating-chat-container {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 1500;
    width: 50vw;
    max-height: 100vh;
    height: 100vh;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}
.mud-dialog-container.mud-dialog-bottomright
{
    overflow-x:hidden;
}
.chat-panel {
    width: 100dvw;
    height: 100dvh;
    border-radius: 12px;
    background-color: #161621;
    color: #E0E0E0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 2px solid #2C2C2C;
    animation: fadeIn 0.5s ease-out;
    overflow: hidden auto;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #efefef #012b52; /* Thumb and track colors */
}

.mud-tab-badge {
}
.chat-header {
    background-color: #012b52;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 2px solid #3A3A3A;
    transition: all 0.3s ease;
    position: sticky;
}

.chat-header:hover {
    background-color: #01315e;
}

.chat-title {
    color: #efefef;
    display: flex;
    align-items: center;
}
back-button {
    color: #efefef !important;
}

.chat-content {
    flex-grow: 1;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: #efefef #012b52;
    overflow: hidden;
}

.chat-content::-webkit-scrollbar {
    width: 8px;
}

.chat-content::-webkit-scrollbar-track {
    background: #012b52;
}

.chat-content::-webkit-scrollbar-thumb {
    background-color: #efefef;  
    border-radius: 4px;
}

.chat-messages {
    display: flex;
    height: 100%;
    overflow-y: auto;
    padding: 0.5rem;
    flex-grow: 1;
    flex-direction: column-reverse;
    overflow-anchor: auto !important;
}


.date-separator {
    color: #fff4f4;
    margin: 10px 0;
    text-align: center;
}

.message-username {
    color: #efefef;
    margin-bottom: 5px;
    margin-left:15px;
    margin-right:15px;
}

.message-container {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: slideIn 0.2s ease-out forwards;
    padding:2px 15px;
}
.message-hover-options {
    position: relative;
    background-color: #3b3b3b;
    display: none;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    z-index: 10;
    align-self: inherit;
    transition: all 0.3s ease;
    height: 35px;
    top:-2px;
}
.message-left > .message-hover-options {
    left: 5px;
}
.message-right > .message-hover-options {
    right: 5px;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-left {
    align-items: flex-start;
}

.message-right {
    align-items: flex-end;
}

.chat-message {
    background-color: #3b3b3b;
    border-radius: 12px;
    padding: 10px 15px;
    max-width: 70%;
    word-wrap: break-word;
    transition: all 0.3s ease;
}

.message-right .chat-message {
    background-color: #3A3A3A;
}

.message-timestamp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    word-wrap: anywhere;
    color: #efefef;
    text-wrap: nowrap;
    align-self: start;
    margin-top: 10px;
}

.received-icon {
    margin-left: 5px;
    font-size: 1rem;
}

.chat-input-area {
    background-color: #012b52;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 10px;
    border-top: 1px solid #3A3A3A;
    transition: all 0.3s ease;
}

.chat-input-area:focus-within {
    transform: scale(1.01);
}



.special-link {
    transition: all 0.3s ease;
}

.special-link:hover {
color: #80CBC4 !important;
text-decoration: underline;
}

.approval-warning {
    color: #FFC107;
    margin-bottom: 5px;
}

.special-link {
    color: #efefef !important;
}

.not-approved-message {
    background-color: #4A2828;
    border: 2px solid #721414;
    opacity: 0.8;
    position: relative;
}

.not-approved-message::before {
    content: "Pending Approval";
    position: relative;
    bottom: 25px;
    background-color: #721414;
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.7rem;
}



[id^="popovercontent-"] [role="group"].d-flex.flex-row.gap-3 {
    position: sticky;
    bottom: 0%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    background-color: #fff;
    background-color: var(--mud-palette-surface);
}
.mud-dialog-width-md
{
    padding:1%;
}

.ql-snow .ql-tooltip {
    background-color: #fff;
    border: 2px solid #161515;
    box-shadow: 0 0 2px #dcc0c0;
    color: #0f0a0a;
    padding: 5px 12px;
    white-space: nowrap;
}
.html-editor .ql-tooltip a {
    color: #005ab4 !important;
}
.ql-snow .ql-tooltip input[type="text"] {
    background: #bababa;
    color: black;
}
.ql-bubble .ql-tooltip {
    z-index: 1000;
}

.ql-bubble .ql-editor {
    padding: 12px 15px;
    min-height: 120px;
}
.ql-snow .ql-editor code, .ql-snow .ql-editor .ql-code-block-container {
    background-color: #4f4747 !important;
}




.allow-border{
    border: 1px solid var(--mud-palette-lines-default);
    margin: 5px 25px;
    border-radius: 12px;
}

.mud-expand-panel-header {
    background: #1f2133;
    margin: 5px 5px;
}
.description-error {
    border: rgb(244,47,70)
}
.html-editor-label {
    top: -10px;
    left: 15px;
    width: fit-content;
    font-size: 12px;
    position: relative;
    background: #0d0e19;
    text-wrap: nowrap;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .00938em;
    z-index: 0;
    pointer-events: none;
    padding: 0px 5px !important;
    transform-origin: top left;
    white-space: nowrap;
}
.toolbar-options {
    display: flex !important;
    width: 150px;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: auto;
    margin-left: 25px;
}
.collapsed-toolbar{
    display:none !important;
}

.mud-expand-panel-header {
    border-radius: 25px;
    min-height:72px !important;
}
.mud-expand-panel.mud-expand-panel-border{
    border:0px !important;
}

.cursor-pointer .mud-input-control-input-container .mud-input-mud-input-outlined-mud-input-adorned-end-mud-shrink-mud-typography-input .mud-input-slot-mud-input-root-mud-input-root-outlined-mud-input-root-adorned-end,
.cursor-pointer .mud-progress-linear-mud-progress-linear-small-mud-progress-linear-color-info,
.mud-input-control.mud-input-input-control.outlined-dialog-md-content.cursor-pointer
.mud-input-control-input-container
.mud-input
.mud-input-slot,
.cursor-pointer >
.mud-input-control-input-container >
.mud-input.mud-input-outlined >
.mud-input-slot.mud-input-root.mud-input-root-outlined {
    cursor: pointer !important;
}
 

.html-editor.html-content-wrapper.mud-input-outlined-border
{
    min-width:680px;    
    margin-top:12px;
}
.ql-container.ql-snow{
    min-height:100px;
}

@media (max-width: 960px) {
    .connection-lines {
        left: 470px !important;
        width: auto !important;
    }
}

#connection-label{
    cursor:pointer;
}
.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-start,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-start {
    padding-inline-end: 26px;
}
.mud-input-adornment-end {
    margin-inline-end: 6px;
}
.mud-drop-container, .mud-button-text.mud-button-text-primary {
    --mud-palette-primary: rgba(50, 153, 255, 1) !important;
}
.column-header{
    text-align:center;
}
.mud-data-grid .mud-table-cell .column-header {
    -webkit-justify-content: center;
    justify-content: center;
}
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding-inline-start: 6px;
    padding-inline-end: 6px;
}
@media (width > 1080px) {
    div.mud-popover.mud-popover-open.mud-popover-top-left.mud-popover-anchor-top-left.mud-popover-overflow-flip-always.mud-paper.mud-elevation-4.overflow-y-auto.filters-panel.pa-2 {
        left: 81px !important;
        top: 121px !important;
    }
}
.menu-select > .mud-input-control-input-container > label.mud-input-label {
    background-color: rgb(21, 23, 38) !important;
}
.mud-dialog.mud-dialog-width-md{
    min-width:400px;
}

.yellow-border {
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 10px;
    border-width: 2px !important;
    --parent-bg-color: #c09837;
    background: #b17d00;
    text-align:center;
}

.red-border {
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 10px;
    border-width: 2px !important;
    --parent-bg-color: #fd1c18;
    background: #ae0502;
    text-align: center;
}

.cursor-pointer.yellow-border:hover {
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    --border-width: 15px;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: #c09837;
}

.grey-border {

    background-color: #32333c;
    --parent-bg-color: #48494f;
    border-radius: 8px;
    min-width: 100px;
    text-align: center;
}


.cursor-pointer.grey-border:hover {
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    --border-width: 15px;
    --parent-bg-color: #48494f;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: #48494f;
}
.outlined-dialog-max-content.cursor-pointer:hover,
.mud-input-control.mud-input-input-control.outlined-dialog-max-content.cursor-pointer >
.mud-input-control-input-container >
.mud-input.mud-input-outlined.mud-shrink.mud-typography-subtitle1:hover {
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    --border-width: 15px;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: var(--parent-bg-color) !important;
}

.green-border {
    background-color: #00532e;
    color: white;
    border-radius: 8px;
    --parent-bg-color: #008438;
    min-width: 100px;
    text-align: center;
}

.error-border {
    --parent-bg-color: #be0000;
    background: #7d0000;
    border-radius: 8px;
    text-align: center;
}

.mud-input-outlined-border {
    border-radius: 8px !important;
    border-width: var(--border-width,2px) !important;
    border-color: var(--parent-bg-color, #5a5a5f) !important;
    transition: border-width .1s ease-in-out !important;
}


th.mud-table-cell:nth-child(1):not([class*="Id"]):not([data-label="Id"]) {
    z-index: 3 !important;
}

@media (min-width: 960px) {
    .mud-table-row > .mud-table-cell:first-child:not([class*="Id"]):not([data-label="Id"]):has(+ .mud-table-cell.sticky-left) {
        position: sticky;
        top: -12px;
        left: -2px;
        z-index: 2;
    }
    .mud-table-row > .mud-table-cell:first-child:not([class*="Id"]):not([data-label="Id"]):has(+ .mud-table-cell.sticky-left) {
        background-color: #191920 ;

    }
    /* Default state: black background */
    .mud-data-grid .mud-table-cell.sticky-left {
        background-color: #191920 !important;
    }
    th.mud-table-row > .mud-table-cell:first-child:not([class*="Id"]):not([data-label="Id"]):has(+ .mud-table-cell.sticky-left) {
        z-index: 3 !important;
    }
}
th {
    box-shadow: -2px 0 4px rgba(13, 14, 25, 0.7), 2px 0 4px rgba(13, 14, 25, 0.7); /* Shadow on both sides with color #0d0e19 */
}
th.mud-table-cell.sticky-left {
    box-shadow: -2px 0 4px rgba(25, 25, 32, 0.7), 2px 0 4px rgba(25, 25, 32, 0.7); /* Shadow on both sides */
}
.mud-pagination {
    list-style: none;
}
.mud-menu-item {
    padding: 8px 14px;
}
.mud-input-control.mud-input-input-control.outlined-dialog-xl-content >
.mud-input-control-input-container >
.mud-input.mud-input-outlined.mud-input-adorned-end.mud-shrink.mud-typography-subtitle1.mud-input-auto-grow >
textarea.mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end {
    white-space: pre;
    overflow-y:hidden !important;
    height: 55px !important;
    max-height: 60px !important;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
    backface-visibility: hidden;
}
div.mud-input-control.mud-input-input-control.outlined-dialog-xl-content {
    overflow-y: hidden !important;
    resize: horizontal !important;
}
.mud-drawer {
    overflow: hidden !important;
}
/* Scrollbar Track */
::-webkit-scrollbar {
    width: 10px; /* Width for vertical scrollbar */
    height: 10px; /* Height for horizontal scrollbar */
}

/* Handle (Draggable part) */
::-webkit-resizer {
    background-color: #333339;
}


.mud-button-outlined {
    border-width: 2px !important;
}
.mud-button-outlined.mud-button-outlined-info:hover {
    transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: var(--mud-palette-info) !important;
    color: white;
}
.mud-button-outlined.mud-button-outlined-error:hover {
    transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: var(--mud-palette-error) !important;
    color: white;
}
.mud-button-outlined.mud-button-outlined-warning:hover {
    transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: var(--mud-palette-warning) !important;
    color: white;
}
.mud-button-outlined.mud-button-outlined-success:hover {
    transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: var(--mud-palette-success) !important;
    color: white;
}
.mud-chip-outlined.mud-chip-color-success{
    border-width: 2px !important;
}
.quick-message {
    border-width: 2px;
    border-radius: 8px;
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
    padding: 2px 6px 2px 6px;
    overflow-wrap: break-word;
}
.quick-message:hover {
    background-color: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: white;
    transition: background-color 250ms cubic-bezier(0.3, 0, 0.2, 1);
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
}

.mud-input > textarea.mud-input-root {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.mud-input > textarea.mud-input-root-outlined {
    mask-image: none !important;
}
.fit-image {
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
}
.mud-appbar.mud-appbar-dense.mud-appbar-fixed-top.mud-elevation-2
{
    width:100%;
}


.cursor-move {
    cursor: grab;
}

tr.mud-table-row.being-dragged > td, .being-dragged{
    opacity: 0.8;
    background-color: var(--mud-palette-success) !important;
}
tr.mud-table-row.drop-target > td, .drop-target {
    background: linear-gradient(45deg, rgba(var(--mud-palette-primary-rgb), 0.1) 49.5%, rgba(var(--mud-palette-primary-rgb), 0.2) 49.5%, rgba(var(--mud-palette-primary-rgb), 0.2) 50.5%, rgba(var(--mud-palette-primary-rgb), 0.1) 50.5%) !important;
    background-size: 8px 8px !important;
    opacity: 1;
    cursor: grabbing;
}
.drag-handle {
    display: flex;
    align-items: center;
    cursor: grab;
}

.drag-handle.grabbing {
    cursor: grabbing;
}
.not-draggable {
    pointer-events: none !important;
}
.mud-drop-item[draggable="false"] {
    transform: none !important;
    touch-action: auto !important;
    cursor: default !important;
}

.private-chat {
    background-color: #431100;
}
.chat-header.private-chat:hover {
    background-color: #431100;
}
.private-chat .mud-input-outlined-border {
    border-color: white !important;
}
.private-chat .mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.mud-menu-icon-button-activator{
    
    color: white !important;
}
.private-chat .mud-input-adornment-icon-button,
.private-chat .mud-icon-button {
    color: white !important;
    fill: white !important; /* Ensures the SVG icon inside turns white */
}
.private-chat .mud-input > textarea.mud-input-root::placeholder
{
    opacity: 0.92 !important;
}

.arrow-top {
    width: 50px;
    height: 30px;
    background-color: #2196f3;
    position: relative;
    cursor: pointer;
    transform: rotate(180deg);
    
}
.arrow-bottom {
    width: 50px;
    height: 30px;
    background-color: #2196f3;
    position: absolute;
    cursor: pointer;
    bottom: 40px;
    right: 20px;
}
.arrow-top div, .arrow-bottom div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid white;
}
.arrow-top div {
    transform: translate(-50%, -50%);
}
.arrow-bottom div {
    transform: translate(-50%, -50%);
}

.mud-scroll-to-top:hover *, .arrow-bottom:hover {
    background-color: #008eff !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}
.chat-pinned-text {
    display: block;
    margin: 20px;
    position: fixed;
    top: 100px;
    align-self: center;
    z-index: 10;
    background: #391801;
    padding: 10px;
    border: 2px solid #ad794c;
    border-radius: 12px;
    text-align: center;
}
.private-chat.chat-panel {
    background: #18150d !important;
}
.vh-70{
    max-height: 70vh;
}
@media (max-width:760px) {
    .mud-dialog .mud-dialog-content {
        margin: 12px 12px !important;
    }
}


.file-bubble {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
}

.file-icon-label {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.file-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAA8CAMAAAD8KXLNAAAAvVBMVEUAAAD3d3fxRkbyRkbyRkb3fn74g4PyRUX3lZXzRUXyRUX/RkbyQED3fn7zRUX2iYn/Rkb4lpb0cHDvQEDzRETzRkbzQEDzQkLzOzv////939/yODj2enr4kJD0UVHzPT38xMT92tr5lZX1ZGT+6+v4g4P1bW35m5v7yMj91dX3fn76sLD1XFz6qan//f36trb+5OT0VVX6rKz7vb3yNDT4iIj/9vb0TEz5o6PtTEzlRUXsYWHiNzfyRETsSEiKDgROAAAAFHRSTlMAH+Z5+80n+JHu0AWTv6w6CX3V/BbNCjoAAAHfSURBVHgB7daDsisxGMDxHNtftLZqu+//WDebOu1p08H1f7D8zRoIoferx4djXb4htYvXy7vrI32NXi4U8v6KjzcbFTcKer48bQplS3dYwyhbwhpGRTpGRZpGoNvzjUT6RkU6RkX6RiJNM7dUhE/2NYkVhDU2lCgIa6DxxNr0eathBPoab5re6xjJ1pkaRu2XmP8GiIzKCSrHAW9NiKhiwKnKsFkukRMOZaWCVnWZA7uGxEaZn6UDApBGYjz3ekDFZtrGoig1FRPwZXnoQoXL6p0qwSTjy9pdxdicG41K1ue8g6kwRiWLOPcHQDzO84aoE7N9M2SMWX1eD11hal0zNMQ8tzQ2c0UU75saBXB9zhMmTJthsyc2J7cTuIRSQQ5sxzRZK9oYN4x4VGXCDMtz14IDxiusntiM0SILQ6oG71umMLKcHTCL+rEL+qZe5iWUwta+hUwYz7btoCAHTCdJEgcTgKUxY84NfPwc1AihABhLM+x2N+c6oICXqWa5RJo8bTQ59x04YgJhYMvIMnnvfGtivxmsTdr0RbmNCca0ZjR7FCtGNnCcAd6aEIELyhLFABXb35qg62k59v9d9d/8MnN5fa75QFeXZ5qvN4SezzTPCKEn8et/p9vD49UT+gEdNgrQ89qG8QAAAABJRU5ErkJggg==);
    width: 35px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
}

.file-name {
    font-weight: 500;
}
.file-name-link {
    display: flex;
    align-items: center;
    word-wrap: anywhere;
}

.file-bubble .file-name-link {
    background: #5A5A5A;
    border: 1px solid #707070;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 12px 16px; 
    text-decoration: none;
    font-weight: 500; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); 
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
}

.file-bubble .file-name-link:hover {
    background: #6A6A6A;
    border-color: #808080;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.file-bubble .file-name-link:active {
    transform: translateY(-1px); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.file-icon {
    color: #B0B0B0;
    margin-right: 8px;
    font-size: 18px;
}

.file-bubble .file-name-link:focus {
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.spotlight img
{
    cursor:pointer;
}
.upload-action {
    z-index: 1000;
    position: absolute;
    bottom: 10%;
    right: 0%;
}
@media(max-height: 450px) {
    .upload-action {
        bottom: 15% !important;
    }
}

.mud-table-pagination, .mud-toolbar-gutters.mud-toolbar-gutters.mud-table-pagination-toolbar {
    background: #0d0e19 !important;
    bottom: 0;
    z-index: 1;
}

.scroller-content {
    will-change: transform; /* for safari */
}
.chat-messages .message {
    transform: translateZ(0); /* fixes a bug in Safari iOS where the scroller doesn't update */
}
.messages-container {
    height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column-reverse;
    overflow-anchor: auto !important;
}

.error-text-light {
    color: #f66e79;
    font-weight: 500;
}
.error-text
{
    color:#e40730
}