/* Creation Date: 06-10-2012
 * Purpose: This contains all the css
 * Modification Date: 28-11-2012
*/
@font-face {
    font-family: 'opal-icon';
    src:  url('opal-fonts/opal-icon.eot?e7bkz7');
    src:  url('opal-fonts/opal-icon.eot?e7bkz7#iefix') format('embedded-opentype'),
        url('opal-fonts/opal-icon.ttf?e7bkz7') format('truetype'),
        url('opal-fonts/opal-icon.woff?e7bkz7') format('woff'),
        url('opal-fonts/opal-icon.woff2?e7bkz7') format('woff2'),
        url('opal-fonts/opal-icon.svg?e7bkz7#opal-icon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="opal-"], [class*=" opal-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'opal-icon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.opal-ftp:before {
    content: "\e901";
}
.opal-text-field-svgrepo-com:before {
    content: "\e900";
}

.headerLogo {
    background: url('images/opal.jpg') no-repeat;
    background-size: 150px 60px;
    height: 60px;
    width: 150px;
    top: 30px;
    left: 20px;
    margin-left: 10px;
}

.noBorder {
    border: 0px;
}

.centered {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-top: -50px;
    margin-left: -170px;
}

.borderPadding {
    padding-bottom: 5px;
}

.alignCenter {
    text-align: center;
}

/*
* for Button text alignment
*/
.buttonLeftAlign .x-btn-inner {
    text-align: left !important;

    /**
    *Below three css are added to fix IE8 alignment issue
    */
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
/*
 *This class will highlight the text
*/
.highlight {
    color:#FFFFFF;
    background-color:#2D9C63;
    font-weight:900;
}

.x-form-title-trigger {
    background-image: url("images/title-trigger.gif");
    background-repeat:no-repeat;
}

/*
 *Override this CSS class to remove icon from the veluelist tree
 *when the node is render.
*/
.x-tree-icon {
    background-image: url("");
    width: 2px;
}
/*
 *Override this CSS class to remove icon from the veluelist tree when
 *the noe expanded.
*/
.x-grid-tree-node-expanded .x-tree-icon-parent {
    display: none;
    background-image: url("");
    width: 2px;
}

/*
 * css for form builder component
*/
.component {
    background: none repeat scroll 0 0 #DAD9D9;
    background-color: #F8F8F8;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE);
    border-width: 1px;
    border-style: solid;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    display: block;
    font: 12px arial;
    height: 30px;
    overflow: hidden;
    padding: 5px 2px;
    text-align: center;
    width: 150px;
    position: relative;
    border-color: #BBBBBB;
}

.component:hover {
    background-color: #F3F3F3;
    background-image: -moz-linear-gradient(center top , #FBFBFB, #E5E5E5);
}

.component > label {
    display: inline-block;
    padding-top: 0px;
    cursor: pointer;
    font: 12px arial;
}

.addIcon {
    background-image: url(images/plus.png) ! important;
}
.groupHeaderSelect{
    background-color: #52C927;
}

.groupHeaderDeSelect{
    background-color: #FFFFFF;
}

.breadCrumbHighlight {
    text-decoration: none;
    color: #000000;
    font-weight: 900;
}

.breadCrumbHighlightAgain {
    text-decoration: none;
    color: #000000;
    font-weight: 600;
}

.highlightButton .x-btn-inner{
    background-color: #EE9999 !important;
}

.taskDelegatedWithThumbnail .x-grid-cell{
    /*background-color: #B0FFC5;*/
    height: 70px;
}

/* Opaldev 437 - rownumber column not aligned with rest grid
 Reset height for thumbnail rows*/
.taskDelegatedWithThumbnail .x-grid-cell .x-grid-cell-inner{
    height: auto;
}

.taskDelegatedWithoutThumbnail .x-grid-cell{
    /*background-color: #B0FFC5;*/
    height: 25px;
}

.milestoneDelayed .x-grid-cell{
    background-color: #EE9999 !important;
    height: 25px;

}
.milestoneDelayedSelected .x-grid-cell{
    background-color: #D86262 !important;
    height: 25px;
}

/*.taskDelegatedSelected .x-grid-cell{
    background-color: #8EE995 !important;
}*/

.taskRowWithThumbnail .x-grid-cell{
    height: 70px;
}

/* Opaldev 437 - rownumber column not aligned with rest grid
 Reset height for thumbnail rows*/
.taskRowWithThumbnail .x-grid-cell .x-grid-cell-inner{
    height: auto;
}

.gridRow .x-grid-cell{
    height: 25px;
}

.holdLine .x-grid-cell {
    background-color: #EE9999;
}

.holdLineSelected .x-grid-cell{
    background-color: #D86262 !important;
}

.pointer {
    cursor: pointer;
}
/*
.x-action-col-cell img
{
    width: 25px;
    height: 20px;
    cursor: pointer;
    padding: 0 3px 0 3px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(images/navigate.png);
}
*/
.x-action-col-cell .navigate {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size:16px 16px;
    cursor: pointer;
    background-image: url(images/navigate.png) !important;
}

.x-action-col-cell .thumbnailView
{
    width: 75px;
    height: 65px;
    background-position: center;
    cursor: pointer;
    background-size:70px 64px;
    background-repeat:no-repeat !important;
}
.x-action-col-cell .form
{
    width: 75px;
    height: 65px;
    background-position: center;
    cursor: pointer;
    background-size:70px 64px;
    background-repeat:no-repeat;
    background-image: url(images/form.png) !important;
}

.x-action-col-cell .upload
{
    width: 75px;
    height: 65px;
    cursor: pointer;
    background-size:70px 64px;
    background-repeat:no-repeat;
    background-image: url(images/upload.png) !important;
}

.x-action-col-cell .review
{
    width: 75px;
    height: 65px;
    cursor: pointer;
    background-size:70px 64px;
    background-repeat:no-repeat !important;
}

.x-action-col-cell .checkpoint {
    width: 75px;
    height: 65px;
    background-position: center;
    cursor: pointer;
    background-size:70px 64px;
    background-repeat:no-repeat;
    background-image: url(images/checkPDF.png) !important;
}

/*.blankRow .x-grid-cell {
    background-color: #EE9999 !important;
}
.blankRowSelected .x-grid-cell{ 
    background-color: #D86262 !important; 
}*/

.blankRow .x-grid-cell {
    background-color: /*#EEC9C9*/ #EEB1B1 !important;
}

.blankRow:hover .x-grid-cell{
    background-color: #D86262 !important;
}

.blankRowLockedGrid .x-grid-cell{
    background-color: #D86262 !important;
}

.blankRowSelected .x-grid-cell{
    background-color: /*#EE9999*/ #EE8181 !important;
}

.blankRowSelected:hover .x-grid-cell{
    background-color: /*#EE9999*/ #EE8181 !important;
}

.x-grid-row-focused .x-grid-td{
    border-bottom-style: none !important;
    border-bottom-color:#464646;
    border-bottom-width:1px
}
.x-grid-row-before-selected .x-grid-td{
    border-bottom-style: none !important;
    border-bottom-color:#bfb8b8
}
/*.x-tip {
    width: auto !important;       

}
.x-tip-body {
    width: auto !important;

}
.x-tip-body span {
    width: auto !important;

}*/
.x-item-disabled .multiselectDisabled {
    background: #fff;
}
.x-item-disabled .x-form-item-label {
    opacity: 1 !important;
}
.multiselectDisabled .x-mask {
    background: none repeat scroll 0 0 #fff;
    height: 115%;
}

.x-item-disabled-cursor{
    cursor: default;
}

.linkCls{
    margin-left: 18%;
}
/*.x-btn-badgeCls{
overflow: visible;
top: -0.3em;
font-family: tahoma,arial,verdana,sans-serif;
padding: .5 em;
z-index: 12;
color: #333;
position: absolute;
width: auto;
min-width: 0.5em;
line-height: 1.5em;
font-size: 7pt;
right:0px;
max-width: 95%;
background-image: none;
text-align: center;


}*/
/*.x-form-checkboxgroup-body{
    padding : 0px;
}
.x-tab-badgeCls{
overflow: visible;
top: -.6em;
font-family: tahoma,arial,verdana,sans-serif;
border-radius: 2em;
margin-right: -1.15em;
z-index: 12;
text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
color: white;
border: 2px solid black;
position: absolute;
width: auto;
min-width: 1em;
line-height: 1.2em;
font-size: 6pt;
right: -0.5px;
max-width: 95%;
background-image: none;
background-color: #C00;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff1a1a), color-stop(3%, #e60000), color-stop(100%, #b30000));
background-image: -webkit-linear-gradient(top, #ff1a1a,#e60000 3%,#b30000);
background-image: linear-gradient(top, #ff1a1a,#e60000 3%,#b30000);
display: inline-block;
padding:0.2em;
word-break: break-word;
white-space: normal;
font-weight:bold;
}
.has-badge{
height:22px ;
line-height:22px;
overflow: visible !important;
}



.hide-badge{
display:none !important;
}

.x-frame-mc.x-btn-mc{
overflow:visible !important;
}

.x-frame-mc .x-btn-mc{
overflow:visible! important;
}

.has-badge .x-tab-inner{

background-color: transparent;
background-repeat: no-repeat;
background-position: 0 -2px;
display: block;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 0.8em;
}

.x-badge-bar .x-tab-bar-body ,.x-badge-bar .x-tab-bar-body .x-box-inner{
overflow:visible !important;
}

.x-btn .x-btn-center .x-btn-icon{
margin-right:10px !important;
}
.has-badge .x-btn-inner,.has-badge .x-btn-icon{
padding-right:20px;
}*/

.fixClass{
    position:fixed !important;
}
.x-list-plain-test{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: 25px;
}

.multiselect-readonly{
    overflow:auto;
}

.x-item-disabled {
    cursor: default !important;
    pointer-events: auto !important;
}

.multiselect-readonly1{
    overflow:auto;
    opacity:1;
    cursor:default !important;
    /*    pointer-events: none;*/
}
.multiselect-readonly > div{
    height: auto !important;
    min-height:100px ;
}
.x-grid-with-col-lines .x-grid-cell {
    border-right-width: 0px;
}

.multiselect-readonly .x-mask {
    overflow:auto;
    opacity:.1;
    /*background: #fff;*/
}
.x-font-select {
    width: 1px;
}

.button-listview-not-selected {
    background-image: url(images/listView.png) ! important;
}

.button-listview-selected {
    background-image: url(images/listViewSelected.png) ! important;
}

.button-thumbnailview-not-selected {
    background-image: url(images/thumbnail.png) ! important;
}

.button-thumbnailview-selected {
    background-image: url(images/thumbnailSelected.png) ! important;
}


.x-grid-row-checker-disabled:after {
    content: "\f0c8" !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    display: block;
    color: #b5b8c8 !important;
    height:13px;
    width:13px;
    background-position: 50% -0px;
    background-image: none !important;
    vertical-align: middle  !important;
/*    height:13px;
    width:13px;
    background-image:url(images/checkbox.gif);
    filter:alpha(opacity=30);
    opacity:.3;*/
}

.x-grid-row-checker, .x-grid-row-checker:after {
/*    height:13px;
    width:13px;
    background-image:url(images/checkbox.gif);*/
    content: "\f0c8" !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    color: black !important;
    background: none !important;
    height:13px;
    width:13px;
    background-image: none !important;
}

.x-grid-row-checker-checked , .x-grid-row-checker-checked:after {
/*    height:13px;
    width:13px;
    background-image:url(images/checkbox.gif);
    background-position: 52px 26px;*/
    content: '\f14a' !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    color: black !important;
    background: none !important;
    height:13px;
    width:13px;
    background-image: none !important;
}

.lock-attribute-z-index{
    z-index: 30000 !important;
}

.chkboxbefore {
    /* width: 25px;
     height: 25px; 
     background-image:url(images/checkbox.gif);
     display:none ! important;*/
    width: 13px;
    height: 13px;
    background-image: url(images/checkbox.gif);
    display: block;
    background-repeat: no-repeat;
    position: absolute;
}

.chkboxafter {
    /*float:left;*/
    /* margin-left: 80px;
margin-top: 60px;
background-image: url(../css/images/selection.png);
background-repeat: no-repeat; 
background-size: 25px;
width: 25px;
    height: 25px;*/
    width: 13px;
    height: 13px;
    background-image: url(images/checkbox.gif);
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    background-position: 1% 100%;
}

.export-button-bullet .x-menu-group-icon{
    display: none !important;
}

.x-box-item {
    color: #000 ;
}

.x-autocontainer-innerCt{
    color: #000 !important;
}

.x-form-file-input{
    width:57px;
    height:20px;
}

.x-form-search-cb-checked{
    left: 0;
    right: auto;
    overflow: hidden;
    padding: 0;
    border: 0;
    height:13px;
    width:13px;
    background-image:url(images/checkbox.gif);
    background-position: 0 26px;
    vertical-align: middle  !important;
}

.x-form-search-cb {
    left: 0;
    right: auto;
    overflow: hidden;
    padding: 0;
    border: 0;
    vertical-align: middle  !important;
}

.form-radio {
    width: 13px;
    height: 13px;
    background-image: url('images/radio.gif') !important;
    background-position: 0 -13px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.form-table-layout > div.x-form-error-wrap {
    width: 18px;
}

.x-form-item-default.x-item-disabled {
    opacity: 1 !important;
}

.x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small .x-btn-wrap
{
    outline:none;
}

.x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
    /*border-style: none !important;*/
}

.x-keyboard-mode .x-grid-item-focused .x-grid-cell-inner:before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    pointer-events:none;
    border:none;
}

.x-grid-with-row-lines .x-grid-item-selected + .x-grid-item
{
    /*border-top-style:none;*/
}

.x-keyboard-mode .x-column-header.x-column-header-focus .x-column-header-inner:after
{
    content:"";
    position:absolute;
    z-index:5;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    border:none;
    pointer-events:none
}

.x-keyboard-mode .x-tab-focus.x-tab-default .x-tab-button:before
{
    position:absolute;
    content:' ';
    top:0;
    right:0;
    bottom:0;
    left:0;
    pointer-events:none;
    outline:none;
}

.x-keyboard-mode .x-btn-focus.x-btn-default-small .x-btn-wrap
{
    outline:none;
}

.x-action-col-icon-drag {
    color: gray;
    font-size: 16px;
    height: 60px;
    width: 50px;
    cursor: pointer;
}

.loginMainPanelContainer {
    /*background-image: url(images/login/login-abstract.jpg) !important;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.newLoginFields .x-form-text-default {
    min-height: 40px;
    background-image: none;
    padding-left: 5px;
}

.newTokenFields .x-form-text-default {
    min-height: 40px;
    background-image: none;
    padding-left: 5px;
}

.newLoginFields .x-form-trigger-default {
    background-image: none;
    width: 30px;
    border-width: 1px 1px 1px 0px;
    color: #D3D3D3;
    /*line-height: 1.74em;*/
    line-height: 100%;
    padding-top: 8px;
    cursor: default;
}
.newLoginFields .x-form-trigger-wrap-invalid .x-form-trigger-default {
    border-color: #c30;
}
.newLoginFields .x-form-text-wrap-default {
    border-width: 1px 0px 1px 1px;
}
.newLoginBtn.x-btn-default-small {
    background-image: none;
    background-color: #575757;
    border-color: #575757;
    border-radius: 0px;
    color: #FFFFFF;
}
.newLoginBtn.x-btn-over.x-btn-default-small, .newLoginBtn.x-btn-focus.x-btn-default-small {
    background-color: #575757;
    background-image: -webkit-linear-gradient(top, #595959, #424242);
    border-color: #2A2A2A;
}
.newLoginBtn .x-btn-inner-default-small {
    color: #FFFFFF;
    font: normal 12px/16px tahoma, arial, verdana, sans-serif;
}
.x-keyboard-mode .newLoginBtn.x-btn-focus.x-btn-default-small {
    /*    border-color: #9D9D9D;*/
    border-color: #2A2A2A;
    background-image: none;
    background-color: #575757;
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #595959), color-stop(0%, #424242));
    background-image: -webkit-linear-gradient(top, #595959, #424242);
    background-image: -moz-linear-gradient(top, #595959, #424242);
    background-image: -o-linear-gradient(top, #595959, #424242);
    background-image: -ms-linear-gradient(top, #595959, #424242);
    background-image: linear-gradient(top, #595959, #424242);
}
.newLoginSingInLabel {
    color: #575757 !important;
    font: 500 12px/16px tahoma, arial, verdana, sans-serif;
}
.new-forget-password .hyperlink_color_class {
    color: #575757;
}
.new-login-error-msg, .new-login-success-msg {
    text-align: center;
    background: #FFF;
}
.new-login-error-msg {
    margin-top: 4px;
    margin-bottom: 3px;
    color: red !important;
}
.new-login-success-msg {
    color: #006400 !important;
}

.new-toolbar, .new-footer-panel .x-panel-body-default {
    background-color: #575757;
    background-image: -webkit-linear-gradient(top, #575757, #2A2A2A);
}
.new-toolbar-btn .x-btn-inner-default-toolbar-small {
    color: #FFFFFF;
    font: normal 13px/16px arial, tahoma, verdana, sans-serif;
    /*font: normal 12px/16px arial;*/
}
.new-toolbar-btn.x-btn-over.x-btn-default-toolbar-small, .new-toolbar-btn.x-btn-focus.x-btn-default-toolbar-small {
    background-color: #575757;
    background-image: -webkit-linear-gradient(top, #595959, #424242);
    border-color: #2A2A2A;
    /*border-color: #2A2A2A;*/
}
.new-toolbar-btn .x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
    background-image: url(images/button/arrow-white.gif);
}
.new-dark-Menu .x-menu-icon-separator {
    display: none !important;
}
.new-toolbar-btn .x-menu-item-text-default {
    font: normal 13px/16px arial, tahoma, verdana, sans-serif !important;
    padding-top: 3px;
    padding-bottom: 3px;
}
.new-toolbar-btn .x-menu-item-text-default.x-menu-item-indent {
    margin-left: 5px;
}
.new-footer-panel .x-box-item, .new-footer-panel .x-autocontainer-innerCt, .new-dark-Menu .x-menu-item-text-default {
    color: #FFFFFF !important;
}
.new-footer-panel .x-box-item, .new-footer-panel .x-autocontainer-innerCt {
    font-size: 11px;
    font-family: arial, tahoma, verdana, sans-serif;
}
.new-dark-Menu .x-menu-body-default {
    background-color: #575757;
    color: #FFFFFF;
}
.new-dark-Menu.x-menu-default {
    border-color: #2A2A2A;
}
.new-dark-Menu .x-menu-item-focus,
.new-dark-Menu .x-menu-item-active {
    background-image: none;
    background-color: #575757;
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #595959), color-stop(0%, #424242));
    background-image: -webkit-linear-gradient(top, #595959, #424242);
    background-image: -moz-linear-gradient(top, #595959, #424242);
    background-image: -o-linear-gradient(top, #595959, #424242);
    background-image: -ms-linear-gradient(top, #595959, #424242);
    background-image: linear-gradient(top, #595959, #424242);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    /*    border-color: #9D9D9D;*/
    border-color: #2A2A2A;
}

.new-toolbar-btn .x-menu-item-arrow-default:before{
    content:'' !important;
}

.new-toolbar-btn .x-menu-item-arrow-default{
    background-image: url(images/menu/arrow-white-right.gif) !important;
}

.new-grid-group-hd .x-grid-group-hd {
    border-width: 0 0 1px 0;
}
/*
 {
    border-color: #9D9D9D;
    background-image: none;
    background-color: #D6D6D6;
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #C7C7C7), color-stop(0%, #E0E0E0));
    background-image: -webkit-linear-gradient(top, #C7C7C7, #E0E0E0);
    background-image: -moz-linear-gradient(top, #C7C7C7, #E0E0E0);
    background-image: -o-linear-gradient(top, #C7C7C7, #E0E0E0);
    background-image: -ms-linear-gradient(top, #C7C7C7, #E0E0E0);
    background-image: linear-gradient(top, #C7C7C7, #E0E0E0);
} */
.new-toolbar-btn.x-btn.x-btn-menu-active.x-btn-default-toolbar-small,
.new-toolbar-btn.x-btn.x-btn-pressed.x-btn-default-toolbar-small,  .new-toolbar-btn .x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small {
    /*    border-color: #9D9D9D;*/
    border-color: #2A2A2A;
    background-image: none;
    background-color: #575757;
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #595959), color-stop(0%, #424242));
    background-image: -webkit-linear-gradient(top, #595959, #424242);
    background-image: -moz-linear-gradient(top, #595959, #424242);
    background-image: -o-linear-gradient(top, #595959, #424242);
    background-image: -ms-linear-gradient(top, #595959, #424242);
    background-image: linear-gradient(top, #595959, #424242);
}
.new-toolbar-btn-icons {
    color: #FFFFFF;
}

.new-footer-text-panel .x-panel-body-default {
    background: transparent;
}

.opal-shutdown:before {
    content: "\e902";
}
.opal-singoff:before {
    content: "\e902";
}
.opal-levels:before {
    content: "\e900";
}
.opal-home:before{
    font-family: "Font Awesome 5 Free"; 
    content: "\f015";
    font-weight: 300;
}
.badgeable{
    position: relative;
    color: white;
    /* border-color: darken($badge-background-color, 10%);
     background-color: $badge-background-color; */
    max-width: 95%;
    max-height: 14px;
    right: 1px;
    top: -2px;
    font: 12px arial;
    box-shadow: -0.6px 1px 3px 1px rgba(119, 119, 119, 0.55);
    -moz-box-shadow: -0.6px 1px 3px 1px rgba(119, 119, 119, 0.55);
    -webkit-box-shadow: -0.6px 1px 3px 1px rgba(119, 119, 119, 0.55);
    text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-weight: bold;
    padding: 0px 4px;
    background-image: none;
    background-color: #C00000;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FF1A1A), color-stop(3%, #E60000), color-stop(100%, #B30000));
    background-image: -webkit-linear-gradient(top, #FF1A1A,#E60000 3%,#B30000);
    background-image: linear-gradient(top, #FF1A1A,#E60000 3%,#B30000);
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0.1em 0.1em;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0.1em 0.1em;
}

.newBreadCrumb {
    font-family: helvetica, arial, tahoma, verdana, sans-serif;
    padding: 0 0 0 5px;
    display: inline-block;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}
.newBreadCrumbChild {
    font-family: helvetica, arial, tahoma, verdana, sans-serif;
    padding: 0 0 0 1px;
    display: inline-block;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}
.new-grid .x-grid-row, .new-grid .x-docked-summary .x-grid-row-summary .x-grid-cell .x-grid-cell-inner {
    line-height: 22px;
}
/* Opaldev 437 - rownumber column not aligned with rest grid
 Set height for rows*/
.new-grid .x-grid-cell-inner, .new-grid .x-docked-summary .x-grid-row-summary {
    height: 29px;
}
.new-grid .x-grid-item, .new-grid .x-column-header, /*.new-panel-header-title*/ .x-panel-header-title-default, .new-grid .x-docked-summary .x-grid-row-summary .x-grid-cell{
    font: normal 12px/13px helvetica, tahoma, arial, verdana, sans-serif;
}
.new-grid  .x-column-header-inner {
    padding: 5px 5px 5px 5px !important;
}
.new-grid .x-grid-item-alt {
    background-color: #EEEEEE;
}
.new-grid .x-grid-item-over {
    /*    background-color: #CBCBCB;*/
    background-color: #B1B1B1;
}
.new-grid .x-grid-item-selected {
    background-color: #CBCBCB;
}
.new-grid .x-grid-cell-inner-action-col {
    padding: 6px 2px 2px 2px;
}
.new-grid .x-grid-cell-inner-row-numberer {
    padding: 3px 5px 4px 5px;
}
/*.new-panel-header-title*/
.x-panel-header-title-default {
    font-weight: bold;
}
.x-panel-header-default {
    font-size: 12px !important ;
    border: 1px solid #D0D0D0;
}

/*.new-panel-header-title*/
.x-panel-header-default {
    background-color: #C8C8C8;
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #F0F0F0), color-stop(0%, #C8C8C8));
    background-image: -webkit-linear-gradient(top, #F0F0F0, #C8C8C8);
    background-image: -moz-linear-gradient(top, #F0F0F0, #C8C8C8);
    background-image: -o-linear-gradient(top, #F0F0F0, #C8C8C8);
    background-image: -ms-linear-gradient(top, #F0F0F0, #C8C8C8);
    background-image: linear-gradient(top,#F0F0F0, #C8C8C8);
}

.x-grid-group-title{
    font-size: 12px !important ;
}

.new-grid-header-checkbox .x-column-header-checkbox .x-column-header-inner, .x-grid-checkcolumn-cell-inner{
    padding :8px 4px 3px 4px;
}

.x-tree-icon, .x-tree-elbow-img, .x-tree-checkbox{
    margin : 0px 0px -4px;
}


.togglefield .x-slider-horz, .togglefield .x-slider-horz .x-slider-end, .togglefield .x-slider-horz .x-slider-inner {
    background-image: none;
    background-color: #B6B6B6;
    border-radius: 10px !important;
    height: 16px !important;
    width: 27px !important;
}
.togglefield .x-slider-horz .x-slider-thumb {
    background-image: none;
    background-color: white;
    border-radius: 12px;
    border: 1px solid #B6B6B6;
    -webkit-box-shadow: 0px 4px 24px -9px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 24px -9px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 24px -9px rgba(0,0,0,0.75);
    width: 16px;
    height: 16px;
}

.togglefield .togglefield-on .x-slider-horz .x-slider-thumb {
    margin-left : -14px ;
    border: 1px solid #007e00;
}

.togglefield .x-slider-focus .x-slider-thumb {
    outline: none;
}
.togglefield .togglefield-on .x-slider-horz, .togglefield .togglefield-on .x-slider-horz .x-slider-end, .togglefield .togglefield-on .x-slider-horz .x-slider-inner {
    background-color: #007e00;
    width: 25px !important;
}

/*.x-grid-scroll-body.x-scroller {
 z-index: 1;
}*/

.button-icon-padding {
    font-family: 'Font Awesome 5 Free' !important;
    padding-top: 3px;
    color: #313130 !important;
}

.thumbnail-list-icon-padding{
   font-family: 'Font Awesome 5 Free' !important;
    padding-top: 3px;
    color: #313130 !important; 
}
#images-view .thumb-wrap {
    float: left;
    margin: 4px;
    margin-right: 0;
    padding: 5px;
    border: 1px solid #c0c0c0;
}

#images-view .thumb-wrap.asset-expired {
    border: 1px solid #ff0000;
}

#images-view.asset-expired .x-item-selected {
    border: 1px solid #ff0000;
}

div.inactive {
    background:#EE9999 !important;
}

#images-view .thumb-wrap.asset-expired x-item-over {
    border: 1px solid #ff0000;
}

.imageselectchkboxbefore {
    margin-top: 2px;
    width: 13px;
    height: 13px;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    color: #00330d;
}

.x-form-display-field-default {
    margin-top: 0px;
}
/* opaldev 209 -- grid UI changes */

.new-x-panel-header-preferences .x-panel-header {
    height: 25px !important;
}

.new-x-panel-header .x-panel-header {
    height: 25px;
}

.new-toolbar-docked .x-toolbar-default-docked-bottom{
    height: 26px !important;
}

.newColorPickerField .x-colorpicker-field input{
    padding-left: 0px !important;
}

.newColorPickerField .x-form-text-default {
    background-image: none !important;
}

.newOAuthLoginBtn.x-btn-default-small {
    background-image: none !important;
    border-radius: 0px !important;
    color: #FFFFFF !important;
}
.newOAuthLoginBtn.x-btn-over.x-btn-default-small, .newOAuthLoginBtn.x-btn-focus.x-btn-default-small {
    opacity: 0.9 !important;
}
.newOAuthLoginBtn .x-btn-inner-default-small {
    color: #FFFFFF !important;
    font: normal 12px/16px tahoma, arial, verdana, sans-serif !important;
}
.x-keyboard-mode .newOAuthLoginBtn.x-btn-focus.x-btn-default-small {
    background-image: none !important;
}

/* Declaraton settings preferences page */
.lightBottomBorder {
    border-bottom: 2px solid #d6d6d6;
    margin-bottom: 4px;
}

/* Summary row css for recipe ingredients */
.x-docked-summary .x-grid-row-summary .x-grid-cell {
    background: #e3e3e3   !important;
}

.recipeDeclaration .x-mask {
    background-color: transparent      !important;
}

.recipeDeclaration .x-btn-disabled {
    border-color: transparent           !important;
    opacity: 1                          !important;
}
/*
.recipeDeclaration .x-item-disabled .x-mask {
    background-color: rgba(204, 204, 204, 0.5)      !important;
}*/
.breadcrumbLinedetails{
    display: inline-block;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

.fa-link, .fa-unlink, .fa-plus{
    font-size: 13px;
}

.fa-lg {
    font-size: 1.2em !important;
}   

.x-action-col-icon {
    font-size: 13px;
}

.customWinMask {
    background-color: rgba(204,204,204,0.3) !important;
}

/* Give a fainted highlight on the row that is expanded */
.rawMaterialGrid .x-grid-tree-node-expanded {
    border-right: 1px solid #D0D0D0      !important;
    background-color: #F4F4F4            !important;
    border-top-color: #EDEDED            !important;
    border-bottom-color: #EDEDED         !important;
}

.specTextarea .x-form-text-wrap-default{
    border: none       !important;
}

.newComponent {
    background: none repeat scroll 0 0 #DAD9D9;
    background-color: #F8F8F8;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE);
    border-width: 1px;
    border-style: dashed;
    height: 40px;
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    /*padding: 5px 20px;*/
    text-align: center;
    width: 100%;
    position: relative;
    border-color: #BBBBBB;
    border-right: none;
    border-left: none;
    /*padding-top: 13px;*/
    display: flex!important;
    font-weight: normal!important;
    align-items: center;

}

.newComponent:hover {
    background-color: #F3F3F3;
    background-image: -moz-linear-gradient(center top , #FBFBFB, #E5E5E5);
    transform: scale(1.2, 1.1);
    position: relative!important;
    left: 25px!important;
}
.label {
    /*    padding: 0px!important;
        padding-bottom: 2px!important;*/
    width: inherit !important;
    font-family: "system-ui","Segoe UI", "Roboto", "Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
/*    height: inherit;*/

    text-align: initial;
    margin-left: 20px;
    /* padding-left: 15px !important; */
}
.firstElement {
    border-top-style: none;
}
.object {
    /* vertical-align: middle!important; */
    padding: 2px!important;
}
/* .horizontalLineCreateCls {
    padding-top: 4px;
    padding-bottom: 4px;
} */
.selectCls{
    /* background: #eee; */
    outline: none;
    border: 1px dashed rgb(0, 106, 158) !important;
    border-style: dashed !important;
    border-width: 1px !important;
    border-color: rgb(0, 106, 158) !important;
    padding-bottom: 0px !important;
    /* border: 1px dashed rgb(0, 106, 158) !important; */

}
.hoverCls{
    /* border: 1px dashed rgb(255, 0, 0) !important; */
    border: 1px dashed rgb(0, 170, 255) !important;
    padding-bottom: 0px !important;
    /* background-image: -webkit-linear-gradient(top, #dfc4c4, #cec3c359) */
}
.labelObjectCls:active {
    border: 1px dashed #dddcdc;
}
.abc {
    margin-right: 2px!important;
}
.checkboxCls {
    width: 148px!important;
    /* width: 118px!important; */
}
.base {
    background-image: none!important;
    background-color: white;
}
.myCls .x-panel-header-default {
    background-image: none!important;
    background-color:  #F3F3F3;
    /* border-style: dashed; */
    /* font-size: 14px; */
}
.x-colorpicker-field-swatch-inner {
    z-index: 1 !important;
    /* .x-color-swatch */
}
.anchorDisabledCls {
    pointer-events: none;
    cursor: default;
    /* text-decoration: none; */
    /* color: black; */
}
.xyz {
    padding-left: 15px !important;
}
.fafont{
    font-size: 14px !important;
}
.x-form-text-field-body-toolbar {
    min-width: 100vw!important;
}
.container {
    height: auto !important;
}
.x-container .x-form-checkboxgroup .object {
    height: auto!important;
}
.customParentClass .fa-i-cursor::before, .customParentClass .fa-minus::before, .customParentClass .fa-flag:before, 
.customParentClass .fa-plus-square::before, .customParentClass .fa-font::before, .customParentClass .fa-caret-down::before, 
.customParentClass .fa-check::before, .customParentClass .fa-circle::before, .customParentClass .fa-list-multi::before, 
.customParentClass .fa-exchange-alt::before, .customParentClass .fa-calendar::before, .customParentClass .fa-cloud-upload-alt::before, 
.customParentClass .fa-external-link-alt::before, .customParentClass .fa-code::before, .customParentClass .fa-hourglass-start::before,
.customParentClass .fa-spinner::before {
    width: 18px !important;
    padding: 5px 15px 5px  20px !important;

}
.x-css-shadow {
    box-shadow: none!important;

}
.customParentClass .fa-times::before {
    position: relative!important;
    font-size: 10px!important;
    border: none!important;
    display: block;
    height: 21px!important;
    width: 14px!important;
}
.hoverCrossCls {
    opacity : 0.8;
    border-bottom-left-radius: 6px;
    /* border-width: 1px; */
    background-color: none;
    color: rgb(179, 179, 179);
}
.hoverCrossCls:hover {
    opacity : 0.8;
    border-bottom-left-radius: 6px;
    background-color: #f54747;
    color: white;
    /* border: none!important; */
}


.faTimesHtml::before {
    position: relative!important;
    background: none !important;
    left: -1px!important;
    top: -4px!important;
}
.faTimesHtml:hover {
    color: white !important;
}
.faBodyHtml {
    background: none!important;
    border: none!important;
    box-shadow: none!important;
}

.faBodyHtml:hover {
    opacity : 0.8;
    background: #c86060 !important;
    color: white !important;
}
.abc{
    top: 0px!important;
}


.customLabelCls {
    vertical-align: middle;
    height: 1px;
    display: inline-block;
    font-size: 16px;
    /*display: block;
/*                padding-top: 5px;*/
    padding-left: 7px;
    /*padding-bottom: 5px;*/
}
.comboCls {
    padding-top: 2px;
    width: 32px !important;
    color: #919191 !important;
    font:16px/16px 'Font Awesome 5 Free' !important;
    background-image: none !important;
    border: none !important;
}

.comboCls::before {
    content: '\f0d7' !important;
    vertical-align: -moz-middle-with-baseline;
    font: 16px / 24px "Font Awesome 5 Free" !important;
    /*vertical-align: middle;*/
}
.dateCls {
    width: 32px !important;
    color: #919191 !important;
    font:16px/16px 'Font Awesome 5 Free' !important;
    background-image: none !important;
    border: none !important;
}

.dateCls::before {
    content: '\f073' !important;
    vertical-align: -moz-middle-with-baseline;
}

.pickerErrCls {
    background-image: url(../js/lib/extjs7/build/classic/theme-gray/resources/images/grid/invalid_line.gif) !important;
    background-repeat: repeat-x !important;
    background-position: bottom !important;
    vertical-align: middle;
}


.unappliedChangesContainer {
    border: 1px dashed red !important;
}

.backBtn {
    padding-top: 3px;
}

/* .x-tab-bar-top > .x-tab-bar-strip-default  {
    border-width: 1px 0 0;
    height: 3px;
    background-color: #f3f3f3;
} */


.customParentClass .x-html-editor-container {
    border-radius: 5px;
    border: 1px solid #c3c3c3;
}

.customParentClass .x-boundlist {
    border: 1px solid #b5b8c8;
    background: #fff;
    border-radius: 5px;
}
/*.customParentClass .x-form-item-body-default.x-form-checkboxgroup-body  {
    padding: 0px 4px 0px 4px;
}*/
.customParentClass .x-html-editor-input {
    border-style: none !important;
}
.customParentClass .x-html-editor-wrap .x-toolbar {
    border-style: none;
}
/* .x-form-trigger-wrap-formsAssignField {
    border-style: none!important;
} */
.x-form-cb-checked .x-form-checkbox-toolbar {
    font: 15px/1 'Font Awesome 5 Free Regular';
    color: black !important;
}
/* .x-form-cb-checked .x-form-checkbox-formsCheckbox {
    font: 15px/1 'Font Awesome 5 Free Regular';
    color: black !important;
} */

.x-form-cb-checked .x-form-checkbox-default {
    font: 15px/1 'Font Awesome 5 Free Regular';
    color: black !important;
}
.x-form-cb-checked .x-form-radio-default, .x-form-cb-checked .x-form-radio-default:before {
    /*font: 15px/1 'Font Awesome 5 Free Regular';*/
    font: 13px/1 'Font Awesome 5 Free Regular' ;
    color: black !important;
    content: '\f192' !important;
    background: none !important;
}

.x-form-radio-default, .x-form-radio-default:before {
    font: 13px/1 'Font Awesome 5 Free Regular' ;
    color: #b5b8c8 !important;
    content: '\f111' !important;
    background: none !important;
    color: black !important;
}
.x-btn-default-small {
    border-color: #bbb;
    /*height: 32px;*/
}
.tabIcon-triggerWrap {
    border: none!important;
}
.tabIconCls {
    min-height: 13px !important;
    font-size: 13px !important;
    line-height: 14px !important;
    width: 16px;
}
.tabIconleftPaddingIconCls {
    padding-left: 7px;
}
.triggerWrapCls {
    display: none!important;
}
.itemselectorObject {
    /* vertical-align: middle!important; */
    /* padding-top: 3px!important;
    padding-bottom: 3px!important;
    padding-left: 3px!important; */
    padding-right: 7px !important;
}
.borderDragObjectCls {
    border: 1px solid #b5b8c8;
    border-radius: 4px;
    font-weight: normal!important;
}
.x-dd-drag-ghost {
    padding: 0px !important;
}
.x-dd-drag-proxy {
    display: table;
    padding: 5px;
}
.uploadCls {
    padding: 0px !important;
}
.dragPanelDragProxy {
    /* height: 50px; */
    width: 420px;
}
.dragPanelObjectDragProxy {
    top: 4px !important;
    left: 33px !important;
    width: 380px !important;
    border: 1px solid #b5b8c8;
}
/*.customParentClass .fa-upload::before {
    color: #b5b8c8;
}*/
.triggerFieldBorderIgnore {
    /* background: #fff; */
    border: none !important;
}
.paddingForAssignUserCls {
    padding: 4px 7px !important;
    min-height: 25px!important;
}
.textFieldAssignUserCls {
    /*min-height: 25px;*/
    margin-right: 2px!important;
    width: inherit !important;
    border :1px solid #b5b8c8;
    border-radius:  5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.itemselectorObject {
    padding-right: 7px !important;
}

.removeErrorIcon {
    color: #c30;
    background-image: none !important;
    vertical-align: middle;
    /* content: '\f015' !important; */
}
.checkboxErrorCls {
    color: #c30;
}
.customParentClass {
    color: black;
    /*font: normal 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;*/
}
.customParentClass .x-panel-header-title-default>.x-title-text-default  {
    text-transform: none;
    padding: 0 2px 1px;
    font: bold 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
.customParentClass > .x-form-spinner-default {
    background: none !important;
    /* background: url(images/form/checkbox.gif) no-repeat; */
}

.customInfoPopUps::before {
    color: #47a0c6;
}

.customWarningPopUps::before {
    color: goldenrod;
}

.customQuestionPopUps::before {
    color: #ff0000;
}
.addBorderUploadCls {
    border-width :1px !important;
    border-style: solid !important;
    border-color: #b5b8c8;
    border-radius: 5px !important;
}
.testCls {
    padding: 0px !important;
    color: #b5b8c8 !important;
}
.removeCaret::before {
    content: '' !important;
}
.formTitleCls .x-form-invalid-field-default {
     border-bottom-right-radius: 0px !important;
}
/*.triggerFieldNewFormPanelCls {
    border-bottom-right-radius: 0px !important;
}*/
/*.customParentClass > .x-form-text-default.x-form-text-file {
    border: 1px solid #b5b8c8!important;
}*/
/*.customParentClass > .x-form-checkbox-default {
    background: none !important;
}
.customParentClass > .x-form-radio-default {
    background: none !important;
}*/
.newFormWindowCls {
    color: black;
    background-color: #e8e8e8 !important;
    /*font: normal 12px/14px tahoma, arial, verdana, sans-serif !important;*/
}
.newFormWindowCls .x-window-default {
    background-color: #e8e8e8 !important;  /*rgb(232, 232, 232)*/
}
.newFormWindowCls .x-window-header {
    color: #333;
    font-size: 11px;
}
.newFormWindowCls .x-window-header-default-top {
    background-color: #e8e8e8 ;
}
.newFormWindowCls .x-window-header-title-default {
    color: #333;
    font-size: 11px;
    font-weight: bold;
    font-family: tahoma, arial, verdana, sans-serif;
    line-height: 15px;
    background-color: rgba(0, 0, 0, 0) !important;
}
.newFormWindowCls .x-tool-img {
    background-image: url(images/tool-sprites.gif) !important;
}
.newFormWindowCls .x-tool-close:before {
    font:''!important;;
    background-image:url(images/tool-sprites.gif) !important;
    content: '' !important;
}
.newFormWindowCls .x-form-item-label-default {
    color: #000 !important;
    font: normal 12px/14px tahoma, arial, verdana, sans-serif !important;
    min-height: 22px !important;
    padding-top: 4px !important;
    padding-right: 5px !important;
}
.newFormWindowCls .x-form-item-body-default {
    min-height: 22px !important;
}
.newFormWindowCls .x-form-text-default {
    border-radius: unset;
    color: #000 !important;
    padding: 1px 3px 2px !important;
    background-color: #fff !important;
    background-image: url(images/text-bg.gif) !important;
    font: normal 12px/17px tahoma, arial, verdana, sans-serif !important;
    min-height: 20px !important;
}
.newFormWindowCls .x-form-checkbox-default {
    background: url(images/checkbox.gif) no-repeat;
}
.newFormWindowCls .x-form-checkbox-default:before {
    content: '';
}
.newFormWindowCls .x-form-cb-checked .x-form-checkbox-default {
    background-position: 0 -13px;
}
.newFormWindowCls .x-form-cb-checked .x-form-checkbox-default:before {
    content: '';
}
.newFormWindowCls .x-form-radio-default {
    background: url(images/radio.gif) no-repeat;
}
.newFormWindowCls .x-form-radio-default:before {
    content: '' !important;
}
.newFormWindowCls .x-form-trigger-default {
    border-radius: unset;
    width: 17px;
    background: 0 0 transparent url(images/trigger.gif) no-repeat;
    border-width: 0 0 1px;
    border-color: #b5b8c8;
    border-style: solid
}
.newFormWindowCls .x-form-trigger-default:before {
    content: '' !important;
}
.newFormWindowCls .x-form-title-trigger {
    background-image: url("images/title-trigger.gif");
    background-repeat:no-repeat;
}
.newFormWindowCls .x-form-trigger-wrap {
    display: table;
    width: 100%;
    border: none;
}
.newFormWindowCls .x-form-text-wrap-default {
    border-radius: unset;
    border-width: 1px;
    border-style: solid;
    border-color: #b5b8c8
}
.newFormWindowCls .x-form-cb-wrap-default {
    height: 22px;
    min-width: 13px
}
.newFormWindowCls .x-form-cb-default {
    margin-top: 5px;
}
.newFormWindowCls .x-tool-collapse-right {
    background-image: none !important;
}
.newFormWindowCls .x-tool-collapse-right:before {
    content: '\f0da' !important;
    background-image: none;
}
/* Font style for dropdown items */
.custom-combobox-font-style .x-boundlist-item {
    font: normal 12px / 17px tahoma, arial, verdana, sans-serif !important;
}
.gridNewFormCls .x-panel-header-title-default{
    font: bold 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.gridNewFormCls .x-btn-inner-default-toolbar-small {
    font: normal 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    color: #333;
    padding: 0 4px;
    max-width: 100%
}
.gridNewFormCls .x-column-header-text-inner {
    font: normal 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    background-repeat: no-repeat;
}
.assignUserTextfieldBorder {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.assignUserListWrap {
    /*margin-top: 23px;*/
    padding-top: 23px;
}
.propertyTabPanelCls .x-form-trigger-wrap-invalid .x-form-trigger-default{
    color: black;
    background-image: url(../js/lib/extjs7/build/classic/theme-gray/resources/images/grid/invalid_line.gif) !important;
    background-repeat: repeat-x !important;
    background-position: bottom !important;
    vertical-align: middle;
}
.propertyTabPanelCls .x-form-text-wrap-default {
    border-radius: unset;
}
.propertyPanelDockedItemsCls .x-btn-inner-default-toolbar-small{
    font: normal 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
.propertyPanelDockedItemsCls .x-btn-inner-default-small{
    font: normal 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
/*.propertyTabPanelCls .x-form-trigger-wrap-invalid .x-form-invalid-field-default .x-form-text-default {
    border-radius: unset;
}*/
/*font: normal 13px/14px "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;*/

.approveSpecCls {
    color: #008000 !important;
    font-size: 15px !important;
    line-height: 10px !important;
}

.partialApproveSpecCls {
    color: #F2AF32 !important;
    font-size: 15px !important;
    line-height: 10px !important;
}

.unapproveSpecCls {
    color: #959596 !important;
    font-size: 15px !important;
    line-height: 10px !important;
}

.approvedSpecDisabledCls {
    border-color: transparent           !important;
    opacity: 1                          !important;
}

.approvedSpecIconCls {
    color: #008000 !important;
}

.approvedSpecDisabledCls .x-btn-inner {
    color: #333         !important;
}

.checkboxCell {
    vertical-align: middle  !important;
}
.checkboxCell .x-grid-cell-inner {
    display: contents  !important;
}

.button-icon-color {
    color: #313130 !important;
}

.fa-arrow-right::before {
    color: #313130 !important;
    text-align: center !important;
}

.x-grid-with-row-lines .x-grid-item {
    border-width: 0px 1px 1px 0px !important;
    /*border-style: none !important;*/
}

.regCheckboxCls {
    font:14.3px/1 'Font Awesome 5 Free Regular' !important;
    /*color: #b5b8c8 !important;*/
}

.iconOpacity{
    opacity: 0.5
}

.fa-copy::before {
    font-family: 'Font Awesome 5 Free Regular' !important;
}

.newFormWindowCls .x-form-spinner-default {
    background-image: url(../js/lib/extjs7/build/classic/theme-gray/resources/images/form/spinner.gif);
    background-color: #fff;
    width: 17px;
    height: 11px;
}
.newFormWindowCls .x-form-spinner-up-default:before {
    content: '';
}
.newFormWindowCls .x-form-spinner-down-default:before {
    content: '';
}

.newFormWindowCls .x-form-spinner-down-default {
    background-position: 0 -11px !important;  
}
.newFormWindowCls .x-form-spinner-up-default {
    background-position: 0 0 !important;  
}
.newFormWindowCls .x-form-spinner-down-default.x-form-spinner.x-form-spinner-click {
    background-position: -34px -11px !important;
}
.newFormWindowCls .x-form-spinner-up-default.x-form-spinner.x-form-spinner-click {
    background-position: -34px 0 !important;
}

.customParentClass .x-form-item-label-default.x-form-item-label-top-side-error:after {
    width: 0px     !important;
}

.newFormHtmlFontCls .x-form-item-body-default {
    min-height: 22px !important;
}
.newFormHtmlFontCls .x-form-text-default {
    color: #000 !important;
    background-color: #fff !important;
    font: normal 12px/17px tahoma, arial, verdana, sans-serif !important;
    max-height: 20px !important;
    min-height: 20px !important;
}
.newFormHtmlFontCls .x-form-trigger-default {
    line-height: 22px;
    width: 17px;
}
.newFormHtmlFontCls .x-form-trigger-wrap {
    max-height: 22px;
    display: flex;
    width: 100%;
}
.newFormHtmlFontCls .x-form-text-wrap-default {
    width: 130px;
}

/*.listPadding {
    width: 18px !important;
    padding: 5px 15px 10px  20px !important;
}*/

@font-face {
  font-family: 'opalfont';
  src:  url('opal-fonts/opal-ftp.eot?c2162h');
  src:  url('opal-fonts/opal-ftp.eot?c2162h#iefix') format('embedded-opentype'),
    url('opal-fonts/opal-ftp.ttf?c2162h') format('truetype'),
    url('opal-fonts/opal-ftp.woff?c2162h') format('woff'),
    url('opal-fonts/opal-ftp.svg?c2162h#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'opalfont' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ftp-icon-padding {
    padding-top: 7px !important;
    color: #313130 !important;
}

.delete-option-padding {
    padding-top: 1px;
    color: #313130 !important;
}

.x-datepicker-month .x-btn-over {
    background: transparent !important;
    border-color: transparent !important;
}


.forms2AddTabIcon {
    padding: 2px 6px 0px 0px;
}

.disabledMilestoneEditIcon {
    color: gray !important;
}

.checkboxCell .x-grid-checkheader-checked:before, .x-grid-checkheader-checked {
    content: '\f14a' !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    display: block;
    height: 14px;
    color: black !important;
    background-image: none !important;
    vertical-align: middle  !important;
}

.checkboxCell .x-grid-checkheader:before, .x-grid-checkheader {
    content: "\f0c8";
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    display: block;
    color: black !important;
    height: 14px;
    background-position: 50% -2px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: none !important;
    vertical-align: middle  !important;
}

.checkboxCell .x-grid-checkheader-disabled:before, .x-grid-checkheader-disabled {
    content: "\f0c8" !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    display: block;
    color: #b5b8c8 !important;
    height: 14px;
    background-position: 50% -0px;
    background-image: none !important;
    vertical-align: middle  !important;
}

.fa-square::before {
    content: "\f0c8" !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    display: block;
    color: black !important;
    height: 14px;
    background-position: 50% -2px;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    background-image: none !important;
    vertical-align: middle  !important;
}

.fa-check-square::before{
    content: '\f14a' !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    display: block;
    height: 14px;
    color: black !important;
    background-image: none !important;
    vertical-align: middle  !important;
    background-position: 50% -2px;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

.x-form-cb-checked .x-form-checkbox-default:before, .x-form-cb-checked .x-form-checkbox-default {
    content: '\f14a' !important;
    background: none !important;
    background-image: none !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular';
    color: black !important;
}

.x-form-checkbox-default:before, .x-form-checkbox-default {
    content: "\f0c8" !important;
    background: none !important;
    background-image: none !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular';
    color: black !important;
}

.form-checkbox-checkbox-customCls::before {
    color: rgb(204, 51, 0) !important;
}

.new-grid-header-checkbox .x-column-header-checkbox .x-column-header-checkbox:after, .x-grid-checkcolumn:after {
    /*content: "\f0c8";*/
    content: "\f0c8" !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular';
    color: black !important;
    background-image: none;
    /*display: block;*/
}

.x-grid-checkcolumn-checked::after, .x-grid-item-selected .x-selmodel-column .x-grid-checkcolumn::after {
    content: '\f14a' !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular';
    color: black !important;
    background-image: none;
    /*display: block;*/
}

.x-column-header-checkbox .x-column-header-checkbox:after {
    content: "\f0c8" ;
    font: 15px/1 'Font Awesome 5 Free Regular';
    color: black ;
    background: none ;
    background-image: none;
}

.x-grid-hd-checker-on .x-column-header-checkbox:after {
    content: '\f14a' !important;
    font: 15px/1 'Font Awesome 5 Free Regular';
    color: black ;
    background-image: none;
}

.x-keyboard-mode .x-grid-checkcolumn-cell-inner :focus {
    outline : none !important;
}

.x-menu-item-unchecked .x-menu-item-icon-default.x-menu-item-checkbox:before, .x-menu-item-unchecked .x-menu-item-icon-default.x-menu-item-checkbox {
    content: "\f0c8" !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    color: black !important;
    background: none !important;
    background-image: none !important;
}

.x-menu-item-checked .x-menu-item-icon-default.x-menu-item-checkbox:before, .x-menu-item-checked .x-menu-item-icon-default.x-menu-item-checkbox {
    content: '\f14a' !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    color: black !important;
    background: none !important;
    background-image: none !important;
}
.content-mgmt-window-cls{
    top:12.50% !important;   
}

.form-radio-task-delegation, .form-radio-task-delegation:before{
    /*font: 15px/1 'Font Awesome 5 Free Regular';*/
    font: 13px/1 'Font Awesome 5 Free Regular' !important;
    color: black !important;
    content: '\f192' !important;
    background: none !important;
}

.x-item-disabled .x-form-checkbox-default::before {
    content: "\f0c8" !important;
    font: 14.3px/1 'Font Awesome 5 Free Regular' !important;
    color: #b5b8c8 !important;
    background-position: 50% -0px;
    background-image: none !important;
}
.x-grid-group-hd-collapsed .x-grid-group-title{
    background-image:url('../js/lib/extjs7/build/classic/theme-gray/resources/images/tree/arrows.gif') !important;
    background : no-repeat;
    background-position: -4px -5px !important;
}

 .x-grid-group-title {
    background-image:url('../js/lib/extjs7/build/classic/theme-gray/resources/images/tree/arrows.gif') !important;
    background : no-repeat;
    background-position: -21px -5px !important;    
}

.BP-Column_header .x-column-header-text-inner{
   margin-left: 3.5px !important;
}
.bpgrid{
    margin-left:10px;
}
.BP-Column_header_total  {
    text-align: right !important;
   
}
.BP-Column_header_total .x-column-header-text-inner{
     margin-right: 15px !important;
}

.welcomeDashboardCls .x-panel-header-title-default {
    font: normal 12px/13px arial, helvetica, tahoma, verdana, sans-serif;
    font-weight: bold;
}
.welcomeDashboardCls .new-grid .x-column-header {
    font: normal 12px/13px arial, helvetica, tahoma, verdana, sans-serif;
}
.welcomeDashboardCls .x-grid-group-title {
    font: bold 12px/13px Arial Bold, helvetica, tahoma, verdana, sans-serif;
}
.welcomeDashboardCls .new-grid .x-grid-item {
    font: normal 12px/13px arial, helvetica, tahoma, verdana, sans-serif;
}
.welcomeDashboardCls .x-btn-inner-default-toolbar-small {
    font: normal 12px/16px arial, helvetica, tahoma, verdana, sans-serif;
}
.welcomeDashboardCls .x-form-cb-label-default {
    font: normal 12px/14px arial, helvetica, tahoma, verdana, sans-serif;
}
/*.new-grid .x-tool-collapse-left {
  background-image:none !important;
  font: 12px/1 FontAwesome;
}
.new-grid .x-tool-collapse-left:before{
    content: “\f2ea” !important;
 }*/
.welcomeDashboardCls .x-tool-img {
    background-image: none;
}
.welcomeDashboardCls .x-tool-collapse-left:before {
  background-image: none !important;
  content: '\f100' !important;
  font-family:'Font Awesome 5 Free';
  position: relative;
  font-size: 16px;
  height: 20px;
  width: 20px;
  text-align: center;
  vertical-align:middle;
  color: #616161;
}
.welcomeDashboardCls .x-tool-expand-right:before {
  content: '\f101' !important;
  font-family:'Font Awesome 5 Free';
  position: relative;
  font-size: 16px;
  height: 20px;
  width: 20px;
  text-align: center;
  vertical-align:middle;
  color: #616161;
}
.welcomeDashboardCls .x-grid-group-hd-collapsed .x-grid-group-hd-collapsible .x-grid-group-title{
    background: url(images/right.svg) no-repeat -25px -3px !important;
    color: #3B3B3B;
    height: 20px;
}
.welcomeDashboardCls .x-grid-group-hd-collapsible .x-grid-group-title {
    background: url(images/down.svg) no-repeat -25px -3px !important;
    color: #3B3B3B;
    height: 20px;
}
.welcomeDashboardCls .x-grid-group-hd {
    border-width: 0 0 1px 0;
}
.welcomeDashboardCls .x-toolbar-text-default {
    font: normal 12px/16px arial, helvetica, tahoma, verdana, sans-serif  !important;
}

.nutritionsTitle, .nutritionsFooter {
    position: relative;
    text-align: center;
    font-size: 20px;
    font-family: arial,helvetica,tahoma,verdana,sans-serif;
}

.nutritionsTitle {
    padding-top: 15px;
}

.nutritionsFooter {
    padding-top: 10px;
}

.nutrition-main-panel-container {
    padding: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.nutrition-panel-container {
    width:90px;
    height:160px;
    background-color:#eee;
    text-align:center;
    overflow:hidden;
    border-radius:100%/35px;
    margin-top:10px;
    font-size:12px;
    font-family:arial;
    border: 2px solid;
}

.nutrition-panel-container.no-left-border {
    border-left: 0px;
}

.nutrition-panel-title {
    display:flex;
    height:51px;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:bold;
}

.nutrition-panel-quantity {
    height:51px;
    align-items:center;
    justify-content:center;
    line-height:12px;
    font-size:16px;
}

.nutrition-panel-quantity-esub1 {
    /*position: relative;*/
    /*width: auto;*/
    /*height: auto;*/
    /*margin: 0 auto;*/
    padding-top: 10px;
}

.nutrition-panel-quantity-esub2 {
    padding-top:5px
}

.nutrition-panel-quantity-other {
    position: relative;
    width: auto;
    height: 51px;
    margin: 0 auto;
    padding-top: 15px;
    font-size:25px;
    font-weight:bold;
}

.nutrition-panel-percentage {
    display:flex;
    height:51px;
    align-items:center;
    justify-content:center;
    font-size:25px;
    border-top: 1px solid;
}

.nutrition-panel-percentage.other {
    font-weight:bold;
}

.custom-gray-header .x-column-header-inner {
    color: #808080 !important;
    font-style:italic !important;
}

.nutritionScore {
    /*background-color: #f1f0f0;*/
    display: inline-flex;
    width: 100%;
    padding: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.nutrition-score-panel-main {
    margin: 10px; 
/*    width: 200px;     /* Commented for 25% lesser size*//*
    height: 200px;*/    /* Commented for 25% lesser size*/
    width: 150px;       /* Added for 25% lesser size*/
    height: 150px;      /* Added for 25% lesser size*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    /*border-radius: 10px;*/
}

.nutrition-score-value-container {
    background-color: #FFB6C1;
    color: white;
    /*padding: 10px;*/      /* Commented for 25% lesser size*/
    padding: 1px;           /* Added for 25% lesser size*/
    /*font-size: 40px;*/    /* Commented for 25% lesser size*/
    font-size: 30px;        /* Added for 25% lesser size*/
    width: 150px;           /* Added for 25% lesser size*/
    height: 100px;          /* Added for 25% lesser size*/
    /*border-radius: 10px;*/
}

.nutrition-score-name-container {
    /*padding: 10px;*/      /* Commented for 25% lesser size*/
    padding: 5px;           /* Added for 25% lesser size*/
    background-color: white;
    width: 150px;           /* Added for 25% lesser size*/
    height: 50px;           /* Added for 25% lesser size*/
}

.nutrition-score-footer {
    position: relative;
    text-align: center;
    font-size: 20px;
    font-family: arial,helvetica,tahoma,verdana,sans-serif;
    padding-top: 10px;
    padding-bottom: 20px;
}

/* OPALDEV: 822 */
.x-tip {
    word-wrap: break-word; 
}

.x-btn-icon-el-default-small {
    width: 15px;
    height: 15px;
    font-size: 10px;
}

.comment-approver-win {
    z-index: 26000 !important;
}

.fa.fa-save_custom.x-btn-icon-el-default-small {
    width: 15px;
    height: 15px;
    font-size: 15px;
}
.detailsPanelWL-old .x-panel-body-default{
    background-color: #EFEFEF !important;
}




.llm-window {
    /*border-radius: 12px;*/
    overflow: hidden;
}

.llm-window .x-form-item-label-default, .llm-window .x-form-text-default {
    font: normal 12px/14px arial, tahoma, verdana, sans-serif;
}

.llm-response-panel {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #b5b8c8;
    padding: 10px;
}

.llm-system-prompt .x-form-text-wrap-default {
    border-radius: 8px !important;
}

.llm-system-prompt .x-form-item-label-text {
    font-family: arial, tahoma, verdana, sans-serif;
}

.llm-user-prompt .x-form-text-wrap-default {
    border-radius: 8px !important;
    
}

.llm-user-prompt .x-form-text-default {
    padding-left: 10px;
    padding-right: 10px;
    background-image: none;
}

.llm-thinking-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #555;
}

/*Send button styling*/ 
.llm-send-button.x-btn-default-small, .llm-send-button.x-btn-focus.x-btn-default-small{
    border-radius: 20px;
    padding: 0 18px;
    background-image: none;
/*    background-color: #48A2AE;
    border-color: #48A2AE;*/
    background-color: #474747;
    border-color: #474747;
    color: white;
}

.llm-send-button.x-btn-default-small.x-btn-over .x-btn-inner-default-small, .llm-send-button.x-btn-focus.x-btn-default-small {
    color: white;
    border-color: white;
}

.llm-send-button .x-btn-inner-default-small {
    font: normal 16px/16px arial, tahoma, verdana, sans-serif;
}

/* Spinner circle */
.llm-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: rgba(0,0,0,0.6);
    animation: llm-spin 0.8s linear infinite;
}

/* "Thinking..." pulsing text */
.llm-thinking-text {
    animation: llm-pulse 1.2s ease-in-out infinite;
}

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

@keyframes llm-pulse {
    0%   { opacity: 0.3; }
    50%  { opacity: 1; }
    100% { opacity: 0.3; }
}


.llmCombobox .x-form-text-default {
   background-image: none;
}
.llmCombobox .x-form-text-wrap-default{
   border-radius: 5px; 
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
   border-right-width: 0px;
}
.llmCombobox .x-form-trigger-default{
   border-radius: 5px; 
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px; 
   background: none;
   padding-top: 14px;
   border-width: 1px;
   border-left-width: 0px;
   background-color: white;
}

.llmCombobox .x-form-trigger-default:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 400; 
    content: "\f0d7";
    color: #6a6a6a;
}

.llm-system-prompt .x-form-text-default {
    padding: 7px;
    background-image: none;
}

.llm-window .x-tool-img {
    background-image: none;
    background-color: transparent;
    color: white;
}

.llm-window .x-tool-img.x-tool-close:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d"; 
}

.llm-window .x-window-header-default-top {
    background-color: #474747;
    box-shadow: none;
    /*border-color: transparent;*/
    padding: 2px 10px 1px 10px;
}

.llm-window .x-window-header-title-default > .x-title-text-default {
    color: white;
}

.llm-window .x-tool-img.x-tool-close:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d"; 
}

.llm-window .x-tool-img.x-tool-collapse-left:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f100"; 
  color: #958383;
}

.llm-window .x-tool-img.x-tool-expand-right:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f101"; 
  color: #958383;
}

.llm-window .x-panel-header-default {
    background-color: #474747;
    background-image: none;
}

.llm-window .x-panel-header-default, .llm-window-panel .x-panel-header-default-left {
    background-color: #E9E9EC;
    background-image: none;
    font: normal 12px/13px arial, helvetica, tahoma, verdana, sans-serif;
    padding-left: 10px;     
}

 

.llm-window .x-window-header-title-default {
    font: bold 12px/13px arial, tahoma, verdana, sans-serif;
}

.llm-window-panel .x-panel-header-title-default > .x-title-text-default, .llm-window-panel .x-panel-header-default-left {
    font: normal 12px/13px arial, tahoma, verdana, sans-serif;
}


.sendbutton-icon-padding {
    padding-right: 2px;
    font-size: 18px;
    padding-top: 2px;
    color: white;
}

.llm-send-button.x-btn-default-small.x-btn-over .sendbutton-icon-padding {
    color: #48A2AE;
}

.llmFieldLabelBoldCls {
    font-weight: bold;
    padding-bottom: 10px;
}

/* main container */
.x-slider.modern-slider,
.modern-slider.x-slider {
    background: transparent;
    padding: 0 6px;               /* little horizontal padding */
}

/* track / rail */
.modern-slider .x-slider-inner {
    height: 3px !important;
    /*border-radius: 3px !important;*/
    background-color: #ababab !important;
    /*border: 1px solid #d0d0d0 !important;*/
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}

/* thumb */
.modern-slider .x-slider-thumb {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #8b8b8b !important;
/*    border: 0px solid #ffffff !important;*/
    box-shadow: 0 0 0 2px #ababab;     /* colored ring */
    transform: translateY(-30%) translateY(-2px); 
}

/* hover / focus state */
.modern-slider .x-slider-thumb-over,
.modern-slider .x-slider-thumb-dragging {
    box-shadow: 0 0 0 3px #878787;
}

/* remove classic sprite background */
.modern-slider .x-slider-thumb:before,
.modern-slider .x-slider-thumb:after {
    background: none !important;
}

.modern-slider .x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner {
    background-image: none;
    /*background-color: #e0e0e0;*/
    border-radius: 3px !important;
    background: linear-gradient(to right, #ababab 0%, #ababab 50%, #e0e0e0 50%, #e0e0e0 100%);
}

.prompt-wrap { display: flex; flex-direction: column; gap: 10px; }

.prompt-item{
  padding: 12px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.prompt-item-hover,
.prompt-item:hover{
  background: #f3f1f1;
  border-color: #cbd5e1;
}

.prompt-title{
  font-weight: 600;
  margin-bottom: 6px;
}

.prompt-value{
  opacity: 0.85;
  line-height: 1.3;
}

.llm-stream-answer { 
	color:#222;
	font-size:13px; 
	line-height: 1.6; 
	 font-family: arial, tahoma, verdana, sans-serif;
}

.llm-stream-answer p {
    margin: 0 0 12px 0;
}

.llm-stream-answer p:last-child {
    margin-bottom: 0;
}

/*
.llm-number {
    color: #0288D1;
    font-weight: 600;
}*/

/* Regular numbers - subtle blue */
.llm-number {
    color: #1976D2;
    font-weight: 600;
}

/* Numbers with units (e.g., "9 tasks", "2 days") */
.llm-metric {
    background: #E3F2FD;
    color: #1565C0;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    white-space: nowrap;
}

/*.llm-metric {
    color: #1976D2;
    font-weight: 500;
}*/


/* Date/timing information*/
/*.llm-date-info {
    background: #FFF3E0;
    color: #E65100;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}*/

.llm-date-info {
    color: #F57C00;
    font-weight: 500;
    padding: 2px 6px;
    background-color: rgba(245, 124, 0, 0.1);
    border-radius: 4px;
}

.llm-date-info.late {
    color: #D32F2F;  /* Red */
    background-color: rgba(211, 47, 47, 0.1);  /* Light red */
}

/* Timing keywords  */
/*.llm-timing {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 500;
}*/

.llm-timing {
    color: #00897B;
    font-weight: 500;
    padding: 2px 6px;
    background-color: rgba(0, 137, 123, 0.1);
    border-radius: 4px;
}

.llm-timing.late {
    color: #D32F2F;  /* Red */
    background-color: rgba(211, 47, 47, 0.1);  /* Light red */
}



/* Person names */
.llm-name {
    color: #7B1FA2;
    font-weight: 600;
}

/* Role titles*/
.llm-role {
    color: #00897B;
    font-weight: 600;
}

/* Bold text from markdown - keep your existing strong style enhanced */
.llm-bold {
    color: #222;
    font-weight: 700;
}

.llm-stream-answer.streaming::after {
    content: '▋';
    animation: llm-blink 1s infinite;
    color: #1976D2;
    margin-left: 2px;
}

@keyframes llm-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.llm-stream-status { color:#666; font-size:12px; margin-bottom:8px; }
.llm-stream-status-line { color:#666; font-size:12px; margin:2px 0; margin-bottom:4px;}

.llm-stream-metrics { margin-top:10px; padding-top:8px; border-top:1px solid #eee; color:#666; font-size:12px; }
.llm-metrics-footer {
  margin-top: 10px;
  padding: 8px 10px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 12px;
 
}

.llm-metrics-inner {
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-stream-answer strong { font-weight: 700; }

.mu-uploader-dialog.x-window {
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10) !important;
    border: none !important;
}

.mu-uploader-dialog .x-window-header {
    border-bottom: none !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Title container — push it to the left */
.mu-uploader-dialog .x-window-header-text-container {
    flex: 1 !important;
    text-align: left !important;
}

.mu-uploader-dialog .x-window-header-title-default {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    font-family: arial,'Segoe UI', system-ui, -apple-system, sans-serif;
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}

.mu-uploader-dialog .x-window-header-title-default::before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    content: '\f382';
    margin-right: 8px;
    opacity: 0.85;
    font-size: 13px;
}


.mu-uploader-dialog .x-tool-close {
    background: transparent !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: background 0.2s !important;
    overflow: visible !important;
}

/* Hide the default ExtJS tool sprite */
.mu-uploader-dialog .x-tool-close .x-tool-img,
.mu-uploader-dialog .x-tool-close-over .x-tool-img {
    background-image: none !important;
    display: none !important;
}

/* Inject FA icon via ::before */
.mu-uploader-dialog .x-tool-close::before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    content: '\f00d' !important;   /* fa-xmark */
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
    display: block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

.mu-uploader-dialog .x-tool-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.mu-uploader-dialog .x-tool-close:hover::before {
    color: #ffffff !important;
}

.mu-uploader-dialog .x-window-body {
    background: #f7f8fc !important;
    border: none !important;
}

/* Style the file input field */
.mu-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mu-file-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    color: #6b7280;
}

.mu-file-name {
    font-weight: 500;
    color: #1a1f36;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.mu-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mu-status-badge.pending   { background: #f1f3f9; color: #8b93a7; }
.mu-status-badge.uploading { background: #e8f0fe; color: #3b5bdb; animation: mu-pulse 1.4s ease-in-out infinite; }
.mu-status-badge.success   { background: #e6f9f0; color: #1a9e5c; }
.mu-status-badge.error     { background: #fef0ef; color: #d63031; }
.mu-status-badge.invalid   { background: #fff4e5; color: #d48806; }

@keyframes mu-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* ═══════════════════════════════════════════════════════
   PROGRESS COLUMN
═══════════════════════════════════════════════════════ */

.mu-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mu-progress-track {
    flex: 1;
    height: 7px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}

.mu-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #4776e6, #8e54e9);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mu-progress-pct {
    font-size: 11px;
    font-weight: 700;
    color: #3b5bdb;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.mu-error-msg {
    font-size: 11px;
    color: #d63031;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.mu-error-msg i {
    margin-right: 5px;
}

.mu-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #1a9e5c;
}

.mu-queued-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #8b93a7;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   BOTTOM BAR
═══════════════════════════════════════════════════════ */

.mu-uploader-grid .x-toolbar-default {
   /* background: #ffffff !important;*/
    border: 1px solid #e8ecf3 !important;
    padding: 6px 10px !important;
   /* border-radius: 0 0 16px 16px !important;*/
}

.mu-uploader-counter {
    line-height: 28px;
    font-size: 12px;
    padding: 0 2px;
}

.mu-counter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 6px;
    vertical-align: middle;
}

.mu-counter-chip.total     { background: #c7c5c5; color: #1a1f36; }
.mu-counter-chip.completed { background: #e6f9f0; color: #1a9e5c; }
.mu-counter-chip.failed    { background: #fef0ef; color: #d63031; }

/* Toolbar action buttons */
/*.mu-uploader-dialog .x-btn-default-small,
.mu-uploader-dialog .x-btn-default-toolbar-small {
    border-radius: 8px !important;
    border: 1px solid #d8dce8 !important;
    background: #fff !important;
    color: #1a1f36 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

.mu-uploader-dialog .x-btn-default-small:hover,
.mu-uploader-dialog .x-btn-default-toolbar-small:hover {
    background: #f0f4ff !important;
    box-shadow: 0 2px 8px rgba(71, 118, 230, 0.14) !important;
    border-color: #4776e6 !important;
    color: #4776e6 !important;
}*/

/* ═══════════════════════════════════════════════════════
   DROP ZONE OVERLAY
═══════════════════════════════════════════════════════ */

.x-panel > .x-panel-body-default {
    position: relative;
}

.mu-uploader-drop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2.5px dashed transparent;
    border-radius: 12px;
    transition: border-color 0.2s, background 0.2s;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mu-uploader-drop-overlay.mu-uploader-drop-active {
    border-color: #4776e6;
    background: rgba(71, 118, 230, 0.06);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.mu-uploader-drop-overlay-inner {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #4776e6;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    padding: 24px 48px;
    box-shadow: 0 8px 32px rgba(71, 118, 230, 0.16);
    border: 1.5px solid rgba(71, 118, 230, 0.18);
}

.mu-uploader-drop-overlay.mu-uploader-drop-active .mu-uploader-drop-overlay-inner {
    display: flex;
}

.mu-uploader-drop-icon {
    font-size: 34px;
    animation: mu-bounce 0.65s ease infinite alternate;
}

.mu-uploader-drop-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

@keyframes mu-bounce {
    from { transform: translateY(0);    }
    to   { transform: translateY(-7px); }
}

.mu-uploader-dialog .mu-btn-start.x-btn-disabled {
    opacity: 0.5 !important;
}

/* ============================================================
   AIFloatBubblePanel — scoped styles
   All selectors prefixed with .x-float-bubble or .x-bubble-*
   ============================================================ */

/* ── CSS custom property defaults ───────────────────────────*/
.x-float-bubble {
    --xfb-panel-bg     : #ffffff;
    --xfb-panel-border : #e2e8f0;
    --xfb-text-primary : #1e293b;
    --xfb-text-muted   : #94a3b8;
    --xfb-accent       : #4a6cf7;
    --xfb-chip-bg      : #f8fafc;
    --xfb-chip-border  : #e2e8f0;
    --xfb-result-bg    : #f8fafc;
}

/* ── Panel shell ─────────────────────────────────────────── */
.x-float-bubble {
    background    : var(--xfb-panel-bg) !important;
    border        : 1px solid var(--xfb-panel-border) !important;
    border-radius : 16px !important;
    box-shadow    : 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05) !important;
    overflow      : hidden !important;
    transition    : width .32s cubic-bezier(.4,0,.2,1),
                    border-radius .32s cubic-bezier(.4,0,.2,1) !important;
}

/* ── Collapsed circle ────────────────────────────────────── */
.x-float-bubble.is-collapsed-circle {
    border-radius : 50% !important;
    width         : 56px !important;
    height        : 56px !important;
    min-height    : 56px !important;
    max-height    : 56px !important;
    overflow      : visible !important;
    padding       : 0 !important;
}

/* ── Readiness rings ──────────────────────────────────────────
   A constant-colour static ring for all four states, plus a
   rotating spinner arc (via ::after) layered on top for the two
   states that represent an in-flight AJAX call actively waiting
   for a response — a rotating arc is the universally recognized
   "in progress" indicator, much clearer than a pulsing glow.

   Using transform:rotate() instead of box-shadow here also avoids
   the !important-vs-animation conflict that affected the previous
   pulse version: nothing else in this stylesheet sets `transform`
   with !important, so there's no competing declaration to fight.
   ─────────────────────────────────────────────────────────── */
.x-float-bubble.is-collapsed-circle.x-bubble-ring-checking {
    box-shadow : 0 0 0 2px #ef4444 !important;
}
.x-float-bubble.is-collapsed-circle.x-bubble-ring-error {
    box-shadow : 0 0 0 2px #ef4444 !important;
}
.x-float-bubble.is-collapsed-circle.x-bubble-ring-processing {
    box-shadow : 0 0 0 2px #f97316 !important;
}
.x-float-bubble.is-collapsed-circle.x-bubble-ring-ready {
    box-shadow : 0 0 0 2px #22c55e !important;
}

.x-float-bubble.is-collapsed-circle.x-bubble-ring-checking::after,
.x-float-bubble.is-collapsed-circle.x-bubble-ring-processing::after {
    content        : '';
    position       : absolute;
    top            : -5px;
    left           : -5px;
    right          : -5px;
    bottom         : -5px;
    border-radius  : 50%;
    border         : 2.5px solid transparent;
    animation      : xBubbleSpin 1.6s linear infinite;
    pointer-events : none;
}
.x-float-bubble.is-collapsed-circle.x-bubble-ring-checking::after {
    border-top-color   : #ef4444;
    border-right-color : #ef4444;
}
.x-float-bubble.is-collapsed-circle.x-bubble-ring-processing::after {
    border-top-color   : #f97316;
    border-right-color : #f97316;
}
@keyframes xBubbleSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Status label ────────────────────────────────────────── */
/* While collapsed, force every descendant to allow overflow too — ExtJS's
   layout machinery sometimes inserts its own wrapper elements between the
   panel and its children, and any one of them defaulting to
   overflow:hidden would clip this absolutely-positioned label even though
   the panel itself already allows overflow:visible. */
.x-float-bubble.is-collapsed-circle,
.x-float-bubble.is-collapsed-circle * {
    overflow : visible !important;
}
.x-float-bubble .x-bubble-status-label {
    /* Suppressed for now — JS still computes and writes the text/dot on
       every readiness state change (_setReadyState), so re-enabling this
       later (or wiring it to a different element entirely, as discussed)
       just needs this one rule removed/adjusted — no JS changes required. */
    display         : none !important;
    align-items     : center;
    justify-content : center;
    gap             : 5px;
    position        : absolute;
    bottom          : -22px;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 120px;
    white-space     : normal;
    pointer-events  : none;
}
.x-float-bubble .x-bubble-status-txt {
    font-size   : 10px;
    line-height : 1.25;
    color       : var(--xfb-text-muted);
    font-style  : italic;
    text-align  : center;
    min-width   : 0;
}
.x-float-bubble .x-bubble-status-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.x-float-bubble .x-bubble-status-dot-checking,
.x-float-bubble .x-bubble-status-dot-error     { background: #ef4444; }
.x-float-bubble .x-bubble-status-dot-ready     { background: #22c55e; }
.x-float-bubble .x-bubble-status-dot-processing {
    background: #f97316;
    animation : xBubbleDotPulse 1.4s ease-in-out infinite;
}
@keyframes xBubbleDotPulse {
    0%,100% { opacity: 1; } 50% { opacity: .3; }
}

/* ── Toggle / robot button ───────────────────────────────────
   Deliberately no animation here — only the collapsed-bubble
   ring (above) signals "waiting for a response". ─────────── */
.x-float-bubble .x-float-collapse-btn.x-btn {
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid var(--xfb-chip-border) !important;
    background: var(--xfb-chip-bg) !important;
    color: var(--xfb-accent) !important;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: none !important;
    transition: background .18s !important;
}
.x-float-bubble .x-float-collapse-btn.x-btn:hover { filter: brightness(.95); }

/* ── Search field ────────────────────────────────────────── */
.x-float-bubble .x-float-search .x-form-field,
.x-float-bubble .x-float-search input {
    box-sizing    : border-box !important;
    border        : 1px solid var(--xfb-chip-border) !important;
    border-radius : 20px !important;
    background    : var(--xfb-chip-bg) !important;
    color         : var(--xfb-text-primary) !important;
    font-size     : 12.5px !important;
    padding       : 0 12px !important;
    box-shadow    : none !important;
    transition    : border-color .18s !important;
}
.x-float-bubble .x-float-search .x-form-field:focus,
.x-float-bubble .x-float-search input:focus {
    border-color : var(--xfb-accent) !important;
}
.x-float-bubble .x-float-search .x-form-empty-field,
.x-float-bubble .x-float-search .x-form-field::placeholder,
.x-float-bubble .x-float-search input::placeholder { color: var(--xfb-text-muted) !important; }
.x-float-bubble .x-float-search.is-loading .x-form-field,
.x-float-bubble .x-float-search.is-loading input { opacity: .5; cursor: wait; }

/* ── Close button ────────────────────────────────────────── */
.x-float-bubble .x-float-close.x-btn {
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    border: 1px solid var(--xfb-chip-border) !important;
    background: var(--xfb-chip-bg) !important;
    color: var(--xfb-text-muted) !important;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: none !important;
    transition: filter .18s !important;
}
.x-float-bubble .x-float-close.x-btn:hover { filter: brightness(.92); color: #ef4444 !important; }

/* ── Tab bar ─────────────────────────────────────────────── */
.x-float-bubble .x-bubble-tabbar {
    border-bottom : 1px solid var(--xfb-chip-border);
    margin        : 10px 10px 0;
    gap           : 2px;
}
.x-float-bubble .x-bubble-tab.x-btn {
    flex: 1;
    box-sizing: border-box !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 5px 3px 6px !important; height: 46px !important;
    border: none !important; border-bottom: 2px solid transparent !important;
    border-radius: 0 !important; background: transparent !important;
    color: var(--xfb-text-muted) !important;
    font-weight: 500;
    margin-bottom: -1px; box-shadow: none !important;
    transition: color .18s, border-color .18s !important;
}
.x-float-bubble .x-bubble-tab.x-btn i,
.x-float-bubble .x-bubble-tab.x-btn .fas {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    padding-left: 15px;
}
.x-float-bubble .x-bubble-tab-label {
    font-size: 9.5px;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.x-float-bubble .x-bubble-tab.x-btn:hover    { color: var(--xfb-accent) !important; background: transparent !important; }
.x-float-bubble .x-bubble-tab.is-active.x-btn { color: var(--xfb-accent) !important; border-bottom: 2px solid var(--xfb-accent) !important; }

/* ── Tab body ────────────────────────────────────────────── */
.x-float-bubble .x-bubble-tab-body { padding: 10px !important; }

/* ── Collapsible prompts header ──────────────────────────── */
.x-float-bubble .x-bubble-prompts-hdr {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; margin-bottom: 6px; user-select: none;
}
.x-float-bubble .x-bubble-prompts-hdr:hover .x-bubble-section-lbl,
.x-float-bubble .x-bubble-prompts-hdr:hover .x-bubble-prompts-toggle { color: var(--xfb-accent); }
.x-float-bubble .x-bubble-section-lbl {
    font-size: 10px; color: var(--xfb-text-muted);
    letter-spacing: .06em; text-transform: uppercase; margin: 0; transition: color .18s;
}
.x-float-bubble .x-bubble-prompts-toggle { font-size: 9px; color: var(--xfb-text-muted); transition: color .18s; line-height: 1; }

/* ── Prompt chips ────────────────────────────────────────── */
.x-float-bubble .x-bubble-prompt-list { display: flex; flex-direction: column; gap: 5px; }
.x-float-bubble .x-bubble-chip {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 7px 11px;
    background: var(--xfb-chip-bg); border: 1px solid var(--xfb-chip-border);
    border-radius: 9px; color: var(--xfb-text-primary);
    font-size: 12.5px; font-family: inherit; cursor: pointer;
    transition: filter .16s;
}
.x-float-bubble .x-bubble-chip i,
.x-float-bubble .x-bubble-chip .fas {
    font-size: 13px; color: var(--xfb-accent);
    flex-shrink: 0; width: 16px; text-align: center; opacity: .65; transition: opacity .16s;
}
.x-float-bubble .x-bubble-chip:hover              { filter: brightness(.97); }
.x-float-bubble .x-bubble-chip:hover i,
.x-float-bubble .x-bubble-chip:hover .fas         { opacity: 1; }
.x-float-bubble .x-bubble-chip:active             { transform: scale(.98); }

/* ── Result area ─────────────────────────────────────────── */
.x-float-bubble .x-bubble-result-area {
    margin: 0px 10px 0 0px !important;
    background: var(--xfb-result-bg); border: 1px solid var(--xfb-chip-border);
    border-radius: 10px; padding: 10px 12px 12px !important; min-height: 48px;
}

/* ── Thinking indicator ──────────────────────────────────── */
.x-float-bubble .x-thinking { display: none; align-items: center; gap: 7px; padding: 2px 0 4px; }
.x-float-bubble .x-thinking.on { display: flex; }
.x-float-bubble .x-bubble-dots { display: flex; gap: 3px; }
.x-float-bubble .x-bubble-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--xfb-accent); opacity: .7; display: inline-block;
    animation: xBubbleBounce 1.2s infinite;
}
.x-float-bubble .x-bubble-dots span:nth-child(2) { animation-delay: .2s; }
.x-float-bubble .x-bubble-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes xBubbleBounce {
    0%,80%,100% { transform: translateY(0); opacity: .35; }
    40%          { transform: translateY(-4px); opacity: .9; }
}
.x-float-bubble .x-thinking-lbl { font-size: 11.5px; color: var(--xfb-accent); font-style: italic; }

/* ── Body text ───────────────────────────────────────────── */
.x-float-bubble .x-body-text { color: var(--xfb-text-primary); font-size: 13px; line-height: 1.65; }

/* ── Disclaimer footer ───────────────────────────────────── */
.x-float-bubble .x-bubble-disclaimer {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px 9px;
    border-top: 1px solid var(--xfb-chip-border);
    font-size: 10.5px; color: var(--xfb-text-muted); line-height: 1.4; font-style: italic;
}
.x-float-bubble .x-bubble-disclaimer i,
.x-float-bubble .x-bubble-disclaimer .fas { font-size: 11px; color: var(--xfb-accent); flex-shrink: 0; opacity: .7; }

/* ── Quick prompts hidden (showQuickPrompts: false) ─────────
   Single ancestor class hides the prompts header + chip list
   across all three tabs at once.                              */
.x-float-bubble.x-bubble-prompts-hidden .x-bubble-prompts-hdr,
.x-float-bubble.x-bubble-prompts-hidden .x-bubble-prompt-list {
    display : none !important;
}

/* ── Title label (showSearchField: false) ───────────────────
   Sits in the same flex slot as the search field, styled to
   look like a calm header title rather than an input.        */
.x-float-bubble .x-bubble-title-label {
    display       : flex;
    align-items   : center;
    height        : 34px;
    padding       : 0 12px;
    font-size     : 13px;
    font-weight   : 600;
    color         : var(--xfb-text-primary);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

/* ── Empty-state placeholder (showQuickPrompts: false) ──────
   Shown inside the active tab body in place of the quick-prompt
   chips, giving the panel a sensible minimum height instead of
   collapsing to a thin sliver when there's nothing else to show.

   Visibility is driven entirely by a single dedicated class,
   x-bubble-show-empty, toggled in JS by _updateEmptyState() —
   deliberately NOT derived from a combination of ancestor classes,
   to avoid CSS-specificity ordering bugs between multiple
   cascading selectors (that was the cause of a lingering gap
   above the result area in earlier versions of this rule).        */
.x-float-bubble .x-bubble-empty-state {
    display         : none;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    min-height      : 90px;
    padding         : 14px 20px;
    text-align      : center;
}

.x-float-bubble.x-bubble-show-empty .x-bubble-empty-state {
    display : flex;
}

.x-float-bubble .x-bubble-empty-state i {
    font-size : 22px;
    color     : var(--xfb-accent);
    opacity   : 0.3;
}

.x-float-bubble .x-bubble-empty-state span {
    font-size   : 11.5px;
    line-height : 1.4;
    color       : var(--xfb-text-muted);
    max-width   : 220px;
}

/* Safety net: once a result is showing with prompts hidden, the active
   tab body's own padding should also collapse to zero — otherwise its
   component-level padding alone can still leave a visible gap above the
   result area even though every child inside it is display:none.       */
.x-float-bubble.x-bubble-prompts-hidden:not(.x-bubble-show-empty) .x-bubble-tab-body {
    padding    : 0 !important;
    min-height : 0 !important;
}

/* ── AI response tables ──────────────────────────────────────
   Rendered from parsed markdown table syntax — see
   _buildTableHtml() in the JS file. Horizontal scroll on the
   wrapping result area handles tables wider than the panel.    */
.x-float-bubble .x-bubble-table {
    width           : 100%;
    border-collapse : collapse;
    margin          : 6px 0 10px;
    font-size       : 12px;
}

.x-float-bubble .x-bubble-table th,
.x-float-bubble .x-bubble-table td {
    border  : 1px solid var(--xfb-chip-border);
    padding : 5px 8px;
    text-align : left;
    vertical-align : top;
}

.x-float-bubble .x-bubble-table th {
    background  : var(--xfb-chip-bg);
    color       : var(--xfb-text-primary);
    font-weight : 600;
    white-space : nowrap;
}

.x-float-bubble .x-bubble-table td {
    color : var(--xfb-text-primary);
}

.x-float-bubble .x-bubble-table tr:nth-child(even) td {
    background : var(--xfb-result-bg);
}

/* ── Resize handle ───────────────────────────────────────────
   A subtle grab zone in the bottom-right corner of the expanded
   panel. Hidden when collapsed (is-collapsed-circle).
   The is-resizing class disables pointer-events on everything
   else inside the panel while a drag is in progress so text
   doesn't accidentally get selected.                          */
.x-float-bubble .x-bubble-resize-handle {
    position       : absolute;
    bottom         : 0;
    right          : 0;
    width          : 20px;
    height         : 20px;
    cursor         : se-resize;
    z-index        : 10;
    opacity        : 0;
    transition     : opacity .2s;
    /* Diagonal grip lines drawn with a gradient */
    background     : linear-gradient(
        135deg,
        transparent 30%,
        var(--xfb-chip-border) 30%, var(--xfb-chip-border) 40%,
        transparent 40%,
        transparent 55%,
        var(--xfb-chip-border) 55%, var(--xfb-chip-border) 65%,
        transparent 65%
    );
}

/* Show on hover of the panel, or while actively dragging */
.x-float-bubble:hover .x-bubble-resize-handle,
.x-float-bubble.is-resizing .x-bubble-resize-handle {
    opacity : 0.5;
}
.x-float-bubble.is-resizing .x-bubble-resize-handle {
    opacity : 0.9;
}

/* Hide completely when collapsed */
.x-float-bubble.is-collapsed-circle .x-bubble-resize-handle {
    display : none;
}

/* Disable transition during resize so the panel tracks the mouse instantly */
.x-float-bubble.is-resizing {
    transition  : none !important;
    user-select : none;
}