@import url('clash-grotesk.css');
@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");

:root {
    /* Font variables */
    --app-font-family: "ClashGrotesk-Regular", "ClashGrotesk-Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;

    /* Override Bootstrap font variables */
    --bs-font-sans-serif: "ClashGrotesk-Regular", "ClashGrotesk-Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;


    /* Error and success colors: */
    --success: rgba(92, 184, 92, 1);
    --warning: rgba(240, 173, 78, 1);
    --error: rgba(217, 83, 79, 1);
    
    /* Main button colors */
    --primary-btn-color: #5d4aa0;
    --primary-btn-color-light: #6e5ab2; 
    --secondary-btn-color: #5f4ca3;
    --secondary-btn-color-light: #7058b5;
    --pulse-color: var(--primary-btn-color);
    --pulse-color-light: var(--primary-btn-color-light);
    --active-white: rgba(250, 250, 255, 1);
    --inactive-white: rgba(240, 240, 250, 0.92);
    /* --primary-orange: rgba(230, 89, 79, 1); */
    /* --slider-color-light: rgba(179, 83, 217, 1); */
    
    /* --tag-color: #6247d5; */
    --tag-color: var(--secondary-btn-color);
    
    /* Main body and text colors */
    --body-text: rgb(233, 233, 233);
    --body-background: #1e1e1e;
    --chat-background-color: #121212; /* The chat background where bot/user messages appear */
    --message-box-color: #2a2a2a; /* the color of the dialgoue box where user types a message */
    --accent-grey: #333333;
}

html,
body,
button,
input,
textarea,
.k-button {
    font-family: var(--app-font-family);
}

/* Bold text */
h1,
h2,
h3,
.k-card-title {
    font-family: "ClashGrotesk-Bold", "ClashGrotesk-Variable", sans-serif;
    font-weight: 700;
}

/* Medium weight */
h4,
h5,
h6,
.button-42,
.editor-main-btn {
    font-family: "ClashGrotesk-Medium", "ClashGrotesk-Variable", sans-serif;
    font-weight: 500;
}

/* Regular text */
body,
p,
.k-chat-bubble {
    font-family: "ClashGrotesk-Regular", "ClashGrotesk-Variable", sans-serif;
    font-weight: 400;
}

.heading-large {
    font-family: "ClashGrotesk-Variable", sans-serif;
    font-variation-settings: 'wght' 700;
}

.text-light {
    font-family: "ClashGrotesk-Variable", sans-serif;
    font-variation-settings: 'wght' 300;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: var(--body-text);
}

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

.button-42 { background-color: initial; }

    .button-42 {
        background-color: initial;
        background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color));
        border-radius: 6px;
        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        outline: 0;
        overflow: hidden;
        padding: 0 20px;
        pointer-events: auto;
        position: relative;
        text-align: center;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        vertical-align: top;
        white-space: nowrap;
        z-index: 9;
        border: 0;
        transition: box-shadow .2s;
    }

    .button-42:hover {
        box-shadow: rgba(253, 0, 215, 0.5) 0 3px 8px;
    }

.nav-link {
    color: var(--body-text);
}

.nav-link:hover {
    /* background-color: #434343; */
    color: var(--error);
}

/*.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;
}*/
.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--error);
}

.validation-message {
    color: var(--error);
}

.k-button-solid-base{
    background-color: var(--message-box-color) !important;
    border-color: rgba(255, 255, 255, 0) !important;
}

.k-toolbar-group{
    background-color: var(--message-box-color) !important;
}

#blazor-error-ui {
    background: lightyellow;
    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;
}

.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.";
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.page {
    background-color: var(--body-background);
    height: 100vh;
    overflow-x: hidden;
}

.sidebar {
    background-image: unset !important;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 100px;
    width: 375px;
    height: 100vh;
    overflow: hidden;
}

.sidebar-footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem 0rem 0.7rem 0rem;
    width: 100%;
    flex-shrink: 0;
    min-height: 80px;
}

.sidebar-content {
    flex: 1;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none; /* Hide scroll in Edge */
}

.sidebar-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.sidebar-footer img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
}

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

.top-row {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

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

.oi {
    color: var(--body-text);
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
    transition: color 0.2s ease, transform 0.2s ease;
}
  
.logout-link:hover .oi {
    color: var(--error);
    transform: translateX(-3px);
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    overflow: auto !important;
    height: unset;
}

.nav-item.px-3 {
    width: 91%;
    max-width: 600px;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.nav-item.expanded {
    height: calc(100vh - 15em) !important;
}

.nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-item ::deep a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.nav-item ::deep a.active {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

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

main {
    flex: 1;
    position: relative; /* Ensures items are poisitoned relative to main content, not viewport */
}

.flex-column {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;  
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.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;
}

.avatar-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.avatar-img {
    width: 75px !important;
    height: 75px !important;
    min-width: 75px !important;
    min-height: 75px !important;
    border-color: var(--primary-btn-color);
    color: white;
    background-color: var(--primary-btn-color);
    font-weight: 500;
    border-radius: 50% !important;
    border-width: 0;
    border-style: solid;
    box-sizing: border-box;
    vertical-align: middle;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.k-avatar-solid-primary {
    border-color: var(--primary-btn-color) !important;
    background-image: radial-gradient(circle at center, var(--secondary-btn-color), var(--primary-btn-color)) !important;
}

.avatar-username {
    margin-top: 1em;
    color: white;
    position: relative;
}

.tag {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    top: -8px;
    background-color: var(--tag-color);
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: bold;
    vertical-align: top;
}

.category-tag {
    position: absolute;
    /* top: 8px; */
    right: 0;
    transform: translateY(-35%);
    background-color: var(--tag-color);
    color: white;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: bold;
    z-index: 2;
    line-height: 1.2;
}

.title-with-tag {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding-right: 5px;
    padding-top: 8px;
}

.title-with-tag .k-card-title {
    width: 100%;
    text-align: center;
    margin-right: 0;
}

.k-panelbar>.k-item>.k-link,
.k-panelbar>.k-panelbar-header>.k-link,
.k-panelbar>.k-item>.k-link.k-selected,
.k-panelbar>.k-panelbar-header>.k-link.k-selected {
    color: white !important;
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color));
}

.k-chat .k-message {
    margin: 10px 20px 10px 20px;
}

.k-chat .k-message-time {
    opacity: 999 !important;
}

.k-chat .k-message-group.k-alt .k-first .k-chat-bubble {
    margin-inline-end: 15px !important;
}

.k-chat .custom-task-action {
    border-color: var(--primary-btn-color);
    color: var(--primary-btn-color);
    background-color: transparent;
    border-radius: 100px;
    margin-inline-end: 8px;
    margin-block-end: 4px;
    padding-block: 8px;
    padding-inline: 12px;
    border-width: 1px;
    border-style: solid;
    line-height: 18px;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    flex: 0 0 auto;
    transition-property: color, background-color, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    outline: none;
}

.custom-task-actions {
    display: block;
    max-width: 100%;
    margin-top: 1em;
}

html .k-chat .k-card-deck .k-card {
    flex-basis: 230px;
    /* justify-content: center; */
}

.k-card-deck {
    flex-flow: column nowrap !important;
}

.k-message .k-card-deck {
    gap: 5px !important;
}

.category-card .k-card {
    height: inherit;
}

.k-card>img.k-card-media {
    height: 115px;
    display: block;
}

.login-main-view-block {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
}

.login-main-view-block h3 {
    flex: 100% !important;
    color: white;
}

.login-main-view-block .alert {
    flex: 100%;
}

.auth-section {
    max-width: 450px !important;
    min-width: 300px;
    width: calc(100vw - 2 * 12em);
}

.auth-section .k-form-buttons {
    justify-content: center;
}

.auth-section .k-input-md .k-input-inner {
    background-color: white !important;
    width: 100%;
    margin: 0.2em;
    border-radius: 5px;
    font-size: 0.9em;
    padding: 0.1em 0.5em;
    color: var(--body-background);
}

.k-form-submit {
    border-radius: 7px;
    margin-top: 0.5em;
    padding: 0.3em;
}

.register-link {
    color: white;
}

.qrcode-block {
    margin: 2em;
    display: flex;
    flex-direction: column;
}

.k-qrcode {
    margin: 0 auto !important;
}

.qr-scan {
    color: white;
    width: 70px;
    background: var(--primary-btn-color);
    margin: 10px auto;
}

.loading-app-container {
    height: 100vh;
    width: 100vh;
    color: white;
}

.bg {
    background-color: var(--body-background);
    height: 100%;
    min-height: 100vh;
}

#task-categories {
    max-width: 100%;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 10px;
}

#task-categories .card-main-block {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Center the cards within the card deck */
#task-categories .k-card-deck {
    justify-content: center !important;
    width: 100%;
}

.k-chat .k-card-deck {
    /*overflow-x: unset !important;
    scroll-behavior: unset !important;*/
    justify-content: center !important;
}

.k-panelbar > .k-item > .k-link, .k-panelbar > .k-panelbar-header > .k-link {
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color)) !important;
    padding-block: 11px !important;
    gap: 6px !important;
}

.k-panelbar > .k-item > .k-link, .k-panelbar > .k-panelbar-header > .k-link:hover{
    box-shadow: 0 0 3px 3px rgba(120, 105, 231, 0.4);
    transition: box-shadow 0.3s ease-in-out;
}

.k-panelbar {
    border-style: none !important;
}

.content,
.px-4 {
    padding: 0 !important;
}

