/* --------------------------------------------------------------------------------------
|	AUTHOR 		: Karthik. N                                                    |
|	COMPANY		: Agaram InfoTech Pvt. Ltd.,                                    |
|	LOCATION	: Chennai, Tamil Nadu, India.                                   |
|	DESCRIPTION	: This site is designed & developed by Agaram InfoTech (P) Ltd. |
|                         Contents are Subject to copyright. If you want to create      |
|                         websites mailto:info@agaraminfotech.com                    |
----------------------------------------------------------------------------------------- */
/* ------------------------------------ COMMON CSS STARTS -------------------------------- */
@font-face{
    font-family:'RobotoBold';
    src:url(../webfonts/Roboto-Bold-webfont.woff) format("woff");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:'RobotoReg';
    src:url(../webfonts/Roboto-Regular-webfont.woff) format("woff");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:'RobotoLight';
    src:url(../webfonts/Roboto-Light-webfont.woff) format("woff");
    font-weight:400;
    font-style:normal
}

.br-5,.inner-page-container .white,.network-status.white,.approval-notification,.login-container{-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px}
.tr-5,.secondary-tab a{-webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0}
.rr-5{-webkit-border-radius:0 5px 5px 0; -moz-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0}
.btr-5{-webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px}
.lr-5{-webkit-border-radius:5px 0 0 5px; -moz-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px}
.br-3,.workflow-summary, .dashboard-summary{-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px}
.tr-3{-webkit-border-radius:3px 3px 0 0; -moz-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0}
.rr-3,.file-upload-wrapper:after{-webkit-border-radius:0 3px 3px 0; -moz-border-radius:0 3px 3px 0; border-radius:0 3px 3px 0}
.btr-3{-webkit-border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px}
.lr-3{-webkit-border-radius:3px 0 0 3px; -moz-border-radius:3px 0 0 3px; border-radius:3px 0 0 3px}

*{margin:0; padding:0; font-family:RobotoReg, Arial, Helvetica, sans-serif; font-size:12px; white-space:normal;outline:none;}
.widget-filter > a, .widget-filter .filter-container > a,.action-btn a,.settings-trigger,.workflow-summary .workflow-title,.file-upload-wrapper:after{text-align:center;}
.p-datepicker table th,.p-dialog .p-dialog-footer{text-align:center !important;}
.txt-right,.dashboard-stats.white,.dashboard-stats.card,.invoice-list .editable .qty .p-inputtext{text-align:right}
.txt-left,.multiselect-parent .btn,.filter-container.workflow-filter .p-dropdown{text-align:left;}
.page-search{text-align:left !important;}

.wrapper,.wrapper *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}

ul,li{list-style:none; margin:0;}
a,a:active,a:hover,a:focus,img,input,textarea,button,button:focus{outline:0 none; text-decoration:none;}
a, a:hover,.table tbody tr > td,.p-toast-message-text{word-break:break-word;}
select:focus,.header-search input:focus{outline:0 none}
table{border-collapse:collapse; vertical-align:top; width:100%}
input,button{overflow:visible}
button,input[type="submit"],.attachment-lists a .close{cursor:pointer}
strong,b,b i{font-size:inherit; color:inherit; font-weight:400}
a{cursor:pointer;}
.product-thumb .col{cursor:move;padding:10px;max-width:20%}

.ease-in-out-transition,.toggle-btn,.toggle-btn i,.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper{-webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out}
.ease-transition,.dashboard-thumb,#cssmenu ul > li a .fa,.dropdown-menu.scale-up{-webkit-transition:all .1s ease; -moz-transition:all .1s ease; -o-transition:all .1s ease; transition:all .1s ease;}
.scale0{-webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); transform:scale(0)}
.scale1{-webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1)}
.scale2{-webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1)}
.workflow-details .linear-circle,.workflow-details.completed .linear-value{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.workflow-details.level01.completed .linear-circle,.workflow-details.level01.completed .linear-value,.workflow-details.rejected .linear-circle,.workflow-details.rejected .linear-value{transition-delay:0s;}

.progress-number-mark, .down-arrow{-moz-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.dropdown-menu.scale-up{-webkit-transform:scale(0);transform:scale(0);transform-origin:right 0;}
.show>.dropdown-menu.scale-up{transform:scale(1)!important;-webkit-transform:scale(1)!important;transform-origin:left 0;-webkit-transform-origin:left 0;}
.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper{transform:translateX(0px);}

.loader-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;}
@keyframes loader{15%{transform:translateX(0);}45%{transform:translateX(230px);}65%{transform:translateX(230px);}95%{transform:translateX(0);}}
.loader-txt:after{animation-name:loading-text;animation-duration:3s;animation-iteration-count:infinite;}
@keyframes loading-text{0%{content:"Loading";}25%{content:"Loading.";}50%{content:"Loading..";}75%{content:"Loading...";}}
.loader-dot:first-child{animation-delay:0.5s;}
.loader-dot:nth-child(2){animation-delay:0.4s;}
.loader-dot:nth-child(3){animation-delay:0.3s;}
.loader-dot:nth-child(4){animation-delay:0.2s;}
.loader-dot:nth-child(5){animation-delay:0.1s;}
.loader-dot:nth-child(6){animation-delay:0s;}
.icon-animated-bell{-moz-animation:ringing 2s 5 ease 1s; -webkit-animation:ringing 2s 5 ease 1s; -o-animation:ringing 2s 5 ease 1s; -ms-animation:ringing 2s 5 ease 1s; animation:ringing 2s 5 ease 1s; -moz-transform-origin:50% 0; -webkit-transform-origin:50% 0; -o-transform-origin:50% 0; -ms-transform-origin:50% 0; transform-origin:50%;}
@-moz-keyframes ringing{0%{-moz-transform:rotate(-15deg)}2%{-moz-transform:rotate(15deg)}4%{-moz-transform:rotate(-18deg)}6%{-moz-transform:rotate(18deg)}8%{-moz-transform:rotate(-22deg)}10%{-moz-transform:rotate(22deg)}12%{-moz-transform:rotate(-18deg)}14%{-moz-transform:rotate(18deg)}16%{-moz-transform:rotate(-12deg)}18%{-moz-transform:rotate(12deg)}20%{-moz-transform:rotate(0deg)}}@-webkit-keyframes ringing{0%{-webkit-transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg)}20%{-webkit-transform:rotate(0deg)}}@-ms-keyframes ringing{0%{-ms-transform:rotate(-15deg)}2%{-ms-transform:rotate(15deg)}4%{-ms-transform:rotate(-18deg)}6%{-ms-transform:rotate(18deg)}8%{-ms-transform:rotate(-22deg)}10%{-ms-transform:rotate(22deg)}12%{-ms-transform:rotate(-18deg)}14%{-ms-transform:rotate(18deg)}16%{-ms-transform:rotate(-12deg)}18%{-ms-transform:rotate(12deg)}20%{-ms-transform:rotate(0deg)}}@keyframes ringing{0%{transform:rotate(-15deg)}2%{transform:rotate(15deg)}4%{transform:rotate(-18deg)}6%{transform:rotate(18deg)}8%{transform:rotate(-22deg)}10%{transform:rotate(22deg)}12%{transform:rotate(-18deg)}14%{transform:rotate(18deg)}16%{transform:rotate(-12deg)}18%{transform:rotate(12deg)}20%{transform:rotate(0deg)}}.icon-animated-vertical{display:inline-block;-moz-animation:vertical 2s 5 ease 2s;-webkit-animation:vertical 2s 5 ease 2s;-o-animation:vertical 2s 5 ease 2s;-ms-animation:vertical 2s 5 ease 2s;animation:vertical 2s 5 ease 2s}


