:root {
    --bs-body-bg: #f0f2eb; /*#f2f5f4;*/ /*#f8f9fa;*/
    --bs-body-color: #212529;
    --bs-primary: #4f46e5;
    --bs-secondary: #4d5257;
    --bs-card-bg: #ffffff;
    --bs-card-border-color: rgba(0, 0, 0, 0.125);
    --bs-border-radius: 7px; /*0.50rem;*/
    --bs-head-bg: #f8f9fa;
    --bs-head-color: #212529;
    --bs-nav-active-bg: #E8E8E8;
    --bs-item-bg: #e9ecef;
    --bs-offcanvas-bg: #e9ecef;
    --bs-border-color: #b6b4b4;
    /**/
    --bs-dashboard-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='dimgrey' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
    --bs-workspaces-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='dimgrey' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] {
    /*--bs-body-bg: #18181b;*/ /*#10151a;*/ /*#212529;*/ /*#121212*/
    --bs-body-bg: #000000;
    --bs-body-color: #eaeaea;
    --bs-primary: #818cf8;
    --bs-secondary: #e4e4e7; /*#adb5bd;*/
    --bs-card-bg: #1e1e1e;
    --bs-card-border-color: #6c757d; /*rgba(255, 255, 255, 0.1);*/
    --bs-border-radius: 7px; /*0.50rem;*/
    --bs-head-bg: #212529; /*#121212*/
    --bs-head-color: #eaeaea;
    --bs-nav-active-bg: #323244; /*#2e2e3a; */ /*#353548; */ /*#6150ff;*/ /*#272424;*/
    --bs-item-bg: #212529;
    --bs-offcanvas-bg: #18181b;
    --bs-border-color: #404345; /*#495057;*/
    /**/
    --bs-dashboard-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='whitesmoke' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
    --bs-workspaces-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='whitesmoke' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/*maui shit*/

.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
        width: 100%;
        z-index: 1;
    }

    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
}


/*Bootstrap overrides*/

.tls {
    margin-top: calc(5% + env(safe-area-inset-top));
}

@media (max-width:540px) {
    .tls {
        margin-top: calc(15% + env(safe-area-inset-top));
    }
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #6150ff !important;
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: #3e9b4d !important;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6150ff;
    --bs-btn-border-color: #6150ff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3c329d;
    --bs-btn-hover-border-color: #5c50d1;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5c50d1;
    --bs-btn-active-border-color: #453ca5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6150ff;
    --bs-btn-disabled-border-color: #6150ff;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #d30014;
    --bs-btn-border-color: #d30014;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #a71422;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a71422;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d30014;
    --bs-btn-disabled-border-color: #d30014;
}


.btn-outline-success {
    --bs-btn-color: #6150ff;
    --bs-btn-border-color: #6150ff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6150ff;
    --bs-btn-hover-border-color: #6150ff;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6150ff;
    --bs-btn-active-border-color: #6150ff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6150ff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6150ff;
    --bs-gradient: none;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #00a51a;
    --bs-btn-border-color: #00a51a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #046d14;
    --bs-btn-hover-border-color: #058519;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #058519;
    --bs-btn-active-border-color: #037f16;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #00a51a;
    --bs-btn-disabled-border-color: #00a51a;
}


.text-success {
    --bs-text-opacity: 1;
    color: #6c5fdf !important;
}

.bg-success {
    --bs-bg-opacity: 1;
    background-color: #818cf8 !important;
}

.no-hover {
    background-color: transparent !important;
}


.btn-no-focus:focus,
.btn-no-focus:active,
.btn-no-focus:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.input-no-focus:focus,
.input-no-focus:active,
.input-no-focus:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--bs-border-color) !important;
}


/*end overrides*/


.btn-dark {
    border-color: #6c757d !important;
}

.new-toggle {
    border: none;
    cursor: pointer;
    color: inherit;
    right: 10px;
   /* width: 95px;*/
    height: 32px;
    top:5px;
    position: absolute;
}