#task-categories a {
    color: var(--body-text);
    max-width: 350px;
    text-decoration: none;
    flex-grow: 1;
    flex-basis: 0;
    /* margin: 10px 5px; Increase margin between cards */
}

.custom-navigation-menu {
    width: 100%;
    padding: 0;
}

.drawer-container {
    display: none;
}

#prompt-sending-block {
    position: absolute;
    bottom: 2px;
    padding-bottom: 0;
    margin-bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    border: transparent;
    border-radius: 90%; /* outer chat padding is overriding this */
}

/* #prompt-sending-block .k-toolbar-box {
    background-color: red !important;
} */

/* Target the message box */
#prompt-sending-block .k-message-box {
    background-color: var(--message-box-color) !important; /* background for toolbar items */
    /* border-color: #3d3d3d !important; background for toolbar border */
}


#drag-drop-area {
    height: calc(100vh - 12em);
}

.queue {
    text-align: left;
    width: 800px;
}

#ai-task-types .k-card {
    margin: 0px;
}

@media (max-width: 3440px) {
    /* Styles for ultrawide monitors */
    .k-panelbar-item-text {
      font-size: 20px;
    }
}

@media (max-width: 1680px) {

    /* #task-categories a {
        flex-basis: calc(30% - 10px);
    }*/
    .output-image-block .image-settings.is-move-needed_True .k-radio-list-item {
        width: 80px;
    }

    .chat-output-image {
        width: 430px;
        height: 430px;
    }

    .k-panelbar-item-text {
        font-size: 18px;
    }
}

.card-img-block {
    height: 120px;
    width: 50%;
    margin: 0;
    flex-shrink: 0;
    background: transparent; /* Changed from white to transparent */
    display: flex; /* Add this */
    align-items: center; /* Add this */
    justify-content: center; /* Add this */
    overflow: hidden; /* Add this to contain the image */
}

.k-chat .k-card-deck .k-card {
    width: unset !important;
}

.card-img {
    /*max-width: 200px;*/
    width: 100%;
    height: auto;
    object-fit: cover;
    object-fit: contain;
    max-height: 100%;
    display: block;
    border-radius: 3px;
}

.k-card-media {
    background-color: #5E5E5E;
    flex: 1 !important;
    height: 100% !important;
    padding: 5px;
    display: flex; /* Add this */
    align-items: center; /* Add this */
    justify-content: center; /* Add this */
}

.k-card-body {
    flex: 20% !important;
    text-align: center !important;
}

.k-card-title {
    /* flex: 85%; */
    font-weight: bold;
    font-size: 1.3rem !important;
    margin: 0 0 6px;
}

.k-card-subtitle {
    font-size: 1.3em !important;
    width: 50%;
    padding-left: 10px;
    text-align: left;
    color: #d7d7d7;
}

.k-card {
    max-height: 380px !important;
    max-width: 400px !important;
    font-size: 0.55rem;
}

.k-card-body {
    padding-block: 5px;
    padding-inline: 10px;
    margin-bottom: 0px;
}

.k-card.telerik-blazor.custom-card.k-card-vertical {
    display: flex;
    flex-direction: column !important;
    align-items: stretch;
    height: auto !important;
    overflow: hidden;
}

.k-card.telerik-blazor.custom-card.k-card-vertical:hover{
    box-shadow: 0 0 3px 3px rgba(120, 105, 231, 0.5);
    transition: box-shadow 0.3s ease-in-out;
}

.category-card.card-with-overlay .k-card.telerik-blazor.custom-card.k-card-vertical{
    box-shadow: none !important;
}

.k-card.telerik-blazor.custom-card.k-card-vertical .k-card-title {
    width: 100%;
    font-weight: bold;
    font-size: 1.3rem !important;
    margin: 10px 0;
    text-align: center;
    order: -1; /* Move to the top */
}

.k-card.telerik-blazor.custom-card.k-card-vertical .k-card-body {
    display: flex;
    flex-direction: column;
    padding-block: 10px;
    padding-inline: 10px;
    order: 0;
}

.k-card.telerik-blazor.custom-card.k-card-vertical .image-subtitle-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.custom-card {
    height: 100%;
}

.breadcrumb-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
}

.logout-link {
    margin-left: auto;
    white-space: nowrap;
    margin-top: 20px;
    margin-bottom: 10px;
    position: relative;
    right: 0;
}

.logout-link .nav-link {
    flex: 0 0 auto;
}

.breadcrumb-menu-block {
    max-width: 2460px;
    /*margin: right auto;*/
    flex: 70%;
}

.breadcrumb-menu .k-breadcrumb { /* Breadcrumb background color */
    line-height: 1.2em;
    font-size: 0.9em;
    font-weight: bolder;
    padding-top: 10px;
    background-color: #1e1e1e;
    display: flex;
    align-items: center;
    min-height: 45px; /* Set a consistent height */
}

.k-breadcrumb-link,
.k-breadcrumb-root-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.k-breadcrumb-delimiter,
.k-breadcrumb-delimiter-icon {
    font-size: 1em;
    font-weight: bolder;
}

.k-breadcrumb-item,
.k-breadcrumb-link,
.k-breadcrumb-link:hover,
.k-breadcrumb-root-link:hover {
    color: var(--body-text) !important;
    background-color: transparent !important;
    align-items: center;
}

.k-breadcrumb-last-item .k-breadcrumb-link,
.k-breadcrumb-last-item .k-breadcrumb-link:hover {
    color: var(--body-text) !important;
}

.k-breadcrumb-item-text:hover {
    color: var(--secondary-btn-color-light) !important;
}

.k-panelbar .k-panelbar-group>.k-panelbar-item {
    font-size: 0.9em;
}

.k-panelbar-item-icon.k-svg-icon {
    width: 20px;
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.select-options .is-type-selected_False .k-card-body,
#summary-size-select .k-card-body {
    background-color: var(--primary-btn-color);
}

.select-options .is-type-selected_True .k-card-body {
    background-color: var(--primary-btn-color-light);
    color: var(--body-text);
}

.task-types .is-type-selected_True .k-card-body {
    background-color: var(--primary-btn-color);
    color: var(--body-text);
}

.task-types .is-type-selected_True .k-card-subtitle {
    color: var(--bs-gray-400);
}

#image-style-select .custom-card,
#image-angle-select .custom-card,
#image-position-select .custom-card {
    width: 110px !important;
}

#image-style-select .custom-card .k-card-body,
#image-angle-select .custom-card .k-card-body,
#image-position-select .custom-card .k-card-body,
#summary-size-select .custom-card .k-card-body {
    padding-block: 12px;
    padding-inline: 5px;
}

/*.task-types .is-type-selected_True {
    pointer-events: none;
}*/

.category-card {
    text-decoration: none !important;
}

.show-categories-link {
    padding: 0;
    border-width: 0;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4285714286;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: calc(100% - 32px); /* Match .nav-item.px-3 max-width */
    margin: 0 auto; /* Center it like .custom-navigation-menu does */
    border-radius: 3px;
    margin-bottom: 10px;
}

.show-categories-link a {
    display: block; /* Make it expand like k-link */
    text-decoration: none !important;
    color: white !important; /* Force white text color */
    /* background-color: #2f2f2f; Match .k-link background-color */
    background-image: linear-gradient(-180deg, var(--secondary-btn-color-light), var(--primary-btn-color)); /* Match the exact gradient direction */
    padding: 10px 16px !important; /* Match k-link padding */
    border-radius: 0 !important; /* Remove the border-radius to match k-link */
    width: 90%;
}

.show-categories-link a:hover, 
.general-summary-btn a:hover, 
.modify-editor-link a:hover, 
.editor-main-btn:hover {
    box-shadow: 0 0 3px 3px rgba(120, 105, 231, 0.4);
    transition: box-shadow 0.3s ease-in-out;
}

.card-with-overlay {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.card-with-overlay::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 10%;
    background-image: url('/images/ComingSoonBG.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.88;
    z-index: 1;
    pointer-events: none;
    border-radius: 5px;
    width: 80%;
    height: 80%;
}

.card-with-overlay::after {
    content: "COMING SOON";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-23deg);
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 5px 15px;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.card-with-overlay .k-card > * {
    position: relative;
    z-index: 0;
}

.card-with-overlay .k-card-body > * {
    position: relative;
    z-index: 2;
}

.card-with-overlay .card-img-block {
    position: relative;
    z-index: 2; /* Same as other content */
}

.card-with-overlay .k-card-media.card-image {
    position: relative;
    z-index: 2; /* Same as other content */
}

/* .show-categories-link,
.general-summary-btn,
.modify-editor-link {
    margin: 10px;
} */

.general-summary-btn {
    padding-top: 10px;
}

.show-categories-link a,
.general-summary-btn a,
.modify-editor-link a,
.editor-main-btn {
    text-decoration: none;
    color: white;
    background-image: linear-gradient(var(--secondary-btn-color), var(--primary-btn-color));
    padding: 5px;
    border-radius: 5px;
}

.general-summary-btn a {
    padding: 10px;
}

.editor-main-btn {
    width: 110px;
    margin: 5px;
    align-content: center;
}

.editor-main-btn:hover {
    color: var(--body-text);
    /*font-weight: bolder;*/
}

/* google one tap signing form */
#credential_picker_container {
    display: none;
}

#voice-lang,
#voice-lang:focus {
    background-color: var(--bs-body-color);
    color: white;
    border: none;
}

.microphone-animation {
    margin: 0 auto;
    display: none;
}