@-webkit-keyframes blinker{from {background-color:#e9f0ff} to {background-color:#fff;}}
@-moz-keyframes blinker{from {background-color:#e9f0ff} to {background-color:#fff;}}
@-ms-keyframes blinker{from {background-color:#e9f0ff} to {background-color:#fff;}}
@keyframes blinker{from {background-color:#e9f0ff} to {background-color:#fff;}}
.blink-row td{text-decoration:blink;animation-name:blinker;animation-duration:0.6s;animation-iteration-count:5;animation-timing-function:ease-in-out;animation-direction:alternate;}

.network-icon{-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

.quick-left .product-listing:before{background-color:rgba(58, 122, 254,.36);width:100%;height:100%;border-radius:50%;animation:ripple 0.7s infinite; }

  @keyframes ripple {
    0% {
      box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
    }
    100% {
      box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
    }
  }

.wizard-line{-webkit-transform:translateY(15px);transform:translateY(15px);}

.widget-filter .widget-popup,.header-right .dropdown-menu{box-shadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* Firefox */
input[type=number]{-moz-appearance:textfield;}

.page-loader,.apps-left,.apps-center,header,.bottom-fixed,.network-status,.approval-notification,.settings-trigger,.settings-container,.workflow-container,.quick-left .ftr,.quick-right .ftr{position:fixed;}
.header-search,.network-icon,.p-datatable .p-datatable-thead > tr > th.p-sortable-column,.main-tab a,.workflow-animation,.workflow-desc,.level-title,.page-title,.p-panelmenu .p-panelmenu-header > a,.file-upload-wrapper,.product-container,.toggle-btn,.attachment-lists a,.icon-animated-bell,.bullet01 li,.quick-invoice .product-listing,.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper{position:relative;}
.header-search i,.p-datatable .p-datatable-thead > tr > th.p-sortable-column p-sorticon,.network-close,.approval-close,.settings-container .overlay,.workflow-animation .linear-chart,.workflow-animation .linear-value,.workflow-animation .linear-circle,.p-panelmenu .p-panelmenu-header > a .pi,.file-upload-wrapper:before,.file-upload-wrapper:after,.file-upload-wrapper input,.product-container .action-btn,.toggle-btn .badges,.attachment-lists a .close,.bullet01 li i,.quick-invoice .product-listing .product-name,.quick-invoice .product-listing .product-qty,.quick-left .product-listing.select:before{position:absolute;}

.action-btn button:after,.action-btn a:after,.quick-left .product-listing.select:before{content:'';}
.loader-txt:after{content:'Loading';}
.file-upload-wrapper:before{content:attr(data-text);}
.custom-file-input:lang(en)~.custom-file-label::after{content:"\f002";}
.p-fileupload .pi-plus::before,.p-fileupload .pi-upload::before{content:"\e908";}
.file-upload-wrapper:after{content:"\f574"}

.p-tooltip,.p-toast{z-index:123456 !important;}
.settings-container{z-index:2000;}
.dropdown-menu{z-index:1500;}
.page-loader{z-index:1100;}
.apps-left,.network-status,.settings-container,.approval-notification,.settings-trigger,.settings-trigger.expand,.file-upload-wrapper input,.badges{z-index:5;}
.apps-center{z-index:4;}
header,.settings-container.expand{z-index:3;}
.page-container,.approval-notification.chat-window,.workflow-container,.linear-circle{z-index:2;}
/* .settings-container,.settings-trigger,.approval-notification{z-index:1;} */

.settings-trigger,.settings-container,.workflow-container{top:60px;}
.header-search i{top:9px;}
.network-icon{top:5px;}
.attachment-lists a .close,.bullet01 li i{top:3px;}
.page-loader,.apps-left,.apps-center,header,.network-close,.approval-close,.workflow-animation .linear-chart,.file-upload-wrapper:before,.file-upload-wrapper:after,.file-upload-wrapper input,.product-container .action-btn{top:0;}
.workflow-animation .linear-circle,.level-title,.toggle-btn .badges{top:-5px;}

.settings-container.expand .overlay,.settings-trigger.expand{right:250px;}
.title-panel{right:110px;}
.p-input-icon-right > i:last-of-type{right:35px !important;}
.network-status,.network-close,.approval-close{right:10px;}
.header-search i,.p-datatable .p-datatable-thead > tr > th.p-sortable-column p-sorticon,.approval-notification,.attachment-lists a .close{right:5px;}
.page-loader,.settings-trigger,.p-panelmenu .p-panelmenu-header > a .pi,.file-upload-wrapper:after,.file-upload-wrapper input,.product-container .action-btn,.toggle-btn .badges{right:0;}
.sidebar .mCSB_scrollTools{right:auto !important;}
.workflow-container{right:-300px;}
.settings-container{right:-250px;}

.network-status{bottom:50px;}
.approval-notification{bottom:5px;}
.page-loader,.apps-left,.apps-center,.bottom-fixed,.workflow-container,.file-upload-wrapper input,.quick-invoice .product-listing .product-name,.quick-invoice .product-listing .product-qty,.quick-left .ftr,.quick-right .ftr{bottom:0;}

.apps-center{left:-500px;}
.alert-popup{left:calc(50% - 190px);}
.workflow-animation .linear-chart{left:1px;}
.page-loader,.file-upload-wrapper:before,.file-upload-wrapper input,.bullet01 li i,.quick-invoice .product-listing .product-name,.quick-invoice .product-listing .product-qty,.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper{left:0;}
.workflow-animation .linear-circle{left:-5px;}
.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper.swipe-left{left:-36px;}

a,header .user-logout,.header-info,.header-search,.page-title h3,.sub-title h3,.sub-title h5,.network-status .network-icon,.network-status .network-text,.action-btn,.p-dialog-content .p-button,.approval-notification .img-preview,.approval-notification .img-text,.dashboard-page .filter-container,.settings-trigger,.settings-container .settings-panel,.chat-input-area textarea,.comment01,.comment02,.p-formgroup-inline .p-field-checkbox,.p-formgroup-inline .p-field-radiobutton,.linear-circle,.designation,.filter-container.workflow-filter .form-control,.industry-item > div,.price,.quick-left .hdr-right .p-inputtext,.quick-left .hdr-right p-autocomplete,.invoice-list .editable .qty,.dashboard-summary > div,.dashboard-summary p{display:inline-block;}
.page-search{display:inline-block !important;}
.menu-tabs a,.left-menu li,.menu-tabs-container.select,header .dropdown-menu li a,.header-info span,.header-info small,.widget-filter .widget-popup a,.settings-container .expanded + .overlay,.random-class,.workflow-summary a,.header-search a span,.product-container:hover .action-btn,.quick-invoice .product-listing .product-name,.quick-invoice .product-listing.added .product-qty{display:block;}
.menu-tabs-container,.product-container .action-btn,.del-btn .p-button-label,.quick-invoice .product-listing.added .product-name,.quick-invoice .product-listing .product-qty{display:none;}
.grid-loader,.apps-left .logo,.apps-center .logo,.page-loader,.block-ellipsis{display:flex;justify-content:center;align-items:center;}
header{display:flex;align-items:center;}
.p-field-inline,.quick-container{display:table;}
header .navbar-nav{display:inline-flex;}
.p-field-inline .p-field-control,.quick-container > div{display:table-cell;}
.block-ellipsis{display:-webkit-box;}

.normal-table{table-layout:fixed;}

header .navbar-nav{flex-direction:row;-ms-flex-direction:row;}

.header-right .action-panel,.network-status > div,.dashboard-summary .workflow-title{float:left;}
.left-menu .svg-inline--fa,.left-menu i{float:right;}

.page-loader,.settings-container.expand .overlay{width:100vw;}
.left-menu li,header,header .p-dropdown,.p-chips .p-inputtext,.p-autocomplete .p-inputtext,.p-inputnumber .p-inputtext,.browse-links,.login-row .p-inputtext,.p-inputgroup p-dropdown,.p-inputgroup .p-dropdown,.p-inputgroup p-autocomplete,.p-inputgroup .p-autocomplete,.p-inputgroup p-multiselect,.p-inputgroup .p-multiselect,.header-search .p-autocomplete,.header-search .p-inputtext,.approval-notification textarea,.file-upload-wrapper input,.p-password,.quick-invoice .product-listing .product-name,.quick-invoice .quick-container,.quick-invoice .product-listing .product-qty{width:100%;}
.p-menu,.p-field-control input,.p-field-control .p-dropdown,.p-dropdown-filter{width:100% !important;}
td[colspan] .attachment-lists{width:97.5% !important;}
.p-inputtext,.p-calendar,.p-dropdown,.p-autocomplete,.p-multiselect,.p-chips,.p-inputnumber,.p-formgroup,.p-formgroup-inline,.p-field-inline,.file-upload-wrapper,.attachment-lists{width:90%;}
.p-inputgroup{width:90% !important;}
.p-field-inline .p-field-control{width:50%;}
.dashboard-summary > .workflow-title,.approval-notification .img-text{width:calc(100% - 100px);}
.chat-input-area textarea{width:calc(100% - 45px);}
.network-text{width:calc(100% - 65px);}
.file-upload-wrapper:before{width:calc(100% - 22px);}
.p-multiselect-label-container{width:calc(90% - 22px);}
/*.settings-container .settings-cp{width:calc(100% - 54px);}*/
.quick-left,.quick-left .ftr{width:calc(100% - 350px)}
.quick-right,.quick-right .ftr{width:350px;}
.network-status,.approval-notification,.workflow-container{width:300px;}
.settings-container .settings-panel{width:250px;}
.page-search{width:250px !important;}
.invoice-list div > span:nth-child(1){width:225px;}
.invoice-list div.editable > span:nth-child(1){width:205px;}
.apps-center,.notification,.bottom-fixed.copyright,.widget-filter .widget-popup.big{width:200px;}
.quick-left .hdr-right .p-inputtext,.quick-left .hdr-right .p-autocomplete{width:200px !important;}
.header-search{width:180px;}
.workflow-filter .p-dropdown{width:150px;}
.workflow-filter .year .p-dropdown,.dashboard-summary .workflow-links,.invoice-list.invoice-total div > span:nth-child(2){width:100px;}
.apps-left .logo{width:60px;}
.p-progress-spinner{width:70px !important;}
.settings-trigger a{width:54px;}
.invoice-list .editable .qty{width:48px;}
header .toggle-btn,.user-profile img,.network-icon{width:40px;}
header .p-button.p-button-icon-only,.p-button.p-button-icon-only.big-btn{width:40px !important;}
.approval-ftr .p-button,.chat-window .chat-ftr .p-button,.product-container .action-btn a,.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper .del-btn,.product-qty .p-inputnumber .p-inputtext,.product-qty .p-inputnumber .p-inputnumber-button{width:32px !important;}
.p-button.p-button-icon-only,.p-multiselect .p-multiselect-trigger,.p-dropdown .p-dropdown-trigger,.p-inputgroup-addon .p-button{width:22px !important;}
.action-btn a,.widget-filter .filter-container > a,.file-upload-wrapper:after{width:22px;}
.linear-circle{width:16px;}
.p-checkbox,.p-checkbox .p-checkbox-box,.p-radiobutton,.p-radiobutton .p-radiobutton-box{width:16px !important;}
::-webkit-scrollbar{width:10px;}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon{width:10px !important;}
.workflow-animation .linear-chart,.workflow-animation .linear-value{width:4px;}
.settings-container .overlay{width:0;}

.col10{width:10px; min-width:10px;}
.col30{width:30px; min-width:30px;}
.invoice-list:not(.invoice-list.invoice-total) div > span:nth-child(2){width:45px; min-width:45px;}
.col40{width:40px; min-width:40px;}
.col50{width:50px !important; min-width:50px !important;}
.col50{max-width:50px !important;}
.col60{width:60px; min-width:60px;}
.col68{width:68px; min-width:68px;}
.invoice-list:not(.invoice-list.invoice-total) div > span:nth-child(3){width:65px; min-width:65px;}
.invoice-list:not(.invoice-list.invoice-total) div.editable > span:nth-child(2){width:65px; min-width:65px;}
.col70{width:70px; min-width:70px;}
.col80{width:80px; min-width:80px;}
.col90{width:90px; min-width:90px;}
.col95{width:95px; min-width:95px;}
.col100{width:100px; min-width:100px;}
.col110{width:110px; min-width:110px;}
.col120{width:120px; min-width:120px;}
.col125{width:125px; min-width:125px;}
.col130{width:130px; min-width:130px;}
.col135{width:135px; min-width:135px;}
.col150{width:150px; min-width:150px;}
.col170{width:170px; min-width:170px;}
.col180{width:180px; min-width:180px;}
.col190{width:190px; min-width:190px;}
.col200{width:200px; min-width:200px;}
.col230{width:230px; min-width:230px;}
.col250{width:250px; min-width:250px;}
.col300{width:300px; min-width:300px;}
.col320{width:320px; min-width:320px;}
.col350{width:350px; min-width:350px;}
.col400{width:400px; min-width:400px;}
.col450{width:450px; min-width:450px;}
.col500{width:500px; min-width:500px;}
.col700{width:700px; min-width:700px;}
.col800{width:800px; min-width:800px;}
.col900{width:900px; min-width:900px;}
.col1000{width:1000px; min-width:1000px;}

/* .p-tooltip{max-width:none !important;} */
.quick-right,.quick-right .ftr{max-width:350px;}
.block-ellipsis{max-width:100%;}
.approval-notification .img-preview{max-width:90px;}
.dotted-txt{max-width:2px;}

header .dropdown-menu-right{min-width:150px;}
.p-inputgroup-addon{min-width:22px !important;}

legend,.filter-container.workflow-filter .form-control{width:auto;}

.p-calendar .p-datepicker{min-width:auto !important;}

.page-loader,.settings-container .overlay,.quick-container,.quick-container .quick-left,.quick-container .quick-right{height:100vh;}
.quick-container .quick-right .body.scroll-y{height:calc(100vh - 225px);}
.settings-container .settings-panel{height:calc(100vh - 70px);}
.quick-container .quick-left .body.scroll-y{height:calc(100vh - 52px);}
.quick-left .body-ftr{height:calc(100% - 40px);}
.workflow-container .workflow-panel{height:calc(100% - 30px);}
html#no-scroll,html#no-scroll>body,.p-dialog .p-dialog-content,.workflow-animation .linear-chart,.workflow-details.completed .linear-value{height:100%;}
.apps-left .logo,header{height:60px;}
.p-progress-spinner{height:70px !important;}
.copyright.bottom-fixed{height:55px;}
.settings-trigger a{height:54px;}
.apps-center .logo img,.quick-invoice .p-dialog-content .quick-left .product-name{height:50px;}
header .toggle-btn,.user-profile img,.header-search,.header-search input,.network-icon,header .p-dropdown,header .p-dropdown .p-inputtext{height:40px;}
header .p-button.p-button-icon-only,.p-button.p-button-icon-only.big-btn{height:40px !important;}
.approval-ftr .p-button,.chat-window .chat-ftr .p-button,.product-container .action-btn a,.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper .del-btn,.product-qty .p-inputnumber .p-inputtext,.product-qty .p-inputnumber .p-inputnumber-button,.quick-left .hdr-right .p-inputtext,.quick-left .hdr .p-autocomplete,.quick-left .hdr .p-autocomplete-input{height:32px !important;}
.invoice-list .editable .qty .p-inputtext{height:28px;}
.sub-title h5{height:23px;}
.p-inputtext,.p-calendar,.p-dropdown,.p-autocomplete,.p-multiselect,.action-btn a,.widget-filter .filter-container > a,.filter-container.workflow-filter .form-control,.file-upload-wrapper,.file-upload-wrapper:before,.file-upload-wrapper:after,.file-upload-wrapper input{height:22px;}
.p-button.p-button-icon-only,.p-inputgroup-addon .p-button{height:22px !important;}
.linear-circle{height:16px;}
.p-checkbox,.p-checkbox .p-checkbox-box,.p-radiobutton,.p-radiobutton .p-radiobutton-box{height:16px !important;}
.p-progressbar{height:12px !important;}
::-webkit-scrollbar{height:10px;}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon{height:10px !important;}
.workflow-details .linear-value{height:0;}

.p-inputtext.p-inputtextarea,.login-row .p-inputtext{height:auto;}

.quick-invoice .p-dialog{max-height:100%;}
.comments-container{max-height:340px;}
.popup-body,.scrollable-table .table tbody,.chat-window .chat-body{max-height:300px;}
.img-preview{max-height:120px;}
.approval-notification .img-preview{max-height:70px;}

.chat-window .chat-body{min-height:250px;}

html#no-scroll,html#no-scroll>body,.login-page,.scroll-y,.approval-notification,.chat-window .chat-body,.file-upload-wrapper:before,.block-ellipsis,.invoice-list:not(.invoice-list.invoice-total) li,.product-listing{overflow:hidden;}
.quick-invoice .p-dialog .p-dialog-content,.quick-invoice .p-dialog .quick-left,.quick-invoice .p-dialog .quick-right{overflow-x:hidden;}
.quick-invoice .p-dialog .p-dialog-content{overflow-y:hidden;}
.scroll-y,.chat-window .chat-body,.quick-left{overflow-y:auto;}

.page-tab a:before{visibility:hidden;}

.file-upload-wrapper input{opacity:0;}

.dashboard-stats p,.dotted-txt,.file-upload-wrapper:before,.invoice-list:not(.invoice-list.invoice-total) li,.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper{white-space:nowrap;}
.dashboard-thumb{flex-direction:column; flex-wrap:nowrap; display:flex; align-items:center;}

.block-ellipsis,.dotted-txt,.file-upload-wrapper:before{text-overflow:ellipsis;}

.block-ellipsis{-webkit-box-orient:vertical;}

.clamp3{-webkit-line-clamp:3;}
.clamp2{-webkit-line-clamp:2;}
.clamp1{-webkit-line-clamp:1;}

.loader,.loader-txt,.column-2,.normal-table.center-table,.action-btn a i{margin:auto;}
.p-button.p-button-icon-only .p-button-icon-left,.approval-ftr .p-button i,.chat-window .chat-ftr .p-button i{margin:auto !important;}
.multiply{margin:0 5px;}

.page-container,.settings-trigger{margin-top:60px;}
.form-container .normal-table.mt20{margin-top:20px;}
.left-menu li a i,.approval-notification label,.workflow-summary .col-md-8,.sync-list button{margin-top:10px;}
.form-container .normal-table,.left-menu hr,.normal-table .normal-table.column-2,.workflow-title,.attachment-lists a{margin-top:5px;}
.menu-tabs.bottom-fixed,.approval-notification.chat-window label,.normal-table .normal-table{margin-top:0;}

.network-status .network-icon{margin-right:15px;}
.overall-filter .form-group,header .navbar-nav > li,.header-search,.page-title,.approval-notification .img-preview,.p-formgroup-inline .p-field-checkbox,.p-formgroup-inline .p-field-radiobutton{margin-right:10px;}
.left-menu .nav .fa,.online-status span,input[type=checkbox], input[type=radio],header .dropdown-menu i,.user-profile img,.toggle-btn,.workflow-table i,.industry-item img{margin-right:5px;}
p-radiobutton,p-checkbox{margin-right:3px;}
header .navbar-nav li:last-child,.dashboard-page .page-title,.mCSB_inside>.mCSB_container,.workflow-container .page-title{margin-right:0;}

.login-row{margin-bottom:30px;}
.login-logo{margin-bottom:25px;}
.crop-input{margin-bottom:20px;}
.dashboard-page .white,.product-container{margin-bottom:15px;}
.menu-tabs a,header .user-logout .dropdown-menu li,.page-title,.sub-title,fieldset.p-fieldset,.form-container,.card,.search-container,.workflow-summary,.mb10,.sync-list,.quick-left .row > div{margin-bottom:10px;}
.widget-popup .form-control,.comment01,.comment02,.p-formgroup .p-field-checkbox,.p-formgroup .p-field-radiobutton,.left-menu hr,.workflow-details,.sync-name,.quick-container .quick-right .hdr{margin-bottom:5px;}
.action-btn .p-button.p-button-icon-only.big-btn{margin-bottom:5px !important;}
.bottom-fixed.menu-tabs a,header .dropdown-menu li:last-child,.notification h6,.sub-title h5,.approval-notification label,.p-field-checkbox label,.p-field-radiobutton label,.workflow-summary p,.workflow-summary h2,.normal-table .sub-title,.sync-list:last-child,.sub-title h3,.notification p,.p-formgroup-inline h6,.dashboard-summary .workflow-title p,.dashboard-summary h4,.quick-left .hdr h3,.quick-right .hdr h3{margin-bottom:0;}
.main-tab a{margin-bottom:-1px;}
.p-tabview .p-tabview-nav li .p-tabview-nav-link{margin-bottom:-1px !important;}

.inner-page-container{margin-left:60px;}
.workflow-details,.level-title{margin-left:15px;}
.menu-tabs,header .toggle-btn,.main-tab a,.quick-left .hdr-right .p-inputtext:not(.p-autocomplete.p-inputtext),.quick-left .hdr-right p-autocomplete{margin-left:10px;}
.p-tabview .p-tabview-nav li .p-tabview-nav-link,.approval-ftr .p-button,.chat-window .chat-ftr .p-button,.action-btn .p-button.p-button-icon-only.big-btn{margin-left:10px !important;}
.widget-filter .filter-container > a,.filter-container.workflow-filter .form-control,.workflow-filter .p-dropdown,.normal-table i.la-info-circle,.attachment-lists a{margin-left:5px;}
.p-button,.action-btn a{margin-left:5px !important;}
.designation{margin-left:3px;}
.p-calendar .p-button,.p-autocomplete .p-button,.p-inputgroup .p-button,.action-btn a:first-child,.action-btn .p-button:first-child,.p-datatable-tbody td a:first-child,.p-datatable-tbody td .p-button:first-child,.product-container .action-btn a,.quick-invoice .product-listing .product-qty .p-button{margin-left:0 !important;}
.menu-tabs.bottom-fixed{margin-left:0;}

.login-container{padding:50px;}
.bottom-fixed.menu-tabs a{padding:15px 23px;}
.main-menu,.network-status,.settings-container .settings-panel,.workflow-container{padding:15px;}
.quick-right .hdr{padding:16px 10px;}
.widget-filter .widget-popup.big{padding:15px 5px;}
.menu-tabs a{padding:10px 13px;}
.p-menu .p-menuitem-link,.p-panelmenu .p-panelmenu-header > a{padding:10px 12px !important;}
.inner-page-container > .white,.dashboard-page .white,.p-fieldset .p-fieldset-content,.approval-hdr,.chat-window .chat-hdr,.approval-body,.chat-window .chat-body,.sync-container,.sync-list,.quick-left .hdr,.quick-left .ftr,.quick-right .ftr,.invoice-list.invoice-total div{padding:10px;}
.normal-table>tr>td,.normal-table .normal-table.column-2>tr>td{padding:10px 5px;}
.quick-invoice .product-listing .product-qty{padding:10px 0;}
.quick-invoice .p-dialog .p-dialog-content > .row{padding:0 0 5px 25px;}
.copyright{padding:5px 15px;}
.comment01,.comment02,.quick-container .quick-left .body,.invoice-list div.wrapper{padding:5px 10px;}
.p-dialog .p-dialog-header,.header-search .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item{padding:5px 10px !important;}
.p5,.notification a,.inner-page-container,.widget-filter .widget-popup,.widget-popup .form-control,.chat-input-area textarea,.workflow-details,.workflow-panel,.workflow-summary,.workflow-summary a,.mail-container,.dashboard-summary > div + div,.quick-invoice .p-dialog-content .quick-left .product-name{padding:5px;}
.apps-center .logo{padding:5px 0;}
.normal-table.new>tr>td,.attachment-lists a,.normal-table.mail-view>tr>td{padding:3px 5px;}
.main-tab a{padding:2px 10px;}
.dashboard-summary > div{padding:4px 5px;}
.sub-title h5,.toggle-btn .badges{padding:1px 5px;}
.left-menu .nav li a,.padding-ftr,.chat-window .chat-ftr .chat-input-area,.quick-invoice .p-dialog .p-dialog-content .quick-left .row{padding:0 10px;}
header .user-logout .dropdown-menu li,.header-search input,.p-inputtext,.browse-links,.widget-filter .widget-popup a,.normal-table .normal-table>tr>td,.file-upload-wrapper:before,.quick-invoice .p-dialog .p-dialog-content .quick-left .row > div{padding:0 5px;}

.quick-left .ftr .p-button,.quick-right .ftr .p-button{padding:10px !important;}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a,.p-toolbar{padding:5px !important;}
.p-tabview .p-tabview-nav li .p-tabview-nav-link{padding:5px 10px !important;}
.p-datatable .p-datatable-thead > tr > th,.p-datatable .p-datatable-tbody > tr > td,.p-datatable .p-datatable-tfoot > tr > td{padding:3px 8px !important;}
.p-button{padding:3px 8px !important;}
.p-datatable .p-datatable-tbody > tr > td.active,.p-datatable .p-datatable-tbody > tr > td.inactive{padding:0 8px !important;}
.p-datepicker table th,.p-datepicker table td{padding:2px !important;}
.p-fieldset .p-fieldset-content{padding:0 5px !important;}
.p-dropdown .p-inputtext,.action-btn a,.filter-container.workflow-filter .form-control{padding:0;}
.p-multiselect .p-multiselect-label,.p-inputgroup .p-button,.p-button.p-button-icon-only,.p-button.p-button-icon-only .p-button,.approval-ftr .p-button,.chat-window .chat-ftr .p-button,.p-tabview .p-tabview-panels,.approval-notification .p-dialog .p-dialog-content,.p-panelmenu .p-panelmenu-content,image-cropper,.quick-invoice .p-dialog .p-dialog-content{padding:0 !important;}

.p-dialog .p-dialog-content{padding-top:15px !important;}
.p-tabview .p-tabview-panels{padding-top:10px !important;}
.chat-window .chat-ftr,.main-tab-container{padding-top:10px;}

.attachment-lists:not(.view) a{padding-right:25px;}
.p-datatable .p-datatable-thead > tr > th.p-sortable-column{padding-right:20px !important;}
.workflow-widget .col-md-3:last-child,.workflow-summary .col-md-4:nth-child(3),.dashboard-page .inner-page-container > .row > div:last-child{padding-right:15px;}
.form-container,.p-field-control{padding-right:10px;}
.workflow-widget .col-md-3,.workflow-summary .col-md-4,.dashboard-page .inner-page-container > .row > div{padding-right:5px;}
.inner-page-container > .white,.p-field-control:last-child,.normal-table .normal-table>tr>td:last-child{padding-right:0;}

.inner-page-container > .white,.approval-ftr,.chat-window .chat-ftr{padding-bottom:10px;}
.main-menu h5,.workflow-desc,.attachment-lists{padding-bottom:5px;}

header{padding-left:60px;}
.left-menu .nav li li a,.p-input-icon-left > .p-inputtext,.bullet01 li{padding-left:25px;}
.workflow-widget .col-md-3:first-child,.workflow-summary .col-md-4:first-child,.dashboard-page .inner-page-container > .row > div:first-child{padding-left:15px;}
.p-multiselect,.p-dropdown,.workflow-widget .col-md-3,.workflow-summary .col-md-4,.workflow-summary .col-md-8,.dashboard-page .inner-page-container > .row > div{padding-left:5px;}
.normal-table .normal-table>tr>td:first-child{padding-left:0;}

.approval-body,.chat-window .chat-body,.approval-ftr,.chat-window .chat-ftr,.workflow-container,.workflow-summary a,.sync-list,.dashboard-summary .workflow-links,.quick-invoice .p-dialog .p-dialog-content a,.quick-invoice .quick-right,.quick-left .ftr,.quick-right .ftr{background:#fff;}
.copyright,.widget-filter .widget-popup a:hover,.chat-input-area textarea,.chat-input-area textarea:focus,.workflow-animation .linear-chart,.workflow-details .linear-circle,.product-container .action-btn a,.quick-invoice .p-dialog .p-dialog-content,.quick-invoice .p-dialog .p-dialog-footer{background-color:#eee;}
.workflow-details,.workflow-summary a,.sync-container{background-color:#f5f5f5;}
.workflow-details.completed{background-color:#f1ffe9;}
.workflow-details.rejected{background-color:#ffe9e9;}
.workflow-animation .linear-value,.workflow-details.completed .linear-circle{background-color:#689F38;}
.workflow-summary.color01 a:hover,.workflow-summary.color01 a.select, .dashboard-summary.color01{background-color:#d0ffcd;}
.workflow-summary.color02 a:hover,.workflow-summary.color02 a.select, .dashboard-summary.color02{background-color:#ffe6cd;}
.workflow-summary.color03 a:hover,.workflow-summary.color03 a.select, .dashboard-summary.color03{background-color:#d1d9ff;}
.workflow-summary.color04 a:hover,.workflow-summary.color04 a.select, .dashboard-summary.color04{background-color:#ffcfe5;}
.p-inputtext[disabled],.left-menu a:hover,.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover{background-color:#eee !important;}
.qs-row td,.unread td{background-color:#ffffe0;}
.hold-row td{background-color:#e2f8fa;}
.hlt-color,.hlt-color.p-inputtext[disabled]{background-color:#ffffb3 !important;}
.comment02{background-color:#e5e5e5;}
.grid-loader{background-color:rgba(255,255,255,0.81);}
.page-loader{background-color:rgba(255,255,255,0.36);}
.quick-invoice .product-listing .product-name,.quick-invoice .product-listing .product-qty{background-color:rgba(0,0,0,0.45);}
.settings-container .overlay{background-color:rgba(0, 0, 0, 0.09);}
.network-icon.down,.workflow-animation .rejected .linear-value,.workflow-details.rejected .linear-circle,.toggle-btn .badges{background-color:#c70d0d;}
.network-icon.up{background-color:#4caf50;}
.file-upload-wrapper:after{background-color:#2196F3;}
.attachment-lists a,.notification li a:hover{background-color:#E3F2FD;}

.p-datatable .p-datatable-header,.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link,.p-tabview .p-tabview-nav li .p-tabview-nav-link:hover,.main-tab a:hover,.main-tab a.select{background:#fff !important;}
.approval-ftr .p-button,.chat-window .chat-ftr .p-button{background-color:#ddd !important;}
.p-panelmenu .p-panelmenu-header > a{background-color:transparent !important;}

.network-icon,.approval-ftr .p-button,.chat-window .chat-ftr .p-button,.linear-circle{border-radius:100%;}

header .toggle-btn,.user-profile img,.header-search input,.header-search .p-dropdown{border-radius:6px;}
.comment01,.comment02,.workflow-summary a,.toggle-btn .badges{border-radius:4px;}
.action-btn a,.workflow-details,.attachment-lists,.attachment-lists a{border-radius:3px;}

.menu-tabs a{border-radius:6px 0 0 6px;}
.browse-links,.file-upload-wrapper:before{border-radius:3px 0 0 3px;}
.p-inputgroup .p-inputgroup-addon.p-button:last-child{border-radius:0 3px 3px 0 !important;}
.p-tabview .p-tabview-nav li .p-tabview-nav-link,.sub-title h5,.main-tab a{border-radius:5px 5px 0 0 !important;}
.bottom-fixed.menu-tabs a{border-radius:0;}
.p-inputgroup-addon.p-button,.p-menu,.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header > a,.product-container .action-btn a,.invoice-list:not(.invoice-list.invoice-total) li > div.wrapper .del-btn{border-radius:0 !important;}

.chat-window .chat-ftr{border-top:1px solid #ddd;}
.bottom-fixed{border-top:1px solid rgba(255,255,255,0.18);}
.bottom-fixed.copyright{border-top:1px solid rgba(0,0,0,0.18);}
.page-title{border-bottom:1px solid #3a7afe;}
.sub-title{border-bottom:1px solid #afc3ec;}
.main-menu h5,.main-tab{border-bottom:1px solid #ddd;}
.notification li{border-bottom:1px solid #eaeaea;}
.notification li:last-child{border-bottom:0;}
.header-search input,header .dropdown-menu,header .p-dropdown,.chat-input-area textarea,.attachment-lists.view{border:0;}

.workflow-details,.workflow-summary,.product-container,.sync-container,.sync-list,.mail-container, .dashboard-summary{border:1px solid #ddd;}
.workflow-details.completed{border:1px solid #a3d687;}
.workflow-details.rejected{border:1px solid #d68787;}
.p-fieldset .p-fieldset-legend,.product-container.edit-mode{border:1px solid #3a7afe !important;}
.browse-links,.file-upload-wrapper:before,.attachment-lists{border:1px solid #ced4da;}
p-dropdown.p-error > div,.p-error.p-inputtext:enabled:focus{border:1px solid #f44336;}
.p-datatable .p-datatable-thead > tr > th,.p-datatable .p-datatable-tbody > tr > td,.card{border:1px solid #afc3ec !important;}

.p-tabview .p-tabview-nav{border-bottom:1px solid #ddd !important;}
.product-container .action-btn a{border-bottom:1px solid #ddd;}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link,.main-tab a:hover,.p-tabview .p-tabview-nav .p-tabview-nav-link:hover,.main-tab a.select{border-bottom:1px solid #fff !important;}
.p-datatable .p-datatable-header{border-bottom:0 !important;}
.p-inputgroup-addon{border-right:1px solid #ced4da !important;}
.p-datatable .p-datatable-thead > tr > th:last-child,.p-datatable .p-datatable-tbody > tr > td:last-child,.file-upload-wrapper:before{border-right:0 !important;}
.product-container .action-btn a{border-left:1px solid #ddd;}
.p-datatable .p-datatable-thead > tr > th:first-child,.p-datatable .p-datatable-tbody > tr > td:first-child,.p-inputgroup-addon{border-left:0 !important;}
.p-fieldset,.p-toolbar,.approval-ftr .p-button,.chat-window .chat-ftr .p-button,.p-menu,.p-panelmenu .p-panelmenu-header > a,.p-panelmenu .p-panelmenu-content{border:0 !important;}

h1,h2,h3,h4,h5,h6,strong,.p-datatable .p-datatable-thead > tr > th,.hlt-txt,.level-title,.unread td{font-family:RobotoBold;font-weight:normal;}
.sub-title h5{font-family:RobotoReg;font-weight:normal;}
.p-inputtext{font-family:RobotoReg !important;font-weight:normal;}
.custom-file-input:lang(en)~.custom-file-label::after{font-family:FontAwesome;}
.file-upload-wrapper:after{font-family:'Line Awesome Free';font-weight:900;}
.p-tabview .p-tabview-nav li .p-tabview-nav-link,.p-tabview .p-tabview-nav li .p-tabview-nav-link span,.p-dialog .p-dialog-header .p-dialog-title,.p-panelmenu .p-panelmenu-header > a{font-weight:normal !important;}

.workflow-summary i{font-size:40px;}
header .toggle-btn i,.settings-trigger i{font-size:30px;}
.menu-tabs a *,.header-search i,.p-datatable .p-datatable-tbody > tr > td.active i,.p-datatable .p-datatable-tbody > tr > td.inactive i, .dashboard-summary .workflow-title i{font-size:24px;}
.widget-filter a i,.page-title .close i,.product-container .action-btn a i{font-size:20px;}
header .dropdown-menu li i,.network-close,.approval-close,.approval-hdr,.chat-window .chat-hdr,.approval-ftr .p-button i,.chat-window .chat-ftr .p-button i,.popup-new .p-dialog .p-dialog-content p,.bullet01 li,.bullet01 li i{font-size:18px;}
.header-info span,.header-info strong,.page-title h3,.sub-title h3,.p-toast-icon-close-icon,.workflow-table i,.file-upload-wrapper:after,.attachment-lists a .close i,.dashboard-summary .workflow-title p,.quick-invoice .hdr,.quick-left .hdr h3,.quick-right .hdr h3,.quick-left .ftr .p-button *,.quick-right .ftr .p-button *{font-size:16px;}
.p-button .las,.normal-table i.la-info-circle,.action-btn .p-button.p-button-icon-only.big-btn .p-button-icon{font-size:16px !important;}
.network-text,.action-btn a i,.approval-notification .img-text p,.approval-notification .text,.p-input-icon-left > i:first-of-type,.workflow-summary h2,.info-txt,.quick-invoice .product-listing .product-name,.quick-invoice .product-listing .product-qty{font-size:14px;}
.left-menu a,.left-menu a span,.left-menu a i,.main-menu h5,.header-info small,.sub-title h5,.copyright *,.level-title{font-size:13px;}
.approval-notification.chat-window .text{font-size:12px;}
.workflow-summary p,.workflow-table td,.workflow-table span{font-size:11px;}
.approval-body label,.chat-window .chat-body label{font-size:10px;}
.p-checkbox .p-checkbox-box .p-checkbox-icon,.p-progressbar-determinate .p-progressbar-label{font-size:10px !important;}

.uppercase,.main-menu h5,.approval-body label,.chat-window .chat-body label,.workflow-summary p{text-transform:uppercase;}
.capitalize{text-transform:capitalize;}
.lowercase{text-transform:lowercase;}

.header-right li > a i:before{font-weight:700;}
.header-right li > a i.fa-calculator:before{font-weight:100;}

.header-right .wlcm-container .dropdown-menu-right span{white-space:normal;}

.static-widgets .card.color01 i{color:#ff9800;}
.static-widgets .card.color02 i{color:#f44336;}
.static-widgets .card.color03 i{color:#4caf50;}
.static-widgets .card.color04 i{color:#00bcd4;}
.workflow-summary.color01 .workflow-title *,.workflow-summary.color01 i,.inactive.active i, .dashboard-summary.color01 .workflow-links *{color:#0b9a23;}
.workflow-summary.color02 .workflow-title *,.workflow-summary.color02 i, .dashboard-summary.color02 .workflow-links *{color:#ff5200;}
.workflow-summary.color03 .workflow-title *,.workflow-summary.color03 i, .dashboard-summary.color03 .workflow-links *{color:#3b54ca;}
.workflow-summary.color04 .workflow-title *,.workflow-summary.color04 i, .dashboard-summary.color04 .workflow-links *{color:#d24f8b;}
.menu-tabs a,.menu-tabs a i,.menu-tabs a:hover,.menu-tabs a:hover i,header .toggle-btn:hover i,header .dropdown-menu a:hover,header .dropdown-menu a:hover i,.p-button *,.sub-title h5,.p-tabview .p-tabview-nav .p-tabview-nav-link span,.main-tab a,.settings-trigger i,.chat-window .chat-body .comment01 .text,.chat-window .chat-body .comment01 label,.file-upload-wrapper:after,.toggle-btn .badges,.quick-invoice .p-dialog .p-dialog-header *,.quick-invoice .product-listing .product-name,.quick-left .hdr h3{color:#fff;}
header .dropdown-menu a,.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link span,.p-tabview .p-tabview-nav .p-tabview-nav-link:hover span,.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link:hover span,.main-tab a:hover,.main-tab a.select,.header-search a,.attachment-lists a .close i,.invoice-list div{color:#333;}
.attachment-lists a .close i{color:#000;}
.header-info,.header-info span,.approval-body label,.header-info small{color:#89879f;}
.invoice-list .multiply,.invoice-list .qty{color:#aaa;}
.inactive i{color:#eee;}
.normal-table i.la-info-circle{color:#06c;}
.hlt-txt{color:#f00;}

.apps-center,header{box-shadow:0px 0px 40px 0px rgba(82, 63, 105, 0.1);}
.quick-left .hdr,.quick-right .hdr,.quick-left .ftr,.quick-right .ftr{box-shadow:0 0 10px 0 rgb(0 0 0 / 36%);}
.page-container .white,.quick-invoice .p-dialog .p-dialog-content .quick-left a,.quick-invoice .p-dialog .p-dialog-content .quick-right{box-shadow:0 1px 15px 1px rgba(69,65,78,.05);}
.settings-container .settings-panel,.workflow-container{box-shadow:0px 0px 30px 0px rgba(82, 63, 105, 0.15);}
.login-container{box-shadow:0 0 35px 0 rgba(154, 161, 171, 0.15);}
header .dropdown-menu,.network-status,.approval-notification{box-shadow:0 0 37px rgba(8, 21, 66, 0.18)}
.network-icon.down{box-shadow: 0 0 0 0 rgba(198, 18, 18, 0.72);}
.network-icon.up{box-shadow: 0 0 0 0 rgba(72, 171, 81, 0.72);}
.header-search input:enabled:focus{box-shadow:none;}
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus,.p-button.p-button-link:enabled:focus,.chat-input-area textarea:focus,.p-menu .p-menuitem-link:focus,.p-panelmenu .p-panelmenu-header > a:focus{box-shadow:none !important;}

.left-menu .nav li a span,.toggle-btn,.header-search,.user-profile img,.user-profile .header-info,.p-dialog-content .p-button,p-inputswitch,.p-field-checkbox label,input[type="checkbox"],input[type="radio"],.normal-table .p-field-checkbox i.la-info-circle, .dashboard-summary .workflow-title *,header .p-button{vertical-align:middle;}
.normal-table td,.approval-notification .img-text,.settings-trigger,.chat-input-area textarea,.chat-input-area button,.workflow-table td,.p-field-inline .p-field-control{vertical-align:top;}
.widget-filter a .fa, .widget-filter a i,header .dropdown-menu li i{vertical-align:text-top;}

.settings-trigger i{line-height:54px;}
header .toggle-btn i,header .p-dropdown .p-inputtext{line-height:40px;}
.product-container .action-btn a{line-height:32px;}
.left-menu li a{line-height:28px;}
header .dropdown-menu li a,.p-paginator .p-dropdown .p-dropdown-label,.bullet01 li{line-height:24px;}
.p-fileupload .p-button-icon{line-height:22px !important;}
.file-upload-wrapper:after{line-height:22px;}
.copyright *,.widget-filter .widget-popup a,.p-button.p-button-icon-only .p-button-icon{line-height:20px;}
.attachment-lists a{line-height:18px;}
.sub-title h5{line-height:16px;}
.p-progressbar .p-progressbar-label{line-height:12px !important;}

@media screen and (min-width:1024px) and (max-width:1400px)
{

}
@media screen and (min-width:1024px) and (max-width:1280px)
{
	.p-multiselect{width:90%;}
}
@media screen and (min-width:1024px)
{
	.login-container{width:350px;}
	.login-left,.login-right{display:flex;min-height:100vh;justify-content:center;align-items:center;}
}
@media screen and (min-width:300px) and (max-width:1023px)
{
}

.ace-tm .ace_variable{display:block !important;}
.ace_scroller{height:250px !important;overflow-y:auto;}


.tooltip-chart {
  position: absolute;
  text-align: center;
  padding: .2rem .8rem;
  background: #393939;
  color: #ffffff;
  border-radius: 8px;
  pointer-events: none;
  font-size: 1rem;
}
.tooltip-chart::before{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 6px solid #393939;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.chart-xaxis-label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40px;
  display: block;
  font-size: 12px;
  color: #5e5e5e;
}

.y-axis {
  color: #5e5e5e;
}
/* legend */
.legend {
  font-size: 14px;
}
rect {
  cursor: pointer;
  stroke-width: 2;
}
rect.disabled {
  opacity: 0.6;
}
.disabled{
  text-decoration: line-through;
  opacity: 0.6;
}
.wrapper {
  position: relative;
}

.y-axis-label {
  fill: black;
  font-size: 1.4em;
  text-anchor: middle;
  transform: rotate(-90deg);
}
.tooltip-date {
  margin-bottom: 0.2em;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.4em;
}

.listening-rect {
  fill: transparent;
}
.dotted {
  stroke: #5c5c5c;
  stroke-dasharray: 1 1;
  fill: none;
}

.legend {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.legend span {
  margin-right: 10px;
  cursor: pointer;
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border: 1px solid #ccc;
}

.notes {
  background-color: lightgreen;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
  margin: 10px 0;
}

.notes ul {
  padding-left: 20px;
}

.notes li {
  margin-bottom: 5px;
}

.rewardwhitecontainer {
  background-color: white;
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* <-- Make legend go below */
  border-radius: 10px;
}
.rewardamtheader {
  background-color: white;
  height: 50px;
  width: 95%;
  display: flex;
  justify-content: center;
  margin-left: 20px;
  border-radius: 10px;
  padding-top: 12px;
}
.rewardsummaryamt {
  margin-top: 10px;
  background-color: white;
  height: 260px;
  width: 400px;
  margin-left: 20px;
}
.rewardsummarycenter {
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.rewardpiechart {
  width: 90% !important;
  height: 90% !important;
}

.dashboard-cards-rwd.fixed-height {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-template-rows: repeat(2, 1fr);    /* 2 rows */
  gap: 1rem;
  padding: 1rem;
  height: 260px; /* TOTAL HEIGHT */
  box-sizing: border-box;
}

.card-box-rwd {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
  overflow: hidden;
}

.card-box-rwd:hover {
  transform: translateY(-4px);
}

.card-icon-rwd {
  background-color: #2a52ff;
  color: white;
  font-size: 2rem;
  border-radius: 50%;
  padding: 0.8rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.card-box-rwd h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: bold;
}

.card-box-rwd p {
  margin: 0;
  font-size: 1.25rem;
  color: #555;
  font-size: 15px;
  font-family: sans-serif;
}
.rewardrptfilter {
  height: 40px;
  width: 40px;
  text-align: center;
  font-size: 30px;
  justify-content: center;
  display: flex;
  padding: 6px;
  font-weight: bold;
  background-color: #85ec38;
  border: none;
  border-radius: 2px;
  
}
.filter-card {
    width: 300px;
    background-color: white;
    border-radius: 10px;
    margin-right: 20px;
    height: 300px;
    padding-left: 25px;
}

.prod-dashboard-cards-rwd.fixed-height {
  display: flex;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  grid-template-rows: repeat(2, 1fr);    /* 2 rows */
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
}



/* ============================================
   BUTTON GROUPS CSS - Add this to your component CSS
   ============================================ */

/* Container for button groups */
.button-group-container {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-left: 10px;
}

/* Individual button group wrapper */
.button-group-wrapper {
    position: relative;
    display: inline-block;
}

/* Active state for main button when dropdown is open */
.button-group-wrapper .p-button.active-dropdown {
    background-color: #3ca063 !important;
    border-color: #3ca063 !important;
}

/* Dropdown container */
.button-dropdown {
    position: absolute;
    top: 45px;
    left: 0;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 140px;
    padding: 5px;
    animation: slideDown 0.2s ease-in-out;
}

/* Slide down animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons inside dropdown */
.button-dropdown .dropdown-btn {
    width: 100% !important;
    margin: 3px 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Button labels inside dropdown */
.button-dropdown .dropdown-btn .btn-label {
    margin-left: 8px;
    font-size: 12px;
    display: inline-block;
}

/* Fix PrimeNG button internal spacing */
.button-dropdown .dropdown-btn .p-button-label {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
}

/* Button icons inside dropdown */
.button-dropdown .dropdown-btn .p-button-icon {
    font-size: 14px;
}

/* Hover effect for dropdown buttons */
.button-dropdown .dropdown-btn:hover {
    background-color:#afc3ec !important;
}

/* Arrow indicator for main buttons (optional) */
.button-group-wrapper > .p-button::after {
    content: '\25BC';
    font-size: 8px;
    margin-left: 3px;
    opacity: 0.6;
}

.button-group-wrapper > .p-button.active-dropdown::after {
    content: '\25B2';
}

/* ============================================
   RETURN AMOUNT DIALOG - FIXED STYLES
   ============================================ */

/* Dialog customization */
::ng-deep .return-amount-dialog .p-dialog-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: 6px 6px 0 0;
}

::ng-deep .return-amount-dialog .p-dialog-header-icon {
    color: white;
}

::ng-deep .return-amount-dialog .p-dialog-content {
    padding: 1.5rem;
    background-color: #ffffff;
}

::ng-deep .return-amount-dialog .p-dialog-footer {
    padding: 1rem 1.5rem;
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
}

/* Custom Message Boxes - Enhanced styling */
.info-message-box,
.success-message-box,
.error-message-box {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border-left: 4px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.info-message-box {
    background-color: #e3f2fd;
    border-left-color: #2196f3;
}

.success-message-box {
    background-color: #e8f5e9;
    border-left-color: #4caf50;
}

.error-message-box {
    background-color: #ffebee;
    border-left-color: #f44336;
}

.flex-container {
    display: flex;
    align-items: flex-start;
}

.info-message-box i,
.success-message-box i,
.error-message-box i {
    margin-top: 2px;
}

/* Form Field Styling */
.field {
    margin-bottom: 1.25rem;
}

.field label {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #495057;
}

/* Total Return Amount Input - Blue theme with white background */
::ng-deep .input-highlight-blue .p-inputnumber-input {
    border: 2px solid #2196f3 !important;
    background-color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #1565c0 !important;
    border-radius: 6px !important;
    padding: 0.875rem !important;
    height: 50px !important;
}

::ng-deep .input-highlight-blue .p-inputnumber-input:disabled {
    background-color: #ffffff !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Cash Input - Green theme with white background */
::ng-deep .cash-input .p-inputnumber-input {
    border: 2px solid #4caf50 !important;
    background-color: #ffffff !important;
    color: #2e7d32 !important;
    border-radius: 6px !important;
    padding: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    height: 48px !important;
}

::ng-deep .cash-input .p-inputnumber-button {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
    color: white !important;
}

::ng-deep .cash-input .p-inputnumber-button:enabled:hover {
    background-color: #45a049 !important;
    border-color: #45a049 !important;
}

::ng-deep .cash-input .p-inputnumber-input:focus {
    border-color: #2e7d32 !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
}

/* Voucher Input - Purple theme with white background */
::ng-deep .voucher-input .p-inputnumber-input {
    border: 2px solid #9c27b0 !important;
    background-color: #ffffff !important;
    color: #6a1b9a !important;
    border-radius: 6px !important;
    padding: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    height: 48px !important;
}

::ng-deep .voucher-input .p-inputnumber-input:disabled {
    background-color: #ffffff !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Remove spinner buttons from disabled inputs */
::ng-deep .input-highlight-blue .p-inputnumber-button-group,
::ng-deep .voucher-input .p-inputnumber-button-group {
    display: none;
}

/* Custom Divider styling */
.divider-custom {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.75rem 0;
}

.divider-custom::before,
.divider-custom::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #e0e0e0;
}

.divider-text {
    padding: 0 1rem;
    font-size: 0.75rem;
    color: #757575;
    font-weight: 600;
    letter-spacing: 1.2px;
}

/* Footer Buttons */
::ng-deep .return-amount-dialog .p-dialog-footer button {
    padding: 0.75rem 1.75rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
    font-size: 0.95rem;
}

::ng-deep .return-amount-dialog .p-button-text {
    color: #6c757d;
    border: 1px solid transparent;
}

::ng-deep .return-amount-dialog .p-button-text:hover {
    background-color: #f1f3f5;
    color: #495057;
}

::ng-deep .return-amount-dialog .p-button-success {
    background-color: #4caf50;
    border-color: #4caf50;
}

::ng-deep .return-amount-dialog .p-button-success:enabled:hover {
    background-color: #45a049;
    border-color: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

::ng-deep .return-amount-dialog .p-button-success:disabled {
    background-color: #a5d6a7;
    border-color: #a5d6a7;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Grid system for PrimeNG */
.p-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    margin-top: 0;
}

.p-col-12 {
    flex: 0 0 100%;
    padding: 0.5rem;
}

@media (min-width: 768px) {
    .p-col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Utility classes */
.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.block {
    display: block;
}

.w-full {
    width: 100%;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    ::ng-deep .return-amount-dialog {
        width: 95% !important;
    }
    
    .p-col-12 {
        flex: 0 0 100%;
    }
    
    ::ng-deep .return-amount-dialog .p-dialog-content {
        padding: 1rem;
    }
    
    .p-grid {
        margin: 0;
    }
    
    .p-col-12 {
        padding: 0.25rem 0;
    }
}

/* ============================================
   REPORTVIEW CUSTOM STYLES
   ============================================ */

/* Fix scrolling issues */
html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
}

.page-container {
    overflow: visible !important;
    height: auto !important;
}

.inner-page-container {
    overflow: visible !important;
    height: auto !important;
}

.white {
    overflow: visible !important;
}

/* Header Styles */
.reportview-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem 0;
    margin: -15px -15px 0 -15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.reportview-title {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.reportview-title-icon {
    font-size: 2rem;
    margin-right: 0.75rem;
}

.reportview-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.9rem;
    display: inline-block;
}

/* Filter Section */
.reportview-filter-section {
    background: #f8f9fa;
    padding: 2rem 0;
    margin: 0 -15px;
    border-bottom: 1px solid #e9ecef;
}

/* Summary Section */
.reportview-summary-section {
    background: #ffffff;
    padding: 2rem 0;
    margin: 0 -15px;
}

.reportview-summary-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-left: 4px solid;
    height: 100%;
}

.reportview-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.reportview-summary-total {
    border-left-color: #667eea;
}

.reportview-summary-credit {
    border-left-color: #28a745;
}

.reportview-summary-debit {
    border-left-color: #dc3545;
}

.reportview-summary-balance {
    border-left-color: #ffc107;
}

.reportview-summary-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 2rem;
    flex-shrink: 0;
}

.reportview-summary-total .reportview-summary-icon {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.reportview-summary-credit .reportview-summary-icon {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.reportview-summary-debit .reportview-summary-icon {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.reportview-summary-balance .reportview-summary-icon {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.reportview-summary-content {
    flex: 1;
}

.reportview-summary-content h6 {
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reportview-summary-content h3 {
    margin: 0.5rem 0 0 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
}

.reportview-input-group {
    margin-bottom: 0;
}

.reportview-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.reportview-label i {
    margin-right: 0.25rem;
    color: #667eea;
}

/* Action Buttons */
.reportview-action-buttons {
    display: flex;
    gap: 1rem;
}

.reportview-btn {
    padding: 0.75rem 2rem !important;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.reportview-btn-generate {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: none !important;
}

.reportview-btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.reportview-btn-clear {
    background: #6c757d !important;
    border: none !important;
}

.reportview-btn-clear:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

/* Data Section */
.reportview-data-section {
    padding: 2rem 0 3rem 0;
}

.reportview-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

/* Toolbar */
.reportview-toolbar {
    background: #ffffff;
    padding: 1.5rem;
    border-bottom: 2px solid #f1f3f5;
}

.reportview-search-box {
    position: relative;
}

.reportview-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 1;
}

.reportview-search-input {
    padding-left: 2.75rem !important;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
}

.reportview-search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

.reportview-export-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.reportview-export-btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
    transition: all 0.3s ease;
}

.reportview-export-btn:hover {
    transform: translateY(-3px);
}

/* Table Container - NO SCROLLABLE MODE */
.reportview-table-container {
    background: #ffffff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar for table container */
.reportview-table-container::-webkit-scrollbar {
    height: 8px;
}

.reportview-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.reportview-table-container::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.reportview-table-container::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* PrimeNG Table Overrides */
::ng-deep .reportview-table {
    width: 100%;
}

::ng-deep .reportview-table .p-datatable-wrapper {
    overflow: visible !important;
}

::ng-deep .reportview-table .p-datatable-table {
    width: 100%;
    border-collapse: collapse;
}

::ng-deep .reportview-table .p-datatable-thead > tr > th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 1rem !important;
    border: none !important;
    font-size: 0.9rem;
    white-space: nowrap;
}

::ng-deep .reportview-table .p-datatable-thead > tr > th i {
    margin-right: 0.5rem;
}

::ng-deep .reportview-table .p-datatable-tbody > tr > td {
    padding: 1rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f3f5 !important;
    border-left: none !important;
    border-right: none !important;
}

::ng-deep .reportview-table .p-datatable-tbody > tr {
    transition: all 0.2s ease;
}

::ng-deep .reportview-table .p-datatable-tbody > tr:hover {
    background-color: #f8f9fa !important;
}

/* Paginator styling */
::ng-deep .reportview-table .p-paginator {
    background: #f8f9fa !important;
    border: none !important;
    padding: 1rem !important;
    border-top: 2px solid #e9ecef !important;
}

::ng-deep .reportview-table .p-paginator .p-paginator-current {
    color: #495057 !important;
}

::ng-deep .reportview-table .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    background: #667eea !important;
    border-color: #667eea !important;
    color: #ffffff !important;
}

/* Table Cell Styles */
.reportview-sno-badge {
    display: inline-block;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.reportview-payment-type {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #e7f3ff;
    color: #0066cc;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
}

.reportview-date {
    color: #495057;
    font-size: 0.9rem;
}

.reportview-date i {
    margin-right: 0.25rem;
    color: #667eea;
}

.reportview-reference {
    font-family: 'Courier New', monospace;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #495057;
    display: inline-block;
}

.reportview-bank-name {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.reportview-reconcile-date {
    color: #6c757d;
    font-size: 0.85rem;
}

.reportview-amount {
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.reportview-credit {
    color: #28a745;
}

.reportview-debit {
    color: #dc3545;
}

.reportview-zero {
    color: #adb5bd;
    font-size: 0.9rem;
}

/* Empty State */
.reportview-empty-state {
    text-align: center;
    color: #6c757d;
    padding: 3rem 1rem;
}

.reportview-empty-state i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
    display: block;
}

.reportview-empty-state p {
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .reportview-title {
        font-size: 1.25rem;
    }
    
    .reportview-title-icon {
        font-size: 1.5rem;
    }
    
    .reportview-filter-section {
        padding: 1rem 0;
    }
    
    .reportview-summary-section {
        padding: 1rem 0;
    }
    
    .reportview-summary-content h3 {
        font-size: 1.5rem;
    }
    
    .reportview-action-buttons {
        flex-direction: column;
    }
    
    .reportview-btn {
        width: 100%;
    }
    
    .reportview-toolbar {
        padding: 1rem;
    }
    
    .reportview-export-buttons {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .reportview-data-section {
        padding: 1rem 0 2rem 0;
    }
}

/* Ensure table is responsive */
@media (max-width: 992px) {
    .reportview-table-container {
        overflow-x: auto;
    }
    
    ::ng-deep .reportview-table .p-datatable-thead > tr > th,
    ::ng-deep .reportview-table .p-datatable-tbody > tr > td {
        white-space: nowrap;
    }
}

/* Print Styles */
@media print {
    .reportview-filter-section,
    .reportview-toolbar,
    ::ng-deep .reportview-table .p-paginator {
        display: none !important;
    }
    
    .reportview-header {
        background: #667eea !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .reportview-data-section {
        padding: 0;
    }
    
    ::ng-deep .reportview-table .p-datatable-thead > tr > th {
        background: #667eea !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .page-container,
    .inner-page-container {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Loading Spinner */
/* .page-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} */

/* Fix for PrimeNG dropdown and calendar in filter section */
::ng-deep .reportview-filter-section .p-dropdown,
::ng-deep .reportview-filter-section .p-calendar {
    width: 100%;
}

::ng-deep .reportview-filter-section .p-inputtext {
    width: 100%;
}

/* Ensure proper alignment for sort icons */
::ng-deep .reportview-table .p-sortable-column-icon {
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* Toast notification positioning */
::ng-deep .p-toast {
    z-index: 99999 !important;
}

/* Cost Variance Report Table Styles */
.cost-variance-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

::ng-deep .cost-variance-report-table {
    font-size: 13px;
}

::ng-deep .cost-variance-report-table .p-datatable-wrapper {
    border-radius: 8px;
    overflow: visible !important;
}

::ng-deep .cost-variance-report-table .p-datatable-scrollable-wrapper {
    overflow: visible !important;
}

::ng-deep .cost-variance-report-table .p-datatable-scrollable-view {
    overflow: visible !important;
}

::ng-deep .cost-variance-report-table .p-datatable-scrollable-body {
    overflow: visible !important;
}

::ng-deep .cost-variance-report-table table {
    width: 2200px !important;
    border-collapse: separate;
    border-spacing: 0;
}

::ng-deep .cost-variance-report-table .p-datatable-thead > tr > th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    min-width: 120px;
}

::ng-deep .cost-variance-report-table .cv-frozen-col {
    position: sticky !important;
    left: 0;
    z-index: 20;
    background: white;
}

::ng-deep .cost-variance-report-table tbody .cv-frozen-col {
    background: white;
    font-weight: 500;
}

::ng-deep .cost-variance-report-table tfoot .cv-frozen-col {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    font-weight: 700;
}

::ng-deep .cost-variance-report-table .cv-section-header {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

::ng-deep .cost-variance-report-table .cv-bom-section {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

::ng-deep .cost-variance-report-table .cv-production-section {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}

::ng-deep .cost-variance-report-table .cv-variance-section {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}

::ng-deep .cost-variance-report-table .p-datatable-tbody > tr {
    transition: all 0.3s ease;
}

::ng-deep .cost-variance-report-table .p-datatable-tbody > tr:hover {
    background-color: #f8f9ff !important;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

::ng-deep .cost-variance-report-table .p-datatable-tbody > tr > td {
    padding: 12px 10px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    min-width: 120px;
}

::ng-deep .cost-variance-report-table .cv-number-cell {
    text-align: right;
    font-family: 'Roboto Mono', monospace;
    font-weight: 500;
}

::ng-deep .cost-variance-report-table .cv-highlight-col {
    background-color: #fef3c7;
    font-weight: 600;
}

::ng-deep .cost-variance-report-table .cv-negative-variance {
    color: #dc2626;
    font-weight: 600;
}

::ng-deep .cost-variance-report-table .cv-positive-variance {
    color: #16a34a;
    font-weight: 600;
}

::ng-deep .cost-variance-report-table .cv-total-row {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    font-weight: 700;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

::ng-deep .cost-variance-report-table .cv-total-row td {
    padding: 14px 10px;
    border-top: 3px solid #667eea;
    font-size: 13px;
}

/* Scrollbar Styles for Cost Variance Table */
.cost-variance-table-wrapper::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.cost-variance-table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.cost-variance-table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

.cost-variance-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* Card Styling for Cost Variance Report */
.cost-variance-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

::ng-deep .cost-variance-card .p-toolbar {
    background: #f9fafb;
    border: none;
    border-radius: 12px 12px 0 0;
    padding: 1rem;
}

/* Component-specific overrides */
.dashboard-summary h4 {
    font-size: 24px;
    margin: 10px 0 5px 0;
}

.dashboard-summary i {
    font-size: 32px;
    margin-right: 10px;
}

/* Ensure proper tab styling */
::ng-deep .main-tab-container .p-tabview-nav {
    background: #fff !important;
}

::ng-deep .main-tab-container .p-tabview-panel {
    padding-top: 20px !important;
}

/* Summary card responsive */
@media (max-width: 768px) {
    .dashboard-summary {
        margin-bottom: 15px;
    }
}

/* Production Report Component Styles - Unique Class Names */
/* All classes prefixed with 'prod-report-' to avoid conflicts */
/* Designed to work within standard page-container layout */

/* Summary Cards Grid */
.prod-report-summary-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.prod-report-summary-card {
  border-radius: 15px;
  padding: 25px;
  color: white;
  transition: transform 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

.prod-report-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prod-report-card-info {
  flex: 1;
}

.prod-report-card-label {
  margin: 0 0 8px 0;
  font-size: 14px;
  opacity: 0.9;
}

.prod-report-card-value {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
}

.prod-report-card-sub {
  margin: 8px 0 0 0;
  font-size: 12px;
  opacity: 0.8;
}

.prod-report-card-icon i {
  font-size: 48px;
  opacity: 0.3;
}

.prod-report-card-production {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.prod-report-card-rawcost {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 10px 30px rgba(240, 147, 251, 0.4);
}

.prod-report-card-markup {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 10px 30px rgba(79, 172, 254, 0.4);
}

.prod-report-card-prodcost {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  box-shadow: 0 10px 30px rgba(67, 233, 123, 0.4);
}

/* Charts Grid */
.prod-report-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.prod-report-chart-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
}

.prod-report-chart-title {
  margin: 0 0 20px 0;
  color: #2d3748;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.prod-report-chart-icon {
  font-size: 24px;
  color: #667eea;
}

/* Table Card */
.prod-report-table-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

/* PrimeNG Table Styles */
.prod-report-table .p-datatable-thead > tr > th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  /* color: white !important; */
  padding: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
}

.prod-report-table .p-datatable-thead > tr > th:first-child {
  text-align: left;
  color: #000;
}

.prod-report-table .p-datatable-tbody > tr {
  transition: all 0.3s;
}

.prod-report-table .p-datatable-tbody > tr:hover {
  background: #e3f2fd !important;
}

.prod-report-table .p-datatable-tbody > tr > td {
  padding: 12px !important;
  font-size: 13px !important;
  border: none !important;
  border-bottom: 1px solid #3b363654 !important;
}

.prod-report-table .prod-report-row-even {
  background: #f8f9fa;
}

.prod-report-table .prod-report-row-odd {
  background: white;
}

.prod-report-table .p-datatable-tfoot > tr > td {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  padding: 15px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #2d3748 !important;
  border: none !important;
}

/* Table Cell Styles */
.prod-report-product-name {
  color: #2d3748;
  font-weight: 500;
}

.prod-report-text-center {
  text-align: center;
}

.prod-report-text-right {
  text-align: right;
}

.prod-report-text-muted {
  color: #718096;
}

.prod-report-font-semibold {
  font-weight: 600;
  color: #2d3748;
}

.prod-report-font-bold {
  font-weight: 700;
  color: #2d3748;
}

.prod-report-markup-value {
  color: #4facfe;
  font-weight: 500;
}

.prod-report-prodcost-value {
  color: #43e97b;
  font-weight: 600;
}

/* Shop Type Badges */
.prod-report-shop-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.prod-report-badge-food-court {
  background: #e3f2fd;
  color: #1976d2;
}

.prod-report-badge-butchery {
  background: #fce4ec;
  color: #c2185b;
}

.prod-report-badge-bakery {
  background: #f3e5f5;
  color: #7b1fa2;
}

.prod-report-badge-default {
  background: #f5f5f5;
  color: #666;
}

/* Footer Row */
.prod-report-footer-row {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  .prod-report-summary-cards-grid {
    grid-template-columns: 1fr;
  }

  .prod-report-charts-grid {
    grid-template-columns: 1fr;
  }

  .prod-report-card-value {
    font-size: 28px;
  }

  .prod-report-card-icon i {
    font-size: 36px;
  }
}

/* ApexCharts custom styles */
.apexcharts-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.apexcharts-tooltip-title {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.apexcharts-legend-text {
  color: #4a5568 !important;
}

/* production-report.component.css - Add these styles for Toolbar & Export */

/* ==================== TOOLBAR STYLES ==================== */

::ng-deep .prod-report-toolbar {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

::ng-deep .prod-report-toolbar .p-toolbar-group-left,
::ng-deep .prod-report-toolbar .p-toolbar-group-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Search Container */
.prod-report-search-container {
    position: relative;
    display: inline-block;
}

.prod-report-search-container .pi-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 14px;
    z-index: 1;
}

/* Search Input */
.prod-report-search-input {
    padding-left: 40px !important;
    width: 300px;
    height: 38px;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.prod-report-search-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15) !important;
}

.prod-report-search-input::placeholder {
    color: #adb5bd;
    font-size: 13px;
}

/* Export Buttons */
.prod-report-export-btn {
    height: 38px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    margin-left: 8px !important;
}

.prod-report-export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.prod-report-export-btn .pi {
    font-size: 16px;
}

/* Excel Button */
.prod-report-export-btn.p-button-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: none !important;
}

.prod-report-export-btn.p-button-success:hover {
    background: linear-gradient(135deg, #218838 0%, #1fa885 100%) !important;
}

/* PDF Button */
.prod-report-export-btn.p-button-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border: none !important;
}

.prod-report-export-btn.p-button-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
}

/* ==================== TABLE ENHANCEMENTS ==================== */

/* Table Sorting Icons */
::ng-deep .prod-report-table th.p-sortable-column:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6b429a 100%) !important;
}

::ng-deep .prod-report-table .p-sortable-column-icon {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px;
    margin-left: 5px;
}

::ng-deep .prod-report-table th.p-highlight .p-sortable-column-icon {
    color: #fff !important;
}

/* Empty Message Styling */
.prod-report-empty-message {
    padding: 50px 20px !important;
}

.prod-report-empty-message i {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.prod-report-empty-message p {
    color: #6c757d;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

/* ==================== RESPONSIVE TOOLBAR ==================== */

@media screen and (max-width: 768px) {
    ::ng-deep .prod-report-toolbar {
        padding: 10px !important;
    }

    ::ng-deep .prod-report-toolbar .p-toolbar-group-left,
    ::ng-deep .prod-report-toolbar .p-toolbar-group-right {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .prod-report-search-input {
        width: 100%;
    }

    .prod-report-export-btn {
        width: 100%;
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 576px) {
    .prod-report-search-input {
        font-size: 13px !important;
        padding-left: 35px !important;
    }

    .prod-report-search-container .pi-search {
        font-size: 12px;
        left: 10px;
    }
}

/* ==================== PRINT STYLES FOR EXPORTS ==================== */

@media print {
    .prod-report-toolbar,
    ::ng-deep .p-paginator {
        display: none !important;
    }

    .prod-report-table-card {
        page-break-inside: avoid;
    }

    ::ng-deep .prod-report-table {
        font-size: 10px !important;
    }
}

/* ==================== LOADING STATE ==================== */

::ng-deep .prod-report-toolbar .p-toolbar-group-right button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== TOOLTIP CUSTOMIZATION ==================== */

::ng-deep .p-tooltip {
    font-size: 12px !important;
}

::ng-deep .p-tooltip .p-tooltip-text {
    padding: 6px 10px !important;
    background: #2d3748 !important;
    border-radius: 6px !important;
}

/* ==================== ADDITIONAL ENHANCEMENTS ==================== */

/* Highlight search results (optional) */
::ng-deep .prod-report-table .p-highlight {
    background: #fff3cd !important;
    color: #856404 !important;
}

/* Smooth scroll for table */
::ng-deep .prod-report-table .p-datatable-scrollable-body {
    scroll-behavior: smooth;
}

/* Custom scrollbar for table */
::ng-deep .prod-report-table .p-datatable-scrollable-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::ng-deep .prod-report-table .p-datatable-scrollable-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::ng-deep .prod-report-table .p-datatable-scrollable-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

::ng-deep .prod-report-table .p-datatable-scrollable-body::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* Button focus states */
.prod-report-export-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Success animation for export */
@keyframes successPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.prod-report-export-btn.export-success {
    animation: successPulse 0.3s ease;
}
/*  PRODUCTION ENTRY TOGGLE BUTTON FOR PLAN BASED OR DIRECT START */

.custom-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-toggle {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-toggle.active {
    background-color: #4CAF50;
}

.custom-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-toggle.active .custom-toggle-slider {
    transform: translateX(26px);
}

.custom-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*  PRODUCTION ENTRY TOGGLE BUTTON FOR PLAN BASED OR DIRECT END */