/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
html, body {
	background:#3d71b8 url(../wallpapers/desktop_lr.jpg) no-repeat left top;
    font: normal 12px tahoma, arial, verdana, sans-serif;
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow: hidden;
	height: 100%;
	background-size:100% 100vh;
}

.start {
	background-image: url( ../images/taskbar/black/startbutton-icon.gif ) !important;
}

/* =========================================================
   MODERN START MENU
   ========================================================= */
.ux-start-menu {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #d5d9de !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    overflow: hidden !important;
}

/* Remove legacy Ext JS backgrounds */
.ux-start-menu .ux-start-menu-tl,
.ux-start-menu .ux-start-menu-tr,
.ux-start-menu .ux-start-menu-tc,
.ux-start-menu .ux-start-menu-ml,
.ux-start-menu .ux-start-menu-bc,
.ux-start-menu .ux-start-menu-bl,
.ux-start-menu .ux-start-menu-br,
.ux-start-menu .x-window-mc,
.ux-start-menu .x-window-body {
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
}

/* =========================================================
   HEADER
   ========================================================= */
.ux-start-menu .x-window-header {
    height: 50px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e5e9 !important;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
}

.ux-start-menu .x-window-header-text {
    color: #222222 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 50px !important;
}

/* =========================================================
   BODY
   ========================================================= */
.ux-start-menu-body {
    background: #ffffff !important;
    background-image: none !important;
}

/* Applications */
.ux-start-menu-apps-panel {
    background: #ffffff !important;
    border: 0 !important;
}

/* Tools */
.ux-start-menu-tools-panel {
    background: #f7f8fa !important;
    border: 0 !important;
    border-left: 1px solid #e2e5e9 !important;
}

/* =========================================================
   START MENU ITEMS
   ========================================================= */
.ux-start-menu .x-menu-list {
    padding: 8px !important;
}

.ux-start-menu .x-menu-list-item {
    margin: 2px 0 !important;
}

.ux-start-menu .x-menu-item {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Icons */
.ux-start-menu .x-menu-item-icon {
    top: 10px !important;
    left: 10px !important;
}

/* Items having icons */
.ux-start-menu a.x-menu-item {
    padding-left: 36px !important;
}

/* Hover */
.ux-start-menu .x-menu-item-active {
    background: #f0f2f5 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 6px !important;
}

/* Remove old Ext JS hover backgrounds */
.ux-start-menu .x-menu-item-active a.x-menu-item {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #111111 !important;
}

/* Start menu scrolling */
.ux-start-menu-apps-panel,
.ux-start-menu-tools-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Modern browsers */
.ux-start-menu-apps-panel::-webkit-scrollbar,
.ux-start-menu-tools-panel::-webkit-scrollbar {
    width: 10px;
}

.ux-start-menu-apps-panel::-webkit-scrollbar-track,
.ux-start-menu-tools-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.ux-start-menu-apps-panel::-webkit-scrollbar-thumb,
.ux-start-menu-tools-panel::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 5px;
}

.ux-start-menu-apps-panel::-webkit-scrollbar-thumb:hover,
.ux-start-menu-tools-panel::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.bogus {
	background-image: url( ../images/bogus.png ) !important;
}

.logout {
	background-image: url( ../images/logout.gif ) !important;
}

.switch-icon {
	background-image: url( ../images/icons/switch-icon.png ) !important;
}

.logout-icon {
	background-image: url( ../images/icons/logout-icon.png ) !important;
}

.accounts-icon {
	background-image: url( ../images/account-icon.gif ) !important;
}

.inventory-icon {
	background-image: url( ../images/inventory-icon.png ) !important;
}

.incident-icon {
	background-image: url( ../images/compliance.png ) !important;
}

.dealership-icon {
	background-image: url( ../images/dealership-icon.png ) !important;
}

.hrm-icon {
	background-image: url( ../images/hrm-icon.gif ) !important;
}

.academic-icon {
	background-image: url( ../images/icons/education.png ) !important;
}

.staff-icon {
	background-image: url( ../images/user-icon.png ) !important;
}

.property-icon {
	background-image: url( ../images/property-icon.gif ) !important;
}

.procurement-icon {
	background-image: url( ../images/procurement-icon.png ) !important;
}

.billrev-icon {
	background-image: url( ../images/Money-icon.png ) !important;
}

.car-rent-icon {
	background-image: url( ../images/car-rental.png ) !important;
}

.car-sales-icon {
	background-image: url( ../images/car-sales16.png ) !important;
}

.house-sales-icon {
	background-image: url( ../images/house_sale16.png ) !important;
}

.give-percentage {
	background-image: url( ../images/icons/percentage.png) !important;
}

.project-icon-small {
	background-image: url( ../images/icons/Project-icon-small.png ) !important;
}

.hotelmgt-icon {
	background-image: url( ../images/icons/pin_house.png ) !important;
}

.facilitymgt-icon {
	background-image: url( ../images/icons/pin_house.png.png ) !important;
}

.umbrella-icon {
	background-image: url( ../images/icons/umbrella-icon.png ) !important;
}

.transport-truck-icon {
	background-image: url( ../images/icons/Transport-Truck-icon.png ) !important;
}

.crm-icon {
	background-image: url( ../images/icons/crm_3.png ) !important;
}

.edms-icon {
	background-image: url( ../images/icons/folders.png ) !important;
}

.user-group-icon {
	background-image: url( ../images/icons/user-group-icon.png ) !important;
}

.hotel-icon{
	background-image: url( ../images/icons/hotel-icon.png) !important;
}

.customers-icon {
	background-image: url( ../images/icons/customers-icon.png ) !important;
}

.Files-Check-File-icon {
	background-image: url( ../images/icons/Files-Check-File-icon.png) !important;
}

.settings {
	background-image: url( ../images/gears.gif ) !important;
}

.settings-folder {
	background-image: url( ../images/gear-folder.png ) !important;
}

.sysadmin {
	background-image: url( ../images/system_admin.gif ) !important;
}

.img-link {
	cursor: pointer;
}

#dpanels {
	width: 250px;
	float: right;
}

#dpanels .x-panel {
	margin: 15px;
}

#dpanels .x-date-picker {
	border: 0 none;
	border-top: 0 none;
	background: transparent;
}

#dpanels .x-date-picker td.x-date-active {
	background: #ffffff;
}

#dpanels .x-date-picker {
	width: 100% !important;
}

#x-desktop {
	width: 100%;
	height: 100%;
	border: 0 none;
	position: relative;
    overflow:hidden;
    zoom:1;
}

#license-alert {
	position:absolute;
	bottom:0;
	right:0;
    font-size: 25px;
    font-weight: bold;
    color: #A9A9A9;
}

#ux-taskbar .x-btn {
	margin: 1px 0 0 1px;
}

#ux-taskbar-start .x-btn {
	margin: 0;
}

#ux-taskbar button {
	/* width: 150px;
	overflow: hidden; */
	text-align: left;
	color: #ffffff;
}
#title-bar-wrapper {
	height:35px;
}

#title-bar {
	color: #225599;
	padding: 9px 7px;
	font: bold 16px tahoma,arial,verdana,sans-serif;
	float:left;
}

#x-logout {
	float:right;
	padding:6px 7px;
}

.x-btn-text-icon .x-btn-center .logout {
	background-position:0pt 3px;
	background-repeat:no-repeat;
	padding:3px 0pt 3px 18px;
}

#ux-taskbar {
	background:transparent none;
	height:30px;
	margin:0;
	padding:0;
	position:relative;
	z-index:12001;
}

.x-btn-icon .ux-taskbutton-center .x-btn-text{
	background-position: center;
	background-repeat: no-repeat;
	height: 16px;
	width: 16px;
	cursor:pointer;
	white-space: nowrap;
    padding:0;
}
.x-btn-icon .ux-taskbutton-center{
	padding:1px;
}

.x-btn-text-icon .ux-taskbutton-center .x-btn-text{
	background-position: 0 6px;
	background-repeat: no-repeat;
	padding:7px 0px 7px 20px;
}

.x-btn-text-icon .ux-startbutton-center .x-btn-text{
	background-position: 0 4px;
	background-repeat: no-repeat;
	color:#000000 !important;
	font-weight:bold;
	padding:7px 0px 7px 28px;
}

.ux-taskbutton-left, .ux-taskbutton-right{
	font-size:1px;
    line-height:1px;
}
.ux-taskbutton-left{
	width:4px;
	height:28px;
	background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 0;
}
.ux-taskbutton-right{
	width:4px;
	height:28px;
	background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -28px;
}
.ux-taskbutton-left i, .ux-taskbutton-right i{
	display:block;
    width:4px;
    overflow:hidden;
    font-size:1px;
    line-height:1px;
}
.ux-taskbutton-center{
	background:url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -56px;
	vertical-align: middle;
	text-align:center;
	padding:0 5px;
	cursor:pointer;
	white-space:nowrap;
}

#ux-taskbar .ux-taskbutton-left{
	background-position:0 0;
}
#ux-taskbar .ux-taskbutton-right{
	background-position:0 -28px;
}
#ux-taskbar .ux-taskbutton-center{
	background-position:0 -56px;
}

#ux-taskbar .x-btn-over .ux-taskbutton-left{
	background-position:0 -252px;
}
#ux-taskbar .x-btn-over  .ux-taskbutton-right{
	background-position:0 -280px;
}
#ux-taskbar .x-btn-over .ux-taskbutton-center{
	background-position:0 -308px;
}

#ux-taskbar .x-btn-click .ux-taskbutton-left{
	background-position:0 -168px;
}
#ux-taskbar .x-btn-click  .ux-taskbutton-right{
	background-position:0 -196px;
}
#ux-taskbar .x-btn-click .ux-taskbutton-center{
	background-position:0 -224px;
}

#ux-taskbar .active-win .ux-taskbutton-left{
	background-position:0 -84px;
}
#ux-taskbar .active-win  .ux-taskbutton-right{
	background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -112px;
}
#ux-taskbar .active-win .ux-taskbutton-center{
	background:url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -140px;
}
#ux-taskbar .active-win .ux-taskbutton-center button {
    color:#fff;
}

#spacer {
	height: 25px;
	float: left;
	width: 0;
	overflow: hidden;
	margin-top: 2px;
}

.x-window-body p,.x-panel-body p {
	padding: 10px;
	margin: 0;
}

.x-window-maximized .x-window-bc {
	height:0;
}

.icon-grid {
    background-image:url( ../images/grid.png ) !important;
}

.accordion {
    background-image:url(../images/accordian.gif) !important;
}
.tabs {
    background-image:url(../images/tabs.gif) !important;
}

/* IM window icons */

.user {
    background: transparent url('../images/icons/user.gif') 0 2px no-repeat !important;
}

.user-add {
    background: transparent url('../images/icons/user_add.gif') 0 2px no-repeat !important;
}

.ux-start-menu {
	background:transparent none;
	border:0px none;
	padding:0;
}

.ux-start-menu-tl .x-window-header {
	color:#f1f1f1;
	font:bold 11px tahoma,arial,verdana,sans-serif;
    padding:5px 0 4px 0;
}

.x-panel-tl .x-panel-icon, .ux-start-menu-tl .x-panel-icon {
	background-position:0pt 4px;
	background-repeat:no-repeat;
	padding-left:20px !important;
}

.ux-start-menu-tl {
	background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0 0;
	padding-left:6px;
    zoom:1;
    z-index:1;
    position:relative;
}

.ux-start-menu-tr {
	background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right 0;
	padding-right:6px;
}

.ux-start-menu-tc {
	background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 0;
	overflow:hidden;
    zoom:1;
}

.ux-start-menu-ml {
	background: transparent url( ../images/taskbar/black/start-menu-left-right.png ) repeat-y 0 0;
	padding-left:6px;
    zoom:1;
}

.ux-start-menu-bc {
	background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 bottom;
    zoom:1;
}

.ux-start-menu-bc .x-window-footer {
    padding-bottom:6px;
    zoom:1;
    font-size:0;
    line-height:0;
}

.ux-start-menu-bl {
	background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0 bottom;
	padding-left:6px;
    zoom:1;
}

.ux-start-menu-br {
	background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right bottom;
	padding-right:6px;
    zoom:1;
}

.x-panel-nofooter .ux-start-menu-bc {
	height:6px;
}

.ux-start-menu-splitbar-h {
	background-color:#d0d0d0;
}


.ux-start-menu-bwrap {
	background:transparent none;
	border:0px none;
}

.ux-start-menu-body {
	background:transparent none;
	border:0px none;
}

.ux-start-menu-apps-panel {
	background:#ffffff none;
	border:1px solid #1e2124;
}

.ux-start-menu-tools-panel {
	border:0px none;
	background:transparent url( ../images/taskbar/black/start-menu-right.png ) repeat-y scroll right 0pt;
}

#ux-taskbar-start {
	background:#000000 url( ../images/taskbar/black/taskbar-start-panel-bg.gif ) repeat-x left top;
	left:0px;
	padding:0;
	position:absolute;
}

#ux-taskbar-start .x-toolbar {
	background: none;
	padding:0px;
	border:0px none;
}

#ux-taskbuttons-panel {
	background:#000000 url( ../images/taskbar/black/taskbuttons-panel-bg.gif ) repeat-x left top;
	padding-top:0;
	position:relative;
}

.ux-taskbuttons-strip-wrap {
	/* overflow:hidden;
	position:relative;
	width:100%; */

	width:100%;
    overflow:hidden;
    position:relative;
    zoom:1;
}

ul.ux-taskbuttons-strip {
	display:block;
	width:5000px;
    zoom:1;
}

ul.ux-taskbuttons-strip li {
    float:left;
    margin-left:2px;
}


ul.ux-taskbuttons-strip li.ux-taskbuttons-edge {
    float:left;
    margin:0 !important;
    padding:0 !important;
    border:0 none !important;
    font-size:1px !important;
    line-height:1px !important;
    overflow:hidden;
    zoom:1;
    background:transparent !important;
    width:1px;
}

.x-clear {
    clear:both;
    height:0;
    overflow:hidden;
    line-height:0;
    font-size:0;
}

.x-taskbuttons-scrolling {
	position:relative;
}

.x-taskbuttons-scrolling .ux-taskbuttons-strip-wrap {
	margin-left:18px;
	margin-right:18px;
}

td.ux-taskButtons-edge {
    /*float:left;*/
    margin:0 !important;
    padding:0 !important;
    border:0 none !important;
    font-size:1px !important;
    line-height:1px !important;
    overflow:hidden;
    zoom:1;
    background:transparent !important;
    width:1px;
}

.ux-taskbuttons-scroller-left {
    background: transparent url( ../images/taskbar/black/scroll-left.gif ) no-repeat -18px 0;
    width:18px;
    position:absolute;
    left:1px;
    top:0px;
    z-index:10;
    cursor:pointer;
}
.ux-taskbuttons-scroller-left-over {
    background-position: 0 0;
}
.ux-taskbuttons-scroller-left-disabled {
    background-position: -18px 0;
    opacity:.5;
    -moz-opacity:.5;
    filter:alpha(opacity=50);
    cursor:default;
}
.ux-taskbuttons-scroller-right {
    background: transparent url( ../images/taskbar/black/scroll-right.gif ) no-repeat 0 0;
    width:18px;
    position:absolute;
    right:0;
    top:0px;
    z-index:10;
    cursor:pointer;
}
.ux-taskbuttons-scroller-right-over {
    background-position: -18px 0;
}
.ux-taskbuttons-scroller-right-disabled {
    background-position: 0 0;
    opacity:.5;
    -moz-opacity:.5;
    filter:alpha(opacity=50);
    cursor:default;
}

.ux-toolmenu-sep {
	background-color:#18191a;
	border-bottom:1px solid #858789;
	display:block;
	font-size:1px;
	line-height:1px;
	margin:2px 3px;
}

.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item a.x-menu-item {
	color:#ffffff;
}

.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item .x-menu-item-active a.x-menu-item {
	color:#000000;
}

.ux-start-menu-tools-panel .x-menu-item-active {
	background: #525456 url( ../images/taskbar/black/item-over.gif ) repeat-x left bottom;
	border:1px solid #000000;
	padding: 0;
}

#ux-taskbar .x-splitbar-h {
	background:#000000 url( ../images/taskbar/black/taskbar-split-h.gif ) no-repeat 0 0;
	width:8px;
}

.x-window-header-text {
	cursor:default;
}

/*
 * Begin Start button
 */
.ux-startbutton-left, .ux-startbutton-right{
	font-size:1px;
    line-height:1px;
}
.ux-startbutton-left{
	width:10px;
	height:28px;
	background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 0;
}
.ux-startbutton-right{
	width:10px;
	height:30px;
	background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -28px;
}
.ux-startbutton-left i, .ux-startbutton-right i{
	display:block;
    width:10px;
    overflow:hidden;
    font-size:1px;
    line-height:1px;
}
.ux-startbutton-center{
	background:url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -56px;
	vertical-align: middle;
	text-align:center;
	padding:0;
	cursor:pointer;
	white-space:nowrap;
}

#ux-taskbar .ux-startbutton-left{
	background-position:0 0;
}
#ux-taskbar .ux-startbutton-right{
	background-position:0 -30px;
}
#ux-taskbar .ux-startbutton-center{
	background-position:0 -60px;
}

#ux-taskbar .x-btn-over .ux-startbutton-left{
	background-position:0 -270px;
}
#ux-taskbar .x-btn-over  .ux-startbutton-right{
	background-position:0 -300px;
}
#ux-taskbar .x-btn-over .ux-startbutton-center{
	background-position:0 -330px;
}

#ux-taskbar .x-btn-click .ux-startbutton-left{
	background-position:0 -180px;
}
#ux-taskbar .x-btn-click  .ux-startbutton-right{
	background-position:0 -210px;
}
#ux-taskbar .x-btn-click .ux-startbutton-center{
	background-position:0 -240px;
}

#ux-taskbar .active-win .ux-startbutton-left{
	background-position:0 -90px;
}
#ux-taskbar .active-win  .ux-startbutton-right{
	background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -120px;
}
#ux-taskbar .active-win .ux-startbutton-center{
	background:url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -150px;
}
#ux-taskbar .active-win .ux-startbutton-center button {
    color:#fff;
}

.toggle-switch {
    width: 42px;
    height: 22px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.toggle-switch-input {
    display: none;
}

.toggle-slider {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.toggle-switch-on {
    background: #7da7d9;
}

.toggle-switch-on .toggle-slider {
    left: 22px;
}
/*
 * End Start button
 */

.x-resizable-proxy{
    background:#C7DFFC;
    opacity:.5;
    -moz-opacity:.5;
    filter:alpha(opacity=50);
    border: 1px solid #3b5a82;
}

/* Desktop Shortcuts */
#x-shortcuts {
    display: none;
}
#x-shortcuts dt {
    float:left;
    margin:15px 0 0 15px;
    clear:left;
    width:158px;
    font:normal 10px tahoma,arial,verdana,sans-serif;
    text-align:center;
    zoom:1;
    display:block;
}

#x-shortcuts dt a {
    width:150px;
    display:none;
    color:white;
    font-weight: bold;
    text-decoration:none;
}

#x-shortcuts dt div {
    width:100%;
    color:white;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
}

.ext-ie #x-shortcuts dt img {
    background:transparent !important;
}

#x-shortcuts dt a:hover {
    text-decoration:underline;
}

/* shortcuts */
#saccobosa-win-shortcut{
	display:none;
}

.shortcut-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/curve-arrow48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/curve-arrow48x48.png', sizingMethod='scale');
}

.share-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/share48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/share48x48.png', sizingMethod='scale');
}

.saccobosa-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/tenant-leases-icon.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tenant-leases-icon.png', sizingMethod='scale');
}

#saccofosa-win-shortcut{
	display:none;
}

.saccofosa-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/tenant-leases-icon.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tenant-leases-icon.png', sizingMethod='scale');
}

#grid-win-shortcut{
	display:none;
}

.grid-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/house_rent48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/house_rent48x48.png', sizingMethod='scale');
}

.carrent-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/car-rent48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/car-rent48x48.png', sizingMethod='scale');
}

#facilitymgt-win-shortcut {
	display:none;
}

.facilitymgt-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/Maintence-repair48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Maintence-repair48x48.png', sizingMethod='scale');
}

.hotelmgt-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/house_pin48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/house_pin48x48.png', sizingMethod='scale');
}

#propertysales-win-shortcut{
	display:none;
}

.propertysales-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/house_sale48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/house_sale48x48.png', sizingMethod='scale');
}

.vehiclesale-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/car-sales.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/car-sales.png', sizingMethod='scale');
}

#acc-win-shortcut {
	display:none;
}

.acc-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/accounting48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/accounting48x48.png', sizingMethod='scale');
}

#billrev-win-shortcut {
	display:none;
}

.billrev-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/Money-icon48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Money-icon48x48.png', sizingMethod='scale');
}

#inv-win-shortcut {
	display:none;
}

.inv-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/inventory_48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/inventory_48x48.png', sizingMethod='scale');
}

#telcodealer-win-shortcut {
	display:none;
}

.telcodealer-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/handphone_48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/handphone_48x48.png', sizingMethod='scale');
}

#insidentmgt-win-shortcut {
	display:none;
}

.insidentmgt-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/compliance48x48.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/compliance48x48.png', sizingMethod='scale');
}

#hrm-win-shortcut {
	display:none;
}
.hrm-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/market-analysis-icon.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/market-analysis-icon.png', sizingMethod='scale');
}

#academic-win-shortcut {
	display:none;
}
.academic-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/education.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/education.png', sizingMethod='scale');
}

#valuation-win-shortcut{
	display: none;
}
.valuation-win-shortcut-img{
	width:48px;
	height:48px;
	background-image: url(../images/valuation-icon.png);
	background-repeat: no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/valuation-icon.png', sizingMethod='scale');
}

#crm-win-shortcut{
	display: none;
}
.crm-win-shortcut-img{
	width:48px;
	height:48px;
	background-image: url(../images/crm_1.png);
	background-repeat: no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/crm_1.png', sizingMethod='scale');
}

#projectmgmt-win-shortcut {
	display:none;
}
.projectmgmt-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/Project-icon.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Project-icon.png', sizingMethod='scale');
}

#procurement-win-shortcut {
	display:none;
}
.procurement-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/procurement.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/procurement.png', sizingMethod='scale');
}

#edms-win-shortcut {
	display:none;
}
.edms-win-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/folders.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/folders.png', sizingMethod='scale');
}