.circle_ripple-2 {
    height: 100px;
    width: 100px;
    background: var(--primary-btn-color);
    border-radius: 50%;
    -webkit-animation-name: ripple 2s infinite;
    animation: ripple-2 3s infinite;
    position: absolute;
    left: 5px;
    top: 49%;
    left: 49%;
}

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

    50% {
        transform: scale(2);
        opacity: 0.3;
    }

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

@keyframes ripple-2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2.5);
        opacity: 0.3;
    }

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

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #eaeaea;
    position: absolute;
    left: 0;
    top: 49%;
    left: 49%;
}

.circle-2 {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    left: 5px;
    top: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
    z-index: 2;
}

/*.circle-2 .fa-microphone {
        font-size: 20px;
        color: #A7A7A7;
        position: absolute;
        left: 18px;
        top: 17px;
    }*/

.circle-2 svg {
    margin: 10%;
}

.speech-recognition-block {
    flex: auto;
    background-color: var(--message-box-color);
}

.Activate.speech.recognition,
.Enable.speech.synthesis {
    height: 100%;
}

.Activate.speech.recognition .k-svg-icon,
.Enable.speech.synthesis .k-svg-icon {
    width: 12px;
    margin: auto;
}

.Activate.speech.recognition,
#voice-lang,
.Enable.speech.synthesis {
    float: right;
}

#voice-lang {
    height: 100%;
    background-color: var(--message-box-color) !important; /* select language box */
}

.page main {
    overflow-y: hidden;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }

    .content px-4 {
        padding-left: 1.5rem !important;
    }

    .page {
        flex-direction: row;
    }

    .sidebar {
        background-image: unset !important;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 0; /* Keep existing padding for footer */
        align-items: center; /* This centers children horizontally */
    }

    .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;
    }
}

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

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

.image-editor-block {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    justify-content: center;
    margin: auto;
    gap: 2.2rem;
}

.image-editor {
    flex: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#editor-settings {
    flex: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.img-editor-main-btn {
    display: flex;
    flex-flow: row;
    gap: 0px;
    text-align: center;
}

.image-editor-subtypes .img-editor-main-btn {
    flex-flow: column;
    align-items: center;
}

.image-editor-subtypes {
    flex: 50%;
}

.float-right {
    float: right;
}

.image-editor-switch-buttons ul {
    padding: 0;
    margin: 0.2em;
}

.image-editor-switch-buttons ul li {
    margin: 0;
    padding: 10px 10px 10px 20px;
    min-height: 28px;
    line-height: 28px;
    vertical-align: middle;
    display: flex;
    gap: 10px;
}

.image-editor-switch-buttons span {
    color: var(--body-text);
}

.k-switch-off .k-switch-track {
    border-color: var(--primary-btn-color) !important;
    background-color: var(--primary-btn-color) !important;
}

.k-switch-label-on,
.k-switch-label-off {
    color: transparent !important;
}

.drawing-board-canvas {
    background-color: transparent;
    /* cursor: none !important; */
    /*width: 100%;
    height: 100%;*/
}

/* #editor-settings,
#k-window-titlebar,
.editor-overview-text {
    cursor: default;
} */

.image-editor-popup {
    cursor: default;
}

.page {
    cursor: default !important;
}

#circle-cursor {
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #000;
}

#circle-cursor:nth-child(1) {
    background-color: #e74c3c;
    z-index: 1;
}

#circle-cursor:nth-child(2) {
    background-color: #000;
}

/*.drawing-board, */
.drawing-board-canvas {
    opacity: 0.7;
    position: absolute;
}

#upload-image-button,
#upload-file-button {
    padding: 4px;
    /* padding-block: 4px; */
    /* padding-inline: 8px; */
    height: 100%;
    background: #2a2a2a;
    border-color: #383838;
    width: 30px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
    line-height: 1.4285714286;
}

#custom-upload-image,
#custom-upload-file {
    /*width: 30px;*/
    border-color: #383838;
    color: #ebebeb;
    background-color: #2a2a2a;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
    padding: 4px;
    /*margin: 5px;*/
    contain-intrinsic-block-size: AUTO 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* #custom-upload-image:hover,
#custom-upload-file:hover {
    background-color: #2f2f2f;
} */

.custom-upload-icon {
    width: 19px;
    height: 19px;
    outline: 0;
    line-height: 1;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    color: inherit;
    align-self: center;
    position: relative;
}

#image-editor-prompt {
    flex: 70%;
    border-radius: 7px;
    font-size: 1.03em;
    height: var(--dynamic-textarea-height, 15rem);
    background-color: var(--body-text);
    color: var(--body-background);
}

.image-editor-prompt-btn {
    color: var(--body-text);
}

.image-editor-popup {
    /* width: 90vh; */
    max-width: 1200px;
    height: auto;
    max-height: 90vh;
    align-items: center;
}

.reference-image-container {
    display: flex;
    margin-top: 1rem;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
}

.reference-image-square,
.reference-image-cubes {
    height: 160px;
}

.reference-image-square {
    width: 160px;
    background-color: #ccc;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.reference-image-square::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.4) 90%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}
  
.reference-image-square:hover::after {
    opacity: 1;
}

.reference-image-cubes {
    height: 160px;
    width: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
}

/* .reference-image-cubes .reference-cube:not(:last-child) {
    margin-bottom: 0.5rem;
} */

.reference-cube {
    position: relative;
    flex: 1 1 0;
    aspect-ratio: 1 /1;
    width: 100%;
    background-color: #ccc;
    border-radius: 4px;
    margin: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.reference-cube::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.4) 90%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}
  
.reference-cube:hover::after {
    opacity: 1;
}

.reference-image-text {
  font-size: 0.8rem;
  color: #262626;
  font-weight: 500;
}

.reference-drag-text {
  font-size: 0.55rem;
  color: #403f3f;
  font-weight: 500;
}

.chat-output-image {
    width: 630px;
    height: 630px;
    margin: 15px;
}

.gallery-container {
    position: relative;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-info-button {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    background-color: var(--secondary-btn-color);
    color: white;
    border: none;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    display: none;
}

.gallery-info-button:hover {
    background-color: var(--secondary-btn-color-light);
    /* Darken the color on hover */
}

.gallery-prev,
.gallery-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 6px;
    margin-top: -10px;
    color: grey;
    font-weight: bold;
    font-size: 14px;
    transition: 0.6s ease;
    border: none;
    user-select: none;
    background-color: transparent;
}

.gallery-prev {
    left: 0;
}

.gallery-next {
    right: 0;
}

.gallery-prev:hover,
.gallery-next:hover {
    color: lightgrey;
    background-color: transparent;
}

.image-editor-popup .k-window-content {
    overflow: hidden;
    overflow: -moz-scrollbars-none;
}

.mask-editor-popup-title {
    font-size: 1.1em;
}

.editor-overview-text {
    font-size: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.editor-overview-text #research-btn, #advanced-controls-btn,
.image-settings #conversation-research-btn, #conversation-advanced-controls-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 60px;
    margin: 0px 0px 15px 0px;
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color));
    border-radius: 3px;
    padding: 3px;
    font-size: 0.7em;
    text-align: center;
}

.image-settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.image-settings .k-radio-list.k-list-horizontal {
    gap: 6px;
}

.image-settings .k-radio-list-item {
    /*background: var(--primary-btn-color);*/
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color));
    border-radius: 3px;
    padding: 3px;
    width: 80px;
    font-size: 0.95em;
}

.image-settings .k-radio-wrap {
    display: none;
}

.image-settings .k-radio-list-item .k-radio-label {
    margin: 0;
    justify-content: center;
    width: 100%;
}

.image-settings .k-radio-list-item.checked, .radio-style-combo.checked {
    color: white;
    background-image: linear-gradient(-180deg, var(--primary-btn-color), var(--secondary-btn-color));
    font-weight: 760;
    box-shadow: 0 0 3px var(--secondary-btn-color-light);
    border: 1.0px solid white;
}

.range {
    position: relative;
    width: 420px;
    height: 5px;
    margin-top: .1rem;
}

.range input {
    width: 100%;
    position: absolute;
    top: 2px;
    height: 0;
    -webkit-appearance: none;
}

.range input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: -6px 0 0;
    border-radius: 50%;
    background-color: var(--primary-btn-color);
    /* background: transparent; */
    cursor: pointer;
    /* border: 1px solid var(--secondary-btn-color-light); */
}

.range input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    margin: -8px 0 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    border: 0 !important;
}

.range input::-ms-thumb {
    width: 18px;
    height: 18px;
    margin: -8px 0 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    border: 0 !important;
}

.range input::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #b2b2b2;
}

.range input::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #b2b2b2;
}

.range input::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #b2b2b2;
}

.range input:focus {
    background: none;
    outline: none;
}

.range input::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.range-labels {
    display: flex;
    flex-direction: row;
    width: 420px;
    color: white;
    margin-top: .5rem;
    padding: 0;
    list-style: none;
}

.range-icon-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: .2rem;
}

.range-labels .active {
    color: var(--primary-btn-color);
}

.range-labels .selected::before {
    background: var(--secondary-btn-color-light);
}

.range-labels li {
    flex: 1;
    cursor: pointer;
    font-size: 0.85em;
}

.range-labels .middle-item {
    text-align: center;
}

.range-labels .last-item {
    text-align: right;
}

.selected {
    color: var(white);
}

/* Specifically target detail-level-1 to not interfere with other select elements */
#detail-level-1.selected {
    color: white;
}

.indicator {
    width: 18px;
    height: 18px;
    background-color: transparent;
    margin-bottom: .1rem;
    border-radius: 10px;
    z-index: 999;
    position: relative;
    float: left;
}