.theme-toggle {
    background-color: #c5c4c4;
    border: none;
    cursor: pointer;
    color: inherit;
    right: 10px;
    width: 32px;
    height:32px;
    position: absolute;
}

    .theme-toggle svg {
        transition: transform 0.3s ease;
        background: none;
    }

    .theme-toggle:hover svg {
        transform: rotate(15deg);
        background: white;
    }

body {
    /* font-family: 'Inter', sans-serif;*/
    /*font-size:large; */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    /*
	padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
	*/
}

@media (max-width: 575.98px) {
    body {
        font-size: 1em;
    }

    #messagesContainer {
        font-weight:400;
    }

}

.wfade { 
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.card {
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-card-bg);
    border: 0px solid var(--bs-card-border-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
    .card:hover {
        transform: translateY(-3px);
    }

html, body {
    font-family: 'system-ui', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a, .btn-link {
    color: #006bb7;
}

/*.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}*/

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem /*#258cfb*/;
}

.no-focus:focus {
    box-shadow: none !important;
    outline: none !important; 
}

.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

.content {
    /*padding-top: 1.1rem;*/
    overflow:hidden;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.empty-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full screen height */
}

.my-card {
    cursor: pointer;
    text-decoration: none;
}

.responsive-button {
    display: none;
    border: none;
    background: none; /* Optional: if you want no background either */
}


.expand-on-focus {
    transition: all 0.3s ease;
    min-height: 40px;
    /*resize: none;*/
}


        .expand-on-focus:focus {
            min-height: 150px; /* expands on focus */
        }


    /* Show only on screens 396 and above */
    @media (minx-width: 396px) {
        .paddingModal {
            padding: 10%;
        }
    }

    /* Show only on screens 390px and below */
    @media (max-width: 390px) {
        .responsive-button {
            display: block;
        }

        .offcanvas-70 {
            width: 70vw; /* 70% of the viewport width */
            max-width: 70vw;
        }

        .paddingModal {
            padding: 0px;
        }
    }

    @media (max-width: 490px) {
        .offcanvas-70 {
            width: 70vw; /* 70% of the viewport width */
            max-width: 70vw;
        }
    }


    .fade-out {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .fade-in {
        animation: fadeIn 1s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }


.fade-empty {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeIn 0.6s ease-out forwards;
}

/*@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
*/

    .spinner-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid rgba(0,0,0,0.2);
        border-top: 4px solid #0078d4;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }


    /*customer dashboard*/

    .navbar-toggler {
        appearance: auto;
        cursor: pointer;
        width: 3.5rem;
        height: 2.5rem;
        color: white;
        float: right;
        /*    position: absolute;*/
        top: 0.5rem;
        right: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background-color: var(--bg-body);
        color: var(--bs-primary);
        /*    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
*/
    }

        .navbar-toggler:checked {
            background-color: rgba(255, 255, 255, 0.5);
        }


    .navbar-brand {
        font-size: 1.1em;
    }

        
	.brand-img {
		width: 5rem !important;
		height: auto;
    }

    @media (max-width: 560px){
        .brand-img {
            width: 10rem !important;
            height: auto;
            padding-left: 50px;
        }
    }



    .bi {
        display: inline-block;
        position: relative;
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.75rem;
        top: -1px;
        background-size: cover;
    }


    .bi-house-door-fill-nav-menu {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
    }

    .bi-plus-square-fill-nav-menu {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
    }

    .bi-list-nested-nav-menu {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    }

    .nav-item {
        font-size: 1.1em;
        padding-bottom: 0.5rem;
    }
        /*
    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }
    */
        .nav-item .nav-link {
            color: var(--bs-secondary);
            background: none;
            border: none;
            border-radius: 7px;
            font-weight: 400;
            height: 2.1rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
            width: 100%;
            font-size: 1em;
        }


.nav-item-msg {
    line-height: 2.1rem !important;
}

        
@media (max-width: 641px) {
            
    .nav-item .nav-link {
        height: 2.8rem;
    }
}

        .nav-item button.active {
            background-color: var(--bs-nav-active-bg) !important;
            color: var(--bs-secondary);
        }

        .nav-item .nav-link:hover {
            background-color: var(--bs-nav-active-bg);
            color: var(--bs-secondary);
        }

    .nav-scrollable {
        display: none;
    }

    .navbar-toggler:checked ~ .nav-scrollable {
        display: block;
    }

    @media (min-width: 641px) {

        .content {
            padding-top: 1.1rem;
        }

        .navbar-toggler {
            /*        display: none;*/
        }

        .nav-scrollable {
            /* Never collapse the sidebar for wide screens */
            display: block;
            /* Allow sidebar to scroll for tall menus */
            height: calc(100vh - 2.5rem);
            overflow-y: auto;
        }

        .configVars {
            background: black;
            /* opacity: 90%*/
        }

        .mcModal {
            max-height: 400px;
        }
    }

    @media (min-width: 641px) and (max-height:620px) { /*nesthub*/
        .mcModal {
            max-height: 350px;
        }
    }


@media (max-width:732px) {
    .custom-scroll::-webkit-scrollbar {
        width: 16px !important; /* A thicker scrollbar for mobile */
    }
    
}

    @media (min-width:732px) {

        .mt-neg {
            margin-top: -60px;
        }
    }


    /*dashboard layout*/

    .page {
        position: relative;
        display: flex;
        flex-direction: column;
    }


#chatInput {
    font-size: 1.3rem;
}


.page-transition {
/*    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;*/
}
/*
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}*/

main {
    flex: 1;
    /*cambios*/
    padding-top: calc(0.0rem + env(safe-area-inset-top));
   /* overflow: hidden;
    display: flex;
    flex-direction: column;*/
}

@media (min-width: 632px) {
    main {
        max-width: 65%;
    }
}

@media (min-width: 732px) {
    main {
        max-width:70%;
    }
}

@media (min-width: 980px) {
    main {
        max-width: 75%;
    }
}

@media (min-width: 1240px) {
    main {
        max-width: 82%;
    }
}

@media (min-width: 1770px) {
    main {
        max-width: 85%;
    }
}

@media (min-width: 1770px) {
    main {
        max-width: 90%;
    }
}


.mt-25-neg {
    margin-top: -25px;
}

.mt-20-neg {
    margin-top: -20px;
}


.top-row {
    background-color: var(--bs-body-bg);
    border-bottom: 0.5px solid var(--bs-card-border-color);
    justify-content: flex-end;
    height: 2.5rem;
    display: flex;
    align-items: center;
    position: sticky;
    /*cambios a partir de aqui*/
    top: 0px;
    z-index: 1020;
    padding-top: env(safe-area-inset-top);
}

        .top-row ::deep a, .top-row ::deep .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
            text-decoration: none;
        }

            .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
                text-decoration: underline;
            }

            .top-row ::deep a:first-child {
                overflow: hidden;
                text-overflow: ellipsis;
            }

    @media (max-width: 640.98px) {

        .sidebar {
            display: none;
        }

        .top-row {
            justify-content: space-between;
            position: sticky;
            z-index: 1000;
            top: 0px;
            padding-top: env(safe-area-inset-top);
           /* opacity: 50%;*/
        }
        /*.gg-title {
            opacity: 50%;
        }*/
        /*#chatter {
            opacity: 50%;
        }*/
        /*.msg-bar {
            opacity: 50%;
        }*/

        .top-row ::deep a, .top-row ::deep .btn-link {
            margin-left: 0;
        }
    }

    @media (min-width: 641px) {
        .page {
            flex-direction: row;
        }

        .sidebar {
            width: 250px;
            height: 100vh;
            position: sticky;
            top: 0;
        }

        .top-row {
            position: sticky;
            top: 0;
            z-index: 1;
        }

            .top-row.auth ::deep a:first-child {
                flex: 1;
                text-align: right;
                width: 0;
            }

        .top-row, article {
            padding-left: 2rem !important;
            padding-right: 1.5rem !important;
        }

        .noPubApp {
            height: 170px;
        }
    }

    @media (max-width: 476px) {
        .content {
            padding-top: 0.1rem;
        }
    }


    @media (max-width: 576px) {

        .vh-90 {
            height: 93vh !important;
        }


        .dropdown-menu .dropdown-item {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            font-size: 1.1em;
        }

        .dropdown-menu {
            min-width: 12rem; /* Optional: widen the menu */
        }

            .dropdown-menu hr.dropdown-divider {
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
            }
    }

    #blazor-error-ui {
        background: #10151a;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

        #blazor-error-ui .dismiss {
            cursor: pointer;
            position: absolute;
            right: 0.75rem;
            top: 0.5rem;
        }


    #components-reconnect-modal {
        display: flex !important;
        opacity: 1 !important;
        background-color: #10151a !important;
    }


        #components-reconnect-modal::before {
            content: '';
            width: 300px;
            height: 65px;
            background: transparent; /*#1e1e1e;*/
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
        }

        #components-reconnect-modal h5 {
            margin-top: 50px !important;
            padding: .75rem 1.25rem;
            width: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1050;
            color: #d3d3d3;
            background-color: #1e1e1e;
            box-shadow: 0px 10px 10px 0px hsl(0deg 0% 0% / 20%);
            display: none;
        }

        #components-reconnect-modal div {
            /*            border-color: #6c757d #186b46 !important;*/
            border-color: #6f94b7 #7fa7ce #95a4b2 #6f8eac !important;
            margin: auto;
            z-index: 1050;
        }

        #components-reconnect-modal button {
            margin: 5px auto;
            display: block;
            z-index: 99999;
            border: none;
            border-radius: 8px;
            top: 60%;
            left: 48%;
            position: absolute;
            background-color: #6150ff;
            color: white;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        #components-reconnect-modal h5 a {
            color: #6150ff !important;
        }


    @media (min-width: 1200px) {
        .mt-neg {
            margin-top: -25px;
        }
    }

    @media (min-width: 2500px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-width: 2400px !important;
        }
    }



    .vh-90 {
        height: 91vh !important;
    }