.blank-shortcut-img {
    width:48px;
    height:48px;
    background-image: url(../images/transparent.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png', sizingMethod='scale');
}

.chain{
	background: transparent url('../images/icons/chain.png') 0 2px no-repeat !important;
}

.resend{
	background: transparent url('../images/icons/resend.png') 0 2px no-repeat !important;
}

.check_stop{
	background: transparent url('../images/icons/check_stop.png') 0 2px no-repeat !important;
}

.check_unstop{
	background: transparent url('../images/icons/check_unstop.png') 0 2px no-repeat !important;
}

.check_unstop_black{
	background: transparent url('../images/icons/check_unstop_black.png') 0 2px no-repeat !important;
}

.check_cancel{
	background: transparent url('../images/icons/check_cancel.png') 0 2px no-repeat !important;
}

.check_lock{
	background: transparent url('../images/icons/check_lock.png') 0 2px no-repeat !important;
}

.add-layer{
	background: transparent url('../images/icons/add-layer.png') 0 2px no-repeat !important;
}

.plus-add{
	background: transparent url('../images/icons/plus-add.png') 0 2px no-repeat !important;
}

.plus-add-fill{
	background: transparent url('../images/icons/plus-add-fill.png') 0 2px no-repeat !important;
}

.user-profile{
	background: transparent url('../images/icons/profile.png') 0 2px no-repeat !important;
}

.save-disk{
	background: transparent url('../images/icons/arrow-save.png') 0 2px no-repeat !important;
}

.thumb-up{
	background: transparent url('../images/icons/thumb-up.png') 0 2px no-repeat !important;
}

.thumb-down{
	background: transparent url('../images/icons/thumb-down.png') 0 2px no-repeat !important;
}

.barcode{
	background: transparent url('../images/icons/barcode.png') 0 2px no-repeat !important;
}

.info{
	background: transparent url('../images/icons/info.png') 0 2px no-repeat !important;
}

.save-icon{
	background: transparent url('../images/icons/save-icon.png') 0 2px no-repeat !important;
}

.website{
	background: transparent url('../images/icons/website.png') 0 2px no-repeat !important;
}

.to-do-checklist{
	background: transparent url('../images/icons/User-Interface-To-Do-icon.png') 0 2px no-repeat !important;
}

.table-go-icon{
	background: transparent url('../images/icons/table-go-icon.png') 0 2px no-repeat !important;
}

.itax{
	background: transparent url('../images/icons/itax.png') 0 2px no-repeat !important;
}

.app-list{
	background: transparent url('../images/icons/app-list.png') 0 2px no-repeat !important;
}

.blocked-doc{
	background: transparent url('../images/icons/blocked.png') 0 2px no-repeat !important;
}

.checklist{
	background: transparent url('../images/icons/checklist-icon.png') 0 2px no-repeat !important;
}

.check-mark16{
	background: transparent url('../images/icons/check-mark16.png') 0 2px no-repeat !important;
}

.reject-mark16{
	background: transparent url('../images/icons/reject-mark16.png') 0 2px no-repeat !important;
}

.verified-account{
	background: transparent url('../images/icons/verified-account.png') 0 2px no-repeat !important;
}

.arrow-double-right-icon{
	background: transparent url('../images/icons/arrow-double-right-icon.png') 0 2px no-repeat !important;
}

.keyframe{
	background: transparent url('../images/icons/keyframe.png') 0 2px no-repeat !important;
}

.next-2-icon{
	background: transparent url('../images/icons/next-2-icon.png') 0 2px no-repeat !important;
}

.next-2-icon-bk{
	background: transparent url('../images/icons/next-2-icon-bk.png') 0 2px no-repeat !important;
}

.arrow-double-left-icon{
	background: transparent url('../images/icons/arrow-double-left-icon.png') 0 2px no-repeat !important;
}

.icon_padlock{
	background: transparent url('../images/icons/icon_padlock.png') 0 2px no-repeat !important;
}

.small_reset{
	background: transparent url('../images/icons/arrow_refresh_small.png') 0 2px no-repeat !important;
}

.placeholder-pin{
	background: transparent url('../images/icons/placeholder.png') 0 2px no-repeat !important;
}

.gmap-icon{
	background: transparent url('../images/icons/gmap-icon.png') 0 2px no-repeat !important;
}

.refresh-icon{
	background: transparent url('../images/icons/updated.png') 0 2px no-repeat !important;
}

.report_user{
	background: transparent url('../images/icons/report_user.png') 0 2px no-repeat !important;
}

.ok-icon{
	background: transparent url('../images/icons/ok-icon.png') 0 2px no-repeat !important;
}

.cancel-cross{
	background: transparent url('../images/icons/cross.gif') 0 2px no-repeat !important;
}

.broom-exclamation-icon{
	background: transparent url('../images/icons/broom-exclamation-icon.png') 0 2px no-repeat !important;
}

.tax-return{
	background: transparent url('../images/icons/tax-return.png') 0 2px no-repeat !important;
}

.quick{
	background: transparent url('../images/icons/quick.png') 0 2px no-repeat !important;
}

.work-in-progress{
	background: transparent url('../images/icons/work-in-progress.png') 0 2px no-repeat !important;
}

.print-chequebook{
	background: transparent url('../images/icons/print-chequebook.png') 0 2px no-repeat !important;
}

.silk-table-refresh{
	background: transparent url('../images/icons/arrow_refresh_small.png') 0 2px no-repeat !important;
}

.sign-stop-icon{
	background: transparent url('../images/icons/sign-stop-icon.png') 0 2px no-repeat !important;
}

.application_side_expand{
	background: transparent url('../images/icons/application_side_expand.png') 0 2px no-repeat !important;
}

.ready-doc{
	background: transparent url('../images/icons/ready.png') 0 2px no-repeat !important;
}

.withholding{
	background: transparent url('../images/icons/withholding.png') 0 2px no-repeat !important;
}

.research-doc{
	background: transparent url('../images/icons/research-doc.png') 0 2px no-repeat !important;
}

.reject-doc{
	background: transparent url('../images/icons/reject-doc.png') 0 2px no-repeat !important;
}

.application_view_list{
	background: transparent url('../images/icons/application_view_list.png') 0 2px no-repeat !important;
}

.payment-icon{
	background: transparent url('../images/icons/payment-icon.png') 0 2px no-repeat !important;
}

.add-cross{
	background: transparent url('../images/icons/add-cross.png') 0 2px no-repeat !important;
}

.em-pencil{
   background: transparent url('../images/icons/16-em-pencil.png') 0 2px no-repeat !important;
}

.eye{
   background: transparent url('../images/icons/eye.png') 0 2px no-repeat !important;
}

.write{
   background: transparent url('../images/icons/write.png') 0 2px no-repeat !important;
}

.table-add-icon{
   background: transparent url('../images/icons/table-add-icon.png') 0 2px no-repeat !important;
}

.accept-tick{
	background: transparent url('../images/icons/check.png') 0 2px no-repeat !important;
}

.zoom-search{
	background: transparent url('../images/icons/16-zoom.png') 0 2px no-repeat !important;
}

.advanced-search{
	background: transparent url('../images/icons/advanced-search.png') 0 2px no-repeat !important;
}

.search-magnifying-glass{
	background: transparent url('../images/icons/magnifying-glass.png') 0 2px no-repeat !important;
}

.suggestion{
	background: transparent url('../images/icons/suggestion.png') 0 2px no-repeat !important;
}

.add-plus{
	background: transparent url('../images/icons/add.png') 0 2px no-repeat !important;
}

.minus-sign{
	background: transparent url('../images/icons/minus-sign.png') 0 2px no-repeat !important;
}

.plus2.png{
	background: transparent url('../images/icons/plus2.png.png') 0 2px no-repeat !important;
}

.expand{
	background: transparent url('../images/icons/expand.png') 0 2px no-repeat !important;
}

.update{
	background: transparent url('../images/icons/update.png') 0 2px no-repeat !important;
}

.update-bulk{
	background: transparent url('../images/icons/update-bulk.png') 0 2px no-repeat !important;
}

.compress{
	background: transparent url('../images/icons/compress.png') 0 2px no-repeat !important;
}

.edit-profile{
	background: transparent url('../images/icons/edit-profile.png') 0 2px no-repeat !important;
}

.edit-document{
	background: transparent url('../images/icons/edit-document.png') 0 2px no-repeat !important;
}

.not-equal{
	background: transparent url('../images/icons/not-equal.png') 0 2px no-repeat !important;
}

.delete-dash{
	background: transparent url('../images/icons/delete.gif') 0 2px no-repeat !important;
}

.x-button{
	background: transparent url('../images/icons/x-button.png') 0 2px no-repeat !important;
}

.file_archive{
	background: transparent url('../images/icons/16-file-archive.png') 0 2px no-repeat !important;
}

.archive{
	background: transparent url('../images/icons/archive.png') 0 2px no-repeat !important;
}

.find{
	background: transparent url('../images/icons/find.png') 0 2px no-repeat !important;
}

.search-green{
	background: transparent url('../images/icons/search-green.png') 0 2px no-repeat !important;
}

.filter-more{
	background: transparent url('../images/icons/filter-more.png') 0 2px no-repeat !important;
}

.filter-less{
	background: transparent url('../images/icons/filter-less.png') 0 2px no-repeat !important;
}

.search-reset{
	background: transparent url('../images/icons/search-reset.png') 0 2px no-repeat !important;
}

.checklist{
	background: transparent url('../images/icons/checklist.png') 0 2px no-repeat !important;
}

.drink_empty{
	background: transparent url('../images/icons/drink_empty.png') 0 2px no-repeat !important;
}

.attachement{
	background: transparent url('../images/icons/paper-clip-icon.png') 0 2px no-repeat !important;
}

.prohibit_attachement{
	background: transparent url('../images/icons/paper-clip-prohibition-icon.png') 0 2px no-repeat !important;
}

.move{
	background: transparent url('../images/icons/move-icon.png') 0 2px no-repeat !important;
}

.menu-list-black{
	background: transparent url('../images/icons/menu-list-black.png') 0 2px no-repeat !important;
}

.menu-list-color{
	background: transparent url('../images/icons/menu-list-color.png') 0 2px no-repeat !important;
}

.money-exchange{
	background: transparent url('../images/icons/money-exchange.png') 0 2px no-repeat !important;
}

.autos-icon{
	background: transparent url('../images/icons/autos-icon.png') 0 2px no-repeat !important;
}

.ok-icon48{
	background: transparent url('../images/icons/ok-icon48.png') 0 2px no-repeat !important;
}

.block-icon{
	background: transparent url('../images/icons/block-icon.png') 0 2px no-repeat !important;
}

.view-calendar{
	background: transparent url('../images/icons/view-calendar-list.png') 0 2px no-repeat !important;
}

.document-icon{
	background: transparent url('../images/icons/document-icon.png') 0 2px no-repeat !important;
}

.file-new-icon{
	background: transparent url('../images/icons/file-new-icon.png') 0 2px no-repeat !important;
}

.file-delete-icon{
	background: transparent url('../images/icons/file-delete-icon.png') 0 2px no-repeat !important;
}

.layout-add-icon{
	background: transparent url('../images/icons/layout-add-icon.png') 0 2px no-repeat !important;
}

.highlighter-minus-icon{
	background: transparent url('../images/icons/highlighter-minus-icon.png') 0 2px no-repeat !important;
}

.view-calendar-icon{
	background: transparent url('../images/icons/view-calendar-tasks-icon.png') 0 2px no-repeat !important;
}

.view-calendar-timeline{
	background: transparent url('../images/icons/view-calendar-timeline.png') 0 2px no-repeat !important;
}

.calendar-plus-icon{
	background: transparent url('../images/icons/calendar-plus-icon.png') 0 2px no-repeat !important;
}

.calendar-pencil-icon{
	background: transparent url('../images/icons/calendar-pencil-icon.png') 0 2px no-repeat !important;
}

.arrow_left{
	background: transparent url('../images/icons/arrow_left.png') 0 2px no-repeat !important;
}

.arrow_right{
	background: transparent url('../images/icons/arrow_right.png') 0 2px no-repeat !important;
}

.arrow-right-red{
	background: transparent url('../images/icons/arrow-right-red.png') 0 2px no-repeat !important;
}

.arrow-left-yellow{
	background: transparent url('../images/icons/arrow-left-yellow.png') 0 2px no-repeat !important;
}

.arrow_up{
	background: transparent url('../images/icons/arrow_up.png') 0 2px no-repeat !important;
}

.excel-icon{
	background: transparent url('../images/icons/excel-icon.png') 0 2px no-repeat !important;
}

.log-out{
	background: transparent url('../images/icons/log-out.png') 0 2px no-repeat !important;
}

.implement{
	background: transparent url('../images/icons/implement.png') 0 2px no-repeat !important;
}

.arrow_down{
	background: transparent url('../images/icons/arrow_down.png') 0 2px no-repeat !important;
}

.print-icon{
	background: transparent url('../images/icons/print-icon.png') 0 2px no-repeat !important;
}

.print-icon2{
	background: transparent url('../images/icons/printer2.png') 0 2px no-repeat !important;
}

.table_schedule{
	background: transparent url('../images/icons/table_schedule.png') 0 2px no-repeat !important;
}

.google-maps{
	background: transparent url('../images/icons/google-maps.png') 0 2px no-repeat !important;
}

.printer_list{
	background: transparent url('../images/icons/list-scroll.png') 0 2px no-repeat !important;
}

.receipt-print{
	background: transparent url('../images/icons/receipt-print.png') 0 2px no-repeat !important;
}

.arrow-right{
	background: transparent url('../images/icons/arrow-right.png') 0 2px no-repeat !important;
}

.arrow-left{
	background: transparent url('../images/icons/arrow-left.png') 0 2px no-repeat !important;
}

.xls-import-icon{
	background: transparent url('../images/icons/xls-import-icon.png') 0 2px no-repeat !important;
}

.db-arrow-down{
	background: transparent url('../images/icons/db-arrow-down.png') 0 2px no-repeat !important;
}

.left-align-icon{
	background: transparent url('../images/icons/left-align-icon.png') 0 2px no-repeat !important;
}

.actions-help{
	background: transparent url('../images/icons/actions-help-icon.png') 0 2px no-repeat !important;
}

.calculator{
	background: transparent url('../images/icons/Calculator-icon.png') 0 2px no-repeat !important;
}

.share_shortcut{
	background: transparent url('../images/icons/share_shortcut.png') 0 2px no-repeat !important;
}

.user-info-icon{
	background: transparent url('../images/icons/user-info-icon.png') 0 2px no-repeat !important;
}

.clock-red{
	background: transparent url('../images/icons/clock-red.png') 0 2px no-repeat !important;
}

.users-icon{
	background: transparent url('../images/icons/users-icon.png') 0 2px no-repeat !important;
}

.scheduled-tasks{
	background: transparent url('../images/icons/scheduled-tasks-icon.png') 0 2px no-repeat !important;
}

.steps-icon{
	background: transparent url('../images/icons/steps.png') 0 2px no-repeat !important;
}

.task-icon{
	background: transparent url('../images/icons/task-icon.png') 0 2px no-repeat !important;
}

.chat-icon{
	background: transparent url('../images/icons/chat-icon.png') 0 2px no-repeat !important;
}

.notes-pin-icon{
	background: transparent url('../images/icons/notes-pin-icon.png') 0 2px no-repeat !important;
}

.action-view-right{
	background: transparent url('../images/icons/Actions-view-right-close-icon.png') 0 2px no-repeat !important;
}

.ask{
	background: transparent url('../images/icons/Ask-icon.png') 0 2px no-repeat !important;
}

.mail-icon{
    background: transparent url('../images/icons/mail-icon.png') 0 2px no-repeat !important;
}

.msg_link-icon{
	background: transparent url('../images/icons/msg_link.png') 0 2px no-repeat !important;
}

.sms-icon{
	background: transparent url('../images/icons/SMS-bubble-icon.png') 0 2px no-repeat !important;
}

.mail-go{
	background: transparent url('../images/icons/email_go.png') 0 2px no-repeat !important;
}

.work-icon{
	background: transparent url('../images/icons/work-icon.png') 0 2px no-repeat !important;
}

.utilities-notes{
	background: transparent url('../images/icons/utilities-notes.png') 0 2px no-repeat !important;
}

.note{
	background: transparent url('../images/icons/note.png') 0 2px no-repeat !important;
}

.action-icon{
	background: transparent url('../images/icons/action-icon.png') 0 2px no-repeat !important;
}

.arrow_undo{
	background: transparent url('../images/icons/arrow_undo.png') 0 2px no-repeat !important;
}

.arrow-down{
	background: transparent url('../images/icons/arrow-down.gif') 0 2px no-repeat !important;
}

.clear-icon{
	background: transparent url('../images/icons/clear-icon.png') 0 2px no-repeat !important;
}

.stock-market-icon{
	background: transparent url('../images/icons/stock-market-icon.png') 0 2px no-repeat !important;
}

.group-icon{
	background: transparent url('../images/icons/group-icon.png') 0 2px no-repeat !important;
}

.lock-icon{
	background: transparent url('../images/icons/lock.gif') 0 2px no-repeat !important;
}

.bill-icon{
	background: transparent url('../images/icons/bill.png') 0 2px no-repeat !important;
}

.home_percentage{
	background: transparent url('../images/icons/home_percentage.png') 0 2px no-repeat !important;
}

.lock{
	background: transparent url('../images/icons/lock.png') 0 2px no-repeat !important;
}

.lock_break{
	background: transparent url('../images/icons/lock_break.png') 0 2px no-repeat !important;
}

.table_refresh{
	background: transparent url('../images/icons/table_refresh.png') 0 2px no-repeat !important;
}

.table_add{
	background: transparent url('../images/icons/table_add.png') 0 2px no-repeat !important;
}

.search-b-icon{
	background: transparent url('../images/icons/search-b-icon.png') 0 2px no-repeat !important;
}

.upload-server-icon{
	background: transparent url('../images/icons/upload-server-icon.png') 0 2px no-repeat !important;
}

.loading-icon{
	background: transparent url('../images/icons/loading-icon.png') 0 2px no-repeat !important;
}

.money-bag2{
	background: transparent url('../images/icons/money-bag2.png') 0 2px no-repeat !important;
}

.upload-icon{
	background: transparent url('../images/icons/upload-icon.png') 0 2px no-repeat !important;
}

.report-icon{
	background: transparent url('../images/icons/report-icon.png') 0 2px no-repeat !important;
}

.refresh-blue-red{
	background: transparent url('../images/icons/refresh-blue-red.png') 0 2px no-repeat !important;
}

.updated-refresh{
	background: transparent url('../images/icons/updated-refresh.png') 0 2px no-repeat !important;
}

.refresh-slim{
	background: transparent url('../images/icons/refresh.png') 0 2px no-repeat !important;
}

.report-delete{
	background: transparent url('../images/icons/report_delete.png') 0 2px no-repeat !important;
}

.rubber-stamp{
	background: transparent url('../images/icons/rubber-stamp.png') 0 2px no-repeat !important;
}

.report_go{
	background: transparent url('../images/icons/report_go.png') 0 2px no-repeat !important;
}

.report_key{
	background: transparent url('../images/icons/report_key.png') 0 2px no-repeat !important;
}

.meeting-dark-icon{
	background: transparent url('../images/icons/Meeting-Dark-icon.png') 0 2px no-repeat !important;
}

.guest-icon{
	background: transparent url('../images/icons/guest-icon.png') 0 2px no-repeat !important;
}

.room-icon{
	background: transparent url('../images/icons/room-icon.png') 0 2px no-repeat !important;
}

.page_white_copy{
	background: transparent url('../images/icons/page_white_copy.png') 0 2px no-repeat !important;
}

.person-clone-icon{
	background: transparent url('../images/icons/person-clone-icon.png') 0 2px no-repeat !important;
}

.clone-icon{
	background: transparent url('../images/icons/clone.png') 0 2px no-repeat !important;
}

.problem-icon{
	background: transparent url('../images/icons/problem-icon.png') 0 2px no-repeat !important;
}

.setting{
	background: transparent url('../images/icons/setting.png') 0 2px no-repeat !important;
}

.thunder-bolt{
	background: transparent url('../images/icons/thunder-bolt.png') 0 2px no-repeat !important;
}

.cog{
	background: transparent url('../images/icons/cog.png') 0 2px no-repeat !important;
}

.actions-viewlist{
    background: transparent url('../images/icons/actions-viewlist.png') 0 2px no-repeat !important;
}

.arrow-split-right-icon{
	background: transparent url('../images/icons/arrow-split-right-icon.png') 0 2px no-repeat !important;
}

.openoffice-math-icon{
    background: transparent url('../images/icons/openoffice-math-icon.png') 0 2px no-repeat !important;
}

.external-drive-backup{
	background: transparent url('../images/icons/external-drive-backup.png') 0 2px no-repeat !important;
}

.green-round-icon{
	background: transparent url('../images/icons/Button-Blank-Green-icon.png') 0 2px no-repeat !important;
}

.red-round-icon{
	background: transparent url('../images/icons/Button-Blank-Red-icon.png') 0 2px no-repeat !important;
}

.restore-icon{
	background: transparent url('../images/icons/restore-icon.png') 0 2px no-repeat !important;
}

.time-icon{
	background: transparent url('../images/icons/time.png') 0 2px no-repeat !important;
}

.time-go-icon{
	background: transparent url('../images/icons/time_go.png') 0 2px no-repeat !important;
}

.stamp{
	background: transparent url('../images/icons/stamp.png') 0 2px no-repeat !important;
}

.text_signature{
   background: transparent url('../images/icons/text_signature.png') 0 2px no-repeat !important;
}

.process-accept-icon{
	background: transparent url('../images/icons/process-accept-icon.png') 0 2px no-repeat !important;
}

.red-search-icon{
	background: transparent url('../images/icons/red-search-icon.png') 0 2px no-repeat !important;
}

.mail-settings-icon{
	background: transparent url('../images/icons/mail-settings-icon.png') 0 2px no-repeat !important;
}

.money-delete-icon{
	background: transparent url('../images/icons/money-delete-icon.png') 0 2px no-repeat !important;
}

.money-delete{
	background: transparent url('../images/icons/money_delete.png') 0 2px no-repeat !important;
}

.money-add-icon{
	background: transparent url('../images/icons/money_add.png') 0 2px no-repeat !important;
}

.bar-chart-icon{
	background: transparent url('../images/icons/bar-chart-icon.png') 0 2px no-repeat !important;
}

.download-2-icon{
	background: transparent url('../images/icons/download-2-icon.png') 0 2px no-repeat !important;
}

.file-copy-icon{
	background: transparent url('../images/icons/File-Copy-icon.png') 0 2px no-repeat !important;
}

.flag_white{
    background: transparent url('../images/icons/flag_white.png') 0 2px no-repeat !important;
}

.checked-checkbox{
    background: transparent url('../images/icons/User-Interface-Checked-Checkbox-icon.png') 0 2px no-repeat !important;
}

.unchecked-checkbox{
    background: transparent url('../images/icons/User-Interface-Unchecked-Checkbox-icon.png') 0 2px no-repeat !important;
}

.zoom-actual-equal-icon{
	background: transparent url('../images/icons/zoom-actual-equal-icon.png') 0 2px no-repeat !important;
}

.money-increase-icon{
	background: transparent url('../images/icons/money-Increase-icon.png') 0 2px no-repeat !important;
}

.balance-icon{
    background: transparent url('../images/icons/balance-icon.png') 0 2px no-repeat !important;
}

.arrow-expand-icon{
    background: transparent url('../images/icons/arrow-expand-icon.png') 0 2px no-repeat !important;
}

.table-row-insert-icon{
    background: transparent url('../images/icons/table-row-insert-icon.png') 0 2px no-repeat !important;
}

.curve-arrow{
    background: transparent url('../images/icons/curve-arrow.png') 0 2px no-repeat !important;
}

.insert-horizontal-rule-icon{
    background: transparent url('../images/icons/insert-horizontal-rule-icon.png') 0 2px no-repeat !important;
}

.cross-blue{
    background: transparent url('../images/icons/cross-blue.png') 0 2px no-repeat !important;
}

.picture{
    background: transparent url('../images/icons/picture.png') 0 2px no-repeat !important;
}

.luch-discount{
    background: transparent url('../images/icons/luch-discount.png') 0 2px no-repeat !important;
}

.luch-percentage{
    background: transparent url('../images/icons/luch-percentage.png') 0 2px no-repeat !important;
}

.luch-danger{
    background: transparent url('../images/icons/luch-danger.png') 0 2px no-repeat !important;
}

.luch-attachment{
    background: transparent url('../images/icons/luch-attachment.png') 0 2px no-repeat !important;
}

.luch-picture{
    background: transparent url('../images/icons/luch-picture.png') 0 2px no-repeat !important;
}

.luch-document{
    background: transparent url('../images/icons/luch-document.png') 0 2px no-repeat !important;
}

.luch-copy{
    background: transparent url('../images/icons/luch-copy.png') 0 2px no-repeat !important;
}

.luch-control{
    background: transparent url('../images/icons/luch-control.png') 0 2px no-repeat !important;
}

.luch-price{
    background: transparent url('../images/icons/luch-price.png') 0 2px no-repeat !important;
}

.luch-price2{
    background: transparent url('../images/icons/luch-price2.png') 0 2px no-repeat !important;
}

.luch-card{
    background: transparent url('../images/icons/luch-card.png') 0 2px no-repeat !important;
}

.luch-card2{
    background: transparent url('../images/icons/luch-card2.png') 0 2px no-repeat !important;
}

.luch-message{
    background: transparent url('../images/icons/luch-message.png') 0 2px no-repeat !important;
}

.luch-time{
    background: transparent url('../images/icons/luch-time.png') 0 2px no-repeat !important;
}

.luch-information{
    background: transparent url('../images/icons/luch-inforamtion.png') 0 2px no-repeat !important;
}

.luch-catalog{
    background: transparent url('../images/icons/luch-catalog.png') 0 2px no-repeat !important;
}

.luch-earth{
    background: transparent url('../images/icons/luch-earth.png') 0 2px no-repeat !important;
}

.luch-location{
    background: transparent url('../images/icons/luch-location.png') 0 2px no-repeat !important;
}

.luch-add{
    background: transparent url('../images/icons/luch-add.png') 0 2px no-repeat !important;
}

.luch-add-fade{
    background: transparent url('../images/icons/luch-add-fade.png') 0 2px no-repeat !important;
}

.luch-check{
    background: transparent url('../images/icons/luch-check.png') 0 2px no-repeat !important;
}

.luch-pencil{
    background: transparent url('../images/icons/luch-pencil.png') 0 2px no-repeat !important;
}

.luch-delete{
    background: transparent url('../images/icons/luch-delete.png') 0 2px no-repeat !important;
}

.luch-home{
    background: transparent url('../images/icons/luch-home.png') 0 2px no-repeat !important;
}

.luch-home-add{
    background: transparent url('../images/icons/luch-home-add.png') 0 2px no-repeat !important;
}

.luch-user{
    background: transparent url('../images/icons/luch-user.png') 0 2px no-repeat !important;
}

.luch-logout{
    background: transparent url('../images/icons/luch-logout.png') 0 2px no-repeat !important;
}

.luch-logout-red{
    background: transparent url('../images/icons/luch-logout-red.png') 0 2px no-repeat !important;
}

.luch-add-user{
    background: transparent url('../images/icons/luch-add-user.png') 0 2px no-repeat !important;
}

.luch-users{
    background: transparent url('../images/icons/luch-users.png') 0 2px no-repeat !important;
}

.luch-users-red{
    background: transparent url('../images/icons/luch-users-red.png') 0 2px no-repeat !important;
}

.luch-users-warn{
    background: transparent url('../images/icons/luch-users-warn.png') 0 2px no-repeat !important;
}

.luch-voucher-red{
    background: transparent url('../images/icons/luch-voucher-red.png') 0 2px no-repeat !important;
}

.luch-analysis{
    background: transparent url('../images/icons/luch-analysis.png') 0 2px no-repeat !important;
}

.luch-stats{
    background: transparent url('../images/icons/luch-stats.png') 0 2px no-repeat !important;
}

.luch-invoice{
    background: transparent url('../images/icons/luch-invoice.png') 0 2px no-repeat !important;
}

.luch-receipt{
    background: transparent url('../images/icons/luch-receipt.png') 0 2px no-repeat !important;
}

.luch-flash{
    background: transparent url('../images/icons/luch-flash.png') 0 2px no-repeat !important;
}

.luch-setting{
    background: transparent url('../images/icons/luch-setting.png') 0 2px no-repeat !important;
}

.luch-setting2{
    background: transparent url('../images/icons/luch-setting2.png') 0 2px no-repeat !important;
}

.luch-calculator{
    background: transparent url('../images/icons/luch-calculator.png') 0 2px no-repeat !important;
}

.luch-schedule{
    background: transparent url('../images/icons/luch-schedule.png') 0 2px no-repeat !important;
}

.luch-menu{
    background: transparent url('../images/icons/luch-menu.png') 0 2px no-repeat !important;
}

.luch-menu-side{
    background: transparent url('../images/icons/luch-menu-side.png') 0 2px no-repeat !important;
}

.luch-menu-red{
    background: transparent url('../images/icons/luch-menu-red.png') 0 2px no-repeat !important;
}

.luch-admin{
    background: transparent url('../images/icons/luch-admin.png') 0 2px no-repeat !important;
}

.luch-profile{
    background: transparent url('../images/icons/luch-profile.png') 0 2px no-repeat !important;
}

.menu-start-icon {
    background-image: url(../images/icons/luch-menu-red.png) !important;
    background-repeat: no-repeat !important;
    background-position: 0 center !important;
}

.luch-scan{
    background: transparent url('../images/icons/luch-scan.png') 0 2px no-repeat !important;
}

.luch-printer{
    background: transparent url('../images/icons/luch-printer.png') 0 2px no-repeat !important;
}

.luch-search{
    background: transparent url('../images/icons/luch-search.png') 0 2px no-repeat !important;
}

.luch-magnifying-glass{
    background: transparent url('../images/icons/luch-magnifying-glass.png') 0 2px no-repeat !important;
}

.luch-equal{
    background: transparent url('../images/icons/luch-equal.png') 0 2px no-repeat !important;
}

.luch-play{
    background: transparent url('../images/icons/luch-play.png') 0 2px no-repeat !important;
}

.luch-play2{
    background: transparent url('../images/icons/luch-play2.png') 0 2px no-repeat !important;
}

.luch-wrench{
    background: transparent url('../images/icons/luch-wrench.png') 0 2px no-repeat !important;
}

.luch-clock-red{
    background: transparent url('../images/icons/luch-clock-red.png') 0 2px no-repeat !important;
}

.luch-share{
    background: transparent url('../images/icons/luch-share.png') 0 2px no-repeat !important;
}

.luch-share2{
    background: transparent url('../images/icons/luch-share2.png') 0 2px no-repeat !important;
}

.luch-chart{
    background: transparent url('../images/icons/luch-chart.png') 0 2px no-repeat !important;
}

.luch-recover{
    background: transparent url('../images/icons/luch-recover.png') 0 2px no-repeat !important;
}

.luch-refresh{
    background: transparent url('../images/icons/luch-refresh.png') 0 2px no-repeat !important;
}

.luch-job{
    background: transparent url('../images/icons/luch-job.png') 0 2px no-repeat !important;
}

.luch-call{
    background: transparent url('../images/icons/luch-call.png') 0 2px no-repeat !important;
}

.luch-star{
    background: transparent url('../images/icons/luch-star.png') 0 2px no-repeat !important;
}

.luch-star-red{
    background: transparent url('../images/icons/luch-star-red.png') 0 2px no-repeat !important;
}

.luch-security{
    background: transparent url('../images/icons/luch-security.png') 0 2px no-repeat !important;
}

.luch-view{
    background: transparent url('../images/icons/luch-view.png') 0 2px no-repeat !important;
}

.luch-announcement{
    background: transparent url('../images/icons/luch-announcement.png') 0 2px no-repeat !important;
}

.luch-email{
    background: transparent url('../images/icons/luch-email.png') 0 2px no-repeat !important;
}

.luch-next{
    background: transparent url('../images/icons/luch-next.png') 0 2px no-repeat !important;
}

.luch-double-next{
    background: transparent url('../images/icons/luch-double-next.png') 0 2px no-repeat !important;
}

.luch-arrow-right{
    background: transparent url('../images/icons/luch-arrow-right.png') 0 2px no-repeat !important;
}

.luch-download{
    background: transparent url('../images/icons/luch-download.png') 0 2px no-repeat !important;
}

.luch-block{
    background: transparent url('../images/icons/luch-block.png') 0 2px no-repeat !important;
}

.luch-yes{
    background: transparent url('../images/icons/luch-yes.png') 0 2px no-repeat !important;
}

.luch-check-list{
    background: transparent url('../images/icons/luch-check-list.png') 0 2px no-repeat !important;
}

.luch-shopping-bag{
    background: transparent url('../images/icons/luch-shopping-bag.png') 0 2px no-repeat !important;
}

.luch-question{
    background: transparent url('../images/icons/luch-question.png') 0 2px no-repeat !important;
}

.luch-briefcase{
    background: transparent url('../images/icons/luch-briefcase.png') 0 2px no-repeat !important;
}

.luch-list{
    background: transparent url('../images/icons/luch-list.png') 0 2px no-repeat !important;
}

.luch-write{
    background: transparent url('../images/icons/luch-write.png') 0 2px no-repeat !important;
}

.luch-calendar{
    background: transparent url('../images/icons/luch-calendar.png') 0 2px no-repeat !important;
}

.luch-layers{
    background: transparent url('../images/icons/luch-layers.png') 0 2px no-repeat !important;
}

.luch-send{
    background: transparent url('../images/icons/luch-send.png') 0 2px no-repeat !important;
}

.luch-text{
    background: transparent url('../images/icons/luch-text.png') 0 2px no-repeat !important;
}

.luch-delete-red{
    background: transparent url('../images/icons/luch-delete-red.png') 0 2px no-repeat !important;
}

.luch-delete-dash{
    background: transparent url('../images/icons/luch-delete-dash.png') 0 2px no-repeat !important;
}

.luch-transaction{
    background: transparent url('../images/icons/luch-transaction.png') 0 2px no-repeat !important;
}

.luch-lock{
    background: transparent url('../images/icons/luch-lock.png') 0 2px no-repeat !important;
}

.luch-unlock{
    background: transparent url('../images/icons/luch-unlock.png') 0 2px no-repeat !important;
}

.power-on-off{
    background: transparent url('../images/icons/power-on-off.png') 0 2px no-repeat !important;
}

.dialog-question-icon{
    background: transparent url('../images/icons/dialog-question-icon.png') 0 2px no-repeat !important;
}

.wireless-disconnected-icon{
    background: transparent url('../images/icons/wireless-disconnected-icon.png') 0 2px no-repeat !important;
}

.refresh-icon24{
    background: transparent url('../images/icons/refresh-icon24.png') 0 2px no-repeat !important;
}

.mail-new-icon24{
    background: transparent url('../images/icons/mail-new-icon24.png') 0 2px no-repeat !important;
}

.mail-new-icon24{
    background: transparent url('../images/icons/mail-new-icon24.png') 0 2px no-repeat !important;
}

.mail-Reply-icon24{
    background: transparent url('../images/icons/mail-Reply-icon24.png') 0 2px no-repeat !important;
}

.mail-arrow-right-icon24{
    background: transparent url('../images/icons/mail-arrow-right-icon24.png') 0 2px no-repeat !important;
}

.mail-delete-icon24{
    background: transparent url('../images/icons/mail-delete-icon24.png') 0 2px no-repeat !important;
}

.mail-settings-icon24{
    background: transparent url('../images/icons/mail-settings-icon24.png') 0 2px no-repeat !important;
}

.wrench{
    background: transparent url('../images/icons/wrench.png') 0 2px no-repeat !important;
}

.confirm-red{
    background: transparent url('../images/icons/confirm.png') 0 2px no-repeat !important;
}

.transfer-money{
    background: transparent url('../images/icons/transfer-money.png') 0 2px no-repeat !important;
}

.collateral{
    background: transparent url('../images/icons/collateral.png') 0 2px no-repeat !important;
}

.page-break2{
    background: transparent url('../images/icons/break.png') 0 2px no-repeat !important;
}

.more{
    background: transparent url('../images/icons/more.png') 0 2px no-repeat !important;
}

.menu-more {
    background: transparent url('../images/icons/menu2.png') 0 2px no-repeat !important;
}

.pie-chart {
    background: transparent url('../images/icons/pie-chart.png') 0 2px no-repeat !important;
}

.file-transfer {
    background: transparent url('../images/icons/file-transfer.png') 0 2px no-repeat !important;
}

.folder-add {
    background: transparent url('../images/icons/folder-add.png') 0 2px no-repeat !important;
}

.search {
    background: transparent url('../images/icons/search.png') 0 2px no-repeat !important;
}

.delete-trash {
    background: transparent url('../images/icons/delete-trash.png') 0 2px no-repeat !important;
}

.play {
    background: transparent url('../images/icons/play.png') 0 2px no-repeat !important;
}

.stop-button {
    background: transparent url('../images/icons/stop-button.png') 0 2px no-repeat !important;
}

.vcard{
    background: transparent url('../images/icons/vcard.png') 0 2px no-repeat !important;
}

.page_white_acrobat{
    background: transparent url('../images/icons/page_white_acrobat.png') 0 2px no-repeat !important;
}

.invoice{
    background: transparent url('../images/icons/invoice.png') 0 2px no-repeat !important;
}

.files{
    background: transparent url('../images/icons/files.png') 0 2px no-repeat !important;
}

.delete-list{
    background: transparent url('../images/icons/delete-list.png') 0 2px no-repeat !important;
}

.add-list{
    background: transparent url('../images/icons/add-list.png') 0 2px no-repeat !important;
}

.letter{
    background: transparent url('../images/icons/letter.png') 0 2px no-repeat !important;
}

.verified{
    background: transparent url('../images/icons/verified.png') 0 2px no-repeat !important;
}

.approve_reject{
    background: transparent url('../images/icons/approve_reject.png') 0 2px no-repeat !important;
}

.file-add{
    background: transparent url('../images/icons/file-add.png') 0 2px no-repeat !important;
}

.status-ring{
    background: transparent url('../images/icons/status-ring.png') 0 2px no-repeat !important;
}

.turn-back{
    background: transparent url('../images/icons/turn-back.png') 0 2px no-repeat !important;
}

.send-post{
    background: transparent url('../images/icons/send-post.png') 0 2px no-repeat !important;
}

.star-favourite{
    background: transparent url('../images/icons/star.png') 0 2px no-repeat !important;
}

.text-bubble{
    background: transparent url('../images/icons/text-bubble.png') 0 2px no-repeat !important;
}

.approve-reject{
    background: transparent url('../images/icons/approved-rejected.png') 0 2px no-repeat !important;
}

.code-orange{
    background: transparent url('../images/icons/code.png') 0 2px no-repeat !important;
}

.code-blue{
    background: transparent url('../images/icons/code-blue.png') 0 2px no-repeat !important;
}

.internet{
    background: transparent url('../images/icons/internet.png') 0 2px no-repeat !important;
}

.web-green{
    background: transparent url('../images/icons/web.png') 0 2px no-repeat !important;
}

.global-add{
    background: transparent url('../images/icons/global-add.png') 0 2px no-repeat !important;
}

.global-delete{
    background: transparent url('../images/icons/global-delete.png') 0 2px no-repeat !important;
}

.signal{
    background: transparent url('../images/icons/signal.png') 0 2px no-repeat !important;
}

.document-archive-icon{
	background-image: url( ../images/icons/document-archive-icon.png ) !important;
}

.unarchive-icon{
	background-image: url( ../images/icons/unarchive-icon.png ) !important;
}

.renew-icon{
	background-image: url( ../images/icons/renew-icon.png ) !important;
}

.money{
	background-image: url( ../images/icons/money.png ) !important;
}

.money-red{
	background-image: url( ../images/icons/money-red.png ) !important;
}

.time-red{
	background-image: url( ../images/icons/time-red.png ) !important;
}

.calendar-red{
	background-image: url( ../images/icons/calendar-red.png ) !important;
}

.note-red{
	background-image: url( ../images/icons/note-red.png ) !important;
}

.checklist-red{
	background-image: url( ../images/icons/checklist-red.png ) !important;
}

.person-red{
	background-image: url( ../images/icons/person-icon.png ) !important;
}

.printer-red{
	background-image: url( ../images/icons/printer-red.png ) !important;
}

.search-red{
	background-image: url( ../images/icons/search-red.png ) !important;
}

.reload-red{
	background-image: url( ../images/icons/reload-red.png ) !important;
}

.graphic-red{
	background-image: url( ../images/icons/graphic-red.png ) !important;
}

.table-relationship-icon{
	background-image: url( ../images/icons/table-relationship-icon.png ) !important;
}

.zoom_in_plus{
	background-image: url( ../images/icons/zoom_in_plus.png ) !important;
}

.accept-icon{
	background-image: url( ../images/icons/Accept-icon.png ) !important;
}

.delete-file-icon{
	background-image: url( ../images/icons/delete-file-icon.png ) !important;
}

.shape_move_backwards{
	background-image: url( ../images/icons/shape_move_backwards.png ) !important;
}

.undo-icon{
	background-image: url( ../images/icons/undo-icon.png ) !important;
}

.note_add{
	background-image: url( ../images/icons/note_add.png ) !important;
}

.note_delete{
	background-image: url( ../images/icons/note_delete.png ) !important;
}

.fill-color{
	background-image: url( ../images/icons/fill-color-icon.png ) !important;
}
.SMS-bubble-icon{
	background-image: url( ../images/icons/SMS-bubble-icon.png ) !important;
}

.money_add{
	background-image: url( ../images/icons/money_add.png ) !important;
}

.strike-line-bg .x-grid3-cell-inner {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: red;
}

.strike-line-bg-dkgrey .x-grid3-cell-inner {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #737270;
}

.paper-clip-green24{
	background-image: url( ../images/icons/paper-clip-green24.png ) !important;
	width:115px!important;
    height:25px!important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.paper-clip-black24{
	background-image: url( ../images/icons/paper-clip-black24.png ) !important;
	width:115px!important;
    height:25px!important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.x-action-col-cell img.pdf-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/pdf_icon.png);
}

.x-action-col-cell img.no-tax2-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/no-tax2.png);
}