#detail-level-1 .indicator,
#detail-level-2 .indicator {
    background-color: transparent;
}

#detail-level-1 .indicator {
    margin-left: -8px;
    margin-top: -32px;
}

#detail-level-2:not(.selected) .indicator {
    background-color: gray;
}

.selected:not(#detail-level-1, #detail-level-3) .indicator {
    background-color: var(--secondary-btn-color);
}

.middle-item .indicator {
    margin-left: 61px;
    margin-top: -35px;
}

.last-item .indicator {
    margin-top: -30px;
}

.indicator svg {
    fill: white;
    width: 25px;
    height: 25px;
}

.selected svg {
    fill: var(--secondary-btn-color);
}

/* .image-editor-popup .middle-item .indicator {
    margin-top: -38px;
} */

.last-item .indicator {
    float: right;
    /* margin-top: -41px; */
    margin-right: 0px;
}

.custom-tooltip {
    font-size: 0.9em;
    margin: 0.3em;
}

.changes-level-slider-block .k-slider-horizontal .k-label,
.image-settings .k-slider-horizontal .k-label {
    display: none;
}

.changes-level-slider-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 1.2rem; */
}

.changes-level-slider-block.isHidden{
    display: none !important;
}

.image-settings .changes-level-slider-block {
    align-items: unset;
}

.changes-level-slider-block.False {
    display: none !important;
}

.image-settings .changes-level-slider-block.True {
    display: flex;
    flex-direction: column;
}

.image-editor-block #image-editor .changes-level-slider-block.True {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.slider-tooltip {
    /* background-color: grey;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    text-align: center;
    position: absolute; */
    display: none !important;
}

.new-prompt-block {
    display: flex;
    flex-direction: column;
    /* padding-bottom: 10px; */
}

.new-prompt-block .label {
    margin: 5px;
}

.new-prompt-block input {
    border-color: #333333;
    color: #ebebeb;
    background-color: #333333;
    border-style: none;
    padding: 5px;
}

.k-slider .k-draghandle {
    border-color: var(--message-box-color) !important;
    background-color: var(--primary-btn-color) !important;
}

.k-slider .k-draghandle:focus {
    box-shadow: 0 0 0 2px rgba(120, 105, 231, 0.3) !important;
}

.k-slider .k-slider-selection {
    background-color: var(--secondary-btn-color) !important;
}

.k-chat .k-alt .k-chat-bubble {
    border-color: var(--primary-btn-color) !important;
    background-color: var(--primary-btn-color) !important;
}

.k-switch-on .k-switch-track,
.k-switch-off .k-switch-track {
    border-color: var(--primary-btn-color) !important;
    background-color: var(--primary-btn-color) !important;
}

#do-similar-task,
#modify-image-task,
#close-editor-btn-initial {
    width: 290px;
}

.k-loader-container {
    position: fixed !important;
}

.k-loader-primary,
.k-loader-pulsing-2 .k-loader-segment:nth-child(2),
.k-loader-pulsing-2 .k-loader-segment:nth-child(1) {
    background-color: var(--primary-btn-color) !important;
}

.k-loader-pulsing-2.k-loader-lg .k-loader-canvas {
    background-color: var(--body-text) !important;
}

.k-loader-container-label.\!k-text-primary {
    color: var(--primary-btn-color) !important;
}

.k-button-solid-primary {
    border-color: var(--primary-btn-color) !important;
    /*background-color: var(--primary-btn-color) !important;*/
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color));
}

.notification.Success {
    background-color: var(--success);
}

.notification.Error {
    background-color: var(--error);
}

.notification.Warning {
    background-color: var(--warning);
}

.notification.Info {
    background-color: var(--bs-cyan);
}

.notification {
    color: var(--body-text);
    flex: 10%;
    margin-bottom: 5px;
    padding: 7px;
    min-height: 54px;
    border-radius: 6px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}

.notification-close {
    float: right;
    background-color: transparent !important;
    border-color: transparent !important;
}

.notification-text {
    flex: 98%;
}

#reopen-mask-editor-btn {
    padding: 15px 30px 10px;
}

#reopen-mask-editor-btn a {
    padding: 15px;
    font-size: 1.1em;
}

.notifications-block {
    position: fixed;
    top: 0;
    width: calc(100% - 375px);
    padding: 0.5em;
    z-index: 999;
}

.notification svg {
    height: 20px;
    fill: var(--body-text);
    margin: 0.5em;
}

.custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    cursor: default;
}

.progress-container {
    background-color: var(--primary-btn-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    width: 350px;
    color: rgb(227, 210, 210);
    z-index: 99999;
}

.custom-progress-bar-container {
    border-radius: 10px;
}

.custom-progress-bar-container .k-selected.k-progressbar-value {
    background-color: rgb(45, 164, 77) !important;
    /* Customizing the Filled Portion */
}

.pen-hardness-slider,
.brush-size-slider {
    width: 100%;
    height: 50px;
    align-items: center;
    display: flex;
    flex-flow: row;
}

.pen-hardness-slider {
    display: none !important;
}

#editor-settings .slider-title {
    width: 17%;
    font-size: 15px;
}

#editor-settings .additional-settings .mask-settings-telerik-slider {
    width: 83%;
}

#interactive-image-results-gallery-window .k-window-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    left: center;
}

.interactive-image-results-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    flex-grow: 1;
    overflow-y: auto;
}

#interactive-image-results-gallery-window {
    z-index: 1000 !important;
}

#image-preview-container {
    z-index: 1002 !important;
}

#image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.36);
    z-index: 1001;
    display: none;
    pointer-events: none;
}

.thumbnail-container-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 45%;
    height: auto;
    margin: 5px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.thumbnail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    margin-top: 0px;
    border: none;
    flex-grow: 1;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    align-items: center;
    justify-content: center;
}

.thumbnail-title {
    text-align: center;
    margin-bottom: 2px;
    margin-top: 5px;
    font-weight: bold;
}

.thumbnail {
    cursor: pointer;
    width: 100%;
}

.thumbnail-full-width {
    width: 90% !important;
}

.thumbnail.selected {
    border: 3px solid;
    border-color: green;
}

.k-window {
    border-radius: 5px !important;
}

.k-window-titlebar {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

@media (max-width: 480px) {
    .thumbnail-container-item {
        width: 90%;
    }

    .k-panelbar-item-text {
        font-size: 14px;
    }
}

.custom-gallery-window {
    top: 100px !important;
    cursor: default;
}

#instruction-text {
    margin-bottom: 0px;
    position: sticky !important;
    top: 0;
    background-color: rgb(90, 86, 86);
    z-index: 1001;
    padding: 10px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#image-preview-container.k-window-content {
    padding: 0 !important;
}

#image-preview-container.k-window {
    border: none !important;
    box-shadow: none !important;
}

#image-preview-container .k-window-titlebar {
    display: none;
}

#image-preview-container {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    width: 850px;
    height: 850px;
}

#confirm-selection-container {
    position: sticky;
    bottom: 0;
    z-index: 1001;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

#large-image-window {
    margin-top: 5px;
    cursor: pointer;
}

#large-image {
    max-width: 100%;
    max-height: 100%;
    margin: 10px;
    background-color: transparent !important;
}

#large-image-buttons {
    text-align: center;
    margin-top: 10px;
}

#confirm-selection-container {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-top: none;
}

#confirm-selection,
#retry-selection,
#fix-mask-selection {
    padding: 10px 20px;
    background-color: var(--primary-btn-color);
    border-radius: 3px;
    border: none;
    cursor: pointer;
}

#confirm-selection.disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    pointer-events: none;
}

#large-image-choose-btn,
#large-image-cancel-btn {
    background-color: var(--primary-btn-color);
    border-radius: 3px;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
}

#large-image-cancel-btn {
    background-color: rgb(221, 27, 27);
}

.notification-close span {
    width: 100% !important;
}

.k-panelbar .k-panelbar-group>.k-panelbar-item>.k-link.k-selected,
.k-panelbar .k-panelbar-group>.k-panelbar-item>.k-link.k-selected:hover {
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color));
}

div[user] {
    text-align: end !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
}

div[user] .k-author {
    display: none !important;
}

div[user] .k-message.k-only {
    padding-inline-end: 40px !important;
}

div[user] .k-message-time {
    margin-inline-end: 8px !important;
    inset-inline-end: 100% !important;
    margin-inline-start: unset !important;
    inset-inline-start: unset !important;
}

/* div[user] .k-chat-bubble {
    background-color: var(--primary-btn-color) !important;
} */

div[user] .k-avatar {
    inset-inline-start: unset !important;
    margin-inline-end: 0px !important;
}

.conversation-history-info {
    background-color: var(--bs-gray-600) !important;
    margin: 1em 0;
    font-size: 1em;
}

.is-history-opened_True {
    display: flex !important;
}

.is-history-opened_False {
    display: none !important;
}

.variation-slider {
    margin-top: .7rem;
}

.variation-slider.False {
    display: none;
}

.variation-slider-labels {
    width: 305px;
    display: flex;
    padding: 0;
    margin-left: 80px;
    margin-bottom: 5px;
    list-style: none;
}

.variation-slider-labels .variation-slider-label {
    text-align: center;
    width: calc(100% / 9);
}

.k-loader-container-inner {
    display: flex;
    flex-direction: column;
}

.long-press-word {
    display: inline;
    cursor: pointer;
}

/* .response-terminology .highlighted-word {
    color: var(--primary-btn-color-light) !important;
    background-color: var(--active-white) !important;
} */

