/*Custom icons styles*/
.custom-new-item-icon::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
.custom-existing-icon::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
.custom-renewal-icon::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/*Customize Chat appearance*/
.k-chat {
width: 100% !important;
}
.k-chat .k-textarea textarea {
min-height: 70px;
}
.k-chat-header.k-appbar > .header-title {
flex: 1;
font-weight: 600;
}
.k-chat-header.k-appbar {
display: flex;
padding-block: var(--kendo-spacing-2, 0.5rem);
padding-inline: var(--kendo-spacing-4, 0.875rem);
box-shadow: none;
border-bottom: 1px solid;
border-bottom-color: inherit;
}
/* Remove Chat bubbles for the AI Assistant */
.k-message-group-receiver .k-bubble {
padding-inline: 0;
border-width: 0;
background-color: transparent;
}
/* Use medium Grid ToolBar paddings */
.k-grid .k-toolbar {
padding-inline: var(--kendo-spacing-2);
padding-block: var(--kendo-spacing-2);
}
/*Customize AI Grid Button appearance*/
.k-icon.k-svg-i-sparkles,
.ai-chat-button svg path {
color: #6610f2;
fill: #6610f2;
}
.ai-chat-button {
border: 1px solid #4b5ffa;
background-color: transparent;
color: #4b5ffa;
padding: 7px 20px;
}
.ai-chat-button:hover,
.ai-chat-button.k-selected:hover {
background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.1) 15.09%, rgba(75, 95, 250, 0.1) 85.31% );
}
.ai-chat-button:active,
.ai-chat-button.k-selected {
background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.2) 15.09%, rgba(75, 95, 250, 0.2) 85.31% );
box-shadow: none;
}
.ai-chat-button:focus {
box-shadow: 0 0 0 2px rgba(138, 97, 255, 0.3);
outline-width: inherit;
}
.ai-chat-button svg path {
fill: #8a61ff;
}
.k-drawer-items.k-chat {
height: 70vh !important;
min-height: unset !important;
}
/*Customize AI Grid Button appearance - dark themes*/
[data-is-dark="true"] .ai-chat-button {
border: 1px solid #8a61ff;
background-color: transparent;
color: #8a61ff;
}
[data-is-dark="true"] .ai-chat-button:hover,
[data-is-dark="true"] .ai-chat-button.k-selected:hover {
background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.1) 15.09%, rgba(75, 95, 250, 0.1) 85.31% );
}
[data-is-dark="true"] .ai-chat-button:active,
[data-is-dark="true"] .ai-chat-button.k-selected {
background: linear-gradient( 134.88deg, rgba(172, 88, 255, 0.2) 15.09%, rgba(75, 95, 250, 0.2) 85.31% );
box-shadow: none;
}
[data-is-dark="true"] .ai-chat-button:focus {
box-shadow: 0 0 0 2px rgba(138, 97, 255, 0.3);
}
[data-is-dark="true"] .ai-chat-button svg path {
fill: #8a61ff;
}
[data-is-dark="true"] .custom-new-item-icon::before,
[data-is-dark="true"] .custom-existing-icon::before,
[data-is-dark="true"] .custom-renewal-icon::before {
color: white;
}
.k-drawer{
display:none;
}
/*Customize Drawer appearance*/
.k-drawer.k-drawer-end {
border-inline-start-width: 0px !important;
}
.k-drawer-content {
padding: 0 !important;
padding-block: 0px;
padding-inline: 0px !important;
}
.k-drawer-items {
width: 360px !important;
padding-block: 0px;
padding-inline: 0px;
}
/*Other styles*/
.note {
font: normal 18px "Metric";
border-radius: 2px;
margin: 20px auto 40px auto;
padding: 20px;
border-left: 4px solid;
border-left-color: #5392e4;
background: rgba(83, 146, 228, 0.1);
text-align: center;
}
.k-rating-item:not(.k-selected) {
display: none;
}
.order-type-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding-inline: 8px;
min-height: 24px;
}
.order-type-icon-wrap {
display: inline-flex;
align-items: center;
}
.order-type-icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
[data-is-dark="true"] .order-type-chip {
color: #fff;
}
.k-svg-i-ai-sparkles.k-svg-icon.k-icon {
width: 32px;
height: 32px;
}
.message-text {
white-space: pre-wrap;
word-wrap: break-word;
}
@@media (max-width: 765px) {
.k-drawer-items {
width: 360px !important;
}
.k-drawer-container {
position: relative;
width: 100%;
height: 95%;
}
.k-drawer-container.k-drawer-overlay .k-drawer {
position: absolute;
}
.k-overlay {
position: absolute;
}
.k-grouping-drop-container {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.k-grouping-header {
flex-wrap: nowrap;
}
}
@@media (max-width: 560px) {
.k-drawer-items {
width: 100% !important;
}
}