.x-action-col-cell img.no-tax-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/no-tax.png);
}

.x-action-col-cell img.own-side-arrow-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/down-side-arrow.png);
}

.x-action-col-cell img.word-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/page_white_word.png);
}

.x-action-col-cell img.txt-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/text-file.png);
}

.x-action-col-cell img.zip-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/zip-icon.png);
}

.x-action-col-cell img.ppt-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/ppt-icon.png);
}

.x-action-col-cell img.excel-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/excel-icon.png);
}

.x-action-col-cell img.pic-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/picture.png);
}

.x-action-col-cell img.mp4-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/mp4-icon.png);
}

.x-action-col-cell img.mp3-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/mp3-con.png);
}

.x-action-col-cell img.flv-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/flv-icon.png);
}

.x-action-col-cell img.folder-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/folder.png);
}

.x-action-col-cell img.open-folder {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/open-folder.png);
}

.x-action-col-cell img.share {
    height: 16px;
    width: 16px;
    margin-left:10px;
    background-image: url(../images/icons/share.png);
}

.x-action-col-cell img.three-dots {
    height: 16px;
    width: 16px;
    margin-left:10px;
    background-image: url(../images/icons/three-dots.png);
}

.x-action-col-cell img.reading-book {
    height: 16px;
    width: 16px;
    margin-left:10px;
    background-image: url(../images/icons/reading-book.png);
}

.x-action-col-cell img.block-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/block-icon.png);
}

.x-action-col-cell img.smsbubble-col {
    height: 16px;
    width: 16px;
    background-image: url( ../images/icons/SMS-bubble-icon.png);
}

.x-action-col-cell img.mailicon-col {
    height: 16px;
    width: 16px;
    background-image: url( ../images/icons/Mail-icon.png);
}

.x-action-col-cell img.add-row-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/plus3.png);
}

.x-action-col-cell img.magnifying-glass {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/magnifying-glass.png);
}

.x-action-col-cell img.more-row-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/more.png);
}

.x-action-col-cell img.menu-row-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/menu.png);
}

.x-action-col-cell img.menu2-row-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/menu2.png);
}

.x-action-col-cell img.luch-check-list-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/luch-check-list.png);
}

.x-action-col-cell img.luch-grid-black-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/luch-grid-black.png);
}

.x-action-col-cell img.withholding-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/withholding.png);
}

.x-action-col-cell img.not-equal {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/not-equal.png);
}

.x-action-col-cell img.piechart-row-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/pie-chart.png);
}

.x-action-col-cell img.rating-row-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/rating.png);
}

.x-action-col-cell img.message-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/chat-icon.png);
}

.x-action-col-cell img.remove-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/luch-delete-dash.png);
}

.x-action-col-cell img.copy-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/luch-copy.png);
}

.x-action-col-cell img.view-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/luch-view.png);
}

.x-action-col-cell img.options-colors-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/options-colors.png);
}

.x-action-col-cell img.search-red-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/search-red.png);
}

.x-action-col-cell img.resize-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/resize.png);
}

.x-action-col-cell img.arrow-down-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/arrow-down.gif);
}

.x-action-col-cell img.error-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/error.png);
}

.x-action-col-cell img.problem-icon {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/problem-icon.png);
}

.x-action-col-cell img.ok-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/accept.png);
}

.x-action-col-cell img.luch-yes-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/luch-yes.png);
}

.x-action-col-cell img.luch-revenue-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/luch-revenue.png);
}

.x-action-col-cell img.banked-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/banked.png);
}

.x-action-col-cell img.escalators-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/escalators.png);
}

.x-action-col-cell img.minus-red-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/minus-red.png);
}

.x-action-col-cell img.location-red-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/location-red.png);
}

.x-action-col-cell img.no-location-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/no-location.png);
}

.x-action-col-cell img.user-ok-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/user-ok.png);
}

.x-action-col-cell img.user-not-ok-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/user-not-ok.png);
}

.x-action-col-cell img.internet-green-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/web.png);
}

.x-action-col-cell img.internet-red-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/internet.png);
}

.x-action-col-cell img.star-favourite-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/star.png);
}

.x-action-col-cell img.star-empty-black-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/star-empty-black.png);
}

.x-action-col-cell img.star-empty-orange-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/star-empty-orange.png);
}

.x-action-col-cell img.download {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/download.png);
}

.x-action-col-cell img.upload {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/upload.png);
}

.x-action-col-cell img.download-2-icon {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/download-2-icon.png);
}

.x-action-col-cell img.positive-vote {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/positive-vote.png);
}

.x-action-col-cell img.positive-voted {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/positive-voted.png);
}

.x-action-col-cell img.negative-vote {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/negative-vote.png);
}

.x-action-col-cell img.negative-voted {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/negative-voted.png);
}

.x-action-col-cell img.add-to-document {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/add-to-document.png);
}

.x-action-col-cell img.round-green-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/Button-Blank-Green-icon.png);
}

.x-action-col-cell img.round-red-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/Button-Blank-Red-icon.png);
}

.x-action-col-cell img.round-red-dash-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/round-red-dash.png);
}

.x-action-col-cell img.round-yellow-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/Button-Blank-Yellow-icon.png);
}

.x-action-col-cell img.round-blue-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/Button-Blank-Blue-icon.png);
}

.x-action-col-cell img.icon_padlock {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/icon_padlock.png);
}

.x-action-col-cell img.enter {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/enter.png);
}

.x-action-col-cell img.cross_linear {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/cross_linear.png);
}

.x-action-col-cell img.blank {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/blank.png);
}

.x-action-col-cell img.ui-check-box-icon {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/User-Interface-Checked-Checkbox-icon.png);
}

.x-action-col-cell img.ui-check-box-icon-green {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/User-Interface-Checked-Checkbox-icon-green.png);
}

.x-action-col-cell img.check-mark16 {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/check-mark16.png);
}

.x-action-col-cell img.cross {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/cross.gif);
}

.x-action-col-cell img.sign-stop-icon {
	height: 16px;
	width: 16px;
	background-image: url(../images/icons/sign-stop-icon.png);
}

.x-action-col-cell img.zoom-actual-equal-icon {
    height: 16px;
    width: 16px;
    margin-right:8px;
    margin-left:8px;
    background-image: url(../images/icons/zoom-actual-equal-icon.png);
}

.x-action-col-cell img.Letter-J-blue-icon {
    height: 16px;
    width: 16px;
    margin-right:8px;
    margin-left:8px;
    background-image: url(../images/icons/Letter-J-blue-icon.png);
}

.x-action-col-cell img.receipt-arrow-icon {
	height: 16px;
	width: 16px;
	margin-right:8px;
	margin-left:8px;
	background-image: url(../images/icons/receipt-arrow-icon.png);
}

.x-action-col-cell img.ui-tablerel-col {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/table-relationship-icon.png);
}

.x-action-col-cell img.ui-check-box-uncheck-icon {
    height: 16px;
    width: 16px;
    background-image: url(../images/icons/User-Interface-Unchecked-Checkbox-icon.png);
}

/* default = expand */
.x-grid3-hd-row-expander-expand {
    background: url('../images/icons/expand.png') no-repeat center center !important;
    cursor: pointer;
}

/* collapse state */
.x-grid3-hd-row-expander-collapse {
    background: url('../images/icons/compress.png') no-repeat center center !important;
    cursor: pointer;
}

.x-expander-hd-expand {
    background: url('../images/icons/expand.png') no-repeat center center !important;
    cursor: pointer;
}

.x-expander-hd-collapse {
    background: url('../images/icons/compress.png') no-repeat center center !important;
    cursor: pointer;
}

.chart_organisation {
    background-image:url(../images/icons/chart_organisation.png) !important;
}

.x-grid3-row-over .x-grid3-cell-inner {
    font-weight: bold;
}

.mod-dashboard {
    overflow: auto;
    padding: 5px;
}

.mod-dashboard-left {
    float: left;
    width: 555px;
    border-right: 1px solid #CCD8E7;
}

.mod-dashboard-right {
    margin-left: 10px;
    padding: 10px;
}

.x-grid3-cell.blue-bg-cell{
    background-color: #3366CC;
}

.x-grid3-cell.yellow-bg-cell{
    background-color: #FFFF00;
}

.x-grid3-cell.gainsboro-bg-cell{
    background-color: #DCDCDC;
}

.x-grid3-cell.orange-bg-cell{
    background-color: #FF6600;
}

.x-grid3-cell.lightgrey-bg-cell{
    background-color: #D3D3D3;
}

.x-grid3-cell.lightgrey-bg-cell .x-grid3-cell-inner {
    background: #D3D3D3 !important;
}

.x-grid3-cell.red-bg-cell{
    background-color: #FF0000;
}

.x-grid3-cell.purple-bg-cell{
    background-color: #9933FF;
}

.x-grid3-cell.green-bg-cell{
    background-color: #00CC00;
}

.x-grid3-cell.dkgreen-bg-cell{
    background-color: #006400;
}

.x-grid3-cell.ltgreen-bg-cell{
	background-color: #C7EDC7;
}

.x-grid3-cell.white-bg-cell{
	background-color: #FFFFFF;
}

.green-row .x-grid3-cell {
	background-color: #99CC99 !important;
}

.white-row .x-grid3-cell {
    background-color: #FFFFFF !important;
}

.change-row {
	background-color: #ffffa8;border-color:#FA1505;
}

.x-grid3-cell.strike-bg-cell{
    background-image:url(../images/strike.png) !important;
}

.x-grid3-cell.bg-cell-none{
    background-image:none;
}


#table-panel .x-table-layout {
    padding:5px;
}
#table-panel .x-table-layout td {
    vertical-align:top;
    padding:5px;
    font-size: 11px;
}

#table-panel-sacco .x-table-layout {
    padding:5px;
}

#table-panel-sacco .x-table-layout td {
    vertical-align:top;
    padding:5px;
    font-size: 11px;
}

#table-panel-hrm .x-table-layout {
	padding:5px;
}

#table-panel-hrm .x-table-layout td {
	vertical-align:top;
	padding:5px;
	font-size: 11px;
}

#table-panel-property .x-table-layout {
    padding:5px;
}

#table-panel-property .x-table-layout td {
    vertical-align:top;
    padding:5px;
    font-size: 11px;
}

.pointerCursor {
    cursor: pointer;
}

.notAllowedCursor {
    cursor: not-allowed;
}

.zoomInCursor {
    cursor: zoom-in;
}

.zoomOutCursor {
    cursor: zoom-out;
}

.helpCursor{
	cursor: help;
}

.contextMenuCursor{
	cursor: context-menu;
}

.contextMenuCursor2{
	cursor: url('../images/icons/expand-arrows.png'), auto;
}

.hor-minimalist-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 11px;
	background: #fff;
	margin: 5px;
	border-collapse: collapse;
	text-align: left;
	width: 100%;
}
.hor-minimalist-b th
{
	font-size: 11px;
	font-weight: normal;
	color: #039;
	padding: 5px 4px;
	border-bottom: 1px solid #6678b1;
}
.hor-minimalist-b td
{
	border-bottom: 1px solid #ccc;
	color: #669;
	padding: 3px 4px;
}
.hor-minimalist-b tbody tr:hover td
{
	color: #009;
}
.hor-minimalist-label
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 5px;
	border-collapse: collapse;
	text-align: left;
	width: 200px;
}

aside.dbar-sidebar {
	width:268px;
}
aside.dbar-sidebar ul {
	margin:0;
	padding:0;
	list-style:none;
}
aside.dbar-sidebar li ul {
	margin-bottom:20px;
}
aside.dbar-sidebar li ul li {
	display:block;
	padding:12px 10px;
	border-bottom:1px solid #ddd;
	color:#777;
}
aside.dbar-sidebar li {
	color:#666;
	font-size: 16px;
}
aside.dbar-sidebar li ul li a {
	text-decoration:none;
	color:#666;
	font-weight:normal;
}
aside.dbar-sidebar li ul li a:hover {
	color:#09285E;
	text-decoration:underline;
}


aside.dbar-sidebar li ul.blocklist li {
	padding:0;
}
aside.dbar-sidebar li ul.blocklist li.selected-item  {
	border-bottom:none;
}
aside.dbar-sidebar li ul.blocklist li.selected-item a,
aside.dbar-sidebar li ul.blocklist li.selected-item a:hover {
	color:#2A468B;
	font-weight:bold;
	background: #DFE8F6;
}
aside.dbar-sidebar li ul.blocklist li a:hover {
	background:#f0f0f0;
	text-decoration:none;
}
aside.dbar-sidebar li ul.blocklist li a {
	color:#666;
	display:block;
	padding:10px 10px;
}

aside.dbar-sidebar h4 { 
	color:#0C367E;
	font-size:16px;
	text-transform:uppercase;
	font-weight:bold;
	margin:0;
	padding:7px 10px;
}

.green-txtfield-bg {
  background-color: #DFE8F6;
  background-image: none;
  border-top:    0px;
  border-right:  0px;
  border-bottom: 2px solid #000000;
  border-left:   0px;
  font-size: 18px;
  font-weight: bold;
  color: red;
}

.extblue-txtfield-bg {
  background-color: #DFE8F6 !important;
  background-image: none !important;
  font: normal 12px tahoma, arial, helvetica, sans-serif;
}

.extblue-txtfield-bg-textred {
  background-color: #DFE8F6 !important;
  background-image: none !important;
  font: normal 12px tahoma, arial, helvetica, sans-serif;
  color: red;
  font-weight: bold;
}

.txtfld-bluebg-noborder-txtbold {
  background-color: #EDF3FA !important;
  background-image: none !important;
  font: normal 18px tahoma, arial, helvetica, sans-serif;
  color: red;
  border-top:    0px;
  border-right:  0px;
  border-bottom: 2px solid #7da7d9;
  border-left:   0px;
  font-weight: bold;
}

.txtfld-bluebg-noborder-txtbold-s {
  background-color: #EDF3FA !important;
  background-image: none !important;
  font: normal 16px tahoma, arial, helvetica, sans-serif;
  color: red;
  border-top:    0px;
  border-right:  0px;
  border-bottom: 2px solid #7da7d9;
  border-left:   0px;
  font-weight: bold;
}

.txtfld-bluebg-noborder-txtbold-profile {
  background-color: #DFE8F6 !important;
  background-image: none !important;
  font: normal 15px tahoma, arial, helvetica, sans-serif;
  border-top:    0px;
  border-right:  0px;
  border-bottom: 0px;
  border-left:   0px;
  font-weight: bold;
}

.txtfld-bluebg-noborder-txtbold-right {
  background-color: #DFE8F6 !important;
  background-image: none !important;
  font: normal 18px tahoma, arial, helvetica, sans-serif;
  color: #000;
  border-top:    0px;
  border-right:  0px;
  border-bottom: 0px;
  border-left:   0px;
  font-weight: bold;
}

.txtfld-bluebg-noborder-txtbold12 {
  background-color: #DFE8F6 !important;
  background-image: none !important;
  font: normal 12px tahoma, arial, helvetica, sans-serif;
  border-top:    0px;
  border-right:  0px;
  border-bottom: 2px solid #000000;
  border-left:   0px;
  font-weight: bold;
}

.extgrey-txtfield-bg {
  background-color: #F1F1F1 !important;
  background-image: none !important;
  font: normal 12px tahoma, arial, helvetica, sans-serif;
}

.ux-chip-notification {  
    position: absolute;  
    right: 10px;  
    bottom: 10px;  
    background: #CEDFF5;  
    z-index: 1001;  
    border: 1px solid #99BBE8;  
} 

.x-grid3-row.hiderow .x-grid3-cell {
    background-color: #000 !important;
    display: none;
}

.x-grid3-cell.record-balance-amount{
    font-size: 13px;
    font-weight: bold;
}

.x-grid3-cell.check-circle{
    font-size: 13px;
    font-weight: bold;
    background-image: url(../images/icons/check-circle.png);
    background-position: left center;
    background-repeat: no-repeat;
}

.x-grid3-cell.check-blue-col{
    background-image: url(../images/icons/check-blue.png);
    background-position: 20px;
    background-repeat: no-repeat;
}

.x-grid3-cell.checkmark-col{
    background-image: url(../images/icons/checkmark.png);
    background-position: 20px;
    background-repeat: no-repeat;
}

.x-grid3-cell.thirteen-bold{
    font-size: 13px;
    font-weight: bold;
}

.x-grid3-cell.thirteen-normal{
    font-size: 13px;
}