.word-explanation-popup {
    background-color: var(--inactive-white);
    color: rgb(37, 37, 37);
    border: 1px;
    padding: 5px;
    position: absolute;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 8px rgba(66, 3, 102, 0.1);
    border-radius: 5px;
    font-size: 14px;
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 768px) {
    .word-explanation-popup {
        max-width: 90vw;
    }

    .k-panelbar-item-text {
        font-size: 15px;
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.36);
    z-index: 999;
    display: none;
    pointer-events: none;
}

.k-chat .k-message-list {
    min-height: 30%;
}

.k-chat {
    /* background-image: url("https://rogerapp.blob.core.windows.net/rogerapp-test-server/rogerapp-static-content/static-content/rogerapp-main-bg.png"); */
    background-image: url("https://rogerapp.blob.core.windows.net/rogerapp-test-server/rogerapp-static-content/static-pictures/roger-itself-blurred.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -1; /* Ensures the background is behind the content */
    max-width: unset !important;
    height: 100% !important;
    min-height: calc(100vh - 21em) !important;
    flex-grow: 1;
}

.response-terminology a {
    color: var(--active-white) !important;
    text-decoration: underline !important;
    font-size: 15px;
    font-weight: 600;
}

.response-terminology a:hover {
    color: var(--active-white) !important;
    background-color:#79797978 !important;
}

.response-paragraph {
    margin: 10px 0;
}

.response-title {
    margin: 15px 0;
}

#chat .k-input-inner {
    overflow: unset !important;
}

#new-description-prompt-input {
    background-color: var(--body-background);
    color: var(--body-text);
    border-radius: 5px;
    height: 200px;
}

.k-scrollview {
    height: inherit !important;
    width: 100% !important;
}

.k-card-media.card-image {
    padding: 2px;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.k-avatar.k-avatar-md {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.k-card.telerik-blazor.custom-card {
    background-color: rgba(51, 51, 51, 0.4);
}

.k-chat .k-message .k-chat-bubble { /* Targets roger chat only */
    background-color: var(--accent-grey) !important;
}

.k-message-group.k-alt .k-message.k-only .k-chat-bubble {
    background-image: linear-gradient(var(--secondary-btn-color), var(--primary-btn-color)) !important;
}

body {
    /* background-color: rgba(51, 51, 51, 0.4) !important; */
}

.roger-app-logo {
    background-image: url("https://rogerapp.blob.core.windows.net/rogerapp-test-server/rogerapp-static-content/static-content/roger-app-logo01.png");
    /* Replace with the path to your image */
    background-size: cover;
    /* Adjusts the image to cover the entire element */
    background-position: center;
    /* Centers the image */
    background-repeat: no-repeat;
    /* Prevents the image from repeating */
    width: 200px;
    /* Set a width for the element */
    height: 200px;
    /* Set a height for the element */
}

.k-dialog-wrapper {
    z-index: 10060 !important;
}

#element-to-change-container,
#element-change-description-container {
    display: flex;
    flex-direction: column;
}

#element-to-change-block #element-to-change-textbox,
#element-change-description-block #element-change-description-textbox {
    padding: 5px;
    border-radius: 2px;
    font-size: 1.1em;
    height: 80px;
    background-color: var(--body-text);
    color: var(--body-background);
}

.additional-settings #element-change-description-block #element-change-description-textbox {
    height: 110px;
}

#element-to-change-send,
/* #element-change-description-send { */
.element-change-description-btn {
    color: var(--body-text);
}

.toggle-block {
    display: flex;
    flex-flow: row;
    gap: 0px;
    text-align: center;
    align-items: center;
}

.disabled-action {
    background-image: none;
    background-color: grey !important;
    pointer-events: none;
}

.disabled-btn {
    background-color: grey !important;
    pointer-events: none !important;
}

.response-image {
    max-width: 180px;
    margin: 10px;
}

.k-chat-bubble thead {
    font-size: 16px;
}

.k-chat-bubble td {
    padding: 5px;
    border: 1px solid var(--bs-gray-600);
}

.k-overlay {
    cursor: default;
}

#editor-drag-drop-area {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

#editor-settings .img-editor-main-btn #change-mask,
#editor-settings .img-editor-main-btn #change-img-settings {
    text-align: center;
    display: inline-block;
    width: 50%;
    font-size: medium;
    height: 40px;
}

#editor-settings #toggle-masking-options {
    display: flex;
    width: 50%;
    height: 35px;
    margin-bottom: 25px;
}

#editor-settings #toggle-masking-options .editor-main-btn {
    display: inline-block;
    height: 35px;
    padding: 0;
    margin: 0;
    margin-right: 2px;
}

.additional-settings .img-editor-main-btn #toggle-drawing-masks-buttons {
    display: flex;
    flex-basis: auto;
    justify-content: space-between;
    flex-shrink: 1;
    width: 50%;
    min-width: 200px;
    align-items: center;
    height: 28px;
}

.additional-settings .img-editor-main-btn #toggle-drawing-masks-buttons .editor-main-btn {
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
    box-sizing: border-box;
    margin-right: 2px;
}

#editor-settings .img-editor-main-btn #change-mask,
#editor-settings #toggle-buttons-block #toggle-object-masks-buttons #previous-mask-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#editor-settings .img-editor-main-btn #change-img-settings,
#editor-settings #toggle-buttons-block #toggle-object-masks-buttons #next-mask-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#editor-settings #toggle-buttons-block #toggle-object-masks-buttons #apply-mask-btn {
    border-radius: 0;
}

#editor-settings #toggle-buttons-block #toggle-object-masks-buttons>* {
    height: 35px;
    margin-right: 3px;
}

#editor-settings>.img-editor-main-btn {
    margin-bottom: 10px;
}

#editor-settings .additional-settings>.img-editor-main-btn {
    margin-bottom: 15px;
}

#editor-settings .editor-main-btn {
    border-radius: 2px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    flex: 1;
    text-align: center;
    /* height: 28px; */
}

.editor-main-btn.selected,
#editor-settings .editor-main-btn.selected,
.editor-overview-text #research-btn.editor-main-btn.selected,
.editor-overview-text #advanced-controls-btn.editor-main-btn.selected,
#conversation-research-btn.editor-main-btn.selected, 
#conversation-advanced-controls-btn.editor-main-btn.selected {
    color: white;
    background-image: linear-gradient(-180deg, var(--primary-btn-color), var(--secondary-btn-color));
    font-weight: 760;
    box-shadow: inset 0 0 0 0.1rem var(--secondary-btn-color-light);
    border: 1.0px solid white;
}

.additional-settings {
    padding: 0;
    box-sizing: border-box;
    width: 460px;
}

.image-editor-popup #image-settings-block {
    width: 460px;
}

.additional-settings .img-editor-main-btn {
    display: flex;
    gap: 10px;
}

.toggle-block>.editor-main-btn {
    /* height: 28px; */
    height: 30px;
    width: 80px;
}

.toggle-block #element-to-change-send {
    height: 35px;
    width: 120px;
    margin-left: 0;
    white-space: normal;
    line-height: 1.3;
    display: inline-block;
    text-align: center;
}

.additional-settings .auto-mask-settings,
.additional-settings .manual-mask-settings {
    height: 170px;
}

.additional-settings .auto-mask-settings,
.additional-settings .general-mask-settings {
    display: flex;
    flex-direction: column;
}

.additional-settings .manual-mask-settings>* {
    margin-bottom: 20px;
}

.additional-settings .img-editor-main-btn *,
.additional-settings .manual-mask-settings .brush-size-slider *,
.additional-settings .manual-mask-settings .pen-hardness-slider *,
.additional-settings .auto-mask-settings #element-to-change-container *,
.additional-settings .auto-mask-settings #element-change-description-container *,
.additional-settings .manual-mask-settings #element-change-description-container *,
.additional-settings .toggle-block *,
.additional-settings .general-mask-settings * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.additional-settings .pen-hardness-slider .telerik-blazor.k-button.k-button-decrease.k-button-solid.k-rounded-full.k-button-md.k-button-solid-base.k-icon-button,
.additional-settings .pen-hardness-slider .telerik-blazor.k-button.k-button-increase.k-button-solid.k-rounded-full.k-button-md.k-button-solid-base.k-icon-button,
.additional-settings .brush-size-slider .telerik-blazor.k-button.k-button-decrease.k-button-solid.k-rounded-full.k-button-md.k-button-solid-base.k-icon-button,
.additional-settings .brush-size-slider .telerik-blazor.k-button.k-button-increase.k-button-solid.k-rounded-full.k-button-md.k-button-solid-base.k-icon-button {
    padding: 4px;
}

.additional-settings #element-to-change-container>span,
.additional-settings #element-change-description-container>span,
#editor-settings #image-editor-prompt-block>span:nth-child(1) {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0.2rem;
    /* margin-top: 1.75rem; */
}

#toggle-buttons-block {
    margin-bottom: 10px;
}

.additional-settings #toggle-buttons-block #toggle-object-masks-buttons {
    display: flex;
    flex-basis: auto;
    justify-content: space-between;
    flex-shrink: 1;
    width: auto;
    max-width: 55%;
    min-width: 200px;
    height: 50px;
    align-items: center;
}

.additional-settings #toggle-buttons-block #toggle-object-masks-buttons .editor-main-btn {
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
    box-sizing: border-box;
}

.additional-settings .toggle-block {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

#toggle-buttons-group>a {
    white-space: normal;
    line-height: 1.3;
    display: inline-block;
    text-align: center;
}