.vh-75 {
    height: 76vh !important;
}


    /*galazy s8*/
    @media (min-width: 360px) and (min-height: 740px) {
        .vh-90 {
            height: 92vh !important;
        }
    }


    /*galazy tab s4*/
    @media (min-width: 712px) and (min-height: 1138px) {
        .vh-90 {
            height: 93vh !important;
        }
    }



    /*apps-bar*/

    .apps-bar {
        max-width: 450px;
    }

    @media (min-width: 660px) {
        .apps-bar {
            max-width: 350px;
        }
    }

    @media (min-width: 720px) {
        .apps-bar {
            max-width: 460px;
        }
    }

    @media (min-width: 820px) {
        .apps-bar {
            max-width: 580px;
        }
    }

    /*asus zenbook*/
    @media (min-width: 853px) {
        .apps-bar {
            max-width: 620px;
        }
    }


    @media (min-width: 1024px) {
        .apps-bar {
            max-width: 810px;
        }
    }

    @media (min-width: 1024px) and (min-height:660px) {
        .apps-bar {
            max-width: 720px;
        }
    }

    /*ipad mini*/
    @media (min-width: 1024px) and (min-height:768px) {
        .apps-bar {
            max-width: 720px;
        }
    }

    /*ipad pro - vertical*/
    @media (min-width: 1024px) and (min-height:1366px) {
        .apps-bar {
            max-width: 810px;
        }
    }


    /*ipad air*/
    @media (min-width: 1180px) {
        .apps-bar {
            max-width: 840px;
        }
    }


    @media (min-width: 1260px) {
        .apps-bar {
            max-width: 1000px;
        }
    }

    @media (min-width: 2160px) {
        .apps-bar {
            max-width: none;
        }
    }

    @media (min-width:632px) {

        .scrollable-body {
            max-height: 60vh; /* Limit to 60% of viewport height */
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 10px; /* avoid scrollbar overlapping content */
        }
    }


    /* --- Navigation Bar --- */
    .main-nav.navbar {
        /*background-color: rgba(var(--bs-dark-rgb), 0.85) !important; */ /* Slightly transparent dark */
        backdrop-filter: blur(10px); /* Blur effect for modern feel */
        /*border-bottom: 1px solid var(--bs-border-color-translucent);*/
        padding-top: 0rem;
        padding-bottom: 0.75rem;
    }

    .navbar-brand span {
        font-weight: 700;
        /* font-size: 1.3rem;*/
        letter-spacing: -0.05em;
    }

    .navbar .nav-link {
        color: var(--bs-body-secondary);
        font-weight: 500;
        padding-left: 1rem;
        padding-right: 1rem;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: var(--bs-body-emphasis);
        }

    .navbar .dropdown-menu {
        /* Ensure dropdown matches dark theme */
        --bs-dropdown-link-active-bg: var(--bs-primary);
    }



    .pt-menu {
        padding-top: 3.5rem !important;
    }


    /*Buttons*/
    .rounded-full {
        border-radius: 9999px;
    }

    .themebtn {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none;
        border: none;
        z-index: 9999;
    }

    .themebtnLight {
        color: var(--bs-secondary);
        background-color: var(--bs-body-bg);
    }


        .themebtnLight.active {
            background-color: #fbbf24;
            color: black;
        }

        .themebtnLight:hover {
            background-color: #fbbf24;
            color: black;
        }

        .themebtnLight.active:hover {
            color: black !important;
            background-color: #fbbf24;
            cursor: default;
        }


    .themebtnDark {
        color: var(--bs-secondary);
        background-color: var(--bs-body-bg);
    }


        .themebtnDark.active {
            color: white !important;
            background-color: #818cf8;
        }

        .themebtnDark:hover {
            color: white !important;
            background-color: #4d228d;
        }

        .themebtnDark.active:hover {
            color: white !important;
            background-color: #818cf8;
            cursor: default;
        }


    .themebtnSystem {
        color: var(--bs-secondary);
        background-color: var(--bs-body-bg);
    }


        .themebtnSystem.active {
            color: white !important;
            background-color: #818cf8;
        }

        .themebtnSystem:hover {
            color: white !important;
            background-color: #4d228d;
        }

        .themebtnSystem.active:hover {
            color: white !important;
            background-color: #818cf8;
            cursor: default;
        }

    .elemlst {
        /*cursor:pointer;*/
    }

        .elemlst:hover {
            /* background-color:blue;*/
            background-color: var(--bs-item-bg);
            border-color: var(--bs-card-border-color);
            transition: color 0.3s, background-color 0.3s;
        }


    .min-vh-80 {
        min-height: 80vh !important;
    }

    /*svg logo*/
    .logo {
        height: 30px;
    }

    .logo-dark,
    [data-bs-theme="light"] .logo-dark {
        display: none;
    }

    [data-bs-theme="dark"] .logo-light {
        display: none;
    }

    [data-bs-theme="dark"] .logo-dark {
        display: inline;
    }


    .logo-text {
        width: 110px;
    }

    .logo-text-dark,
    [data-bs-theme="light"] .logo-text-dark {
        display: none;
    }

    [data-bs-theme="dark"] .logo-text-light {
        display: none;
    }

    [data-bs-theme="dark"] .logo-text-dark {
        display: inline;
    }


    .list-group-item-action:hover {
        background-color: var(--bs-item-bg);
        color: var(--bs-primary);
        cursor: pointer;
    }


    .dropdown-item:hover {
        background-color: var(--bs-item-bg);
        color: var(--bs-primary);
        cursor: pointer;
    }


    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /*.scroll-arrow {
    z-index: 5;
}*/

    .arrow-btn {
        background: var(--bs-item-bg);
        color: var(--bs-secondary) !important;
        cursor: pointer;
    }


    .scroll-arrow {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

        .scroll-arrow.show {
            opacity: 1;
            visibility: visible;
        }

        .scroll-arrow.hide {
            opacity: 0;
            visibility: hidden;
        }

    .nav-tabs .nav-link {
        white-space: nowrap; /* keep text on one line */
        text-overflow: ellipsis; /* optional: "..." if too long */
        overflow: hidden; /* required for ellipsis */
        /* max-width: 150px; */ /* optional: limit max width */
    }

    .nav-tabs .nav-item {
        flex-shrink: 0; /* don’t let items shrink */
    }


    /*.my-modal-content {
    border: 1px !important;
    border-radius: 1px !important;
}
*/

    /*

.custom-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none; 
}

    .custom-scroll::-webkit-scrollbar {
        display: none; 
    }

*/


    .nav-tabs {
        border-bottom: none;
    }

    .card-header {
        border-radius: 15px !important;
        margin: 5px;
    }


    .canvas {
        background-color: var(--bs-offcanvas-bg) !important;
        opacity: var(--bs-bg-opacity) !important;
    }

    .cnv {
        background-color: var(--bs-offcanvas-bg) !important;
        opacity: var(--bs-bg-opacity) !important;
    }

    .list-unstyled {
        max-height: 90%
    }

    /*scrollable tabs*/
    .nav-tabs-chat {
        flex-wrap: nowrap;
    }

        .nav-tabs-chat .nav-link {
            white-space: nowrap;
        }

    .scrollable-dropdown {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }


.chatResponse {
    max-width: 80%;
}

/*.code-container {
    max-width: 85%;
}*/

@media (max-width:632px) {
    .chatResponse {
        min-width: 100%;
    }

    .code-container {
        max-width: 95%;
    }

}

.copy-btn:hover {
    background-color: rgba(255,255,255,0.1);
}


    .chatbox {
        height: 77svh;
        overflow: hidden;
    }

    @media (max-height:540px) {
        .chatbox {
            height: 64svh;
            overflow: hidden;
        }
    }

    @media (max-height:600px) and (min-width:1024px) {
        .chatbox {
            height: 67svh;
            overflow: hidden;
        }
    }


    @media (min-height:667px) {
        .chatbox {
            height: 75svh;
            overflow: hidden;
        }
    }

    @media (min-height:700px) {
        .chatbox {
            height: 77svh;
            overflow: hidden;
        }
    }

    @media (min-height:732px) {
        .chatbox {
            height: 79svh;
            overflow: hidden;
        }
    }

    @media (min-height:740px) {
        .chatbox {
            height: 76svh;
            overflow: hidden;
        }
    }

    @media (min-height:768px) {
        .chatbox {
            height: 74svh;
            overflow: hidden;
        }
    }


    @media (min-height:812px) {
        .chatbox {
            height: 78svh;
            overflow: hidden;
        }
    }

    @media (min-height:862px) {
        .chatbox {
            height: 80svh;
            overflow: hidden;
        }
    }



    @media (min-height:880px) {
        .chatbox {
            height: 76svh;
            overflow: hidden;
        }
    }

    @media (min-height:882px) and (max-width:344px) {
        .chatbox {
            height: 79svh;
            overflow: hidden;
        }
    }

    @media (min-height:896px) {
        .chatbox {
            height: 80svh;
            overflow: hidden;
        }
    }

    @media (min-height:932px) {
        .chatbox {
            height: 81svh;
            overflow: hidden;
        }
    }

    @media (min-height:854px) and (min-width:480px) {
        .chatbox {
            height: 80svh;
            overflow: hidden;
        }
    }

    @media (min-height:854px) and (min-width:820px) {
        .chatbox {
            height: 78svh;
            overflow: hidden;
        }
    }

    @media (min-height:1020px) and (min-width:1360px) {
        .chatbox {
            height: 83svh;
            overflow: hidden;
        }
    }

    @media (min-height:1180px) and (min-width:480px) {
        .chatbox {
            height: 87svh;
            overflow: hidden;
        }
    }




@media (max-height:533px) and (min-width:320px) {
    .chatbox {
        height: 67svh;
        overflow: hidden;
    }
}

    @media (min-height:640px) {
        .chatbox {
           /* height: 73svh;*/
            overflow: hidden;
        }
    }

    @media (min-height:640px) and (min-width:360px) {
        .chatbox {
          /*  height: 73svh;*/
            overflow: hidden;
        }
    }


    @media (min-height:732px) {
        .chatbox {
            height: 76svh;
            overflow: hidden;
        }
    }

    @media (min-height:740px) {
        .chatbox {
            height: 74svh;
            overflow: hidden;
            max-width: 95svw;
        }
    }


    @media (min-height:960px) {
        .chatbox {
            height: 80svh;
            overflow: hidden;
        }
    }

    @media (min-height:1138px) and (min-width:712px) { /*galaxy table s4*/
        .chatbox {
            height: 80svh;
            overflow: hidden;
        }
    }

    @media (min-height:1280px) and (min-width:800px) { /*kindle fire hdx*/
        .chatbox {
            height: 82svh;
            overflow: hidden;
        }
    }



    @media (orientation: landscape) {


        /*galazy tab s4 horizontal*/
        @media (min-width: 1138px) and (min-height: 712px) {
            .vh-90 {
                height: 89vh !important;
            }
        }

        /*ipad pro - horizontal*/
        @media (min-width: 1360px) {
            .apps-bar {
                max-width: 960px;
            }
        }

        @media (min-width: 1440px) {
            .apps-bar {
                max-width: 1400px;
            }
        }


        @media (max-height:360px) and (min-width:732px) {
            .chatbox {
                height: 45svh;
                overflow: hidden;
            }
        }


        @media (max-height:533px) and (min-width:320px) {
            .chatbox {
                height: 45svh;
                overflow: hidden;
            }
        }

        @media (max-height:430px) and (min-width:900px) {
            .chatbox {
                height: 54svh;
                overflow: hidden;
            }
        }

        @media (min-height:410px) and (max-height:420px) {
            .chatbox {
                height: 50svh;
                overflow: hidden;
            }

            @media (min-height:480px) /*and (min-width:732px)*/ {
                .chatbox {
                    height: 58svh;
                    overflow: hidden;
                }
            }

            @media (max-height:412px) and (min-width:732px) {
                .chatbox {
                    height: 52svh;
                    overflow: hidden;
                }
            }

            @media (max-height:600px) and (min-width:960px) {
                .chatbox {
                    height: 67svh;
                    overflow: hidden;
                }
            }
        }




    }

.fa, .fas, .far, .fal, .fab {
    color: inherit; /* Use text color, not brand color */
    filter: none !important;
}


.session-item .dots-menu {
    display: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.session-item:hover .dots-menu {
    display: block;
}


/*CHAT*/

/* === Chat Tabs === */

.chat-tab {
    padding: 0.25rem 0.5rem;
}

.chat-tab-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: inherit;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    gap: 0.5rem;
}

    .chat-tab-link:hover {
        background-color: var(--bs-light);
    }

    .chat-tab-link.active {
        background-color: var(--bs-primary);
        color: #fff !important;
    }

/* Left side: title + subtitle stacked vertically */
.chat-tab-content {
    display: flex !important;
    flex-direction: column !important; /* ✅ forces vertical layout */
    align-items: flex-start;
    line-height: 1.2;
}

.chat-tab-title {
    font-weight: 600;
    font-size: 0.8em;
}

.chat-tab-subtitle {
    font-size: 0.85em;
    font-style: italic;
    color: var(--bs-secondary);
}

/* Right side: buttons */
.chat-tab-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chat-tab-btn {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.9em;
    opacity: 0.7;
    cursor: pointer;
}

    .chat-tab-btn:hover {
        opacity: 1;
    }

/*SharePopup*/

@media (min-width:600px){
    .chatShareHeight {
        max-height: 730px;
    }
    .shareHeight {
        max-height: 450px;
    }
}

/*@media (min-width:760px) {
    .chatShareHeight {
        max-height: 730px;
        width: 100%;
        top: -20px;
    }

    .shareHeight {
        max-height: 450px;
    }
}*/

@media (min-width:1140px) {
    .chatShareHeight {
        max-height: 730px;
        top: 5%;
    }

    .shareHeight {
        max-height: 450px;
    }
}

@media (min-width:1400px) {
    .chatShareHeight {
        max-height: 730px;
        top: 0%;
    }

    .shareHeight {
        max-height: 450px;
    }
}

@media (min-width:2000px) {
    .chatShareHeight {
        max-height: 730px;
        top: 15%;
    }

    .shareHeight {
        max-height: 450px;
    }
}


.share-icon {
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

    .share-icon:hover {
        transform: scale(1.15);
        color: #000 !important;
    }


    /*Share page login*/

.shareLogin-form {
    width: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .shareLogin-form img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .shareLogin-form .form-body {
        padding: 1rem;
        text-align: center;
    }

    .shareLogin-form h5 {
        font-weight: bold;
    }

.share_dropdown-menu {
    padding: 0; /* remove extra Bootstrap padding */
    border-radius: 12px;
}

/*BOTONES DE OAUTH*/

.btn-google {
   /* background-color: #fff;*/
    border: 1px solid #ddd;
}

    .btn-google i {
        color: #db4437;
    }

.btn-microsoft {
   /* background-color: #f3f3f3;*/
    border: 1px solid #ddd;
}

    .btn-microsoft i {
        color: #0078D4;
    }

.btn-okta {
    background-color: #007dc1;
    color: white;
}

    .btn-okta i {
        color: white;
    }

.license-agreement-container {
    min-height: 100vh;
    width: 100%;
}

.license-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Default (desktop/tablet): border is visible */
.no-border-mobile {
    border: 1px solid #ccc; /* or whatever your default is */
}

/* Mobile only */
@media (max-width: 767px) {
    .no-border-mobile {
        border: none !important;
    }
}


.finder-item {
    background: var(--bs-body-bg) !important;
    border-radius: 16px;
    padding: 16px 10px 12px 10px;
    position: relative;
    transition: 0.2s ease;
    text-align: center;
}

    .finder-item:hover {
    
        /*transform: translateY(-2px);*/
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

/* --- Three-dots menu --- */
.finder-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* --- Thumbnail container --- */
.finder-thumb-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Image thumbnail --- */
.finder-thumb {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: 0.2s ease;
}

    .finder-thumb:hover {
        transform: scale(1.03);
    }

/* --- File icon --- */
.finder-icon {
    font-size: 70px;
    color: #6c757d;
}

/* Filename */
.finder-name {
    font-size: 0.9rem;
    font-weight: 500;
    max-width: 100%;
}



/*File browser upload x mobile*/

body.no-scroll {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.upload-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9999;
}

.offcanvas-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45vh;
    background: var(--bs-body-bg);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    padding: 16px;
    z-index: 9999;
    transition: transform .25s ease;
    
    transform: translateY(0);
}


.bottom-sheet-backdrop.visible {
    display: block;
}

/*.drag-handle {
    width: 40px;
    height: 5px;
    background: #ccc;
    border-radius: 5px;
    margin: 0 auto 12px;
}*/

.drag-handle {
    width: 44px;
    height: 6px;
    background: #bbb;
    border-radius: 6px;
    margin: 0 auto 14px;
    touch-action: none;
}

.upload-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
}

.upload-btn {
    width: 90px;
    height: 90px;
    background: var(--bs-item-bg);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    cursor: pointer;
}

    .upload-btn span {
        font-size: 14px;
        margin-top: 6px;
    }

.preview-image {
    max-height: 120px;
    max-width:100%;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}




/*bottom sheet component*/

/*.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bs-card-bg);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 1050;
    transition: transform 0.3s ease-out;
    max-height: 90vh;
    display: flex;
    flex-direction: column;*/
    /* Hidden by default */
    /*transform: translateY(100%);
}*/

    .bottom-sheet.open {
        transform: translateY(0);
    }

/*.bottom-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    display: none;
}*/


.drag-handle-container {
    padding: 15px;
    cursor: grab;
    display: flex;
    justify-content: center;
}

/*.drag-handle {
    width: 40px;
    height: 5px;
    background: #ccc;
    border-radius: 10px;
}*/

/*datalist fix (llms)*/

/*ends datalist fix (llms)*/



.icn-usrnm {
    font-size: 1rem;
    margin-top: 5px;
    margin-right: 0.5em !important;
}

.lbl-usrnm {
    margin-right: .2rem !important;
    font-size: 1rem;
    font-weight: 500 !important;
}