.x-grid3-cell.new-thirteen-bold{
    font-size: 13px;
    font-weight: bold;
    background-image: url(../images/icons/new5.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 38px;
}

.x-grid3-cell.goto-link{
    cursor: pointer;
    color: #2D5698;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline dashed #2D5698 1px;
}

.x-grid3-cell.goto-link-blocked{
    cursor: pointer;
    color: #2D5698;
    font-size: 13px;
    font-weight: bold;
    text-decoration:underline dashed #2D5698 1px;
    background-image: url(../images/icons/money-delete-icon.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.briefcase-img{
    font-size: 13px;
    background-image: url(../images/icons/briefcase.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.phone-img{
    font-size: 13px;
    background-image: url(../images/icons/phone-call.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.time-clock{
    font-size: 13px;
    background-image: url(../images/icons/time-clock.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.industry-img{
    font-size: 13px;
    background-image: url(../images/icons/industry.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.light-source-img{
    font-size: 13px;
    background-image: url(../images/icons/light-source.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.phone-chat{
    font-size: 13px;
    background-image: url(../images/icons/phone-chat.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.lead-generation{
    font-size: 13px;
    background-image: url(../images/icons/lead-generation.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.hash-img{
    font-size: 13px;
    background-image: url(../images/icons/music-note.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.share_link{
    font-size: 13px;
    background-image: url(../images/icons/share_link.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.savings{
    font-size: 13px;
    background-image: url(../images/icons/savings.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.loan_give{
    font-size: 13px;
    background-image: url(../images/icons/loan_give.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.people-img{
    font-size: 13px;
    background-image: url(../images/icons/people.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.person-img{
    font-size: 13px;
    font-weight: bold;
    background-image: url(../images/icons/person-icon.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.arrow_green_in{
    font-size: 13px;
    font-weight: bold;
    background-image: url(../images/icons/arrow_green_in.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.arrow_red_out{
    font-size: 13px;
    font-weight: bold;
    background-image: url(../images/icons/arrow_red_out.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.at-sign-before{
    font-size: 13px;
    background-image: url(../images/icons/at-sign.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.clock-red-before-red-text {
    background-image: url(../images/icons/clock-red.png);
    background-position: left top;
    background-repeat: no-repeat;
    text-indent: 17px;
    color: #e53935;
}

.x-grid3-cell.adjust-bg-position {
    background-position: 8px center; /* 4px border + 6px gap */
    text-indent: 25px;
}

.x-grid3-cell.bg-pos-left-top{
    background-position: left top;
}

.x-grid3-cell.bg-pos-left-top-3{
    background-position: left 3px;
}

.x-grid3-cell.adjust-bg-position2 {
    background-position: 8px center; /* 4px border + 6px gap */
    text-indent: 18px;
}

.x-grid3-cell.green-strip {
    border-left: 4px solid #22c55e !important;
}

.x-grid3-cell.blue-strip {
    border-left: 4px solid #2196f3 !important;
}

.x-grid3-cell.blue-light-strip {
    border-left: 4px solid #BBDEFB !important;
}

.x-grid3-cell.red-strip {
    border-left: 4px solid #ef4444 !important;
}

.x-grid3-cell.yellow-strip {
    border-left: 4px solid #eab308 !important;
    margin-right: 6px;
}

.x-grid3-cell.clock-red-after-red-strip {
    background-image: url(../images/icons/clock-red.png);
    background-position: right top;
    background-repeat: no-repeat;
    direction: rtl;
    text-indent: 20px;
    color: #e53935;
    border-left: 4px solid #ef4444 !important;
}

.x-grid3-cell.blank-before {
    background-image: url(../images/icons/blank-trans-img.png);
    background-position: left top;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.blank-after-green-strip {
    background-image: url(../images/icons/blank-trans-img.png);
    background-position: right top;
    background-repeat: no-repeat;
    direction: rtl;
    text-indent: 20px;
    border-left: 4px solid #22c55e !important;
}

.x-grid3-cell.link-blank-after-green-strip {
    background-image: url(../images/icons/blank-trans-img.png);
    background-position: right top;
    background-repeat: no-repeat;
    direction: rtl;
    text-indent: 20px;
    border-left: 4px solid #22c55e !important;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline dashed #2D5698 1px;
}

.x-grid3-cell.blank-after-blue-strip {
    background-image: url(../images/icons/blank-trans-img.png);
    background-position: right top;
    background-repeat: no-repeat;
    direction: rtl;
    text-indent: 20px;
    border-left: 4px solid #2196f3 !important;
}

.x-grid3-cell.blank-after-yellow-strip {
    background-image: url(../images/icons/blank-trans-img.png);
    background-position: right top;
    background-repeat: no-repeat;
    direction: rtl;
    text-indent: 20px;
    border-left: 4px solid #eab308 !important;
}

.x-grid3-cell.attached-file {
    font-size: 13px;
    background-image: url(../images/icons/attached-file.png);
    background-position: center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.location-red {
    font-size: 13px;
    background-image: url(../images/icons/location-red.png);
    background-position: center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.verified-col{
    font-size: 13px;
    background-image: url(../images/icons/verified.png);
    background-position: center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.verified-before-col{
    background-image: url(../images/icons/verified.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.verified-after-col{
    background-image: url(../images/icons/verified.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.x-grid3-cell.caution{
    font-size: 13px;
    background-image: url(../images/icons/caution.png);
    background-position: center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.status-yellow{
    font-size: 13px;
    background-image: url(../images/icons/Button-Blank-Yellow-small-icon.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 10px;
}

.x-grid3-cell.status-red{
    font-size: 13px;
    background-image: url(../images/icons/Button-Blank-Red-small-icon.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 10px;
}

.x-grid3-cell.status-green{
    font-size: 13px;
    background-image: url(../images/icons/Button-Blank-Green-small-icon.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 10px;
}
.x-grid3-cell.status-blue{
    font-size: 13px;
    background-image: url(../images/icons/Button-Blank-Blue-small-icon.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 10px;
}

.x-grid3-cell.right-arrow{
    font-size: 13px;
    background-image: url(../images/icons/right-arrow.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.left-arrow{
    font-size: 13px;
    background-image: url(../images/icons/left-arrow.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.blank-trans{
    font-size: 13px;
    background-image: url(../images/icons/blank-trans-img.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.check-circle-bg{
    font-size: 13px;
    background-image: url(../images/icons/check-circle-bg.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 17px;
}

.x-grid3-cell.goto-green{
    cursor: pointer;
    text-decoration:underline;
    color: #008000;
}

.x-grid3-cell.goto-red{
    cursor: pointer;
    text-decoration:underline;
    color: #FF0000;
}

.x-grid3-cell.action-link{
    cursor: pointer;
    text-decoration:underline;
    color: #FF0000;
}

.report-list-header {
  font-weight: bold;
  font-size: 16px;
  color: #15428B;
}

.report-list-hr {
  width: 100%;
  color: #4286f4;
}

.report-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.report-list li {
  background: transparent url('../images/icons/greater-than.png') 0 3px no-repeat !important;
  padding: 7px 0 7px 25px;
  border-bottom: 1px dashed grey;
}

.report-list li a {
  text-decoration: none;
  font-size: 15px;
  color: #4286f4;
}

.redTextfieldBg{
     background: #FF0000;
}

.orangeTextfieldBg{
     background: #FF6600;
}

.yellowTextfieldBg{
     background: #FFFF00;
}

.x-check-group-alt {
    background: #D1DDEF;
    border-top:1px dotted #B5B8C8;
    border-bottom:1px dotted #B5B8C8;
}

.stickynotes-list{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:1em;
  color:#fff;
}

.stickynotes-list h2, .stickynotes-list p{
  font-size:100%;
  font-weight:normal;
}

.stickynotes-list ul, .stickynotes-list li{
  list-style:none;
}

.stickynotes-list ul{
  overflow:hidden;
  padding:2em;
}

.stickynotes-list ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:19em;
  width:19em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}

.stickynotes-list ul li{
  margin:1em;
  float:left;
}

.stickynotes-list ul li h2{
  font-size:110%;
  font-weight:bold;
  padding-bottom:5px;
}

.stickynotes-list ul li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}

.stickynotes-list ul li a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}

.stickynotes-list ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}

.stickynotes-list ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}

.stickynotes-list ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}

.stickynotes-list ul li a:hover, .stickynotes-list ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

.stickynotes-list ol{text-align:center;}

.stickynotes-list ol li{display:inline;padding-right:1em;}

.stickynotes-list ol li a{color:#fff;}

.sacco-dboard-stats-img{
    float: left;
}

.sacco-dboard-stats{
    font-size: 12px;
    font-weight: bold;
    float: right;
    margin-left: 10px;
    text-align: right;
}

.sacco-dboard-stats-data{
    font-size: 15px;
}

.sacco-dboard-stats-label{
    font-size: 11px;
}

.sacco-dboard-stats-label a {
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(
      to right,
      rgba(111, 177, 211, 1),
      rgba(111, 177, 211, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

a:hover {
  background-size: 0 3px, 100% 3px;
}

.ezen-form-main-label{
    padding-bottom:10px;
    text-align: right;
    font-size: 17px;
    font-weight: bold;
    color: #ff0000;
    text-decoration: underline;
    text-decoration-color: #7da7d9;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ezen-form-main-label-after{
    padding-bottom:10px;
    padding-bottom:30px;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

.ezen-form-main-label-status{
    padding-top:30px;
    font-weight: bold;
    height: 70px;
    text-align: center;
}

.ext-grid-rowcustom1{
    height: 25px;
}

.x-edit-wordpaste {background: url(../images/icons/edit-word-text.png) 0 0 no-repeat !important;}
.x-edit-table {background: url(../images/icons/edit-table.png) 0 0 no-repeat !important;}
.x-edit-hr {background: url(../images/icons/edit-rule.png) 0 0 no-repeat !important;}
.x-edit-indent {background: url(../images/icons/edit-indent.png) 0 0 no-repeat !important;}
.x-edit-char {background: url(../images/icons/edit-char.png) 0 0 no-repeat !important;}
.x-edit-outdent {background: url(../images/icons/edit-outdent.png) 0 0 no-repeat !important;}
.x-edit-subscript {background: url(../images/icons/edit-subscript.png) 0 0 no-repeat !important;}
.x-edit-superscript {background: url(../images/icons/edit-superscript.png) 0 0 no-repeat !important;}
.x-edit-removeFormat {background: url(../images/icons/edit-removeFormat.png) 0 0 no-repeat !important;}
.x-edit-image {background: url(../images/icons/edit-image.png) 0 0 no-repeat !important;}
.x-edit-findandreplace {background: url(../images/icons/edit-findandreplace.png) 0 0 no-repeat !important;}
.x-edit-undo {background: url(../images/icons/edit-undo.png) 0 0 no-repeat !important;}
.x-edit-redo {background: url(../images/icons/edit-redo.png) 0 0 no-repeat !important;}
.x-edit-formatblock-h1 {background: url(../images/icons/edit-heading-h1.png) 0 0 no-repeat !important;}
.x-edit-formatblock-h2 {background: url(../images/icons/edit-heading-h2.png) 0 0 no-repeat !important;}

.folder-home-other
{
    margin-top: 20px;
    margin-left: 20px;
    font-size: 18px;
}

.folder-home-other li.recent
{
    padding-top: 8px;
    padding-left: 25px;
    background-image: url(../images/icons/recent.png);
    background-repeat: no-repeat;
    background-position: 0 .5em;
    height: 20px;
}

.folder-home-other li.starred
{
    padding-top: 8px;
    padding-left: 25px;
    background-image: url(../images/icons/star.png);
    background-repeat: no-repeat;
    background-position: 0 .5em;
    height: 20px;
}

.folder-home-other li.trash
{
    padding-top: 8px;
    padding-left: 25px;
    background-image: url(../images/icons/disposal.png);
    background-repeat: no-repeat;
    background-position: 0 .5em;
    height: 20px;
}

/* *** Multi-Step Start ***/
.ms-text-center {
    text-align: center;
}

.ms-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.ms-pl-0 {
    padding-left: 0;
}

ul.ms-step {
    counter-reset: section;
    margin-bottom: 3rem;
}

ul.ms-step .ms-step-circle {
    position: relative;
}

ul.ms-step .ms-step-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.ms-step-horizontal {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

ul.ms-step > li:not(:last-of-type) {
    margin-bottom: 0.625rem;
    -webkit-transition: margin-bottom 0.4s;
    -o-transition: margin-bottom 0.4s;
    transition: margin-bottom 0.4s;
}

.ms-step-horizontal > li:not(:last-of-type) {
    margin-bottom: 0 !important;
}

.ms-step-horizontal li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.ms-step-horizontal li:not(:last-child):after {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    content: "";
    top: 32%;
}

.ms-step-horizontal li:after {
    background-color: #fff;
}

.ms-step-horizontal li.ms-step-completed:after {
    background-color: #4da3ff;
}

.ms-step-horizontal li.ms-step-cancelled:after {
    background-color: #fff;
}

.ms-step-horizontal li:last-child {
    flex: unset;
}

ul.ms-step li a .ms-step-circle {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 0;
    line-height: 1.7rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.38);
    border-radius: 50%;
}

.ms-step .ms-step-active .ms-step-circle {
    background-color: #4361ee !important;
    color: #fff;
}

.ms-step .ms-step-active .label {
    color: #4361ee !important;
}

.ms-step .ms-step-active .ms-step-circle:hover {
    background-color: #4361ee !important;
    color: #fff !important;
}

.ms-step .ms-step-unfinished .ms-step-circle {
    background-color: #f8f7ff;
}

.ms-step .ms-step-completed .ms-step-circle {
    background-color: #0e9594 !important;
    color: #fff;
}

.ms-step .ms-step-cancelled .ms-step-circle {
    background-color: #db0b23 !important;
    color: #fff;
}

.ms-step .ms-step-completed .label {
    color: #0e9594 !important;
}

.ms-step .ms-step-cancelled .label {
    color: #db0b23 !important;
}

.ms-step .ms-step-completed .ms-step-circle:hover {
    background-color: #0e9594 !important;
    color: #fff !important;
}

.ms-step .ms-step-cancelled .ms-step-circle:hover {
    background-color: #db0b23 !important;
    color: #fff !important;
}

.ms-step .ms-step-active span.text-muted {
    color: #fff !important;
}

.ms-step .ms-step-completed span.text-muted {
    color: #fff !important;
}

.ms-step .ms-step-cancelled span.text-muted {
    color: #fff !important;
}

.ms-step .label {
    font-size: 1rem;
    margin-top: 0.5rem;
}

.ms-step a {
    cursor: default;
}
/* *** Multi-Step Stop ***/

.a4-edit-background {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   padding: 0;
   font-size: 12pt;
   background: rgb(223, 232, 246) !important;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
}

.a4-main-page {
   width: 230mm !important;
   min-height: 317mm !important;
   margin: 0 auto;
   background: #FFF;
   box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
 }

.editor-main-page {
   width: 230mm !important;
   min-height: 165mm !important;
   margin: 0 auto;
   background: #FFF;
   box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
 }

.a4-sub-page {
   padding: 1cm;
   height: 220mm !important;
 }

.editor-sub-page {
   padding: 1cm;
   height: 220mm !important;
 }

.x-form-group-alt {
    background: #D1DDEF;
    border-top:0px;
    border-bottom:0px;
}

.paye_tax_calculation {
  border-collapse: collapse;
  width: 100%;
}

.paye_tax_calculation th, .paye_tax_calculation td {
  text-align: left;
  padding: 8px;
}

.paye_tax_calculation tr:nth-child(even) {background-color: #f2f2f2;}

.connected-steps {
  display: flex;
  width: 100%; // set the width you need
  align-items: center;
  margin-top: 40px;
  margin-left: 10px;
}

.step-done {
  color: white;
  background-color: dodgerblue;
  display: block;
  border-radius: 50px;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.step-notdone {
  color: white;
  background-color: lightblue;
  display: block;
  border-radius: 50px;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.connector-done {
  flex-grow: 1; //fill the space
  width: 10px;
  content: "";
  display: block;
  height: 10px;
  background-color: dodgerblue;
  margin-top: 45px;
}

.connector-notdone {
  flex-grow: 1; //fill the space
  width: 20px;
  content: "";
  display: block;
  height: 10px;
  background-color: lightblue;
  margin-top: 45px;
}

hr.ext-toolbar-hr {
  border: 1px solid #e0e0e0;
  border-bottom-color: #fff;
}

.img-in-expander {
  width: 140px;
  height: 150px;
}

/* expander card */
.expander-card {
    display: flex;
    border-radius: 10px;
    padding-left: 70px;
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 15px;
    margin: 0 0 10px 0;
}

/* 3 Col cards */
.expander-card-column {
    flex: 1;
    padding: 0 10px;
    border-left: 1px solid #cbd5e0;
    font-family: Georgia, "Times New Roman", serif;
    color: #4a5568;
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
}

.expander-card-column-flex2 {
    flex: 2;
    padding: 0 10px;
    border-left: 1px solid #cbd5e0;
    font-family: Georgia, "Times New Roman", serif;
    color: #4a5568;
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
}

.expander-card strong {
     font-weight: 900;
     font-style: italic;
 }

/* profile card */
.profile-card {
    display: flex;
    border-radius: 10px;
    padding-left: 70px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    font-size:13px;
    margin: auto;
}

/* Column 1 */
.profile-photo {
    flex: 1;
    text-align: center;
}

.profile-photo img {
    width: 140px;
    height: 140px;
}

/* Column 2 */
.profile-details {
    flex: 2;
    margin: 0 20px;
    padding: 0 10px;
    border-left: 1px solid #cbd5e0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

.profile-details p {
    margin: 0;
    color: #4a5568;
    font-size: 15px;
    line-height: 1.6;
}

/* Column 3 */
.profile-address {
    flex: 2;
    margin: 0 10px;
    font-size: 15px;
    color: #4a5568;
    border-left: 1px solid #cbd5e0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

.profile-address p {
    margin: 4px 0;
}

/* Column 4 */
.profile-pay {
    flex: 2;
    margin: 0 10px;
    font-size: 15px;
    color: #4a5568;
    border-left: 1px solid #cbd5e0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

.profile-card p strong {
    font-weight: 900;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-details,
    .profile-address {
        padding: 15px 0;
    }
}

.clickable-img {
  overflow: hidden;           /* prevents overflow */
  display: inline-block;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.clickable-img:hover {
  transform: scale(1.2);
}

/* Base blue button */
.blue-btn .x-btn-text {
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 30px;
}

/* Button background */
.blue-btn .x-btn-tl,
.blue-btn .x-btn-tr,
.blue-btn .x-btn-tc,
.blue-btn .x-btn-ml,
.blue-btn .x-btn-mr,
.blue-btn .x-btn-mc,
.blue-btn .x-btn-bl,
.blue-btn .x-btn-br,
.blue-btn .x-btn-bc {
    background-color: #1e73be;
    background-image: none;
}

/* Rounded corners */
.blue-btn .x-btn-tl,
.blue-btn .x-btn-tr,
.blue-btn .x-btn-bl,
.blue-btn .x-btn-br {
    border-radius: 20px;
}

/* Center text */
.blue-btn .x-btn-mc {
    text-align: center;
}

.blue-btn:hover .x-btn-mc {
    background-color: #155a96;
}

.blue-btn.x-btn-pressed .x-btn-mc {
    background-color: #0f3f6d;
}

login-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-form .x-panel-body {
    border: 1px solid #1e73be;
}

/* Progress Bar Styling */
.ux-progress-bg {
    background: #e0e0e0;
    height: 12px;
    width: 100px;
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.ux-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}
.ux-progress-text {
    font-size: 11px;
    color: #666;
}

/* Grid Refinement */
.x-grid3-row {
    border-color: #eee !important;
    border-top: none;
}

.x-grid3-hd-row td {
    background: #f1f3f5;
    font-weight: bold;
}

.soft-dark-blue {
    padding: 4px;
    background-color: #1f3a5f;
    color: #ffffff;
}

.hr-soft {
    width: 80%;
    border: none;              /* remove default */
    border-top: 1px solid #cbd5e0;
    margin: 12px auto;         /* center horizontally */
}

.center-tbar-clean .x-panel-tbar-noheader .x-toolbar,
.center-tbar-clean .x-panel-tbar,
.center-tbar-clean .x-panel-tbar .x-panel-body {
    border: none !important;
    background-image: none !important;
}

/* new profile */
/* PAGE */
.tenant-profile-bg{
    background: linear-gradient(180deg,#f4f7fb,#e9eef7);
}

/* CARD */
.tenant-ui-card{
    background:#fff;
    border-radius:14px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
    padding:18px;
}

/* CARD */
.tenant-ui-notes-card{
    background:#fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
    padding:2px;
}

/* HEADERS */
.tenant-ui-title{
    font-size:13px;
    letter-spacing:.08em;
    font-weight:700;
    color:#5a6b85;
    margin-bottom:10px;
}

.tenant-ui-big{
    font-size:26px;
    font-weight:800;
    color:#1f2d4f;
}

.tenant-ui-name{
    font-size:18px;
    font-weight:700;
}

.tenant-ui-muted{
    color:#7c8aa5;
    font-size:15px;
}

/* BADGES */
.tenant-badge{
    background:#edf2ff;
    color: #3b5bdb;
    border-radius:20px;
    padding:4px 10px;
    font-size:14px;
    font-weight:800;
}

/* BUTTON BAR */
.tenant-x-toolbar-modern{
    background:transparent;
    border:0;
}

/* NOTES BOX */
.tenant-notes-box{
    border:1px dashed #d7dff0;
    border-radius:10px;
    padding:20px;
    color:#8a97b5;
    text-align:center;
}

/* INPUT */
.tenant-note-input .x-form-field{
    border-radius:8px;
    border:1px solid #cdd7f5;
    padding:6px;
}

/* kill Ext defaults */
.x-form-display-field{
    font-family:inherit !important;
    font-size:inherit !important;
    color:inherit !important;
}

/* label */
.df-lbl{
    font-family: "Segoe UI",Arial,sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    color: #7c8aa5 !important;
    padding-bottom: 10px !important;
}

/* value */
.df-val{
    font-family: "Segoe UI",Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    color:#1f2d4f !important;
    padding-bottom: 10px !important;
}

.tip-label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  gap: 10px;
}

.tip-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
}

.tip-red { background: #f44336; }
.tip-orange { background: #ff9800; }
.tip-blue { background: #2196f3; }
.tip-green { background: #4caf50; }
.tip-grey { background: #e0e0e0; }

.x-html-editor-wrap table {
    border-collapse: collapse;
}

.x-html-editor-wrap td {
    padding: 4px;
}

/* Modern */
.tbl-modern {
    border:1px solid #ccc;
    font-family: Arial, sans-serif;
}

.tbl-modern th {
    background:#f5f7fa;
    font-weight:bold;
    text-align:left;
}

.tbl-modern td, .tbl-modern th {
    padding:6px;
    border:1px solid #ddd;
}

/* Minimal */
.tbl-minimal td, .tbl-minimal th {
    border-bottom:1px solid #ddd;
    padding:6px;
}

/* Classic */
.tbl-classic {
    border:2px solid #000;
}

.tbl-classic td, .tbl-classic th {
    border:1px solid #000;
    padding:5px;
}

.x-toolbar .x-btn-text {
    font-size: 12px;   /* adjust as needed */
}

.x-toolbar {
    font-size: 12px;
}

.x-menu-item-text {
    font-size: 12px;
}

.x-menu-list {
    font-size: 12px;
}

.x-tab-strip-text {
    font-size: 12px;
}

/** Increase Grid Font Size */
.x-grid3-row td,
.x-grid3-summary-row td {
    font-size: 13px;   /* increase as needed */
    line-height: normal;
}

.x-grid3-cell-inner {
    padding: 4px 2px;
}

.x-grid3-row-body {
    padding: 6px 8px;
    white-space: normal; /* allow wrapping */
}

.x-grid3-locked .x-grid3-row-body {
    padding: 6px 8px;
    white-space: normal; /* allow wrapping */
}

.x-grid3-header {
    line-height: normal;
}

.x-grid3-hd-inner {
    font-size: 13px;
    padding: 4px 2px;
}

.notice-board-card {
    background: #fff;
    padding: 15px;
    border-left: 5px solid #007bff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin: 5px;
}

.notice-board-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

.notice-board-dept-badge {
    display: inline-block;
    background: #e9ecef;
    color: #333;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin: 5px 0;
}

.notice-board-msg {
    color: #555;
    margin-bottom: 5px;
}

.notice-board-date {
    font-size: 11px;
    color: #888;
}

.notice-board-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    background-image: url('../images/icons/zoom-lens32.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.notice-board-icon:hover {
    color: #0056b3;
    transform: scale(1.2);
}

.white-window .x-window-mc {
    background: #ffffff !important;
}

.white-window .x-window-body {
    background: #ffffff !important;
}

.white-window .x-panel-body {
    background: #ffffff !important;
}

.white-window .x-toolbar,
.white-window .x-toolbar .x-toolbar-ct {
    background: #ffffff !important;
    background-image: none !important;
}

.white-window .x-toolbar {
    border-bottom: 1px solid #ddd; /* optional clean border */
}

/* internal ticketing */
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #ffffff;
    border-bottom: 1px solid #dfe6ef;
}

.ticket-header h1 {
    margin: 0;
    font-size: 24px;
    color: #16325c;
}

.ticket-header span {
    color: #6b7a90;
}

.summary-cards {
    display: flex;
    gap: 12px;
}

.summary-card {
    background: white;
    border-radius: 12px;
    padding: 14px 20px;
    min-width: 140px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e3e8ef;
}

.summary-card .number {
    font-size: 20px;
    font-weight: bold;
    color: #16325c;
}

.summary-card .label {
    color: #7a889d;
    margin-top: 4px;
}

badge-goto-link{
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline dashed #2D5698 1px;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}

.status-badge.pending {
    background: #fff4cc;
    color: #946200;
    position: relative;
    padding-left: 20px;
}

.status-badge.pending::before {
    content: "\23F3";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.approved {
    background: #dff7df;
    color: #137333;
    position: relative;
    padding-left: 20px;
}

.status-badge.approved::before {
    content: "\2714";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.authorized {
    background: #cfe8d6;
    color: #084c1a;
    position: relative;
    padding-left: 20px;
    border: 1px solid #0b5f2a;
}

.status-badge.authorized::before {
    content: "\2713";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.rejected {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 20px;
}

.status-badge.rejected::before {
    content: "\2716";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.unlocked {
    background: #dff7df;
    color: #137333;
    position: relative;
    padding-left: 20px;
}

.status-badge.unlocked::before {
    content: "\1F44D";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.locked {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 20px;
}

.status-badge.locked::before {
    content: "\1F512";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.resolved {
    background: #d7f5dd;
    color: #0f9d58;
    position: relative;
    padding-left: 20px;
}

.status-badge.resolved::before {
    content: "\2714";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.on_hold {
    background: #ffe2e2;
    color: #c25b00;
    position: relative;
    padding-left: 20px;
}

.status-badge.on_hold::before {
    content: "\23F8";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.in_progress {
    background: #dbe9ff;
    color: #0b57d0;
    position: relative;
    padding-left: 20px;
}

.status-badge.in_progress::before {
    content: "\27F3";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.fire {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 20px;
    width: 40px;
    text-align: right;
}

.status-badge.fire::before {
    content: "\1F525";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.status-badge.cold {
    background: #dbe9ff;
    color: #0b57d0;
    position: relative;
    padding-left: 20px;
    width: 40px;
    text-align: right;
}

.status-badge.cold::before {
    content: "\2744";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.status-badge.warm {
    background: #FEF3C7;
    color: #D97706;
    position: relative;
    padding-left: 20px;
    width: 40px;
    text-align: right;
}

.status-badge.warm::before {
    content: "\1F324";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}nt-size: 13px;
}

.status-badge.disqualified {
    background: #FEF3C7;
    color: #D97706;
    position: relative;
    padding-left: 20px;
    width: 40px;
    text-align: right;
}

.status-badge.disqualified::before {
    content: "\2716";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.status-badge.success_60 {
    background: #dff7df;
    color: #137333;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.success_60::before {
    content: "\2714";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.contacted_60 {
    background: #fff4cc;
    color: #946200;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.contacted_60::before {
    content: "\1F4DE";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.nurturing_60 {
    background: #ECFDF5;
    color: #059669;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.nurturing_60::before {
    content: "\1F331";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.qualified_60 {
    background: #fff4cc;
    color: #946200;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.qualified_60::before {
    content: "\1F3C5";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.unqualified_60 {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.unqualified_60::before {
    content: "\274C";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.open_60 {
    background: #dbe9ff;
    color: #0b57d0;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.open_60::before {
    content: "\25B6";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.negotiation_60 {
    background: #dbe9ff;
    color: #0b57d0;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.negotiation_60::before {
    content: "\1F91D";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.won_60 {
    background: #FEF3C7;
    color: #D97706;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.won_60::before {
    content: "\1F3C6";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.lost_60 {
    background: #FEF3C7;
    color: #D97706;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.lost_60::before {
    content: "\1F4C9";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.pending_60 {
    background: #FEE2E2;
    color: #DC2626;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.pending_60::before {
    content: "\23F8";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.status-badge.new_60 {
    background: #ffe2e2;
    color: #c25b00;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.status-badge.new_60::before {
    content: "\2728";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.property-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
}

.property-badge.residential {
    background: #FEF3C7;
    color: #D97706;
    position: relative;
    padding-left: 25px;
}

.property-badge.residential::before {
    content: "\1F3E0";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.commercial {
    background: #DBEAFE;
    color: #2563EB;
    position: relative;
    padding-left: 25px;
}

.property-badge.commercial::before {
    content: "\1F3E2";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.vacant {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 20px;
    width: 30px;
    text-align: right;
}

.property-badge.vacant::before {
    content: "\2716";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.occupied {
    background: #dff7df;
    color: #137333;
    position: relative;
    padding-left: 20px;
    width: 30px;
    text-align: right;
}

.property-badge.occupied::before {
    content: "\2714";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.green-bg-total-money {
    background: #dff7df;
    color: #137333;
    position: relative;
    padding-left: 20px;
    width: 100px;
    text-align: right;
}

.property-badge.green-bg-total-money::before {
    content: "\1F4B0";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.blue-bg-money {
    background: #dbe9ff;
    color: #0b57d0;
    position: relative;
    padding-left: 20px;
    width: 70px;
    text-align: right;
}

.property-badge.blue-bg-money::before {
    content: "\1F4B5";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.total {
    background: #dbe9ff;
    color: #0b57d0;
    position: relative;
    padding-left: 20px;
    width: 30px;
    text-align: right;
}

.property-badge.total::before {
    content: "\2630";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.no_equal {
    background: #F9FAFB;
    color: #9CA3AF;
    position: relative;
    padding-left: 20px;
    width: 30px;
    text-align: right;
}

.property-badge.no_equal::before {
    content: "\2260";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.equal {
    background: #F9FAFB;
    color: #9CA3AF;
    position: relative;
    padding-left: 20px;
    width: 30px;
    text-align: right;
}

.property-badge.equal::before {
    content: "\003D";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.operation {
    background: #DBEAFE;
    color: #2563EB;
    position: relative;
    padding-left: 25px;
}

.property-badge.operation::before {
    content: "\2699";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.expense {
    background: #FEF3C7;
    color: #D97706;
    position: relative;
    padding-left: 25px;
}

.property-badge.expense::before {
    content: "\1F4B0";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.ok {
    background: #dff7df;
    color: #137333;
    position: relative;
    padding-left: 25px;
}

.property-badge.ok::before {
    content: "\2714";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.notok {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 25px;
}

.property-badge.notok::before {
    content: "\2716";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.property-badge.unknown {
    background: #F9FAFB;
    color: #9CA3AF;
    position: relative;
    padding-left: 25px;
}

.property-badge.unknown::before {
    content: "\2753";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.timesheet-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
}

.timesheet-badge.blocked {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.timesheet-badge.blocked::before {
    content: "\26D4";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.timesheet-badge.late {
    background: #ffe2e2;
    color: #c5221f;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.timesheet-badge.late::before {
    content: "\2716";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.timesheet-badge.ontime {
    background: #dff7df;
    color: #137333;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.timesheet-badge.ontime::before {
    content: "\2714";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.timesheet-badge.paused {
    background: #fff4cc;
    color: #946200;
    position: relative;
    padding-left: 20px;
    width: 60px;
    text-align: right;
}

.timesheet-badge.paused::before {
    content: "\23F8";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

/* Base row style */
.modern-grid-row .x-grid3-cell-first {
    position: relative;
    padding-left: 14px !important;
}

/* Default blue strip */
.modern-grid-row .x-grid3-cell-first:before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 10px;
    background: #2196f3;
}

/* Approved / success rows -> GREEN */
.approved-row .x-grid3-cell-first:before {
    background: #22c55e;
}

/* Warning rows -> ORANGE */
.warning-row .x-grid3-cell-first:before {
    background: #f59e0b;
}

/* Rejected rows -> RED */
.rejected-row .x-grid3-cell-first:before {
    background: #ef4444;
}

.blue-strip-cell {
    border-left: 4px solid #2196f3 !important;
}

.green-strip-cell {
    border-left: 4px solid #22c55e !important;
}

.red-strip-cell {
    border-left: 4px solid #ef4444 !important;
}

.crm-stepper{
    margin-bottom:20px;
    overflow:hidden;
}

.crm-stepper .step-icon{
    display:inline-block;
    margin-right:6px;
    font-size:16px;
    vertical-align:middle;
}

.crm-stepper ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
}

.crm-stepper li{
    position:relative;
    flex:1;
    height:42px;
    line-height:42px;
    background:#e5e5e5;
    color:#555;
    font-size: 16px;
    text-align:center;
    font-weight:bold;
    font-family:Arial;
    margin-right:18px;
}

.crm-stepper li:after{
    content:"";
    position:absolute;
    top:0;
    right:-20px;
    width:0;
    height:0;
    border-top:21px solid transparent;
    border-bottom:21px solid transparent;
    border-left:20px solid #e5e5e5;
    z-index:2;
}

.crm-stepper li:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:0;
    border-top:21px solid transparent;
    border-bottom:21px solid transparent;
    border-left:20px solid #fff;
    z-index:1;
}

.crm-stepper li:first-child:before{
    display:none;
}

.crm-stepper li:last-child{
    margin-right:0;
}

.crm-stepper li:last-child:after{
    display:none;
}

/* Active */
.crm-stepper li.active{
    background:#0d3f7d;
    color:white;
    cursor:pointer;
}

.crm-stepper li.active:after{
    border-left-color:#0d3f7d;
}

.crm-stepper li.completed{
    background:#2b8a3e;
    color:white;
}

.crm-stepper li.completed:after{
    border-left-color:#2b8a3e;
}

.crm-stepper li.lost{
    background:#FF0000;
    color:white;
}

.crm-stepper li.lost:after{
    border-left-color:#FF0000;
}


/*****************************************************************
    ONLY THE NOTES GRID
******************************************************************/
.crm-notes-grid .x-grid3-header{
    display:none;
}

.crm-notes-grid .x-grid3-cell{
    border:none !important;
}

.crm-notes-grid .x-grid3-row{
    border:none !important;
}

.crm-notes-grid .x-grid3-row-selected{
    background:transparent !important;
}

.crm-notes-grid .x-grid3-row-over{
    background:transparent !important;
}

.crm-notes-grid .x-grid3-row-over .crm-timeline-item{
    background:#f8fbff;
}

.crm-notes-grid .x-grid3-cell-inner{
    padding:0;
}

.crm-notes-grid .x-grid3-body{
    background:white;
}

/*****************************************************************
    TIMELINE
******************************************************************/
.crm-notes-grid .crm-timeline-item{
    position:relative;
    padding:15px 15px 18px 70px;
    min-height:70px;
    border-bottom:1px solid #ececec;
    background:#fff;
    transition:background .2s;
}

/*****************************************************************
    Vertical Line
******************************************************************/
.crm-notes-grid .crm-timeline-item:after{
    content:"";
    position:absolute;
    left:30px;
    top:42px;
    bottom:-18px;
    width:2px;
    background:#d8d8d8;
}

.crm-notes-grid .x-grid3-row-last .crm-timeline-item:after{
    display:none;
}

/*****************************************************************
    Circle Icon
******************************************************************/
.crm-notes-grid .crm-icon{
    position:absolute;
    left:12px;
    top:12px;
    width:36px;
    height:36px;
    border-radius:18px;
    line-height:36px;
    text-align:center;
    font-size:18px;
    color:white;
    background:#4c8bf5;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}

/*****************************************************************
    Activity Colours
******************************************************************/
.crm-notes-grid .crm-EMAIL .crm-icon{
    background:#2196F3;
}

.crm-notes-grid .crm-CALL .crm-icon{
    background:#2E7D32;
}

.crm-notes-grid .crm-LEAD .crm-icon{
    background:#8E44AD;
}

.crm-notes-grid .crm-MEETING .crm-icon{
    background:#FB8C00;
}

.crm-notes-grid .crm-TASK .crm-icon{
    background:#00897B;
}

/*****************************************************************
    Text
******************************************************************/
.crm-notes-grid .crm-title{
    font-size:15px;
    font-weight:bold;
    color:#1f1f1f;
    margin-bottom:6px;
}

.crm-notes-grid .crm-description{
    color:#666;
    line-height:20px;
    margin-bottom:10px;
}

/*****************************************************************
    Footer
******************************************************************/
.crm-notes-grid .crm-footer{
    overflow:hidden;
    color:#888;
    font-size:11px;
}

.crm-notes-grid .crm-user{
    float:left;
}

.crm-notes-grid .crm-date{
    float:right;
}

/*****************************************************************
    Hover
******************************************************************/
.crm-notes-grid .crm-timeline-item:hover{
    background:#f6fbff;
}

/*****************************************************************
    Selection
******************************************************************/
.crm-notes-grid .x-grid3-row-selected .crm-timeline-item{
    background:#edf6ff;
}

.white-background .x-panel,
.white-background .x-panel-mc,
.white-background .x-panel-tl,
.white-background .x-panel-ml,
.white-background .x-panel-mr,
.white-background .x-panel-bl,
.white-background .x-panel-br,
.white-background .x-panel-bc,
.white-background .x-panel-noborder,
.white-background .x-panel-header-noborder,
.white-background .x-panel-header,
.white-background .x-panel-body,
.white-background .x-tab-panel-body,
.white-background .x-column,
.white-background .x-column-inner,
.white-background .x-form-item {
    border: none !important;
    background: none !important;
}

.white-background .x-tab-panel-header,
.white-background .x-tab-panel-footer{
    /*border: none !important;*/
    background: none !important;
}

.white-background .x-window-mc{
    background: #ffffff !important;
    border: none !important;
}

.white-background .x-toolbar{
    background: none !important;
}

.white-background ul.x-tab-strip-top {
    border: none !important;
    background: none !important;
}

.white-background .x-grid3-header {
    border-top: 1px solid #7da7d9 !important;
    border-bottom: 1px solid #7da7d9 !important;
}

.white-background .x-grid-panel .x-panel-bbar {
    border-top: 1px solid #7da7d9 !important;
    border-bottom: 1px solid #7da7d9 !important;
}

.white-background .x-panel.x-panel-collapsed {
    border-top: 1px solid #7da7d9 !important;
    border-bottom: 1px solid #7da7d9 !important;
}

.module-tab-panel ul.x-tab-strip-top {
    border-bottom: 1px solid #7da7d9 !important;
}

.white-background .x-tab-strip-top .x-tab-right,
.white-background .x-tab-strip-top .x-tab-left,
.white-background .x-tab-strip-top .x-tab-strip-inner,
.white-background .x-tab-strip-top .x-tab-strip-active .x-tab-right,
.white-background .x-tab-strip-top .x-tab-strip-active .x-tab-left,
.white-background .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
    background: none !important;
}

.white-background .x-tab-strip-top li.x-tab-strip-active,
.white-background .x-tab-strip-top li {
    border-right: 1px solid #7da7d9 !important;
}

1px solid #7da7d9 !important

.white-background .x-toolbar.x-small-editor.x-toolbar-layout-ct {
    border: none !important;
}

.white-background .x-window-tl,
.white-background .x-window-tr,
.white-background .x-window-tc,
.white-background .x-window-br,
.white-background .x-window-bc,
.white-background .x-window-bl,
.white-background .x-window-bwrap .x-window-ml,
.white-background .x-window-bwrap .x-window-mr {
    background: none !important;
    background-color: #fff !important;
}

.white-background.x-window {
    border: 1px solid #7da7d9 !important;
}

/*.white-background .x-form-text {
    border: none !important;
    border-bottom: 1px solid #7da7d9 !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.white-background .x-form-text:focus {
    border: none !important;
    border-bottom: 2px solid #7da7d9 !important;
    outline: none !important;
}*/

.white-context-menu,
.white-context-menu .x-menu-list {
    background: #fff !important;
    background-image: none !important;
}

.white-context-menu .x-menu-list-item {
    background: #fff !important;
}

/* Hover */
.white-context-menu .x-menu-item-active {
    background: #f3f6f9 !important;
    border-color: #d9e2ec !important;
}

/* Text */
.white-context-menu .x-menu-item {
    color: #333 !important;
}

.x-menu,
.x-menu-list {
    background-color: #fff !important;
    background-image: none !important;
}

/* Module toolbar */
.module-tab-panel .x-panel-body
.module-tab-panel .x-panel-body-noheader {
    border: none !important;
    background: none !important;
}

/* Module Tabs */
.module-tab-panel .x-tab-panel-header,
.module-tab-panel .x-tab-panel-footer {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #ffffff !important;
}

/* Tab strip */
.module-tab-panel ul.x-tab-strip-top {
    background: #ffffff !important;
    background-image: none !important;
    border-top-color: #ffffff !important;
    /*border-bottom: 1px solid #7da7d9 !important;*/
}

/* Toolbar */
.module-tab-panel .x-toolbar {
    background: none !important;
    background-image: none !important;
}

/* Keep body clean */
.module-tab-panel .x-tab-panel-body {
    border: none !important;
    background: #ffffff !important;
}

/* Remove default Ext JS tab backgrounds */
.module-tab-panel .x-tab-strip-top .x-tab-right,
.module-tab-panel .x-tab-strip-top .x-tab-left,
.module-tab-panel .x-tab-strip-top .x-tab-strip-inner,
.module-tab-panel .x-tab-strip-top .x-tab-strip-active .x-tab-right,
.module-tab-panel .x-tab-strip-top .x-tab-strip-active .x-tab-left,
.module-tab-panel .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
    background: none !important;
    background-image: none !important;
}


/* Tab strip */
.module-tab-panel.ul .x-tab-strip-top {
    background: #ffffff !important;
    background-image: none !important;
    border-top-color: #ffffff !important;
    border-bottom: 1px solid #7da7d9 !important;
}

/* Tab separators */
.module-tab-panel .x-tab-strip-top li {
    border-right: 1px solid #d6e2ef !important;
}

/* Active tab separator */
.module-tab-panel .x-tab-strip-top li.x-tab-strip-active {
    border-right: 1px solid #7da7d9 !important;
}

/* Normal tab text */
.module-tab-panel .x-tab-strip-top .x-tab-strip-text {
    color: #5a6775 !important;
}

/* Active tab text */
.module-tab-panel .x-tab-strip-top li.x-tab-strip-active .x-tab-strip-text {
    color: #1f5f9f !important;
    font-weight: bold !important;
}

/* Hover */
.module-tab-panel .x-tab-strip-top li:hover .x-tab-strip-text {
    color: #1f5f9f !important;
}

/* Subtle active indicator */
.module-tab-panel .x-tab-strip-top li.x-tab-strip-active {
    border-top: 2px solid #7da7d9 !important;
}

.module-window .x-window-tl,
.module-window .x-window-tl .x-window-tr,
.module-window .x-window-bwrap,
.module-window .x-window-bwrap .x-window-ml,
.module-window .x-window-bwrap .x-window-ml .x-window-mr,
.module-window .x-window-bwrap .x-window-ml .x-window-mr .x-window-mc {
   background: #ffffff !important;
   background-image: none !important;
   border: none !important;
}

.module-window .x-window-tc {
    background: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-top: 1px solid #7da7d9 !important;
}

.module-window .x-panel-body.x-panel-body-noheader{
    border: none !important;
}

.module-toolbar .x-toolbar,
.module-toolbar .x-toolbar.x-small-editor.x-toolbar-layout-ct {
  border: none !important;
  background-color: #fff;
  background-image: none;
}

.module-toolbar .x-panel-bwrap .x-panel-body-noheader {
  border-top-color: #fff;
}

/* -------------------------------------------------------
   FLOATING WEST MENU
------------------------------------------------------- */
.floating-west-menu {
    background: #ffffff !important;
    border: 1px solid #7da7d9 !important;
    border-top: none !important;
    z-index: 10000 !important;
}

.floating-west-menu .x-panel-body {
    background: #ffffff !important;
    border: none !important;
}

/* -------------------------------------------------------
   MENU
------------------------------------------------------- */
.crm-menu {
    background: #ffffff;
    padding: 5px 0;
}

.crm-menu-header {
    padding: 9px 15px;
    font-size: 12px;
    background: #f5f5f5;
    border-top: 1px solid #7da7d9 !important;
    border-bottom: 1px solid #7da7d9 !important;
}

.crm-menu-sub-header {
    padding: 9px 15px;
    font-size: 12px;
    background: #f5f5f5;
}

.crm-menu-item {
    padding: 9px 15px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
}

.crm-menu-item:hover {
    background: #f5f5f5;
}

.crm-menu-image {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

/*** opportunity **/
.opportunity-value-cell {
    padding: 8px 6px;
}

.opportunity-main {
    display: flex;
    align-items: flex-start;
}

/* ================================
   DEAL ICON
   ================================ */
.opportunity-main-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    background: #edf4ff;
    border-radius: 8px;
    color: #1857a4;
    font-size: 23px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}

.opportunity-main-content {
    flex: 1;
}

/* ================================
   DEAL AMOUNT
   ================================ */
.opportunity-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
}

.opportunity-amount {
    margin-top: 1px;
    font-size: 15px;
    font-weight: bold;
    color: #222;
}

.opportunity-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 5px 0;
}

/* ================================
   METRICS
   ================================ */
.opportunity-metric {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 12px;
}

.metric-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}

.metric-label {
    width: 48px;
    color: #555;
}

.metric-value {
    font-weight: 600;
}

/* ================================
   LIKELY
   ================================ */
.opportunity-metric.likely .metric-icon {
    color: #1857a4;
    border-color: #1857a4;
}

.opportunity-metric.likely .metric-value {
    color: #1857a4;
}

/* ================================
   BEST
   ================================ */
.opportunity-metric.best .metric-icon {
    color: #218838;
    border-color: #218838;
}

.opportunity-metric.best .metric-value {
    color: #218838;
}

/* ================================
   WORST
   ================================ */
.opportunity-metric.worst .metric-icon {
    color: #dc3545;
    border-color: #dc3545;
}

.opportunity-metric.worst .metric-value {
    color: #dc3545;
}


/* ========================================
   OPPORTUNITY STAGE CELL
   ======================================== */
.opportunity-stage-cell {
    padding: 8px 6px;
}

.opportunity-stage-main {
    display: flex;
    align-items: flex-start;
}

/* ========================================
   STAGE ICON
   ======================================== */
.opportunity-stage-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    background: #edf4ff;
    border-radius: 8px;
    color: #1857a4;
    font-size: 23px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}

/* ========================================
   STAGE CONTENT
   ======================================== */
.opportunity-stage-content {
    flex: 1;
}

.opportunity-stage-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 20px;
}

/* ========================================
   DIVIDER
   ======================================== */
.opportunity-stage-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 5px 0;
}

/* ========================================
   METRICS
   ======================================== */
.opportunity-stage-metric {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 12px;
}

.stage-metric-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}

.stage-metric-label {
    width: 72px;
    color: #555;
}

.stage-metric-value {
    font-weight: 600;
}

/* ========================================
   PROBABILITY
   ======================================== */
.opportunity-stage-metric.probability .stage-metric-icon {
    color: #1877d2;
    border-color: #1877d2;
}

.opportunity-stage-metric.probability .stage-metric-value {
    color: #1877d2;
}

/* ========================================
   FORECAST
   ======================================== */
.opportunity-stage-metric.forecast .stage-metric-icon {
    color: #1857a4;
    border-color: #1857a4;
}

.opportunity-stage-metric.forecast .stage-metric-value {
    color: #333;
}

/* ========================================
   OPPORTUNITY NAME CELL
   ======================================== */
.opportunity-name-cell {
    padding: 8px 6px;
}

.opportunity-name-main {
    display: flex;
    align-items: flex-start;
}

/* ========================================
   WON / LOST STATUS
   ======================================== */
.opportunity-stage-status {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.5px;
}

/* STATUS ICON */
.opportunity-stage-status-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    font-weight: bold;
}

/* ========================================
   WON
   ======================================== */
.opportunity-stage-status.won {
    color: #218838;
    background: #eaf7ed;
    border: 1px solid #b9dfc2;
}

.opportunity-stage-status.won .opportunity-stage-status-icon {
    color: #218838;
}

/* ========================================
   LOST
   ======================================== */
.opportunity-stage-status.lost {
    color: #c82333;
    background: #fdecee;
    border: 1px solid #f3bcc2;
}

.opportunity-stage-status.lost .opportunity-stage-status-icon {
    color: #c82333;
}

/* ========================================
   OPEN / IN PROGRESS
   ======================================== */
.opportunity-stage-status.open {
    color: #1857a4;
    background: #edf4ff;
    border: 1px solid #b8d1ee;
}

.opportunity-stage-status.open .opportunity-stage-status-icon {
    color: #1857a4;
}

/* ========================================
   MAIN ICON
   ======================================== */
.opportunity-name-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    background: #edf4ff;
    border-radius: 8px;
    color: #1857a4;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}

/* ========================================
   CONTENT
   ======================================== */
.opportunity-name-content {
    flex: 1;
    min-width: 0;
}

.opportunity-name-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   DIVIDER
   ======================================== */
.opportunity-name-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 5px 0;
}

/* ========================================
   DETAIL ROWS
   ======================================== */
.opportunity-name-metric {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 12px;
}

.opportunity-name-metric-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
}

.opportunity-name-metric-label {
    width: 50px;
    color: #777;
}

.opportunity-name-metric-value {
    flex: 1;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   LEAD SOURCE
   ======================================== */
.opportunity-name-metric.source .opportunity-name-metric-icon {
    color: #8a6d3b;
    border-color: #8a6d3b;
}

/* ========================================
   CONTACT
   ======================================== */
.opportunity-name-metric.contact .opportunity-name-metric-icon {
    color: #1857a4;
    border-color: #1857a4;
}

/* ========================================
   AGENT
   ======================================== */
.opportunity-name-metric.agent .opportunity-name-metric-icon {
    color: #5f6368;
    border-color: #5f6368;
}

/* ========================================
   CONTACT CELL
   ======================================== */
.opportunity-contact-cell {
    padding: 8px 6px;
}

.opportunity-contact-main {
    display: flex;
    align-items: flex-start;
}

/* ========================================
   MAIN CONTACT ICON
   ======================================== */
.opportunity-contact-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    background: #edf4ff;
    border-radius: 8px;
    color: #1857a4;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}

/* ========================================
   CONTENT
   ======================================== */
.opportunity-contact-content {
    flex: 1;
    min-width: 0;
}

/* ========================================
   DIVIDER
   ======================================== */
.opportunity-contact-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 5px 0;
}


/* ========================================
   CONTACT DETAILS
   ======================================== */
.opportunity-contact-metric {
    display: flex;
    align-items: center;
    min-height: 22px;
    font-size: 12px;
}

.contact-metric-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
}

.contact-metric-label {
    width: 42px;
    color: #777;
}

.contact-metric-value {
    flex: 1;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   EMAIL
   ======================================== */
.opportunity-contact-metric.email .contact-metric-icon {
    color: #1857a4;
    border-color: #1857a4;
}

.opportunity-contact-metric.email .contact-metric-value {
    color: #1857a4;
}

/* ========================================
   PHONE
   ======================================== */
.opportunity-contact-metric.phone .contact-metric-icon {
    color: #218838;
    border-color: #218838;
}

.opportunity-contact-metric.phone .contact-metric-value {
    color: #444;
}


/* ========================================
   PRODUCT / UNIT / PROJECT CELL
   ======================================== */
.opportunity-product-cell {
    padding: 8px 6px;
}

.opportunity-product-main {
    display: flex;
    align-items: flex-start;
}

/* ========================================
   MAIN PRODUCT ICON
   ======================================== */
.opportunity-product-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    background: #edf4ff;
    border-radius: 8px;
    color: #1857a4;
    font-size: 19px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}


/* ========================================
   CONTENT
   ======================================== */
.opportunity-product-content {
    flex: 1;
    min-width: 0;
}

.opportunity-product-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ========================================
   DIVIDER
   ======================================== */
.opportunity-product-divider {
    height: 1px;
    margin: 5px 0;
    background: #e5e5e5;
}


/* ========================================
   DETAIL ROWS
   ======================================== */
.opportunity-product-metric {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 12px;
}

.product-metric-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
}

.product-metric-label {
    width: 48px;
    color: #777;
}

.product-metric-value {
    flex: 1;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   PROJECT
   ======================================== */
.opportunity-product-metric.project .product-metric-icon {
    color: #1857a4;
    border-color: #1857a4;
}

/* ========================================
   UNIT
   ======================================== */
.opportunity-product-metric.unit .product-metric-icon {
    color: #6f42c1;
    border-color: #6f42c1;
}

/* ========================================
   DEAL VALUE
   ======================================== */
.opportunity-product-metric.deal .product-metric-icon {
    color: #218838;
    border-color: #218838;
}

.opportunity-product-metric.deal .product-metric-value {
    color: #218838;
    font-weight: 600;
}

/* ========================================
   BUDGET
   ======================================== */
.opportunity-product-metric.budget .product-metric-icon {
    color: #b7791f;
    border-color: #b7791f;
}

.opportunity-product-metric.budget .product-metric-value {
    color: #555;
}

/* ========================================
   TIME & DATE CELL
   ======================================== */
.opportunity-time-cell {
    padding: 8px 6px;
}

.opportunity-time-main {
    display: flex;
    align-items: flex-start;
}

/* ========================================
   MAIN TIME ICON
   ======================================== */
.opportunity-time-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    background: #edf4ff;
    border-radius: 8px;
    color: #1857a4;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}


/* ========================================
   CONTENT
   ======================================== */
.opportunity-time-content {
    flex: 1;
    min-width: 0;
}


/* ========================================
   TIME ELAPSED
   ======================================== */
.opportunity-time-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ========================================
   DIVIDER
   ======================================== */
.opportunity-time-divider {
    height: 1px;
    margin: 5px 0;
    background: #e5e5e5;
}


/* ========================================
   DETAIL ROW
   ======================================== */
.opportunity-time-metric {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 12px;
}

.time-metric-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
}

.time-metric-label {
    width: 50px;
    color: #777;
}

.time-metric-value {
    flex: 1;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   CREATED DATE
   ======================================== */
.opportunity-time-metric.created .time-metric-icon {
    color: #1857a4;
    border-color: #1857a4;
}

.opportunity-time-metric.created .time-metric-value {
    color: #555;
}

/* ========================================
   OPPORTUNITY DATES
   ======================================== */
.opportunity-date-cell {
    padding: 8px 6px;
}

.opportunity-date-main {
    display: flex;
    align-items: flex-start;
}

/* Main calendar icon */
.opportunity-date-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    background: #edf4ff;
    border-radius: 8px;
    color: #1857a4;
    font-size: 17px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}

/* Content */
.opportunity-date-content {
    flex: 1;
    min-width: 0;
}

/* Estimated close */
.opportunity-date-label {
    font-size: 10px;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
}

.opportunity-date-title {
    margin-top: 1px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.opportunity-date-divider {
    height: 1px;
    margin: 5px 0;
    background: #e5e5e5;
}

/* Detail row */
.opportunity-date-metric {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 12px;
}

.date-metric-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
}

.date-metric-label {
    width: 45px;
    color: #777;
}

.date-metric-value {
    flex: 1;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Actual close date */
.opportunity-date-metric.actual .date-metric-icon {
    color: #218838;
    border-color: #218838;
}

.opportunity-date-metric.actual .date-metric-value {
    color: #444;
}

/* ========================================
   ROW EXPANDER CONTAINER
   ======================================== */
.opportunity-expander {
    padding: 12px 18px 14px 70px;
    background: #fafcff;
    border-top: 1px solid #e6edf5;
    border-bottom: 1px solid #e6edf5;
}

/* ========================================
   GRID
   ======================================== */
.opportunity-expander-grid {
    display: flex;
    gap: 14px;
    width: 100%;
}

/* ========================================
   DETAIL CARD
   ======================================== */
.opportunity-expander-item {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    min-height: 52px;
}

/* ========================================
   ICON
   ======================================== */
.opportunity-expander-icon {
    width: 34px;
    height: 34px;
    margin-right: 12px;
    border-radius: 8px;
    text-align: center;
    line-height: 34px;
    font-size: 15px;
    font-weight: bold;
    flex-shrink: 0;
}

/* LOCATION ICON */
.location-icon {
    background: #fff7e8;
    color: #d97706;
    border: 1px solid #f2d49c;
}

/* REQUIREMENT ICON */
.requirement-icon {
    background: #f4efff;
    color: #6f42c1;
    border: 1px solid #d8c8f5;
}

/* ========================================
   CONTENT
   ======================================== */
.opportunity-expander-content {
    flex: 1;
    min-width: 0;
}

/* LABEL */
.opportunity-expander-label {
    margin-bottom: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #7a8694;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* VALUE */
.opportunity-expander-value {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #2f3742;
    line-height: 18px;
    white-space: normal;
    word-break: break-word;
}

/* Modern Ext JS 3.4 ButtonGroup */
.modern-button-group.x-btn-group {
    background: #ffffff !important;
    border: 1px solid #dfe8f6 !important;
    border-radius: 6px;
    padding: 6px;
}

/* Remove old Ext JS blue backgrounds */
.modern-button-group .x-btn-group-tl,
.modern-button-group .x-btn-group-tr,
.modern-button-group .x-btn-group-tc,
.modern-button-group .x-btn-group-ml,
.modern-button-group .x-btn-group-mr,
.modern-button-group .x-btn-group-bl,
.modern-button-group .x-btn-group-br,
.modern-button-group .x-btn-group-bc {
    background: none !important;
    background-image: none !important;
}

/* Header / title */
.modern-button-group .x-btn-group-header {
    background: none !important;
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #dfe8f6 !important;

    padding: 6px 8px;
    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 600;
    color: #35516f;
}

/* Body */
.modern-button-group .x-btn-group-bwrap,
.modern-button-group .x-btn-group-body {
    background: #ffffff !important;
    border: none !important;
}

/* Buttons */
.modern-button-group .x-btn {
    margin: 2px;
}

/* Remove classic blue button backgrounds */
.modern-button-group .x-btn-tl,
.modern-button-group .x-btn-tr,
.modern-button-group .x-btn-tc,
.modern-button-group .x-btn-ml,
.modern-button-group .x-btn-mr,
.modern-button-group .x-btn-bl,
.modern-button-group .x-btn-br,
.modern-button-group .x-btn-bc,
.modern-button-group .x-btn-mc {
    background-image: none !important;
}

/* Modern button surface */
.modern-button-group .x-btn-mc {
    background: #ffffff !important;
    border: 1px solid #dfe8f6 !important;
    border-radius: 5px;
}

/* Button text */
.modern-button-group .x-btn-text {
    color: #35516f !important;
    font-weight: 500;
}

/* Hover */
.modern-button-group .x-btn-over .x-btn-mc {
    background: #f5f8fc !important;
    border-color: #7da7d9 !important;
}

/* Pressed / active */
.modern-button-group .x-btn-pressed .x-btn-mc {
    background: #eaf1f9 !important;
    border-color: #7da7d9 !important;
}

/* Modern Ext JS 3.4 button */
.modern-button .x-btn-tl,
.modern-button .x-btn-tr,
.modern-button .x-btn-tc,
.modern-button .x-btn-ml,
.modern-button .x-btn-mr,
.modern-button .x-btn-bl,
.modern-button .x-btn-br,
.modern-button .x-btn-bc {
    background: none !important;
    background-image: none !important;
}

.modern-button .x-btn-mc {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #7da7d9 !important;
    border-radius: 5px;
    padding: 2px 6px;
}

.modern-button .x-btn-text {
    color: #35516f !important;
}

/* Hover */
.modern-button.x-btn-over .x-btn-mc {
    background: #f4f8fd !important;
    border-color: #7da7d9 !important;
}

/* Pressed */
.modern-button.x-btn-pressed .x-btn-mc {
    background: #e8f0fa !important;
}


/* ============================================
   SITE VISIT GRID
   ============================================ */
.site-visit-cell {
    padding: 5px 4px;
    line-height: 17px;
}

.site-visit-title {
    font-size: 12px;
    font-weight: bold;
    color: #2f4f6f;
    margin-bottom: 3px;
}

.site-visit-main {
    font-size: 12px;
    color: #333333;
    font-weight: 600;
}

.site-visit-subtext {
    margin-top: 3px;
    font-size: 11px;
    color: #52677a;
    font-weight: 600;
    line-height: 17px;
}

.site-visit-label {
    color: #718096;
    font-weight: bold;
}

.site-visit-icon {
    color: #5d87b2;
}


/* Time rows */
.site-visit-time-row {
    white-space: nowrap;
    line-height: 20px;
}

.site-visit-time-label {
    display: inline-block;
    width: 58px;

    color: #5f7387;
    font-size: 10px;
    font-weight: bold;
}

.site-visit-time-value {
    display: inline-block;

    color: #34495e;
    font-size: 11px;
    font-weight: 600;
}

.site-visit-start-icon {
    color: #4f8f68;
    font-size: 9px;
}

.site-visit-end-icon {
    color: #c47b42;
    font-size: 8px;
}

/* ============================================
   STATUS BADGES
   ============================================ */
.site-visit-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;

    font-size: 10px;
    font-weight: bold;

    border: 1px solid #cbd5df;
    background: #f5f7f9;
    color: #596775;
}

.site-visit-status-icon {
    margin-right: 4px;
}

/* Pending */
.site-status-pending {
    background: #fff8e1;
    border-color: #f0d57c;
    color: #9b7415;
}

/* Approved */
.site-status-approved {
    background: #edf7ed;
    border-color: #9dcba5;
    color: #3c7d48;
}

/* In progress */
.site-status-progress {
    background: #eaf3fc;
    border-color: #9abde3;
    color: #356fa9;
}

/* Completed */
.site-status-completed {
    background: #e7f6ee;
    border-color: #8fc9a7;
    color: #28744a;
}

/* Cancelled */
.site-status-cancelled {
    background: #fcecec;
    border-color: #dfa1a1;
    color: #b34747;
}

/* Status date */
.site-visit-status-date {
    margin-top: 5px;
    color: #8995a1;
    font-size: 9px;
}

/* ============================================
   GRID ROW IMPROVEMENTS
   ============================================ */
.site-visit-grid .x-grid3-row {
    border-bottom: 1px solid #e6edf4;
}

.site-visit-grid .x-grid3-row-over {
    background-color: #f5f9fd;
}

.site-visit-grid .x-grid3-cell-inner {
    white-space: normal;
}

.site-visit-grid .x-grid3-hd-inner {
    font-weight: bold;
    color: #4b6075;
}

/* ==========================================
   BILLING / REVENUE SERVICE GRID
   ========================================== */
.billing-grid-cell {
    padding: 5px 4px;
    line-height: 17px;
}

.billing-grid-primary {
    font-size: 12px;
    font-weight: bold;
    color: #334e68;
    margin-bottom: 3px;
}

.billing-grid-secondary {
    font-size: 11px;
    color: #44576a;
    font-weight: 600;
    line-height: 17px;
}

.billing-grid-label {
    color: #5f7387;
    font-weight: bold;
}


/* ==========================================
   MONEY / BILLING
   ========================================== */
.billing-grid-money {
    font-size: 13px;
    font-weight: bold;
    color: #2f6f4e;
    margin-bottom: 3px;
}

.billing-grid-reading {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 6px;
    border: 1px solid #9abde3;
    border-radius: 8px;
    background: #edf5fc;
    color: #356fa9;
    font-size: 9px;
}


/* ==========================================
   EFFECTIVE DATES
   ========================================== */
.billing-grid-date-row {
    white-space: nowrap;
    line-height: 18px;
}

.billing-grid-date-label {
    display: inline-block;

    width: 35px;

    color: #9aa5b1;
    font-size: 10px;
}

.billing-grid-date-value {
    display: inline-block;

    color: #43566a;
    font-size: 11px;
    font-weight: bold;
}


/* ==========================================
   STATUS
   ========================================== */
.billing-status {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #cbd5df;
    border-radius: 9px;
    background: #f5f7f9;
    color: #596775;
    font-size: 9px;
    font-weight: bold;
}


/* Active */
.billing-status-active {
    background: #e7f6ee;
    border-color: #8fc9a7;
    color: #28744a;
}


/* Pending */
.billing-status-pending {
    background: #fff8e1;
    border-color: #f0d57c;
    color: #9b7415;
}


/* Inactive */
.billing-status-inactive {
    background: #f1f3f5;
    border-color: #c8cfd6;
    color: #727e89;
}


/* Expired */
.billing-status-expired {
    background: #fcecec;
    border-color: #dfa1a1;
    color: #b34747;
}


/* Suspended */
.billing-status-suspended {
    background: #fff1e5;
    border-color: #e7b17f;
    color: #a65d21;
}


.billing-grid-batch {
    margin-top: 4px;
}

.billing-service-grid .x-grid3-row {
    border-bottom: 1px solid #e6edf4;
}

.billing-service-grid .x-grid3-row-over {
    background-color: #f5f9fd;
}

.billing-service-grid .x-grid3-cell-inner {
    white-space: normal;
    overflow: visible;
}

.billing-service-grid .x-grid3-hd-inner {
    font-weight: bold;
    color: #4b6075;
}

.mpesa-grid-cell {
    padding: 5px 4px;
    line-height: 17px;
}

.mpesa-grid-primary {
    font-size: 12px;
    font-weight: bold;
    color: #334e68;
    margin-bottom: 3px;
}

.mpesa-grid-secondary {
    font-size: 11px;
    color: #44576a;
    font-weight: 600;
    line-height: 17px;
}

.mpesa-grid-label {
    color: #64788c;
    font-weight: bold;
}

/* Amount */
.mpesa-grid-align-right {
    text-align: right;
}

.mpesa-grid-money {
    font-size: 13px;
    font-weight: bold;
    color: #2f6f4e;
}

.mpesa-grid-balance {
    font-weight: bold;
    color: #34495e;
}

/* Posting status */
.mpesa-posted-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 9px;
    border: 1px solid #cbd5df;
    font-size: 10px;
    font-weight: bold;
}

/* Posted = Yes */
.mpesa-posted-success {
    background: #e7f6ee;
    border-color: #8fc9a7;
    color: #28744a;
}


/* Posted != Yes */
.mpesa-posted-failed {
    background: #fcecec;
    border-color: #dfa1a1;
    color: #b34747;
}

/* Failure message */
.mpesa-posting-failure {
    margin-top: 4px;
    color: #b34747;
    font-size: 10px;
    font-weight: bold;
    white-space: normal;
}

/* Offline transaction */
.mpesa-offline-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 6px;
    border: 1px solid #e2b479;
    border-radius: 8px;
    background: #fff5e8;
    color: #a26724;
    font-size: 9px;
    font-weight: bold;
}

.mpesa-transaction-grid .x-grid3-row {
    border-bottom: 1px solid #e6edf4;
}

.mpesa-transaction-grid .x-grid3-row-over {
    background-color: #f5f9fd;
}

.mpesa-transaction-grid .x-grid3-cell-inner {
    white-space: normal;
    overflow: visible;
}

.mpesa-transaction-grid .x-grid3-hd-inner {
    font-weight: bold;
    color: #4b6075;
}

/* ========================================
   ASSET CATEGORY GRID
   ======================================== */
.asset-category-cell,
.asset-grid-cell,
.asset-account-cell {
    padding: 7px 5px;
    line-height: 17px;
}

.asset-category-main {
    display: flex;
    align-items: center;
}

.asset-category-icon {
    font-size: 20px;
    margin-right: 10px;
    color: #5f6f81;
}

.asset-category-content {
    flex: 1;
}

.asset-category-title,
.asset-grid-title {
    font-size: 13px;
    font-weight: bold;
    color: #263746;
    margin-bottom: 3px;
}

.asset-grid-secondary {
    font-size: 11px;
    color: #687684;
}

.asset-grid-secondary strong {
    color: #3f4f5f;
    font-weight: bold;
}

/* Depreciation metrics */
.asset-grid-metrics {
    margin-top: 4px;
    font-size: 11px;
    color: #657483;
}

.asset-grid-metrics strong {
    color: #34495e;
}

.asset-grid-divider {
    margin: 0 7px;
    color: #c4cbd2;
}

/* Account display */
.asset-account-label {
    font-size: 10px;
    color: #89949e;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.asset-account-value {
    font-size: 12px;
    font-weight: bold;
}

.asset-account-row {
    padding: 2px 0;
    white-space: nowrap;
}

.asset-account-type {
    display: inline-block;
    width: 58px;
    font-size: 10px;
    color: #7b8793;
    text-transform: uppercase;
}

/* Account status */
.account-configured {
    color: #2e6f47;
    font-weight: bold;
}

.account-missing {
    color: #c0392b;
    font-size: 11px;
    font-style: italic;
}

/* Disposal */
.asset-disposal-gain,
.asset-disposal-loss {
    display: inline-block;
    width: 45px;
    font-size: 10px;
    font-weight: bold;
}

.asset-disposal-gain {
    color: #27864b;
}

.asset-disposal-loss {
    color: #c0392b;
}

/* Better row appearance */
.x-grid3-row .asset-grid-cell,
.x-grid3-row .asset-category-cell,
.x-grid3-row .asset-account-cell {
    min-height: 40px;
}

/* PROPERTY */
.fee-property-cell {
    padding: 7px 6px;
    line-height: 1.4;
}

.fee-property-main {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.fee-property-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    vertical-align: middle;
}

.fee-property-name {
    font-size: 13px;
    font-weight: 700;
    color: #263238;
}

.fee-property-meta {
    padding-left: 25px;
    font-size: 11px;
    font-weight: 600;
    color: #546e7a;
}

.fee-property-meta b {
    color: #37474f;
}

.fee-separator {
    padding: 0 8px;
    color: #b0bec5;
}

.fee-meta-space {
    margin-left: 15px;
}


/* FEE COLUMNS */
.fee-amount-cell {
    padding: 6px 8px;
    text-align: right;
}

.fee-main-amount {
    font-size: 13px;
    font-weight: 700;
    color: #263238;
    line-height: 18px;
}

.fee-vat {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #607d8b;
}

.fee-total-amount {
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid #dfe5e8;
    font-size: 12px;
    font-weight: 700;
    color: #2e7d32;
}

/* TOTAL COLUMN */
.fee-total-cell {
    padding: 6px 8px;
    text-align: right;
    border-left: 3px solid #66bb6a;
    background: #f6fbf7;
}

.fee-total-main {
    font-size: 14px;
    font-weight: 700;
    color: #1b5e20;
}

.fee-total-vat {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #546e7a;
}

.fee-grand-total {
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid #c8e6c9;
    font-size: 11px;
    color: #2e7d32;
}

.mail-setup-cell,
.mail-server-cell,
.mail-account-cell,
.mail-proxy-cell {
    padding: 5px 3px;
    line-height: 18px;
}

.mail-setup-main,
.mail-grid-main {
    font-size: 13px;
    font-weight: bold;
    color: #263238;
}

.mail-grid-secondary {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #607d8b;
}

.mail-grid-empty {
    padding: 8px 3px;
    font-size: 12px;
    color: #9e9e9e;
    font-style: italic;
}

.mail-content-type {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 9px;
    background: #f1f3f5;
    border: 1px solid #e1e5e8;
    border-radius: 10px;
    color: #455a64;
    font-size: 11px;
    font-weight: bold;
}

.mail-status {
    margin-top: 6px;
    font-size: 12px;
    font-weight: bold;
}

.mail-status-active,
.mail-status-success {
    color: #2e7d32;
}

.mail-status-inactive {
    color: #c62828;
}

.mail-status-muted {
    color: #78909c;
}

.notify-category-cell,
.notify-name-cell {
    padding: 8px 6px;
}

.notify-category-main {
    font-size: 12px;
    font-weight: 700;
    color: #37474f;
}

.notify-name-main {
    font-size: 13px;
    font-weight: 700;
    color: #263238;
}

.notify-name-secondary {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #78909c;
}

/* ALERT CELL */
.notify-alert-cell {
    padding: 4px 6px;
}

.notify-alert-row {
    position: relative;
    min-height: 22px;
    line-height: 22px;
    padding: 1px 48px 1px 0;
    border-bottom: 1px solid #edf0f2;
}

.notify-alert-row:last-child {
    border-bottom: 0;
}

.notify-label {
    font-size: 11px;
    font-weight: 600;
    color: #455a64;
}

/* STATUS */
.notify-enabled,
.notify-disabled {
    position: absolute;
    right: 0;
    top: 3px;

    min-width: 32px;
    padding: 1px 5px;

    text-align: center;
    font-size: 10px;
    font-weight: bold;

    border-radius: 3px;
}

.notify-enabled {
    color: #1b5e20;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
}

.notify-disabled {
    color: #b71c1c;
    background: #ffebee;
    border: 1px solid #ef9a9a;
}

/* ============================================================
   MEGA MENU CONTAINER
   ============================================================ */
.app-mega-menu,
.app-mega-menu .x-menu-list {
    background: #fff !important;
    background-image: none !important;
}

.app-mega-menu {
    border: 1px solid #dfe3e8 !important;
    padding: 0 !important;
}

.app-mega-menu .x-menu-list {
    padding: 0 !important;
}

.mega-menu-panel,
.mega-menu-panel .x-panel-body {
    background: #fff !important;
}


/* ============================================================
   COLUMNS
   ============================================================ */
.mega-menu-column,
.mega-menu-column .x-panel-body {
    background: #fff !important;
}

.mega-menu-column {
    padding: 15px 12px 18px 12px;
    min-height: 190px;
    border-right: 1px solid #edf0f2;
}

.mega-menu-column:last-child {
    border-right: none;
}

/* Prevent Ext JS column layout wrapping when browser is zoomed */
.mega-menu-panel .x-column-inner {
    white-space: nowrap;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.mega-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #888;

    padding: 4px 8px 9px 8px;
    margin-bottom: 6px;

    border-bottom: 1px solid #eceff2;
}


/* ============================================================
   EXT BUTTON
   ============================================================ */
.mega-menu-button {
    display: block;
    width: 100% !important;
    margin: 2px 0;
}


/*
 * Remove Ext 3 button background
 */
.mega-menu-button .x-btn-tl,
.mega-menu-button .x-btn-tr,
.mega-menu-button .x-btn-tc,
.mega-menu-button .x-btn-ml,
.mega-menu-button .x-btn-mr,
.mega-menu-button .x-btn-mc,
.mega-menu-button .x-btn-bl,
.mega-menu-button .x-btn-br,
.mega-menu-button .x-btn-bc {
    background-image: none !important;
}


/* Main clickable area */
.mega-menu-button .x-btn-mc {
    background: transparent !important;
    padding: 7px 8px !important;
}


/* Text */
.mega-menu-button button {
    text-align: left !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: normal !important;

    width: 100%;
}

/* ============================================================
   HOVER
   ============================================================ */
.mega-menu-button:hover .x-btn-mc {
    background: #f3f5f7 !important;
    border-radius: 4px;
}

.mega-menu-button:hover button {
    color: #111 !important;
}
.mega-menu-button button {
    white-space: normal !important;
    line-height: 16px !important;
}

.mega-menu-button .x-btn-text {
    white-space: normal !important;
}


/* =========================================================
   EXPENSE REQUISITION GRID
   ========================================================= */
.note-payable-grid .x-grid3-cell-inner {
    color: #222;
}

/* Column headers */
.note-payable-grid .x-grid3-hd-inner {
    font-weight: 700;
    color: #222;
}

/* Stronger row separation */
.note-payable-grid .x-grid3-row {
    border-bottom: 1px solid #cfcfcf;
}

/* Alternate rows */
.note-payable-grid .x-grid3-row-alt {
    background-color: #f5f5f5;
}

/* Mouse hover */
.note-payable-grid .x-grid3-row-over {
    background-color: #e8f1fb !important;
}

/* Selected row */
.note-payable-grid .x-grid3-row-selected {
    background-color: #d6e8fa !important;
}

/* Clickable cells */
.note-payable-grid .goto-link {
    color: #075ea8 !important;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* ==========================================================
   SMS MANAGER GRID
   ========================================================== */
.sms-manager-grid .x-grid3-hd-row td {
    font-weight: 600 !important;
    color: #222 !important;
    background: #f4f5f7 !important;
    border-right: 1px solid #d5d9de !important;
    border-bottom: 1px solid #c8cdd3 !important;
}

.sms-manager-grid .x-grid3-row {
    border-bottom: 1px solid #e0e3e7 !important;
}

.sms-manager-grid .x-grid3-cell-inner {
    padding: 8px 7px !important;
    color: #252525 !important;
}


/* DATE
   ---------------------------------------------------------- */
.sms-date {
    color: #333;
    font-weight: 500;
}


/* RECIPIENT
   ---------------------------------------------------------- */
.sms-recipient {
    line-height: 17px;
}

.sms-recipient-name {
    font-weight: 600;
    color: #222;
}

.sms-recipient-phone {
    font-size: 11px;
    color: #555;
    font-weight: 500;
}


/* MESSAGE
   ---------------------------------------------------------- */
.sms-message {
    color: #252525;
    line-height: 18px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* COST
   ---------------------------------------------------------- */
.sms-cost {
    font-weight: 600;
    color: #222;
}


/* ==========================================================
   DELIVERY STATUS
   ========================================================== */
.sms-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    border: 1px solid transparent;
}


/* Delivered / Sent */
.sms-status-success {
    color: #176b35;
    background: #e7f6ec;
    border-color: #91d5a5;
}


/* Failed */
.sms-status-failed {
    color: #a61b1b;
    background: #fdeaea;
    border-color: #e6a0a0;
}


/* Pending */
.sms-status-pending {
    color: #855d00;
    background: #fff4d6;
    border-color: #e3c46a;
}


/* Other */
.sms-status-default {
    color: #444;
    background: #eeeeee;
    border-color: #c8c8c8;
}


/* ==========================================================
   ROW EXPANDER
   ========================================================== */
.sms-expander-card {
    margin: 8px 12px 10px 42px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #cfd5dc;
    border-radius: 5px;
    color: #252525;
}

.sms-expander-section {
    margin-bottom: 10px;
}

.sms-expander-section:last-child {
    margin-bottom: 0;
}

.sms-expander-label {
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
}

.sms-expander-value {
    font-size: 12px;
    color: #222;
    line-height: 18px;
}

.sms-expander-phone {
    margin-left: 12px;
    color: #555;
    font-weight: 500;
}

/* MESSAGE */
.sms-expander-message {
    padding: 9px 11px;
    background: #f5f6f7;
    border: 1px solid #ddd;
    border-radius: 4px;
}


/* FAILURE */
.sms-expander-failure {
    padding: 9px 11px;
    background: #fff0f0;
    border: 1px solid #e2aaaa;
    border-radius: 4px;
}

.sms-expander-failure .sms-expander-label,
.sms-expander-failure .sms-expander-value {
    color: #a61b1b;
}

/* ==========================================================
   INVENTORY ITEM SPECIFIC GRID
   ========================================================== */
.stock-item-cell,
.stock-info-cell,
.stock-price-cell,
.stock-sale-cell,
.stock-identity-cell,
.stock-color-cell,
.stock-location-cell {
    line-height: 19px;
    padding: 3px 2px;
    color: #222;
}

/* ----------------------------------------------------------
   ITEM
   ---------------------------------------------------------- */
.stock-item-name {
    font-weight: bold;
    font-size: 13px;
    color: #111;
}

.stock-item-code {
    font-weight: bold;
    color: #315d8a;
    margin-top: 2px;
}

.stock-item-category {
    color: #555;
    font-size: 11px;
    margin-top: 1px;
}

/* ----------------------------------------------------------
   LABELS
   ---------------------------------------------------------- */
.stock-label {
    font-weight: bold;
    color: #555;
}

/* ==========================================================
   SERIAL / IMEI
   ========================================================== */
.stock-identity-cell {
    padding: 3px 2px;
    line-height: 20px;
}

.identity-row {
    white-space: nowrap;
}

/* Fixed width keeps all values perfectly aligned */
.identity-label {
    display: inline-block;
    width: 52px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #444;
}

.identity-value {
    display: inline-block;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.3px;
}

/* Serial Number */
.serial-value {
    color: #1f4e79;
}

/* IMEI 1 */
.imei1-value {
    color: #137333;
}

/* IMEI 2 */
.imei2-value {
    color: #8a3fa0;
}

/* ----------------------------------------------------------
   PRICING
   ---------------------------------------------------------- */
.stock-price-cell {
    padding: 3px 2px;
    line-height: 20px;
}

.price-row {
    white-space: nowrap;
    text-align: right;
}

/* Fixed width keeps all price labels aligned */
.price-label {
    display: inline-block;
    width: 65px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #444;
    text-align: left;
}

/* Amounts */
.price-value {
    display: inline-block;
    width: 115px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}

/* Purchase Price */
.purchase-price {
    color: #8a3fa0;
}

/* Selling Price */
.selling-price {
    color: #137333;
}

/* Sold Price */
.sold-price {
    color: #1f4e79;
}

/* ----------------------------------------------------------
   STATUS BADGES
   ---------------------------------------------------------- */
.stock-status {
    display: inline-block;
    min-width: 72px;
    padding: 4px 8px;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    border-radius: 3px;
    border: 1px solid;
}


/* AVAILABLE / OTHER */
.stock-status-available {
    color: #176b32;
    background: #e8f5e9;
    border-color: #8bc99a;
}


/* SOLD */
.stock-status-sold {
    color: #174f91;
    background: #e7f1fc;
    border-color: #8db7e6;
}


/* RETURNED */
.stock-status-returned {
    color: #9a5500;
    background: #fff3df;
    border-color: #e8b96d;
}


/* MISSING */
.stock-status-missing {
    color: #a40000;
    background: #fde8e8;
    border-color: #df8b8b;
}

/* ==========================================================
   ITEM CATALOG GRID
   ========================================================== */
.catalog-item-cell {
    padding: 3px 0;
    line-height: 17px;
}

.catalog-item-name {
    font-size: 13px;
    font-weight: bold;
    color: #202124;
}

.catalog-item-sku {
    font-size: 11px;
    font-family: monospace;
    font-weight: bold;
    color: #3567a8;
}


/* ----------------------------------------------------------
   CATEGORY / TYPE
   ---------------------------------------------------------- */
.catalog-category-cell {
    padding: 3px 0;
    line-height: 17px;
}

.catalog-category {
    font-weight: bold;
    color: #303030;
}

.catalog-stock-type {
    font-size: 11px;
    font-weight: bold;
    color: #7a4b00;
}


/* ----------------------------------------------------------
   PRICING
   ---------------------------------------------------------- */
.catalog-pricing-cell {
    line-height: 18px;
}

.catalog-pricing-cell > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.catalog-price-label {
    font-size: 11px;
    font-weight: bold;
    color: #555;
}

.catalog-selling-price {
    font-weight: bold;
    color: #16733b;
}

.catalog-purchase-price {
    font-weight: bold;
    color: #9a5a00;
}

/* ----------------------------------------------------------
   MARKUP / QUANTITY
   ---------------------------------------------------------- */
.catalog-markup {
    display: inline-block;
    font-weight: bold;
    color: #7048a8;
}

.catalog-qty-sold {
    font-weight: bold;
    color: #1769aa;
    cursor: pointer;
    text-decoration: underline;
}

.catalog-qty-zero {
    font-weight: bold;
    color: #555;
}

.catalog-reorder {
    font-weight: bold;
    color: #a05a00;
}

/* ==========================================================
   ITEM CATALOG ROW EXPANDER
   ========================================================== */
.item-catalog-expander {
    margin: 8px 10px 12px 35px;
    padding: 0;
    background: #fff;
    border: 1px solid #b8c5d6;
    border-radius: 4px;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */
.item-expander-header {
    padding: 10px 14px;
    background: #f4f7fa;
    border-bottom: 1px solid #c8d2df;
}

.item-expander-title {
    font-size: 14px;
    font-weight: bold;
    color: #202124;
}

.item-expander-subtitle {
    margin-top: 3px;
    font-size: 11px;
    color: #555;
}


/* ----------------------------------------------------------
   DETAILS GRID
   ---------------------------------------------------------- */
.item-expander-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.item-expander-section {
    padding: 12px 15px;
    border-right: 1px solid #d9dfe7;
}

.item-expander-section:last-child {
    border-right: none;
}

.item-expander-section-title {
    margin-bottom: 8px;
    padding-bottom: 5px;

    font-size: 11px;
    font-weight: bold;
    color: #315f91;

    border-bottom: 2px solid #7da7d9;
}


/* ----------------------------------------------------------
   DETAIL ROWS
   ---------------------------------------------------------- */
.item-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 4px 0;
    border-bottom: 1px dotted #d8d8d8;

    font-size: 11px;
}

.item-detail-row:last-child {
    border-bottom: none;
}

.item-detail-row span {
    color: #555;
}

.item-detail-row b {
    color: #202124;
    text-align: right;
}

/* ----------------------------------------------------------
   ACCOUNT MAPPING
   ---------------------------------------------------------- */
.item-accounts-section {
    padding: 10px 15px 13px 15px;
    background: #fafbfc;
    border-top: 1px solid #d9dfe7;
}

.item-account-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.item-account {
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #d2d9e2;
    border-radius: 3px;
}

.item-account span {
    display: block;
    margin-bottom: 3px;

    font-size: 10px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
}

.item-account b {
    display: block;
    font-size: 11px;
    color: #222;
}

.valuer-code {
    font-weight: bold;
    color: #222;
}

.valuer-primary {
    font-weight: 600;
    color: #222;
}

.valuer-secondary {
    margin-top: 3px;
    color: #555;
    font-size: 11px;
}

.valuer-identity,
.valuer-contact,
.valuer-organization,
.valuer-specialization {
    line-height: 17px;
    padding: 3px 0;
}

.valuer-license-date {
    font-weight: 600;
    color: #333;
}

.valuer-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #999;
    background: #fff;
    color: #333;
}

.valuer-status-active {
    color: #18753c;
    border-color: #18753c;
}

.valuer-status-inactive {
    color: #666;
    border-color: #777;
}

.valuer-status-suspended {
    color: #b42318;
    border-color: #b42318;
}

.valuer-expander-card {
    background: #fff;
    border: 1px solid #b8b8b8;
    margin: 8px 12px 12px 38px;
    padding: 14px 16px;
    color: #222;
}

.valuer-expander-section {
    margin-bottom: 15px;
}

.valuer-expander-section:last-child {
    margin-bottom: 0;
}

.valuer-expander-title {
    font-size: 12px;
    font-weight: bold;
    color: #222;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.valuer-expander-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px 20px;
}

.valuer-expander-grid > div {
    min-height: 30px;
}

.valuer-expander-grid span {
    display: block;
    color: #666;
    font-size: 10px;
    margin-bottom: 2px;
}

.valuer-expander-grid b {
    color: #222;
    font-size: 11px;
}

.valuer-expander-tags {
    line-height: 28px;
}

.valuer-expander-tags span {
    display: inline-block;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 2px 9px;
    margin: 0 5px 5px 0;
    color: #444;
}

.valuer-expander-tags b {
    color: #111;
}

.client-number {
    font-weight: bold;
    color: #222;
}

.client-primary {
    font-weight: 600;
    color: #222;
}

.client-secondary {
    margin-top: 3px;
    color: #555;
    font-size: 11px;
}

.client-name-cell,
.client-contact-cell,
.client-location-cell,
.client-credit-cell {
    line-height: 17px;
    padding: 3px 0;
}

.client-email {
    color: #333;
    font-size: 11px;
}

.client-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    background: #fff;
    border: 1px solid #999;
}

.client-status-active {
    color: #18753c;
    border-color: #18753c;
}

.client-status-inactive {
    color: #b42318;
    border-color: #b42318;
}

.client-expander-card {
    background: #fff;
    border: 1px solid #b8b8b8;
    margin: 8px 12px 12px 38px;
    padding: 14px 16px;
    color: #222;
}

.client-expander-section {
    margin-bottom: 15px;
}

.client-expander-section:last-child {
    margin-bottom: 0;
}

.client-expander-title {
    font-size: 12px;
    font-weight: bold;
    color: #222;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.client-expander-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 20px;
}

.client-expander-grid > div {
    min-height: 32px;
}

.client-expander-grid span {
    display: block;
    color: #666;
    font-size: 10px;
    margin-bottom: 2px;
}

.client-expander-grid b {
    color: #222;
    font-size: 11px;
}

.client-expander-tags {
    line-height: 28px;
}

.client-expander-tags span {
    display: inline-block;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 2px 10px;
    margin: 0 6px 5px 0;
}

.client-expander-notes {
    border-left: 3px solid #7da7d9;
    padding: 7px 10px;
    line-height: 18px;
    color: #333;
}

.client-type-name {
    padding: 3px 0;
    line-height: 17px;
}

.client-type-primary {
    font-weight: bold;
    color: #222;
}

.client-type-secondary {
    margin-top: 2px;
    color: #666;
    font-size: 11px;
}

.client-type-required {
    color: #333;
    font-size: 11px;
    line-height: 18px;
}

.client-type-none {
    color: #777;
    font-style: italic;
}

.client-type-yes,
.client-type-no {
    display: inline-block;
    min-width: 35px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
}

.client-type-yes {
    color: #18753c;
    border: 1px solid #18753c;
}

.client-type-no {
    color: #777;
    border: 1px solid #999;
}

.client-type-payment {
    color: #333;
}

.client-type-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    background: #fff;
}

.client-type-active {
    color: #18753c;
    border: 1px solid #18753c;
}

.client-type-inactive {
    color: #b42318;
    border: 1px solid #b42318;
}

.client-type-expander {
    background: #fff;
    border: 1px solid #b8b8b8;
    margin: 8px 12px 12px 38px;
    padding: 14px 16px;
    color: #222;
}

.client-type-section {
    margin-bottom: 14px;
}

.client-type-section:last-child {
    margin-bottom: 0;
}

.client-type-section-title {
    font-size: 12px;
    font-weight: bold;
    color: #222;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.client-type-requirements {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.client-type-requirements > div {
    border: 1px solid #ccc;
    padding: 7px 9px;
    background: #fff;
}

.client-type-requirements span {
    display: block;
    color: #666;
    font-size: 10px;
    margin-bottom: 3px;
}

.client-type-requirements b {
    color: #222;
    font-size: 11px;
}

.client-type-description {
    color: #333;
    line-height: 18px;
    border-left: 3px solid #7da7d9;
    padding: 6px 10px;
}

.valuation-asset-cell {
    padding: 5px 3px;
    line-height: 18px;
}

.valuation-asset-primary {
    color: #1f2937;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
}

.valuation-asset-secondary {
    margin-top: 2px;
    color: #4b5563;
    font-size: 11px;
    line-height: 16px;
}

.valuation-asset-secondary b {
    color: #374151;
}

.valuation-asset-code {
    font-family: monospace;
}

.valuation-asset-status {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #7d8b99;
    background: #e9edf1;
    color: #263238;
    font-weight: bold;
    border-radius: 3px;
}

.valuation-condition-new,
.valuation-condition-excellent,
.valuation-condition-very_good,
.valuation-condition-good {
    background: #d8f0df;
    border-color: #5b9b6c;
    color: #175c2d;
}

.valuation-condition-fair {
    background: #fff0c2;
    border-color: #c89c2b;
    color: #6f5100;
}

.valuation-condition-poor,
.valuation-condition-very_poor,
.valuation-condition-unserviceable {
    background: #f5d4d4;
    border-color: #b95c5c;
    color: #7b1e1e;
}

.valuation-asset-expander {
    margin: 8px 10px 12px 42px;
    padding: 12px;
    background: #fff;
    border: 1px solid #7da7d9;
    border-radius: 4px;
    color: #222;
}

.valuation-asset-expander-title {
    padding: 0 0 9px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #7da7d9;
}

.valuation-asset-expander-name {
    color: #1f2937;
    font-size: 14px;
    font-weight: bold;
}

.valuation-asset-expander-type {
    margin-left: 15px;
    color: #4b5563;
    font-size: 12px;
    font-weight: bold;
}

.valuation-asset-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.valuation-asset-detail-section {
    border: 1px solid #b7c6d8;
    background: #fff;
    padding: 9px 10px;
    min-height: 130px;
}

.valuation-asset-section-title {
    color: #234b74;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #9fb7d0;
}

.valuation-asset-detail-row {
    display: flex;
    padding: 3px 0;
    line-height: 17px;
    border-bottom: 1px solid #e0e4e8;
}

.valuation-asset-detail-row:last-child {
    border-bottom: none;
}

.valuation-asset-label {
    width: 115px;
    flex: 0 0 115px;
    color: #4b5563;
    font-weight: bold;
}

.valuation-asset-value {
    color: #1f2937;
    font-weight: normal;
    word-break: break-word;
}

.valuation-asset-notes {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #b7c6d8;
    background: #f4f7fa;
    color: #263238;
    line-height: 18px;
}

.valuation-asset-notes div + div {
    margin-top: 5px;
}

.vr-grid-cell {
    padding: 5px 3px;
    line-height: 18px;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.vr-grid-primary {
    font-weight: bold;
    font-size: 12px;
    color: #1f2937;
}

.vr-grid-line {
    margin-top: 2px;
    font-size: 11px;
    color: #374151;
}

.vr-grid-label {
    font-weight: bold;
    color: #4b5563;
}

.vr-grid-email {
    word-break: break-all;
}

.vr-grid-money-cell {
    text-align: right;
}

.vr-status {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #7da7d9;
    background: #fff;
    color: #1f2937;
}

.vr-status-draft {
    border-color: #6b7280;
    color: #374151;
}

.vr-status-received,
.vr-status-accepted,
.vr-status-assigned {
    border-color: #2563eb;
    color: #1d4ed8;
}

.vr-status-under-review,
.vr-status-valuation-in-progress,
.vr-status-report-preparation {
    border-color: #b45309;
    color: #92400e;
}

.vr-status-completed {
    border-color: #15803d;
    color: #166534;
}

.vr-status-cancelled,
.vr-status-rejected {
    border-color: #b91c1c;
    color: #991b1b;
}

.vr-status-on-hold {
    border-color: #a16207;
    color: #854d0e;
}

.vr-priority {
    font-weight: bold;
}

.vr-priority-low {
    color: #374151;
}

.vr-priority-normal {
    color: #1d4ed8;
}

.vr-priority-high {
    color: #b45309;
}

.vr-priority-urgent,
.vr-priority-critical {
    color: #b91c1c;
}

.valuation-request-expander {
    margin: 8px 12px 12px 35px;
    padding: 12px;
    background: #fff;
    border: 1px solid #7da7d9;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.vr-expander-title {
    padding: 2px 2px 10px 2px;
    margin-bottom: 10px;
    border-bottom: 2px solid #7da7d9;
    font-size: 14px;
    font-weight: bold;
    color: #1f2937;
}

.vr-expander-request {
    color: #1d4ed8;
}

.vr-expander-separator {
    color: #4b5563;
}

.vr-expander-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vr-expander-grid-inner {
    margin-top: 5px;
}

.vr-expander-section {
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.vr-expander-section-title {
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #7da7d9;
    font-size: 12px;
    font-weight: bold;
    color: #1f2937;
}

.vr-detail-row {
    display: flex;
    padding: 3px 0;
    line-height: 17px;
}

.vr-detail-label {
    width: 135px;
    min-width: 135px;
    font-weight: bold;
    color: #4b5563;
}

.vr-detail-value {
    color: #1f2937;
    word-break: break-word;
}

.vr-strong {
    font-weight: bold;
    color: #111827;
}

.vr-money {
    font-family: monospace;
}

.vr-yes {
    font-weight: bold;
    color: #166534;
}

.vr-no {
    font-weight: bold;
    color: #991b1b;
}

.vr-expander-wide-section {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.vr-text-block {
    margin-bottom: 8px;
    line-height: 18px;
    color: #1f2937;
}

.vr-text-block:last-child {
    margin-bottom: 0;
}

.vr-text-label {
    display: block;
    margin-bottom: 2px;
    font-weight: bold;
    color: #4b5563;
}

.vra-grid-cell {
    padding: 5px 3px;
    line-height: 18px;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.vra-grid-primary {
    font-size: 12px;
    font-weight: bold;
    color: #1f2937;
}

.vra-grid-line {
    margin-top: 2px;
    font-size: 11px;
    color: #374151;
}

.vra-grid-label {
    font-weight: bold;
    color: #4b5563;
}

.vra-grid-reference {
    font-family: monospace;
    font-weight: bold;
    color: #1d4ed8;
}

.vra-grid-money {
    text-align: right;
}

.vra-expander {
    margin: 8px 12px 12px 35px;
    padding: 12px;
    background: #fff;
    border: 1px solid #7da7d9;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.vra-expander-title {
    margin-bottom: 10px;
    padding: 2px 2px 10px 2px;
    border-bottom: 2px solid #7da7d9;
    font-size: 14px;
    font-weight: bold;
    color: #1f2937;
}

.vra-title-separator {
    color: #4b5563;
}

.vra-title-request {
    color: #1d4ed8;
}

.vra-expander-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vra-expander-section {
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.vra-section-title {
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #7da7d9;
    font-size: 12px;
    font-weight: bold;
    color: #1f2937;
}

.vra-detail-row {
    display: flex;
    padding: 3px 0;
    line-height: 17px;
}

.vra-detail-label {
    width: 120px;
    min-width: 120px;
    font-weight: bold;
    color: #4b5563;
}

.vra-detail-value {
    color: #1f2937;
    word-break: break-word;
}

.vra-strong {
    font-weight: bold;
    color: #111827;
}

.vra-reference {
    font-family: monospace;
    font-weight: bold;
    color: #1d4ed8;
}

.vra-expander-wide-section {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.vra-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.vra-financial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.vra-fin-label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #4b5563;
}

.vra-fin-value {
    display: block;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: #111827;
}

.vi-grid-cell {
    padding: 5px 3px;
    line-height: 18px;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.vi-grid-primary {
    font-size: 12px;
    font-weight: bold;
    color: #111827;
}

.vi-grid-title {
    margin-top: 2px;
    font-size: 11px;
    font-weight: bold;
    color: #374151;
}

.vi-grid-line {
    margin-top: 2px;
    font-size: 11px;
    color: #374151;
}

.vi-grid-label {
    font-weight: bold;
    color: #4b5563;
}

.vi-grid-reference {
    font-family: monospace;
    font-weight: bold;
    color: #1d4ed8;
}


.vi-status {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #9ca3af;
    background: #fff;
}

.vi-status-completed {
    color: #166534;
    border-color: #16a34a;
}

.vi-status-active {
    color: #1d4ed8;
    border-color: #3b82f6;
}

.vi-status-cancelled {
    color: #991b1b;
    border-color: #dc2626;
}

.vi-status-hold {
    color: #92400e;
    border-color: #d97706;
}

.vi-status-default {
    color: #374151;
}

.vi-priority-high {
    color: #991b1b;
    font-weight: bold;
}

.vi-priority-medium {
    color: #b45309;
    font-weight: bold;
}

.vi-priority-normal {
    color: #1f2937;
    font-weight: bold;
}

.vi-priority-low {
    color: #166534;
    font-weight: bold;
}

.vi-version-status {
    font-weight: bold;
    color: #1d4ed8;
}

.vi-date-overdue {
    color: #b91c1c;
    font-weight: bold;
}

.vi-expander {
    margin: 8px 12px 12px 35px;
    padding: 12px;
    background: #fff;
    border: 1px solid #7da7d9;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.vi-expander-title {
    margin-bottom: 10px;
    padding: 2px 2px 10px 2px;
    border-bottom: 2px solid #7da7d9;
    font-size: 14px;
    font-weight: bold;
    color: #111827;
}

.vi-title-number {
    color: #1d4ed8;
    font-family: monospace;
}

.vi-title-separator {
    color: #6b7280;
}


.vi-section-row {
    display: flex;
    margin-bottom: 10px;
}

.vi-section {
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.vi-section:last-child {
    margin-right: 0;
}

.vi-wide-section {
    margin-bottom: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.vi-section-title {
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #7da7d9;
    font-size: 12px;
    font-weight: bold;
    color: #111827;
}

.vi-detail-row {
    display: flex;
    padding: 3px 0;
    line-height: 17px;
}

.vi-label {
    width: 125px;
    min-width: 125px;
    font-weight: bold;
    color: #4b5563;
}

.vi-value {
    color: #1f2937;
    word-break: break-word;
}

.vi-strong {
    font-weight: bold;
    color: #111827;
}

.vi-reference {
    font-family: monospace;
    font-weight: bold;
    color: #1d4ed8;
}


.vi-three-columns {
    display: flex;
}

.vi-three-columns > div {
    flex: 1;
    margin-right: 20px;
}

.vi-three-columns > div:last-child {
    margin-right: 0;
}

.vi-small-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #4b5563;
}

.vi-important-value {
    font-size: 12px;
    font-weight: bold;
    color: #111827;
}

.vi-license-row {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #d1d5db;
}

.vi-license-row span {
    display: inline-block;
    margin-right: 35px;
}


.vi-date-grid {
    display: flex;
}

.vi-date-grid > div {
    flex: 1;
    padding-right: 10px;
}

.vi-date-grid b {
    display: block;
    color: #111827;
}

.vi-long-text {
    min-height: 30px;
    line-height: 18px;
    white-space: normal;
    color: #1f2937;
}

.vi-note-block {
    margin-bottom: 8px;
    padding: 7px 8px;
    background: #fff;
    border-left: 3px solid #7da7d9;
    line-height: 18px;
}

.vi-cancel-note {
    border-left-color: #dc2626;
}

.viv-grid-cell {
    padding: 5px 3px;
    line-height: 18px;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.viv-grid-primary {
    font-size: 12px;
    font-weight: bold;
    color: #111827;
}

.viv-grid-title {
    margin-top: 2px;
    font-size: 11px;
    font-weight: bold;
    color: #374151;
}

.viv-grid-line {
    margin-top: 2px;
    font-size: 11px;
    color: #374151;
}

.viv-grid-label {
    font-weight: bold;
    color: #4b5563;
}

.viv-reference {
    font-family: monospace;
    font-weight: bold;
    color: #1d4ed8;
}

.viv-version-badge,
.viv-status-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 7px;
    border: 1px solid #9ca3af;
    background: #fff;
    font-size: 11px;
    font-weight: bold;
}

.viv-version-final {
    color: #166534;
    border-color: #16a34a;
}

.viv-version-draft {
    color: #1d4ed8;
    border-color: #3b82f6;
}

.viv-version-revised {
    color: #92400e;
    border-color: #d97706;
}

.viv-version-closed {
    color: #6b7280;
    border-color: #9ca3af;
}

.viv-version-default {
    color: #374151;
}

.viv-approved {
    color: #166534;
    font-weight: bold;
}

.viv-pending {
    color: #b45309;
    font-weight: bold;
}

.viv-expander {
    margin: 8px 12px 12px 35px;
    padding: 12px;
    background: #fff;
    border: 1px solid #7da7d9;
    color: #1f2937;
    font-family: Arial, sans-serif;
}

.viv-expander-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 2px solid #7da7d9;
}

.viv-header-title {
    font-size: 14px;
    font-weight: bold;
    color: #111827;
}

.viv-header-version {
    font-size: 12px;
    font-weight: bold;
}


.viv-section-row {
    display: flex;
    margin-bottom: 10px;
}

.viv-section {
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.viv-section:last-child {
    margin-right: 0;
}

.viv-wide-section {
    margin-bottom: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #b7c6d8;
}

.viv-section-title {
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #7da7d9;
    font-size: 12px;
    font-weight: bold;
    color: #111827;
}

.viv-detail-row {
    display: flex;
    padding: 3px 0;
    line-height: 17px;
}

.viv-label {
    width: 135px;
    min-width: 135px;
    font-weight: bold;
    color: #4b5563;
}

.viv-value {
    color: #1f2937;
    word-break: break-word;
}

.viv-strong {
    font-weight: bold;
    color: #111827;
}

.viv-three-columns,
.viv-four-columns,
.viv-text-grid {
    display: flex;
}

.viv-three-columns > div {
    flex: 1;
    margin-right: 20px;
}

.viv-four-columns > div {
    flex: 1;
    margin-right: 15px;
}

.viv-text-grid > div {
    flex: 1;
    margin-right: 15px;
    margin-bottom: 10px;
}

.viv-three-columns > div:last-child,
.viv-four-columns > div:last-child,
.viv-text-grid > div:last-child {
    margin-right: 0;
}

.viv-small-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #4b5563;
}

.viv-important-value {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #111827;
}


.viv-text-title {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #374151;
}

.viv-long-text {
    min-height: 25px;
    padding: 5px 0;
    line-height: 18px;
    white-space: normal;
    color: #1f2937;
}

.viv-top-space {
    margin-top: 10px;
}


.viv-flag-grid {
    margin-bottom: 8px;
}

.viv-flag-grid > div {
    display: inline-block;
    width: 48%;
    padding: 4px 0;
    color: #374151;
}

.viv-flag-grid b {
    margin-left: 5px;
    color: #111827;
}

.viv-person-block {
    line-height: 19px;
    color: #374151;
}

.viv-person-title {
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #d1d5db;
    font-weight: bold;
    color: #4b5563;
}

.viv-person-name {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #111827;
}

.viv-person-date {
    margin-top: 7px;
    padding-top: 5px;
    border-top: 1px solid #e5e7eb;
}

.viv-note {
    margin-bottom: 8px;
    padding: 7px 8px;
    background: #fff;
    border-left: 3px solid #7da7d9;
    line-height: 18px;
}

.viv-primary-basis {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border: 1px solid #66a96b;
    border-radius: 8px;
    background: #e8f5e9;
    color: #1b5e20;
    font-size: 9px;
    font-weight: bold;
    vertical-align: middle;
}

.viv-basis-count {
    display: inline-block;
    min-width: 16px;
    margin-left: 4px;
    padding: 0 4px;
    border: 1px solid #7da7d9;
    border-radius: 8px;
    background: #f4f8fc;
    color: #244d78;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
}

.viva-asset-cell,
.viva-reference-cell,
.viva-instruction-cell,
.viva-version-cell,
.viva-client-cell,
.viva-location-cell {
    line-height: 18px;
    padding: 3px 2px;
}

.viva-main {
    font-weight: 700;
    color: #1f2937;
    font-size: 12px;
}

.viva-sub {
    color: #4b5563;
    font-size: 11px;
    margin-top: 1px;
}

.viva-primary {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 5px;
    border-radius: 8px;
    background: #e8f5e9;
    border: 1px solid #81c784;
    color: #1b5e20;
    font-size: 9px;
    font-weight: bold;
}

.viva-status-text,
.viva-version-status {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border: 1px solid #7da7d9;
    border-radius: 8px;
    background: #f4f8fc;
    color: #244d78;
    font-size: 10px;
    font-weight: bold;
}

.viva-identification-cell {
    font-family: monospace;
    line-height: 18px;
    padding: 3px 2px;
}

.viva-identification-cell .viva-main {
    font-family: monospace;
    font-weight: bold;
    color: #1f2937;
}

.viva-identification-cell div:not(.viva-main) {
    display: flex;
    align-items: center;
}

.viva-identification-cell span {
    display: inline-block;
    width: 48px;
    color: #6b7280;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
}

.viva-identification-cell b {
    font-family: monospace;
    color: #263238;
}

.viva-expander {
    background: #fff;
    border: 1px solid #7da7d9;
    margin: 8px 12px 10px 45px;
    padding: 12px;
    color: #222;
}

.viva-section {
    border: 1px solid #d6e2ef;
    background: #fff;
    margin-bottom: 10px;
}

.viva-section:last-child {
    margin-bottom: 0;
}

.viva-section-title {
    background: #f3f7fb;
    border-bottom: 1px solid #d6e2ef;
    color: #244d78;
    font-weight: bold;
    font-size: 12px;
    padding: 6px 9px;
}

.viva-highlight {
    border-color: #7da7d9;
}

.viva-highlight .viva-section-title {
    background: #edf5fc;
    border-bottom-color: #7da7d9;
}

.viva-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 0;
}

.viva-grid > div {
    padding: 7px 9px;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
    min-height: 34px;
}

.viva-grid span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    margin-bottom: 2px;
}

.viva-grid b {
    display: block;
    color: #202124;
    font-size: 11px;
    font-weight: 600;
    word-break: break-word;
}

.viva-grid .viva-wide {
    grid-column: span 2;
}

.viva-text {
    padding: 9px 10px;
    line-height: 18px;
    color: #333;
    white-space: normal;
}

.viva-empty {
    color: #999;
}

.viva-yes {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    background: #e8f5e9;
    border: 1px solid #81c784;
    color: #1b5e20;
    font-weight: bold;
}

.viva-no {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid #bdbdbd;
    color: #555;
    font-weight: bold;
}

.vib-basis-cell,
.vib-instruction-cell,
.vib-version-cell,
.vib-client-cell,
.vib-method-cell {
    line-height: 18px;
    padding: 3px 2px;
}

.vib-main {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
}

.vib-sub {
    margin-top: 1px;
    font-size: 11px;
    color: #4b5563;
}

.vib-primary {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 7px;
    border: 1px solid #66a96b;
    border-radius: 9px;
    background: #e8f5e9;
    color: #1b5e20;
    font-size: 9px;
    font-weight: bold;
}

.vib-status {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 7px;
    border: 1px solid #7da7d9;
    border-radius: 8px;
    background: #f4f8fc;
    color: #244d78;
    font-size: 10px;
    font-weight: bold;
}

.vib-priority {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border: 1px solid #c5cbd3;
    border-radius: 8px;
    background: #f7f7f7;
    color: #444;
    font-size: 10px;
    font-weight: bold;
}

.vib-date-cell {
    padding: 3px 2px;
    line-height: 17px;
}

.vib-date-cell div {
    display: flex;
    align-items: center;
}

.vib-date-cell span {
    display: inline-block;
    width: 55px;
    color: #6b7280;
    font-size: 10px;
    font-weight: bold;
}

.vib-date-cell b {
    color: #263238;
    font-size: 11px;
    font-weight: 600;
}

.vib-expander {
    margin: 8px 12px 10px 45px;
    padding: 12px;
    border: 1px solid #7da7d9;
    background: #fff;
    color: #222;
}

.vib-section {
    margin-bottom: 10px;
    border: 1px solid #d6e2ef;
    background: #fff;
}

.vib-section:last-child {
    margin-bottom: 0;
}

.vib-section-title {
    padding: 6px 9px;
    border-bottom: 1px solid #d6e2ef;
    background: #f3f7fb;
    color: #244d78;
    font-size: 12px;
    font-weight: bold;
}

.vib-highlight {
    border-color: #7da7d9;
}

.vib-highlight .vib-section-title {
    border-bottom-color: #7da7d9;
    background: #edf5fc;
}

.vib-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.vib-grid > div {
    min-height: 34px;
    padding: 7px 9px;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
}

.vib-grid span {
    display: block;
    margin-bottom: 2px;
    color: #6b7280;
    font-size: 10px;
}

.vib-grid b {
    display: block;
    color: #202124;
    font-size: 11px;
    font-weight: 600;
    word-break: break-word;
}

.vib-grid .vib-wide {
    grid-column: span 2;
}

.vib-notes {
    padding: 9px;
    border-top: 1px solid #edf1f5;
}

.vib-notes > span {
    display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 10px;
    font-weight: bold;
}

.vib-notes > div {
    color: #333;
    font-size: 11px;
    line-height: 18px;
    white-space: normal;
}

.vib-yes {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid #66a96b;
    border-radius: 8px;
    background: #e8f5e9;
    color: #1b5e20;
    font-weight: bold;
}

.vib-no {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    background: #f5f5f5;
    color: #555;
    font-weight: bold;
}

.vib-empty {
    color: #999;
}

.va-grid-cell {
    padding: 4px 3px;
    line-height: 18px;
    color: #222;
}

.va-grid-primary {
    font-size: 12px;
    font-weight: bold;
    color: #1f3f5b;
}

.va-grid-secondary {
    font-size: 11px;
    color: #333;
}

.va-grid-meta {
    font-size: 10px;
    color: #666;
}

.va-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.va-more-assets {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border: 1px solid #7da7d9;
    border-radius: 8px;
    background: #fff;
    color: #245d91;
    font-weight: bold;
}

.va-date-label {
    display: inline-block;
    width: 50px;
    color: #666;
    font-size: 10px;
    font-weight: bold;
}

.va-grid-due {
    font-weight: bold;
    color: #9b2c2c;
}

.va-status {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #aaa;
    background: #fff;
    color: #333;
}

.va-status-active,
.va-status-assigned,
.va-status-valuation-in-progress {
    border-color: #3f86c5;
    color: #205c91;
    background: #eef7ff;
}

.va-status-inspection-pending,
.va-status-inspection-scheduled,
.va-status-report-preparation,
.va-status-under-review {
    border-color: #d19b32;
    color: #855b0b;
    background: #fff9e8;
}

.va-status-inspection-completed,
.va-status-completed {
    border-color: #4d9b63;
    color: #28643a;
    background: #effaf2;
}

.va-status-on-hold {
    border-color: #888;
    color: #555;
    background: #f4f4f4;
}

.va-status-cancelled,
.va-status-withdrawn {
    border-color: #c65b5b;
    color: #9b2c2c;
    background: #fff0f0;
}

.va-priority {
    margin-top: 5px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.va-priority-low {
    color: #54758b;
}

.va-priority-normal {
    color: #333;
}

.va-priority-high {
    color: #b36b00;
}

.va-priority-urgent,
.va-priority-critical {
    color: #b42318;
}

.valuation-assignment-expander {
    margin: 8px 12px 12px 45px;
    padding: 0;
    background: #fff;
    border: 1px solid #7da7d9;
    color: #222;
}

.va-section {
    padding: 12px 14px;
    border-bottom: 1px solid #d8e4ef;
}

.va-section:last-child {
    border-bottom: 0;
}

.va-section-title {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #7da7d9;
    color: #245d91;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.va-detail-grid {
    overflow: hidden;
}

.va-detail {
    float: left;
    width: 24%;
    min-height: 42px;
    margin-right: 1%;
    margin-bottom: 7px;
}

.va-detail.va-wide {
    width: 49%;
}

.va-label {
    display: block;
    margin-bottom: 2px;
    color: #666;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.va-value {
    display: block;
    color: #222;
    font-size: 11px;
    line-height: 17px;
    word-wrap: break-word;
}

.va-strong {
    font-weight: bold;
    color: #1f3f5b;
}

.va-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border: 1px solid #7da7d9;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    color: #245d91;
}

.va-text-detail {
    clear: both;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #d8e4ef;
    background: #fafcfe;
}

.va-long-value {
    color: #222;
    font-size: 11px;
    line-height: 18px;
    white-space: normal;
    word-wrap: break-word;
}

.va-warning-detail {
    border-color: #e5aaaa;
    background: #fff6f6;
}
.valuation-request-toolbar {
    background: #fff !important;
    border: 1px solid #7da7d9 !important;
    border-left: 4px solid #174f8a !important;
    padding: 6px 12px !important;
}

.valuation-request-info {
    display: flex;
    align-items: center;
    height: 40px;
}

.vr-info-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
}

.vr-info-block:first-child {
    padding-left: 6px;
}

.vr-label {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    line-height: 14px;
    letter-spacing: 0.4px;
}

.vr-request-no {
    font-size: 18px;
    font-weight: bold;
    color: #174f8a;
    line-height: 22px;
}

.vr-value {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    line-height: 22px;
}

.vr-divider {
    width: 2px;
    height: 32px;
    background: #7da7d9;
    margin: 0 6px;
}

.visp-grid-cell {
    padding: 4px 3px;
    line-height: 17px;
    color: #222;
}

.visp-grid-primary {
    font-size: 13px;
    font-weight: bold;
    color: #174f8a;
    line-height: 18px;
}

.visp-grid-secondary {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    line-height: 17px;
}

.visp-grid-meta {
    font-size: 11px;
    color: #555;
    line-height: 16px;
}

.visp-grid-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 165px;
}

.visp-primary-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border: 1px solid #2f6da5;
    background: #fff;
    color: #174f8a;
    font-size: 9px;
    font-weight: bold;
    line-height: 13px;
}

.visp-status {
    display: inline-block;
    padding: 2px 7px;
    background: #fff;
    border: 1px solid #7da7d9;
    color: #174f8a;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 16px;
}

.visp-reinspection {
    margin-top: 2px;
    font-size: 10px;
    font-weight: bold;
    color: #a12a2a;
}

.visp-expander {
    margin: 6px 10px 10px 35px;
    padding: 8px;
    background: #fff;
    border: 1px solid #7da7d9;
    color: #222;
}

.visp-expander-section {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #7da7d9;
}

.visp-expander-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.visp-expander-title {
    margin-bottom: 7px;
    padding: 4px 7px;
    background: #fff;
    border-left: 4px solid #174f8a;
    font-size: 13px;
    font-weight: bold;
    color: #174f8a;
}

.visp-expander-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 5px 20px;
    padding: 2px 8px;
}

.visp-expander-grid > div {
    min-height: 20px;
    color: #222;
}

.visp-expander-grid span {
    display: inline-block;
    margin-right: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #555;
}

.visp-expander-grid b {
    font-size: 12px;
    font-weight: bold;
    color: #111;
}


.visp-expander-text {
    margin: 7px 8px 0 8px;
}

.visp-expander-text > span {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #555;
}

.visp-expander-text > div {
    min-height: 20px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #b8cce4;
    color: #111;
    font-size: 12px;
    line-height: 17px;
    white-space: normal;
}

/* ==========================================================
   DASHBOARD LAYOUT
   ========================================================== */

.valuation-dashboard-body {
    overflow-x: hidden !important;
}

.valuation-dashboard-body > .x-panel-body {
    overflow-x: hidden !important;
}

.valuation-dashboard-body .x-table-layout {
    width: 100% !important;
    table-layout: fixed !important;
}

.valuation-dashboard-body .x-table-layout-cell {
    vertical-align: top !important;
    padding: 5px !important;
    overflow: hidden !important;
}


/* ==========================================================
   DASHBOARD PANELS
   ========================================================== */

.valuation-dashboard-panel {
    margin: 0 !important;
    width: auto !important;
    border: 1px solid #7da7d9 !important;
}

.valuation-dashboard-panel .x-panel-header {
    background: #fff !important;
    border-bottom: 1px solid #7da7d9 !important;
    color: #174f8a !important;
    font-weight: bold !important;
}


/* ==========================================================
   KPI CARDS
   ========================================================== */

.valuation-kpi-card {
    margin: 0 !important;
    width: auto !important;
    border: 1px solid #7da7d9 !important;
}

.valuation-kpi-body {
    background: #fff !important;
}

.valuation-kpi {
    padding: 12px 15px;
    overflow: hidden;
}

.valuation-kpi-title {
    font-size: 11px;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

.valuation-kpi-value {
    margin-top: 3px;
    font-size: 27px;
    line-height: 31px;
    font-weight: bold;
    color: #174f8a;
}

.valuation-kpi-info {
    margin-top: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
}

.valuation-kpi-alert-card {
    border: 1px solid #b94a48 !important;
}

.valuation-kpi-danger {
    color: #a12a2a;
}


/* ==========================================================
   WORKFLOW PIPELINE
   ========================================================== */

.valuation-workflow {
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.valuation-workflow-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    overflow: hidden;
}

.valuation-workflow-label {
    width: 165px;
    flex: 0 0 165px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.valuation-workflow-track {
    flex: 1 1 auto;
    min-width: 0;
    height: 13px;
    border: 1px solid #7da7d9;
    background: #fff;
    overflow: hidden;
}

.valuation-workflow-bar {
    height: 13px;
    background: #7da7d9;
}

.valuation-workflow-count {
    width: 45px;
    flex: 0 0 45px;
    padding-left: 10px;
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    color: #174f8a;
}


/* ==========================================================
   SLA / TURNAROUND
   ========================================================== */

.valuation-sla {
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.valuation-metric-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 3px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    color: #333;
}

.valuation-metric-row b {
    color: #174f8a;
}

.valuation-metric-alert b {
    color: #a12a2a;
}

.valuation-sla-divider {
    height: 1px;
    margin: 12px 0;
    background: #7da7d9;
}

.valuation-sla-heading {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.valuation-sla-track {
    height: 15px;
    border: 1px solid #7da7d9;
    background: #fff;
    overflow: hidden;
}

.valuation-sla-bar {
    height: 15px;
    background: #7da7d9;
}

.valuation-sla-percent {
    margin: 5px 0 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #174f8a;
    text-align: right;
}

.valuation-sla-breached {
    font-weight: bold;
    color: #a12a2a;
}

.valuation-sla-ok {
    font-weight: bold;
    color: #236b35;
}

.valuation-count-danger {
    font-weight: bold;
    color: #a12a2a;
}


/* ==========================================================
   WORKFLOW TIME
   ========================================================== */

#valuation-workflow-time {
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.valuation-time-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    overflow: hidden;
}

.valuation-time-row > span {
    width: 180px;
    flex: 0 0 180px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.valuation-time-track {
    flex: 1 1 auto;
    min-width: 0;
    height: 12px;
    margin-right: 15px;
    border: 1px solid #7da7d9;
    background: #fff;
    overflow: hidden;
}

.valuation-time-bar {
    height: 12px;
    background: #7da7d9;
}

.valuation-time-row > b {
    width: 80px;
    flex: 0 0 80px;
    text-align: right;
    color: #174f8a;
}


/* ==========================================================
   REQUEST TREND
   ========================================================== */

.valuation-chart-placeholder {
    width: auto !important;
    max-width: 100% !important;
    height: 145px;
    border: 1px solid #b8cce4;
    text-align: center;
    overflow: hidden;
}

.valuation-chart-title {
    padding-top: 30px;
    font-size: 11px;
    font-weight: bold;
    color: #555;
}

.valuation-chart-message {
    margin-top: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #174f8a;
}

.valuation-summary-row {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    overflow: hidden;
}

.valuation-summary-row > div {
    text-align: center;
}

.valuation-summary-row span {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #555;
}

.valuation-summary-row b {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    color: #174f8a;
}


/* ==========================================================
   SLA PERFORMANCE
   ========================================================== */

.valuation-sla-summary {
    width: auto !important;
    max-width: 100% !important;
    text-align: center;
    overflow: hidden !important;
}

.valuation-big-percent {
    margin-top: 5px;
    font-size: 38px;
    line-height: 43px;
    font-weight: bold;
    color: #174f8a;
}

.valuation-big-label {
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: bold;
    color: #555;
}

.valuation-sla-large {
    margin-bottom: 15px;
}

/* ==========================================================
   VALUATION WORKFLOW HISTORY GRID
   ========================================================== */

.vwh-grid-cell {
    padding: 3px 2px;
    line-height: 17px;
    color: #222;
}

.vwh-grid-primary {
    font-weight: bold;
    color: #174f8a;
}

.vwh-grid-secondary {
    font-size: 11px;
    font-weight: bold;
    color: #444;
}

.vwh-grid-meta {
    font-size: 11px;
    color: #666;
}

.vwh-grid-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vwh-grid-right {
    text-align: right;
}

.vwh-status-from {
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #aaa;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    background: #fff;
}

.vwh-status-arrow {
    padding: 0 4px;
    font-weight: bold;
    color: #174f8a;
}

.vwh-status-to {
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #7da7d9;
    font-size: 11px;
    font-weight: bold;
    color: #174f8a;
    background: #fff;
}

.vwh-open {
    font-weight: bold;
    color: #174f8a;
}

.vwh-sla-breached {
    font-size: 10px;
    font-weight: bold;
    color: #a12a2a;
}

.vwh-sla-ok {
    font-size: 10px;
    font-weight: bold;
    color: #236b35;
}


/* ==========================================================
   ROW EXPANDER
   ========================================================== */

.vwh-expander {
    margin: 5px 10px 10px 45px;
    padding: 10px;
    border: 1px solid #7da7d9;
    background: #fff;
    color: #222;
}

.vwh-expander-section {
    margin-bottom: 12px;
}

.vwh-expander-section:last-child {
    margin-bottom: 0;
}

.vwh-expander-title {
    margin-bottom: 7px;
    padding-bottom: 4px;
    border-bottom: 1px solid #7da7d9;
    font-size: 12px;
    font-weight: bold;
    color: #174f8a;
    text-transform: uppercase;
}

.vwh-expander-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 7px 18px;
}

.vwh-expander-grid > div {
    line-height: 18px;
    color: #333;
}

.vwh-expander-grid b {
    color: #555;
}

.vwh-expander-text {
    margin: 5px 0;
    padding: 6px 8px;
    border-left: 3px solid #7da7d9;
    line-height: 18px;
    white-space: normal;
    color: #333;
}


/* ==========================================================
   PAYMENT TRANSACTION GRID - HIGH VISIBILITY
   ========================================================== */

.pay-grid-cell {
    padding: 5px 3px;
    line-height: 20px;
    font-family: Arial, sans-serif;
    color: #222;
    white-space: normal;
}

/* Primary transaction information */
.pay-grid-primary {
    font-size: 13px;
    font-weight: 700;
    color: #153e70;
    line-height: 21px;
    overflow-wrap: anywhere;
}

/* Secondary information */
.pay-grid-secondary {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    line-height: 19px;
}

.pay-grid-secondary b {
    font-weight: 700;
    color: #172d49;
}

/* Account number */
.pay-grid-account {
    color: #164c87;
    font-weight: 700;
}

/* Amount - prominent and right aligned */
.pay-grid-amount {
    font-size: 15px;
    font-weight: 800;
    color: #135c32;
    text-align: right;
    padding: 8px 4px;
    white-space: nowrap;
}

/* Payment mode */
.pay-grid-mode {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #173d69;
    padding: 5px 2px;
}

/* Posting status */
.pay-grid-status {
    display: inline-block;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 3px;
    border: 1px solid;
    letter-spacing: 0.3px;
}

.pay-status-posted {
    background: #d5f0dc;
    color: #12572b;
    border-color: #258447;
}

.pay-status-pending {
    background: #ffe0dc;
    color: #9b2318;
    border-color: #c4493d;
}

.pay-grid-corrected {
    color: #174d8c;
    font-size: 11px;
    font-weight: 800;
    margin-top: 5px;
}

/* Receipt number */
.pay-grid-receipt {
    font-size: 13px;
    font-weight: 800;
    color: #174d8c;
}

.pay-grid-empty {
    font-size: 11px;
    font-weight: 700;
    color: #9b3024;
}

/* Posting failures */
.pay-grid-error {
    font-size: 12px;
    font-weight: 700;
    color: #a32323;
    line-height: 19px;
    overflow-wrap: anywhere;
}

.pay-grid-error b {
    color: #8c1515;
}

/* Grid rows */
.payment-transaction-grid .x-grid3-row {
    background: #fff !important;
    border-bottom: 1px solid #b7cbe2 !important;
}

.payment-transaction-grid .x-grid3-row-alt {
    background: #f1f5fa !important;
}

.payment-transaction-grid .x-grid3-row-over {
    background: #dce9f8 !important;
}

.payment-transaction-grid .x-grid3-row-selected {
    background: #bfd7f3 !important;
    border-color: #548ac4 !important;
}

/* Column headers */
.payment-transaction-grid .x-grid3-hd-inner {
    font-weight: 700 !important;
    color: #173d69 !important;
    font-size: 12px !important;
}

/* Cell borders */
.payment-transaction-grid .x-grid3-cell {
    border-right: 1px solid #d1ddea;
}





.crm-dashboard,
.crm-dashboard-body {
    background: #ffffff !important;
}

.crm-dashboard .x-toolbar {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #7da7d9 !important;
    padding: 7px 8px;
}

.crm-content {
    padding: 16px;
    background: #ffffff;
    font-family: Arial, sans-serif;
}

.crm-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.crm-heading h2 {
    font-size: 20px;
    font-weight: bold;
    color: #174f8a;
    margin: 0 0 5px;
}

.crm-heading span {
    font-size: 12px;
    color: #475569;
}

.crm-period {
    font-size: 12px;
    font-weight: bold;
    color: #174f8a;
}

/* KPI cards */

.crm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.crm-kpi-card {
    background: #ffffff;
    border: 1px solid #7da7d9;
    border-radius: 5px;
    padding: 15px 17px;
    min-height: 80px;
}

.crm-kpi-title {
    font-size: 12px;
    font-weight: bold;
    color: #475569;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.crm-kpi-value {
    font-size: 25px;
    font-weight: bold;
    color: #174f8a;
    line-height: 30px;
}

.crm-kpi-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.crm-kpi-tag {
    font-size: 10px;
    font-weight: bold;
    color: #174f8a;
    border: 1px solid #7da7d9;
    padding: 3px 7px;
    border-radius: 3px;
}

.crm-kpi-change {
    font-size: 11px;
    font-weight: bold;
    color: #16834a;
}

/* Chart layout */

.crm-chart-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-chart-panel {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #7da7d9;
    border-radius: 5px;
    padding: 14px;
    box-sizing: border-box;
}

.crm-chart-wide {
    flex: 1 1 50%;
}

.crm-chart-small {
    flex: 1 1 33.333%;
}

.crm-chart-header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #d0dfed;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.crm-chart-header strong {
    font-size: 14px;
    color: #174f8a;
}

.crm-chart-header span {
    margin-top: 4px;
    font-size: 11px;
    color: #475569;
}

.crm-chart-container {
    position: relative;
    height: 260px;
    width: 100%;
}

/* Grids */

.crm-table-row {
    display: flex;
    gap: 12px;
}

.crm-section {
    flex: 1 1 50%;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #7da7d9;
    border-radius: 5px;
    padding: 12px;
    box-sizing: border-box;
}

.crm-section-title {
    padding: 4px 2px 12px;
    font-size: 14px;
    color: #174f8a;
}

.crm-section .x-grid3-hd-row td {
    background: #edf4fb !important;
    background-image: none !important;
    border-bottom: 1px solid #7da7d9;
    font-weight: bold;
}

.crm-section .x-grid3-row {
    background: #ffffff;
}

.crm-section .x-grid3-row-alt {
    background: #f3f7fc;
}

.crm-section .x-grid3-row-selected {
    background: #dbeafe !important;
}

.crm-section .x-grid3-cell-inner {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Responsive layout */

@media (max-width: 1100px) {
    .crm-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-chart-row {
        flex-wrap: wrap;
    }

    .crm-chart-small {
        flex: 1 1 45%;
    }
}

@media (max-width: 750px) {
    .crm-kpi-grid {
        grid-template-columns: 1fr;
    }

    .crm-chart-row,
    .crm-table-row {
        display: block;
    }

    .crm-chart-panel,
    .crm-section {
        margin-bottom: 12px;
    }
}


/* Main grid values */

.sp-name {
    font-size: 12px;
    font-weight: bold;
    color: #174f8a;
}

.sp-type {
    font-weight: bold;
    color: #333333;
}

.sp-contact {
    color: #222222;
    font-weight: 500;
}

.sp-amount {
    font-weight: bold;
    color: #222222;
}

.sp-qty {
    font-weight: bold;
    color: #146c43;
}

/* Portal status */

.sp-status-enabled {
    color: #146c43;
    font-weight: bold;
}

.sp-status-disabled {
    color: #b42318;
    font-weight: bold;
}

.sp-status-unknown {
    color: #333333;
    font-weight: bold;
}

.sp-mapped-user {
    color: #174f8a;
    font-weight: bold;
    font-size: 12px;
}

.sp-user-unmapped {
    color: #b42318;
    font-weight: bold;
    font-size: 11px;
}

/* Row expander */

.salesperson-expander {
    background: #ffffff;
    border: 1px solid #7da7d9;
    margin: 6px 10px 10px 20px;
    padding: 12px 15px;
}

.salesperson-details {
    width: 100%;
}

.salesperson-section {
    margin-bottom: 14px;
}

.salesperson-section:last-child {
    margin-bottom: 0;
}

.salesperson-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #174f8a;
    background: #e8f1fa;
    border: 1px solid #7da7d9;
    padding: 7px 10px;
    margin-bottom: 5px;
}

/* Detail tables */

.salesperson-detail-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    table-layout: fixed;
}

.salesperson-detail-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #d2dce8;
    font-size: 12px;
    color: #222222;
    vertical-align: top;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.salesperson-detail-table .detail-label {
    width: 18%;
    font-weight: bold;
    color: #444444;
    background: #f1f5f9;
}

.salesperson-detail-table .detail-value {
    font-weight: bold;
    color: #174f8a;
}

/* Performance and statuses */

.salesperson-expander .status-success {
    color: #146c43 !important;
    font-weight: bold;
}

.salesperson-expander .status-danger {
    color: #b42318 !important;
    font-weight: bold;
}


/* Main grid readability */
.guarantorship-grid .x-grid3-cell-inner {
    color:#17212f;
    font-size:12px;
    padding:7px 8px;
    white-space:nowrap;
}
.guarantorship-grid .x-grid3-hd-inner {
    color:#17212f;
    font-weight:700;
}
.guarantorship-grid .x-grid3-row {
    background:#fff;
}
.guarantorship-grid .x-grid3-row-alt {
    background:#f4f7fb;
}
.guarantorship-grid .x-grid3-row-over {
    background:#eaf3ff;
}
.guarantorship-grid .x-grid3-row-selected {
    background:#dbeafe !important;
}
.guarantorship-amount {
    font-weight:700;
    color:#14532d;
}


/* MAIN CONTAINER */
.guarantorship-details {
    margin:8px 10px 12px 24px;
    padding:12px;
    background:#f8fafc;
    border:1px solid #dbe4ef;
    border-radius:6px;
    color:#17212f;
    box-sizing:border-box;
}

/* MAIN TITLE */
.guarantorship-main-title {
    display:flex;
    align-items:center;
    gap:8px;
    padding:2px 4px 12px;
    color:#243247;
    font-size:13px;
    font-weight:700;
}

.guarantorship-main-icon {
    color:#2563eb;
    font-size:15px;
}

/* THREE-COLUMN LAYOUT */
.guarantorship-layout {
    width:100%;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:8px 0;
}

.guarantorship-section {
    padding:0;
    vertical-align:top;
}

/* FINANCIAL CARDS */
.guarantorship-card {
    width:100%;
    min-height:220px;
    background:#fff;
    border:1px solid #dbe4ef;
    border-radius:6px;
    overflow:hidden;
    box-sizing:border-box;
    box-shadow:0 2px 6px rgba(15,23,42,0.04);
}

/* CARD HEADERS */
.guarantorship-card-header {
    display:flex;
    align-items:center;
    padding:12px 14px;
    border-bottom:1px solid #e2e8f0;
    background:#f1f6ff;
}

.guarantorship-card-icon {
    display:inline-block;
    width:32px;
    height:32px;
    line-height:32px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    border-radius:6px;
    margin-right:10px;
    color:#2563eb;
    background:#dbeafe;
    flex-shrink:0;
}

.guarantorship-card-heading {
    min-width:0;
}

.guarantorship-section-title {
    font-size:12px;
    font-weight:700;
    color:#1e40af;
    line-height:17px;
}

.guarantorship-section-subtitle {
    margin-top:2px;
    font-size:11px;
    color:#64748b;
}

/* LOAN CARD */
.loan-card .guarantorship-card-header {
    background:#f0f9ff;
}

.loan-card .guarantorship-card-icon {
    background:#cffafe;
    color:#0e7490;
}

.loan-card .guarantorship-section-title {
    color:#0e7490;
}

/* MEMBER CARD */
.member-card .guarantorship-card-header {
    background:#f0fdf4;
}

.member-card .guarantorship-card-icon {
    background:#dcfce7;
    color:#15803d;
}

.member-card .guarantorship-section-title {
    color:#166534;
}

/* FINANCIAL DETAIL TABLE */
.guarantorship-details-table {
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

.guarantorship-details-table td {
    padding:13px 14px;
    border-bottom:1px solid #edf2f7;
    vertical-align:middle;
    font-size:12px;
}

.guarantorship-details-table tr:last-child td {
    border-bottom:none;
}

/* LABELS */
.guarantorship-details-table .detail-label {
    width:60%;
    color:#475569;
    font-weight:500;
    line-height:17px;
    white-space:normal;
}

/* FINANCIAL VALUES */
.guarantorship-details-table .detail-value {
    width:40%;
    color:#0f172a;
    text-align:right;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

/* HIGHLIGHTED ROWS */
.guarantorship-details-table .featured-row {
    background:#eff6ff;
}

.guarantorship-details-table .highlight-value {
    color:#1d4ed8;
    font-size:14px;
    font-weight:700;
}

/* PERCENTAGE BADGE */
.guarantorship-details-table .percentage-pill {
    display:inline-block;
    padding:4px 10px;
    background:#dcfce7;
    border:1px solid #bbf7d0;
    border-radius:12px;
    color:#15803d;
    font-size:12px;
    font-weight:700;
}

/* HOVER EFFECTS */
.guarantorship-card:hover {
    border-color:#a9c5eb;
    box-shadow:0 3px 10px rgba(37,99,235,0.09);
}

.guarantorship-details-table tr:hover {
    background:#f8fafc;
}

.guarantorship-details-table .featured-row:hover {
    background:#dbeafe;
}

/* RESPONSIVE BEHAVIOUR */
@media (max-width:900px) {
    .guarantorship-layout {
        table-layout:auto;
    }

    .guarantorship-details-table td {
        padding:10px 8px;
    }

    .guarantorship-details-table .detail-value {
        font-size:12px;
    }
}


/* Ensure status text remains readable */
.guarantorship-grid .green-bg-cell,
.guarantorship-grid .ltgreen-bg-cell,
.guarantorship-grid .yellow-bg-cell,
.guarantorship-grid .red-bg-cell,
.guarantorship-grid .orange-bg-cell {
    color:#17212f !important;
    font-weight:700;
}

/* Main grid */
.member-grid .x-grid3-cell-inner {
    color:#17212f !important;
    font-size:12px;
    padding:7px 9px;
}
.member-grid .x-grid3-hd-inner {
    color:#17212f !important;
    font-weight:700;
}
.member-grid .x-grid3-row {
    background:#fff;
}
.member-grid .x-grid3-row-alt {
    background:#f4f7fb;
}
.member-grid .x-grid3-row-over {
    background:#eaf3ff;
}
.member-grid .x-grid3-row-selected {
    background:#dbeafe !important;
}
.member-grid .x-grid3-row-selected .x-grid3-cell-inner {
    color:#17212f !important;
}
.member-name {
    font-weight:700;
    color:#173b66;
}

/* RowExpander */
.member-expand {
    margin:8px 12px 12px 30px;
    padding:12px;
    background:#fff;
    border:1px solid #7da7d9;
    border-left:4px solid #2563eb;
    border-radius:3px;
    color:#17212f;
}
.member-expand-row {
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:12px;
    width:100%;
}
.member-expand-section {
    min-width:0;
    flex:1 1 0;
    border:1px solid #c6d6e8;
    background:#fff;
}
.member-personal {
    flex:1.2 1 0;
}
.member-financial {
    flex:1.1 1 0;
}
.member-deposit {
    flex:0.9 1 0;
}
.member-expand-title {
    background:#eaf2fc;
    color:#173b66 !important;
    font-size:12px;
    font-weight:700;
    padding:10px 12px;
    border-bottom:1px solid #c6d6e8;
    margin:0;
}
.member-expand-table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}
.member-expand-table td {
    padding:9px 10px;
    border-bottom:1px solid #e0e7ef;
    font-size:12px;
    color:#17212f !important;
    overflow-wrap:break-word;
}
.member-expand-table tr:nth-child(even) {
    background:#f4f7fb;
}
.member-expand-table tr:last-child td {
    border-bottom:0;
}
.member-expand-table td:first-child {
    width:53%;
    font-weight:600;
    color:#334155 !important;
}
.member-expand-table td:last-child {
    width:47%;
    font-weight:700;
    color:#17212f !important;
}
.member-expand-table .member-money {
    text-align:right;
    color:#14532d !important;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}


/* Main grid */
.loan-grid .x-grid3-cell-inner {
    color:#17212f !important;
    font-size:12px;
    padding:7px 9px;
}
.loan-grid .x-grid3-hd-inner {
    color:#17212f !important;
    font-weight:700;
}
.loan-grid .x-grid3-row {
    background:#fff;
}
.loan-grid .x-grid3-row-alt {
    background:#f4f7fb;
}
.loan-grid .x-grid3-row-over {
    background:#eaf3ff;
}
.loan-grid .x-grid3-row-selected {
    background:#dbeafe !important;
}
.loan-grid .x-grid3-row-selected .x-grid3-cell-inner {
    color:#17212f !important;
}

/* Status cells */
.loan-grid .green-bg-cell,
.loan-grid .ltgreen-bg-cell,
.loan-grid .yellow-bg-cell,
.loan-grid .red-bg-cell,
.loan-grid .orange-bg-cell {
    color:#17212f !important;
    font-weight:700;
}

/* Expanded row */
.loan-expand {
    margin:8px 12px 12px 30px;
    padding:12px;
    background:#fff;
    border:1px solid #7da7d9;
    border-left:4px solid #2563eb;
    border-radius:3px;
    color:#17212f;
}
.loan-expand-row {
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:10px;
    width:100%;
}
.loan-expand-section {
    min-width:0;
    flex:1 1 0;
    background:#fff;
    border:1px solid #c6d6e8;
}
.loan-terms {flex:1.2 1 0;}
.loan-guarantee {flex:1 1 0;}
.loan-disbursement {flex:1 1 0;}
.loan-application {flex:1.3 1 0;}

.loan-expand-title {
    background:#eaf2fc;
    color:#173b66 !important;
    font-size:12px;
    font-weight:700;
    padding:10px 12px;
    border-bottom:1px solid #c6d6e8;
    margin:0;
}
.loan-expand-table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}
.loan-expand-table td {
    padding:9px 10px;
    border-bottom:1px solid #e0e7ef;
    font-size:12px;
    color:#17212f !important;
    overflow-wrap:break-word;
}
.loan-expand-table tr:nth-child(even) {
    background:#f4f7fb;
}
.loan-expand-table tr:last-child td {
    border-bottom:0;
}
.loan-expand-table td:first-child {
    width:53%;
    font-weight:600;
    color:#334155 !important;
}
.loan-expand-table td:last-child {
    width:47%;
    font-weight:700;
}
.loan-expand-table .loan-money {
    text-align:right;
    color:#14532d !important;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.loan-expand-description {
    padding:10px 12px;
    border-bottom:1px solid #e0e7ef;
}
.loan-expand-description:last-child {
    border-bottom:0;
}
.loan-expand-label {
    font-weight:700;
    color:#334155;
    margin-bottom:5px;
    font-size:12px;
}
.loan-expand-value {
    font-size:12px;
    line-height:1.5;
    color:#17212f;
    overflow-wrap:break-word;
    white-space:normal;
}


/* Main grid */
.loan-details-grid {
    background: #fff !important;
    border: 1px solid #7da7d9 !important;
    font-family: Arial, sans-serif;
}

.loan-details-grid .x-grid3,
.loan-details-grid .x-grid3-scroller,
.loan-details-grid .x-grid3-body {
    background: #fff !important;
}

/* Section headers */
.loan-details-grid .x-grid-group-hd {
    background: #edf4fc !important;
    border-top: 1px solid #c4d8ef !important;
    border-bottom: 1px solid #c4d8ef !important;
    padding: 9px 12px !important;
    margin: 0 !important;
}

.loan-details-grid .x-grid-group-hd div {
    color: #245a9a !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.loan-details-grid .x-grid-group-hd .x-grid-group-title {
    padding-left: 18px !important;
}

/* Rows */
.loan-details-grid .x-grid3-row {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f4 !important;
    margin: 0 !important;
}

.loan-details-grid .x-grid3-row-alt {
    background: #fafcff !important;
}

.loan-details-grid .x-grid3-row-over {
    background: #edf5ff !important;
}

.loan-details-grid .x-grid3-row-selected {
    background: #e5f0ff !important;
}

.loan-details-grid .x-grid3-cell {
    border: 0 !important;
}

.loan-details-grid .x-grid3-cell-inner {
    padding: 9px 12px !important;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Field labels */
.loan-details-grid .loan-label {
    color: #475569;
    font-weight: 600;
}

/* Values */
.loan-details-grid .loan-value {
    color: #172b4d;
    font-weight: 500;
}

.loan-details-grid .loan-positive {
    color: #16803c;
    font-weight: bold;
}

.loan-details-grid .loan-negative {
    color: #c62828;
    font-weight: bold;
}

.loan-details-grid .loan-rate {
    color: #2563eb;
    font-weight: bold;
}

.loan-details-grid .loan-reference {
    color: #1d4e89;
    font-weight: bold;
}

.loan-details-grid .loan-product {
    color: #6d28d9;
    font-weight: bold;
}

/* Status badges */
.loan-details-grid .loan-status-yes,
.loan-details-grid .loan-status-no {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.loan-details-grid .loan-status-yes {
    color: #166534;
    background: #dcfce7;
}

.loan-details-grid .loan-status-no {
    color: #9a3412;
    background: #ffedd5;
}

/* Highlight important financial rows */
.loan-details-grid .loan-approved-row {
    background: #f0fdf4 !important;
}

.loan-details-grid .loan-balance-row {
    background: #fff1f2 !important;
}

.loan-details-grid .loan-balance-row .loan-label,
.loan-details-grid .loan-balance-row .loan-value {
    font-weight: bold;
    font-size: 14px;
}


.loan-approval-grid {
    background:#fff !important;
    border:1px solid #7da7d9 !important;
}

.loan-approval-grid .x-grid3-header {
    background:#f5f8fc !important;
    border-bottom:1px solid #dce5f0 !important;
}

.loan-approval-grid .x-grid3-hd-inner {
    color:#52657c;
    font-size:12px;
    font-weight:600;
    padding:9px 10px;
}

.loan-approval-grid .x-grid3-row {
    background:#fff;
    border:0;
    border-bottom:1px solid #edf0f4;
}

.loan-approval-grid .x-grid3-row-alt {
    background:#fafcff;
}

.loan-approval-grid .x-grid3-row-over {
    background:#eef5ff !important;
}

.loan-approval-grid .x-grid3-row-selected {
    background:#eaf3ff !important;
}

.loan-approval-grid .x-grid3-cell-inner {
    padding:10px 12px;
    font-size:13px;
    line-height:19px;
}

/* Credit committee */
.committee-name {
    color:#172b4d;
    font-weight:600;
}

/* Member details */
.loan-approval-member .member-name {
    color:#172b4d;
    font-weight:600;
}

.loan-approval-member .member-number {
    color:#75869a;
    font-size:11px;
    margin-top:3px;
}

/* Loan product */
.loan-product-name {
    color:#334e68;
    font-weight:500;
}

/* Status badges */
.loan-approval-grid .status-badge {
    display:inline-block;
    padding:4px 10px;
    border-radius:4px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    white-space:nowrap;
}

.loan-approval-grid .status-badge.approved {
    background:#e5f5eb;
    color:#187346;
    border:1px solid #bce4ca;
}

.loan-approval-grid .status-badge.pending {
    background:#fff5d9;
    color:#946200;
    border:1px solid #f5df9b;
}

.loan-approval-grid .status-badge.rejected {
    background:#fde9e9;
    color:#b42318;
    border:1px solid #f4c2c2;
}

.loan-approval-grid .status-badge.in_progress {
    background:#e7f0ff;
    color:#245fa7;
    border:1px solid #bfd5f7;
}

/* Loan details */
.loan-approval-loan .loan-number {
    color:#245a9b;
    font-size:13px;
    font-weight:700;
}

.loan-approval-loan .loan-product {
    color:#75869a;
    font-size:11px;
    margin-top:3px;
}

/* Loan amount */
.loan-approval-amount {
    display:inline-block;
    color:#172b4d;
    font-size:14px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}


/* Remarks */
.loan-approval-remarks {
    display:block;
    color:#526174;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.empty-remarks,
.empty-date {
    color:#8795a7;
    font-style:italic;
}

/* Time done */
.loan-approval-date {
    color:#526174;
    font-size:12px;
    font-weight:500;
}


.loan-toolbar-info {
    display:flex;
    align-items:center;
    gap:12px;
    padding:5px 8px;
    white-space:nowrap;
}

.loan-toolbar-name {
    font-size:16px;
    font-weight:700;
    color:#17212f;
    letter-spacing:0.2px;
}

.loan-toolbar-separator {
    width:1px;
    height:22px;
    background:#cbd5e1;
    margin:0 4px;
}

.loan-toolbar-label {
    font-size:12px;
    font-weight:600;
    color:#64748b;
}

.loan-toolbar-number {
    display:inline-block;
    padding:5px 12px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:5px;
    font-size:15px;
    font-weight:700;
    color:#1d4ed8;
}

.loan-toolbar-type {
    display:inline-block;
    padding:5px 12px;
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    border-radius:5px;
    font-size:13px;
    font-weight:700;
    color:#15803d;
    white-space:nowrap;
}

.loan-toolbar-info {
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 8px;
    white-space:nowrap;
}

.loan-toolbar-amount {
    font-size:15px;
    font-weight:700;
    color:#0f172a;
    font-variant-numeric:tabular-nums;
}

.loan-toolbar-balance {
    display:inline-block;
    padding:5px 12px;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:5px;
    font-size:15px;
    font-weight:700;
    color:#b91c1c;
    font-variant-numeric:tabular-nums;
}

.loan-toolbar-info {
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px 8px;
    white-space:nowrap;
    height:34px;
}

.loan-toolbar-info .loan-toolbar-name {
    font-size:16px;
    font-weight:700;
}

.loan-toolbar-info .loan-toolbar-label {
    font-size:12px;
    font-weight:600;
}

.loan-toolbar-info .loan-toolbar-amount,
.loan-toolbar-info .loan-toolbar-balance {
    font-size:15px;
    font-weight:700;
}

.member-profile-header-panel {
    background:#fff;
}

.member-profile-header {
    display:flex;
    align-items:center;
    height:58px;
    padding:5px 16px;
    background:#f5f9ff;
    border:1px solid #dbe6f5;
    border-left:4px solid #2563eb;
    border-radius:5px;
    box-sizing:border-box;
}

.member-profile-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-right:14px;
    background:#dbeafe;
    border-radius:8px;
    color:#1d4ed8;
    font-size:22px;
}

.member-profile-info {
    min-width:0;
}

.member-profile-label {
    font-size:12px;
    font-weight:700;
    color:#64748b;
    letter-spacing:0.7px;
    line-height:18px;
}

.member-profile-name {
    font-size:21px;
    font-weight:700;
    color:#1e40af;
    line-height:27px;
    letter-spacing:0.2px;
}

.member-profile-info {
    flex:1;
    min-width:0;
}

.member-profile-number {
    margin-left:auto;
    padding:8px 16px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:6px;
    text-align:right;
    white-space:nowrap;
}

.member-profile-number-label {
    font-size:11px;
    font-weight:700;
    color:#64748b;
    letter-spacing:0.5px;
    margin-bottom:3px;
}

.member-profile-number-value {
    font-size:17px;
    font-weight:700;
    color:#1d4ed8;
    font-variant-numeric:tabular-nums;
}

/* SIDEBAR */
.sacco-profile-sidebar,
.sacco-profile-panel,
.sacco-profile-body {
    background:#f7f9fc !important;
}

.sacco-profile-panel .x-panel-header {
    background:#2563a8 !important;
    color:#fff !important;
    border:1px solid #2563a8;
    padding:12px 14px;
    font-size:14px;
    font-weight:700;
}

/* PROFILE CARD */
.sacco-profile-identity {
    margin:12px;
    padding:18px 12px 12px;
    background:#fff;
    border:1px solid #dce5ef !important;
    border-radius:8px;
    text-align:center;
    box-shadow:0 2px 6px rgba(15,23,42,0.04);
}

.sacco-profile-avatar {
    width:104px;
    height:104px;
    margin:0 auto 12px;
    padding:4px;
    border:2px solid #dbeafe;
    border-radius:50%;
    background:#fff;
    box-sizing:border-box;
}

.sacco-profile-avatar img {
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.sacco-profile-name {
    font-size:19px;
    line-height:25px;
    font-weight:700;
    color:#173b73;
    text-transform:uppercase;
    overflow-wrap:break-word;
}

.sacco-profile-memberno {
    display:inline-block;
    margin:9px 0 12px;
    padding:6px 12px;
    background:#eaf3ff;
    border:1px solid #c9def8;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
    color:#486581;
}

.sacco-profile-memberno strong {
    color:#1555a0;
    font-size:13px;
}

/* PROFILE METADATA */
.sacco-profile-meta {
    margin:5px 0 10px;
    border-top:1px solid #e5edf5;
    text-align:left;
}

.sacco-profile-meta > div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 3px;
    border-bottom:1px solid #edf2f7;
}

.sacco-profile-meta span {
    color:#64748b;
    font-size:11px;
    font-weight:600;
}

.sacco-profile-meta strong {
    color:#243247;
    font-size:12px;
    font-weight:700;
    text-align:right;
}

/* EDIT PROFILE BUTTON */
.sacco-profile-identity .x-panel-bbar {
    background:#fff;
    border:0;
    padding:5px 0;
}

.sacco-profile-identity .x-btn {
    margin:0 auto;
}

.sacco-profile-identity .x-btn button {
    font-size:13px;
    font-weight:700;
    color:#1555a0;
}

/* FINANCIAL CARDS */
.sacco-financial-card {
    margin:0 12px 12px;
    background:#fff;
    border:1px solid #dce5ef !important;
    border-left:4px solid #2563eb !important;
    border-radius:7px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(15,23,42,0.04);
}

.sacco-financial-card .x-panel-header {
    padding:11px 13px;
    background:#f0f6ff !important;
    border:0;
    border-bottom:1px solid #e1eaf5;
    color:#1d4ed8;
    font-size:13px;
    font-weight:700;
}

.sacco-financial-card-body {
    padding:5px 14px;
}

/* FINANCIAL ROWS */
.sacco-financial-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #edf2f7;
}

.sacco-financial-row:last-child {
    border-bottom:0;
}

.sacco-financial-label {
    flex:1;
    color:#64748b;
    font-size:11px;
    line-height:16px;
    font-weight:600;
}

.sacco-financial-value {
    color:#172b4d;
    font-size:18px;
    font-weight:700;
    text-align:right;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.sacco-financial-value.is-highlighted {
    color:#2563eb;
}

/* SAVINGS CARD */
.sacco-savings-card {
    border-left-color:#16a34a !important;
}

.sacco-savings-card .x-panel-header {
    background:#effaf3 !important;
    color:#15803d;
}

.sacco-savings-card .is-highlighted {
    color:#15803d;
}

/* LOANS CARD */
.sacco-loans-card {
    border-left-color:#d97706 !important;
}

.sacco-loans-card .x-panel-header {
    background:#fff8eb !important;
    color:#a16207;
}

.sacco-loans-card .is-highlighted {
    color:#b45309;
}

/* HOVER */
.sacco-financial-card:hover {
    border-color:#b7cbe2 !important;
    box-shadow:0 3px 10px rgba(15,23,42,0.08);
}

/* SMALLER VIEWPORTS */
@media(max-width:1100px) {
    .sacco-financial-value {
        font-size:15px;
    }

    .sacco-financial-row {
        gap:6px;
    }

    .sacco-profile-name {
        font-size:17px;
    }
}


/* FINANCIAL CARD HEADERS - FIX TITLE VISIBILITY */
.sacco-profile-sidebar .sacco-financial-card .x-panel-header,
.sacco-profile-sidebar .sacco-financial-card .x-panel-header .x-panel-header-text {
    color:#1d4ed8 !important;
    font-size:14px !important;
    font-weight:700 !important;
    text-shadow:none !important;
}

/* SHARES */
.sacco-profile-sidebar .sacco-shares-card .x-panel-header {
    background:#eff6ff !important;
    border-bottom:1px solid #bfdbfe !important;
}

.sacco-profile-sidebar .sacco-shares-card .x-panel-header-text {
    color:#1d4ed8 !important;
}

/* SAVINGS */
.sacco-profile-sidebar .sacco-savings-card .x-panel-header {
    background:#ecfdf5 !important;
    border-bottom:1px solid #bbf7d0 !important;
}

.sacco-profile-sidebar .sacco-savings-card .x-panel-header-text {
    color:#15803d !important;
}

/* LOANS */
.sacco-profile-sidebar .sacco-loans-card .x-panel-header {
    background:#fffbeb !important;
    border-bottom:1px solid #fde68a !important;
}

.sacco-profile-sidebar .sacco-loans-card .x-panel-header-text {
    color:#b45309 !important;
}

/* HEADER ICONS */
.sacco-profile-sidebar .sacco-financial-card .x-panel-header .x-panel-header-text {
    line-height:20px !important;
    letter-spacing:0.3px;
}

/* MAIN PANEL */
.property-info-panel,
.property-info-panel .x-panel-body {
    background:#f8fafc !important;
}

.property-info-section {
    margin-bottom:14px;
    background:transparent !important;
}

.property-info-section .x-panel-body {
    background:transparent !important;
}

/* INFORMATION CARD */
.property-info-card {
    width:100%;
    background:#fff;
    border:1px solid #dce5ef;
    border-radius:7px;
    overflow:hidden;
    box-sizing:border-box;
    box-shadow:0 2px 7px rgba(15,23,42,0.05);
}

/* CARD HEADER */
.property-info-header {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    background:#eff6ff;
    border-bottom:2px solid #bfdbfe;
    color:#1d4ed8;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.3px;
}

.property-info-header-icon {
    font-size:17px;
    color:#2563eb;
}

/* DETAIL ROWS */
.property-info-row {
    display:flex;
    align-items:center;
    padding:8px 18px;
    border-bottom:1px solid #e8eef5;
    background:#fff;
    min-height:19px;
}

.property-info-row:nth-child(odd) {
    background:#f8fafc;
}

.property-info-row:last-child {
    border-bottom:none;
}

.property-info-row:hover {
    background:#eef6ff;
}

/* LABEL COLUMN */
.property-info-label {
    width:38%;
    flex-shrink:0;
    color:#64748b;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.2px;
}

/* VALUE COLUMN */
.property-info-value {
    flex:1;
    min-width:0;
    color:#243247;
    font-size:15px;
    font-weight:600;
    line-height:21px;
    overflow-wrap:break-word;
}

/* IMPORTANT VALUES */
.property-info-highlight {
    color:#1d4ed8;
    font-size:16px;
    font-weight:700;
}

/* LANDLORD CARD */
.property-landlord-card .property-info-header {
    background:#f0fdf4;
    border-bottom-color:#bbf7d0;
    color:#15803d;
}

.property-landlord-card .property-info-header-icon {
    color:#15803d;
}

.property-landlord-card .property-info-highlight {
    color:#15803d;
}

/* CARD HOVER */
.property-info-card:hover {
    border-color:#b6cbe5;
    box-shadow:0 3px 10px rgba(15,23,42,0.07);
}