.additional-settings #toggle-buttons-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.additional-settings #toggle-buttons-group .editor-main-btn,
.additional-settings #toggle-buttons-block .editor-main-btn {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

.additional-settings #toggle-buttons-group .change-background {
    margin-left: 0;
    width: 150px;
}

.additional-settings #toggle-buttons-group #close-editor-btn {
    width: 120px;
}

/* .additional-settings #element-change-description-container #element-change-description-send { */
.additional-settings #element-change-description-container .element-change-description-btn {
    margin-right: 0;
    width: 120px;
    align-self: flex-end;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    margin-top: 10px;
}

.additional-settings #toggle-buttons-group>* {
    height: 35px;
}

#editor-settings #image-settings-block,
#editor-settings #image-editor-prompt-block {
    width: 460px;
    height: 255px;
    font-size: 14px;
    margin-bottom: 1rem
}

#image-settings-block {
    height: 200px;
}

#editor-settings #image-settings-block .custom-tooltip {
    display: none;
}

#editor-settings #image-settings-block .image-settings .k-radio-list-item.checked {
    /*box-shadow: inset 0 0 0 0.1rem var(--secondary-btn-color-light);*/
}

#editor-settings #image-settings-block .image-settings .style-option,
#editor-settings #image-settings-block .image-settings .angle-option,
#editor-settings #image-settings-block .image-settings .position-option {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#editor-settings #image-settings-block .image-settings .style-option .k-radio-list-item,
#editor-settings #image-settings-block .image-settings .angle-option .k-radio-list-item,
#editor-settings #image-settings-block .image-settings .position-option .k-radio-list-item {
    width: 110px;
    height: 32px;
    margin-right: 2px;
    flex: 1;
}

#editor-settings #image-settings-block .image-settings .style-option .k-radio-list-item:last-child,
#editor-settings #image-settings-block .image-settings .angle-option .k-radio-list-item:last-child,
#editor-settings #image-settings-block .image-settings .position-option .k-radio-list-item:last-child {
    margin-right: 0;
}

#editor-settings #image-settings-block .image-settings .range {
    margin-top: 2px;
}

#editor-settings #image-settings-block .image-settings .range-labels {
    width: 100%;
}

#editor-settings #image-editor-prompt-block #image-editor-prompt {
    border-radius: 2px;
    padding: 5px;
}

#editor-settings #image-editor-prompt-block,
#editor-settings #image-editor-prompt-block * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#editor-settings #image-editor-prompt-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* margin-top: 5px; */
}

#editor-settings #image-editor-prompt-block .editor-main-btn {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

#editor-settings #image-editor-prompt-block .image-editor-prompt-btn {
    width: 130px;
    /* height: 40px; */
    height: 35px;
    text-align: center;
    /* align-self: flex-end; */
    /* margin-top: 10px; */
}

#editor-settings #image-editor-prompt-block #image-editor-tags-and-button-block {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* height: 70px; */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.image-settings-tags-block {
    align-self: flex-start;
    flex-grow: 1;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
}

.image-settings-tags-block .image-tag,
#editor-settings #image-editor-prompt-block .image-settings-tags-block .image-tag {
    background-color: var(--primary-btn-color-light);
    border-radius: 2px;
    padding: 5px;
    margin-bottom: 5px;
    display: block;
    width: fit-content;
}

.image-settings-tags-block .image-tag:last-child,
#editor-settings #image-editor-prompt-block .image-settings-tags-block .image-tag:last-child {
    margin-bottom: 7px;
}

.image-generation-task-block .image-settings .image-settings-tags-block {
    min-height: 110px;
}

#editor-settings #image-editor-prompt-block .image-settings-tags-block {
    height: 210px;
}

.image-settings.is-move-needed_True {
    align-items: center;
}

.image-settings.is-move-needed_True .k-radio-list-item {
    width: 120px;
}

.output-image-block .image-settings.is-move-needed_True .image-settings-tags-block {
    height: 290px;
}

.output-image-block .image-settings.is-move-needed_True .image-settings-tags-block .image-tag {
    max-width: 420px;
}

#editor-settings #image-editor-prompt-block #image-editor-tags-and-button-block #expand-prompt-btn {
    width: 180px;
    /* height: 40px; */
    height: 35px;
}

#ai-task-types {
    align-self: center;
    max-width: 100%;
    margin: 20px;
    padding: 10px;
}

/* #ai-task-types> :first-child {
    margin-left: 5px;
} */

.hs-img_True .k-card {
    height: 280px !important;
}

.hs-img_False .k-card {
    height: 60px;
}

#ai-task-types .k-card-media.card-image {
    padding: 2px;
    margin: 0 auto;
    height: unset !important;
    width: 100%;
    flex: 50% !important;
}

#ai-task-types .k-card-body {
    padding-block: 10px;
    padding-inline: 10px;
    outline: 0;
    flex: 1 1 auto;
    flex: 20% !important;
}

.hs-img_False .k-card .k-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hs-img_False .k-card .k-card-body .k-card-title {
    width: 100%;
    margin: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.k-message-group .k-message:not(.k-last) {
    margin-bottom: 7px !important;
}

.toast-container-block {
    padding: 0.5em;
    z-index: 10090;
    height: auto;
    width: auto;
    position: absolute;
    transform: translateX(-50%);
}

.custom-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    padding: 15px 25px;
    border-radius: 5px;
    font-size: 0.9em;
}

.custom-toast.Info {
    background-color: rgba(209, 208, 208, 0.922);
}

.custom-toast-text {
    color: rgb(0, 0, 0);
}

#prompt-fixing-checkbox-block {
    margin-top: 10px;
    align-self: flex-end;
}

#prompt-fixing-checkbox-block .k-checkbox:checked,
#prompt-fixing-checkbox-block .k-checkbox.k-checked {
    border-color: var(--secondary-btn-color);
    color: white;
    background-color: var(--secondary-btn-color);
}

#prompt-fixing-checkbox-block .k-checkbox {
    background-color: var(--body-text);
}

#prompt-fixing-checkbox-block #prompt-fixing-label {
    font-size: 1.1em;
}

.task-restart-icon svg {
    width: 20px;
    fill: darkgray;
    opacity: 0.4;
    margin: 0.3em 3.5em;
}

.k-chat .k-message {
    width: fit-content !important;
}

.custom-bot-message .k-chat-bubble {
    margin-left: 35px;
}

.custom-bot-message .k-message-time {
    margin-inline-start: 8px;
    inset-inline-start: 100%;
}

.task-block {
    width: 100%;
}

.task-block .k-message-group {
    max-width: 100% !important;
    width: 100% !important;
}

/*.AnswerContainer:not(.AnswerContainer-HighestScore) {
    display: none;*/
/* Hide all AnswerContainer elements that are not AnswerContainer-HighestScore */
/*}

.AnswerContainer.AnswerContainer-HighestScore {
    display: block;*/
/* Ensure the ones with both AnswerContainer and AnswerContainer-HighestScore are displayed */
/*}*/

.bot-info {
    display: flex;
    gap: 7px;
    align-content: center;
    align-items: center;
}

.response-visibility-icon svg,
.research-block-icon svg {
    fill: var(--body-text);
    width: 25px;
}

.AnswerContainer.plus section,
.AnswerContainer.plus header,
.AnswerContainer.plus h3 {
    display: none;
}

.AnswerContainer.minus section,
.AnswerContainer.minus header,
.AnswerContainer.minus h3 {
    display: block;
}

.research-block {
    margin-top: 2em;
}

.research-block-icon {
    color: var(--body-text);
    text-decoration: none !important;
    display: flex;
    gap: 10px;
    margin-bottom: 1em;
}

.research-block-icon span {
    margin: 0.5em 0;
    color: var(--body-text);
    font-size: 18px;
    margin-bottom: 0.5em;
}

.research-block.hide-data .AnswerContainer {
    display: none;
}

.research-block.show-data .AnswerContainer {
    display: block;
}

.AnswerContainer:not(.AnswerContainer-HighestScore) {
    margin-left: 2em;
}

.k-panelbar-item-text {
    width: 180px;
    font-weight: 700;
    font-size: 1rem;
}

.image-setting-tag {
    background-color: #1e1e1e4d !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    line-height: 1.6em;
}

.pdf-download {
    margin-left: 3em;
}

.new-prompt-container {
    display: flex;
    flex-direction: column;
    height: 290px;
    width: 425px;
}

.new-prompt-container #prompt-fixing-checkbox-block {
    margin-top: 0;
    align-self: flex-end;
}

.new-prompt-container .new-description-prompt-btn {
    align-self: flex-end;
    text-align: center;
    width: 120px;
    margin: 0;
    height: 28px;
}


.upload-image-popup::before {
    content: " ";
    position: absolute;
    bottom: 98%;
    left: 0;
    border-radius: 0;
    border-bottom: 20px solid white;
    border-right: 20px solid transparent;
}
.start-processing-popup::before, .find-object-popup::before {
    content: " ";
    position: absolute;
    bottom: 98%;
    left: 451px;
    border-radius: 0;
    border-bottom: 20px solid white;
    border-left: 20px solid transparent;
}

.upload-image-popup {
    max-width: 470px;
    display: block;
    position: absolute;
    left: 30px;
    top: 107px;
    background: white;
    padding: 10px;
    border-radius: 0 5px 5px;
    text-align: center;
    color: black;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.start-processing-popup {
    max-width: 470px;
    display: block;
    position: absolute;
    left: 462px;
    top: 537px;
    background: white;
    padding: 10px;
    border-radius: 5px 0px 5px 5px;
    text-align: center;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 999;
}

.find-object-popup {
    max-width: 470px;
    display: block;
    position: absolute;
    left: 462px;
    top: 320px;
    background: white;
    padding: 10px;
    border-radius: 5px 0px 5px 5px;
    text-align: center;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 999;
}

#drop-file-note {
    color: var(--body-text);
    font-size: 22px;
    position: absolute;
    top: 50%;
    margin-left: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#drop-file-note svg {
    fill: var(--body-text);
    width: 90px;
}

#previous-mask-btn,
#next-mask-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#previous-mask-btn svg,
#next-mask-btn svg {
    fill: white;
    width: 15px;
    text-align: center;
}

#previous-mask-btn {
    align-items: center;
    padding-right: 4px !important;
    padding-left: 1px !important;
}

#next-mask-btn {
    gap: 1px;
}

.image-setting-description {
    font-weight: 900;
    font-style: italic;
    color: var(--secondary-btn-color-light);
}

.k-chat-send .k-button-icon {
    min-width: 30px;
    min-height: 30px;
}

.k-chat-send .k-button-icon svg {
    width: 23px;
    height: 23px;
}

.k-svg-i-edit-tools.k-button-icon svg,
.k-svg-i-plus.k-button-icon svg {
    fill: white; /* Default state */
    transition: fill 0.3s ease; /* Smooth transition */
}

.k-svg-i-edit-tools.k-button-icon:hover svg,
.k-svg-i-plus.k-button-icon:hover svg {
    fill: var(--secondary-btn-color-light);
}

.k-svg-i-edit-tools.k-button-icon:active svg,
.k-svg-i-plus.k-button-icon:active svg {
    fill: var(--primary-btn-color);
}

.k-message-box .k-button svg {
    fill: var(--body-text) !important;
}

.k-drawer-item.k-selected,
.k-drawer-item.k-selected:hover {
    background-color: var(--primary-btn-color) !important;
    font-size: 14px;
    align-items: center;
}

.k-drawer-wrapper {
    width: 100% !important;
    margin-bottom: 15px;
}

.k-drawer-expanded .k-drawer.k-drawer-start {
    border-color: transparent !important;
    width: 100%;
}

.k-drawer-item .k-item-text,
.k-drawer-item .k-item-text:hover {
    text-decoration: none;
    color: var(--body-text);
}

.custom-toolbar .k-icon-button {
    margin: 7px;
}

.custom-toolbar .k-icon-button .k-i-menu {
    color: var(--body-text);
    padding: 12px;
    background-color: var(--primary-btn-color);
    border-radius: 3px;
    width: 30px;
    height: 30px;
}

.k-drawer-item .k-icon {
    width: 20px;
}

.k-drawer-item {
    gap: 7px !important;
}

.k-item-text {
    width: 300px;
    font-size: 14px;
}

.k-drawer-items {
    padding-left: 1em;
}

.k-drawer-items ul {
    overflow-y: hidden;
    max-height: calc(100vh - 20em);
    overflow-x: hidden;
}

.k-i-arrow-chevron-down::before,
.k-i-arrow-chevron-right::before {
    content: none !important;
}

.k-drawer-item.k-level-1.k-selected {
    background-color: var(--secondary-btn-color) !important;
}

.k-drawer-item .k-icon {
    margin: 0 !important;
    position: relative !important;
}

.queue-block {
    font-size: 9px;
    color: white;
    width: 100%;
    max-width: 800px;
}

.queue tr {
    font-size: 10px;
    vertical-align: top;
    height: 20px;
}

.main-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 100px);
}

.queues-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    align-self: end;
    display: none;
}

.queues-block svg {
    width: 12px;
    fill: red;
    margin: 5px;
    display: none;
}

.queue-title {
    font-size: 13px;
    font-weight: bolder;
    margin-bottom: 10px;
}

.queue-dots {
    width: 16px;
}

.inserted-queue-item.running-queue {
    --pulse-color: green;
    --pulse-color-light: lightgreen;
}

.inserted-queue-item.waiting-queue {
    --pulse-color: orange;
    --pulse-color-light: linen;
}

.inserted-queue-item {
    box-shadow: 0 0 0 0 var(--success);
    transform: scale(1);
    animation: pulse 10s 1;
    padding: 5px;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--pulse-color);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 3px var(--pulse-color-light);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.insert-queue-icon {
    margin-left: -20px;
}

.insert-queue-icon svg {
    width: 20px;
}

.expand-queue-link {
    text-decoration: none;
    color: var(--body-text) !important;
    font-size: 10px;
}

.running-queue .queue-identifier {
    background-color: green;
}

.running-queue {
    background-color: lightgreen;
    color: var(--body-background);
}

.waiting-queue .queue-identifier {
    background-color: orange;
}

.waiting-queue {
    background-color: linen;
    color: var(--body-background);
}

#image-feedback-select,
#translate-feedback-select {
    justify-content: unset !important;
}

.queue-identifier {
    text-align: center;
}

.queue-identifier svg {
    fill: var(--body-background);
}

.cancel-task-link {
    text-align: center;
}

.cancel-link,
.cancel-link:hover {
    text-decoration: none;
    color: var(--body-text);
    font-size: 12px;
    cursor: pointer;
}

.cancel-link svg {
    width: 15px;
    margin: -2px 5px 0 0;
    fill: white;
}

.uploaded-file-icon {
    display: flex;
    flex-direction: row;
    margin-bottom: -40px;
}

.file-icon img {
    width: 55px;
    height: auto;
    margin: 5px 0px 5px 5px;
}

.file-icon svg {
    width: 55px;
    fill: white;
}

.remove-icon {
    width: 15px;
    fill: var(--body-text);
    margin: -5px;
}

.show-categories-link svg {
    width: 15px;
    fill: var(--body-text);
    margin-right: 10px;
    vertical-align: middle;
    transition: fill 0.3s ease;
}

.show-categories-link:hover svg {
    fill: var(--secondary-btn-color-light);
}

.show-categories-link:active svg {
    fill: var(--primary-btn-color); /* Light blue */
}


.prompt-fixing-block {
    background: none !important;
    color: #808080 !important;
    cursor: pointer !important;
}
.prompt-fixing-block label {
    cursor: inherit !important;
}


.k-link {
    /* background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color)) !important; */
    background-color:var(--body-background);
    border-radius: 3px;
}

.k-panelbar>.k-item>.k-link:hover,
.k-panelbar>.k-panelbar-header>.k-link:hover {
    /* background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color)); */
    background-color:#434343
}

.k-chat .k-card-deck .k-card,
#summary-size-select .k-card,
#translate-feedback-select .k-card {
    width: fit-content !important; /* Using fit-content instead of fit-value */
    max-width: 350px; /* Optional: set a maximum width */
    margin: 0.5rem; /* Optional: add some spacing between cards */
}

.image-gen-feedback-buttons {
    width: fit-content !important;
}

#image-feedback-select .k-card-title {
    /* background-color: rgb(185, 233, 14) !important; */
    font-size: 1rem !important;
}

#image-feedback-select .k-card-title.feedback-button-title {
    order: 0 !important; /* Reset the order */
    margin: auto !important; /* Center vertically */
}

#image-feedback-select .image-gen-feedback-buttons {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
}

.k-message-list-content.k-typing-indicator-bubble .k-message .k-chat-bubble {
    line-height: 22px;
    padding-inline: 24px;
    white-space: normal;
    margin-top: 4px;
    background-image: linear-gradient(var(--secondary-btn-color), var(--primary-btn-color)) !important;
}
    
.k-button-md.k-icon-button .k-button-icon {
    transform: scale(1.5) !important;
}

.image-editor-popup .k-window-titlebar {
    width: 100%;
  }

.details-level-text {
    margin-bottom: 0.8rem;
    margin-top: 0.8rem;
}

.details-text-wrapper {
    text-align: center;
}

.image-editor-wrapper {
    position: relative;
    display: inline-block; /* or block, depending on your layout */
  }

.k-imageeditor-content {
    border-radius: 4px !important;
}
  
.image-editor-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform 0.3s ease;
}

.image-editor-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.4) 90%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}

.image-editor-overlay.image-loaded::after {
    opacity: 0 !important;
    pointer-events: none;
}
  
.image-editor-overlay:hover::after {
    opacity: 1;
}

.image-editor-overlay.image-loaded:hover::after {
    opacity: 0 !important;
    pointer-events: none;
}

  .edit-image-text {
    font-size: 1.5rem;
    color: #262626;
    font-weight: 500;
  }
  
  .edit-drag-text {
    font-size: 0.9rem;
    color: #403f3f;
    font-weight: 500;
  }

  .drag-and-drop-container {
    display: flex;
    flex-direction: column;     /* vertical stacking */
    align-items: center;        /* horizontal center */
    justify-content: center;    /* vertical center (if height is set) */
    gap: 1rem;                  /* space between children */
    height: 100%;               /* or some defined height */
  }

.upload-image-button svg {
    transition: fill 0.3s ease;
}

.upload-image-button:hover svg {
    fill: var(--secondary-btn-color-light);
}

.upload-image-button:active svg {
    fill: var(--primary-btn-color); /* Light blue */
}

.custom-upload-icon svg {
    transition: fill 0.3s ease;
}

.custom-upload-icon:hover svg {
    fill: var(--secondary-btn-color-light) !important;
}

.custom-upload-icon:active svg {
    fill: var(--primary-btn-color) !important;
}
.custom-spell-check-icon svg {
    transition: fill 0.3s ease !important;
}

.custom-spell-check-icon:hover svg {
    fill: var(--secondary-btn-color-light) !important;
}

.custom-spell-check-icon:active svg {
    fill: var(--primary-btn-color) !important;
}

.k-svg-i-paper-plane.k-button-icon svg {
    transition: fill 0.3s ease !important;
}

.k-svg-i-paper-plane.k-button-icon:hover svg {
    fill: var(--secondary-btn-color-light) !important;
}

.k-svg-i-paper-plane.k-button-icon:active svg {
    fill: var(--primary-btn-color) !important;
}

.k-button-overlay, .k-button::before{
    background: none !important;
}

.k-button-icon svg {
    transition: fill 0.3s ease;
}

.k-button-icon:hover svg {
    fill: var(--secondary-btn-color-light) !important;
}

.k-button-icon:active svg {
    fill: var(--primary-btn-color) !important;
}

.k-button-text{
    transition: fill 0.3s ease;
}

.k-button-text:hover {
    color: var(--secondary-btn-color-light) !important;
}

#image-editor-tags-and-button-block .change-background {
    width: 130px;
}

.image-style-selector {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.image-style-selector span {
    margin-right: 10px;
    min-width: 80px;
}

.image-style-combo {
    flex-grow: 1;
}

.circular-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

.style-icon {
    margin-right: 10px;
}

.style-combo-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
}

/* Create a flex container for the radio group and combo */
.style-options-container {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 5px;
}

/* Style the container for the radio group */
.radio-group-container {
    display: inline-flex;
}

/* Style the container for the combo */
.combo-container {
    display: inline-flex;
}

/* Style the combo to look like it's part of the radio group */
.integrated-combo .k-dropdown-wrap {
    border-radius: 4px;
    height: 32px; /* Match height of radio buttons */
    border: 1px solid var(--radio-border, #e0e0e0);
    background-color: var(--radio-background, #f5f5f5);
}

/* Style for active state */
.integrated-combo .k-dropdown-wrap.k-state-focused,
.integrated-combo .k-dropdown-wrap.k-state-active {
    background-color: var(--radio-active-background, #e0f2ff);
    border-color: var(--radio-active-border, #0077cc);
}

/* Circular icon styling */
.circular-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

/* Combo item styling */
.style-combo-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
}

.style-icon {
    margin-right: 10px;
}

.style-text {
    flex: 1;
}

.button-style-combo .k-dropdown-wrap {
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color)) !important;
    border-radius: 3px !important;
    padding: 3px 5px !important;
    height: 32px !important;
    border: none !important;
    color: white !important;
}

.button-style-combo .k-select {
    background: transparent !important;
    border-left: none !important;
}

.button-style-combo .k-select .k-icon {
    color: white !important;
}

.button-style-combo .k-input {
    color: white;
    background: transparent;
    text-align: center !important;
}

.button-style-combo .k-input-inner {
    color: white !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 0.9em !important;
}

.k-animation-container {
    width: auto !important;
    min-width: 110px !important;
}

.button-style-combo::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.button-style-combo .k-input-inner::placeholder {
    color: white !important;
    opacity: 1 !important;
}

.button-style-combo .k-input-value {
    text-align: center !important;
    width: 100% !important;
}

.button-style-combo .k-input::placeholder {
    color: white !important;
    opacity: 1 !important;
}

.button-style-combo .k-input-inner::-moz-placeholder,
.button-style-combo .k-input::-moz-placeholder {
    color: white !important;
    opacity: 1 !important;
}

.button-style-combo .k-input-inner::-webkit-input-placeholder,
.button-style-combo .k-input::-webkit-input-placeholder {
    color: white !important;
    opacity: 1 !important;
}

.k-popup .style-combo-item {
    padding: 8px 12px;
}

/* Remove nested container */
.style-options-container .style-options-container {
    display: contents;
}

.style-options-container .k-radio-list {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

.radio-style-combo {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 60px !important;
    max-width: 80px !important;
    box-sizing: border-box;
    border-radius: 3px;
}

.radio-style-combo .button-style-combo {
    width: 100% !important;
    flex: 1;
}

@media (max-width: 640px) {
    .radio-style-combo {
        min-width: 60px;
    }
}

.radio-style-combo .button-style-combo.k-combobox {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.button-style-combo.k-combobox {
    background-image: linear-gradient(-180deg, var(--secondary-btn-color), var(--primary-btn-color)) !important;
    background-color: var(--primary-btn-color) !important;
    border-radius: 3px !important;
}

.k-combobox .k-input {
    text-overflow: clip; /* Instead of ellipsis */
    overflow: hidden;
    white-space: nowrap;
}

.k-clear-value {
    display: none !important;
}


.research-advanced-button-wrapper {
    display: flex;
    justify-content: flex-end; /* Pushes children to the right */
    align-items: center;
    width: 100%;
    gap: 10px;
}

/* .textbox-dynamic-height {
   height:  !important; 
} */

@media (max-width: 480px) {
    #task-categories {
        overflow-x: auto;
        height: calc(100vh - 380px);
    }

    #task-categories a {
        flex-basis: calc(100% - 10px);
    }

    .content,
    .px-4 {
        padding: 0 !important;
    }

    .notifications-block {
        width: 100vw !important;
    }

    .sidebar-content {
        overflow-x: clip;
    }

    .custom-navigation-menu {
        display: none;
    }

    .drawer-container {
        display: block;
    }

    .avatar-block {
        display: flex;
        gap: 10px;
        padding: 1em;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        margin-bottom: 5px;
    }

    .avatar-block .avatar-img {
        width: 30px !important;
        height: 30px !important;
    }

    .avatar-username {
        margin-top: 0 !important;
    }

    #prompt-sending-block {
        bottom: 0px;
        width: 100%;
    }

    .queues-block {
        margin: 0 5px;
        display: none;
    }

    .queue {
        margin: 10px 0;
        width: unset !important;
    }

    .queue th {
        width: unset !important;
    }

    #ai-task-types .k-card {
        width: 340px !important;
    }

    #ai-task-types {
        /* overflow-x: scroll !important; */
        /* height: calc(100vh - 480px) !important; */
        overflow: auto;
    }

    .k-panelbar-item-text {
        font-size: 14px;
    }

    /* no padding bottom, height, or overflow */
    .sidebar { 
        background-image: unset !important;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 0px;
        width: 375px;
        height: auto;
        overflow: unset;
    }

    .breadcrumb-menu {
        display: none;
    }

    #menu-block {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100vw;
        width: auto;
    }

    #menu-row {
        display: flex;
        align-items: center;
        width: 90%;
        gap: 8px;
        margin-left: 15px;
    }

    .show-categories-link {
        display: inline-flex;
        align-items: center;
        margin: 0;
        max-width: 100vw;
    }

    .k-card.telerik-blazor.custom-card.k-card-vertical .k-card-title {
        font-size: 1.0rem !important;
    }

    .k-card-subtitle {
        font-size: 0.9rem !important;
    }

    .k-drawer-overlay .k-drawer {
        max-height: 25%;
        border-radius: 5px;
    }

    .card-img-block {
        height: 6rem;
        width: 6rem;
    }

    .card-with-overlay::after {
        font-size: 1.1rem;
    }

    .image-editor-block {
        flex-direction: column;
        height: calc(100vh - 150px);
        overflow-y: auto;
        justify-content: flex-start;
        padding-bottom: 20px;
        box-sizing: border-box;

        /* Hide scrollbar for webkit browsers */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
    }

    .image-editor-popup {
        height: 95vh;
        max-height: 95vh;
        padding: .4rem !important;
    }

    .k-window-content {
        width: 95vw;
        height: 100%;
        overflow: hidden;
        padding: 10px;
        box-sizing: border-box;
        padding-inline: 2px;
    }

    .k-imageeditor-content {
        height: 400px;
    }

    .image-settings {
        width: 80vw;
    }

    .radio-style-combo {
        width: 30px;
    }

    #editor-settings #image-settings-block {
        font-size: .8rem;
    }

    #image-editor-tags-and-button-block {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }

    #editor-settings #image-settings-block {
        font-size: .8rem;
        max-height: none;
    }

    #editor-settings>.img-editor-main-btn {
        width: 80vw;
    }

    #editor-settings #image-settings-block, #editor-settings #image-editor-prompt-block {
        height: auto;
    }

    .range {
        width: 75vw;
    }

    .changes-level-slider-block > .k-slider {
        width: 80vw !important;
    }

    .editor-drag-drop-area {
        width: 50vw;
    }

    #task-categories.categories-hidden {
        display: none !important;
    }

    .bg {
        overflow-y: hidden;
    }

    #editor-settings #image-editor-prompt-block .image-editor-prompt-btn {
        margin-right: 20px;
    }

    #image-editor {
        width: inherit !important;
        height: 450px !important;
    }

    #editor-settings #image-editor-prompt-block #image-editor-tags-and-button-block{
        height: 70px;
        width: 90vw;
    }

    .image-editor-wrapper {
        width: inherit;
    }

    .additional-settings {
        width: 85vw;
    }

    .editor-instructions {
        font-size: .8rem;
    }

    .additional-settings .auto-mask-settings, .additional-settings .manual-mask-settings {
        height: auto;
    }
}


/* Change title to Deep Search?
Put Image Generation first? I can change in database
Change name to Image Generation and Editing


k-drawer telerik-blazor k-drawer-start
- this doesnt adjust to the size adjusting

Usage Information - turn into a drop down

Damage-healthbar style for visualizing the reduction
- Slightly overscale because I dont think a reduction of 1 will be visible
*/