/* ------------------- Material Icons ------------------------------ */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* -------------------------------------------------
   DESIGN TOKENS
------------------------------------------------- */
/* Orange Theme */
:root {
	/* Default Settings */
	--d-font:			'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; 
	--d-fsize:			12px; /* Font Size */
	--d-l-height:		1.3em; /* default line height */
	--d-bg:				#EBEBEB; 	/* #FFFFFF; Background Color */
	--d-fcolor:			#000000; /* Defailt Font Color */
	--d-m-fcolor:		#6f6f6f; /* default mute color */
	--d-a-color:		#e8620a; /* Default hyperlink color */
	--d-ah-color:		#c44d06;/* Default hyperlink hover color */
	
	--d-trans-time:		0.16s; /* Default transition time */
	--d-trans-effect:	cubic-bezier(.4,0,.2,1); /* Default transition effect */
	
	/* Input Stype */
	--in-fsize:			1em; /* input font size */
	--in-fcolor:		var(--d-fcolor); /* input font size */
	--in-bg:			var(--d-bg); /* input font size */
	--in-border:		#8F8F9D; /*Border Color */
	--in-f-border:		#0060DF; /* Focus Border Color */
	--in-f-shadow:		#0060DF; /* Focus Shadow Color */
	--in-radius:		4px; /* Botder Radius */
	--in-pad:			3px 5px;		
	--in-height:		auto;
	
	--in-btn-height:	34px; /* Button height */
	--in-btn-pad:		0 18px; /* Button Padding */
	--in-btn-bg:		var(--d-a-color); /* Button Background  */
	--in-btn-h-bg:		var(--d-ah-color); /* hover bg */
	--in-btn-fcolor:	#fff; /* font Color */
	--in-btn-shadow:	#ccd8f9; /*rgba(53,99,233,.25); /* shadow color */
	--in-btn-h-shadow:	#b2c4f7;  /* rgba(53,99,233,.38); howver shadow */
	
	/* Header Style */
	--hd-bg:			#F1F1F1; /*bg Color */
	--hd-pad:			0 24px; /* Padding */
	--hd-border:		#66666620; /* border color */
	--hd-shadow:		0 1px 3px rgba(102,102,102,.07), 0 1px 2px rgba(102,102,102,.04); /* header shaddow */
	
	/*Footer */
	--ft-bg:			var(--hd-bg); /*bg Color */
	--ft-pad:			0 24px; /* Padding */
	--ft-border:		var(--hd-border); /* border color */
	--ft-shadow:		0 1px 3px rgba(102,102,102,.07), 0 1px 2px rgba(102,102,102,.04); /* header shaddow */
	--ft-color:			var(--d-m-fcolor); /* footer test color */
	--ft-color1:		orange; /* footer heilofgt color */
				
	/* Tab Style */
	--tab-fsize:		13px;
	--tab-bg:			#9097a9; /* linear-gradient(to bottom, rgb(255,154,76) 20%, rgb(240,96,0) 80%);/* background */			
	--tab-h-bg:			#fff;/* hover background */			
	--tab-fcolor:		#fff;/* font color*/ 
	--tab-h-fcolor:		#000;/* hover font color */
	--tab-border:		#9097a9; /*#FF7700;/* border color */
	--tab-h-border:		#9097a9;/* hover border */
	
	/* Middle Main contant left+right */
	--mid-bg:			none; /* background middle */
	--mid-boder:		none;
	--mid-brradius:		0;
	--mid-shadow:		none;

	/* left Menu */
	--lft-bg:			#ECEFE7; /* background */	
	--lft-fcolor:		rgb(96, 99, 90);
	--lft-border:		none; /* border */	
	--lft-fsize:		1em; /* Font size */	
	--lft-gp-bg:		#9097a9; /* linear-gradient(to bottom, rgb(255,154,76) 10%, rgb(240,96,0) 80%); /* menu group bg */	
	--lft-gp-fcolor:	#fff; /* menu group font color */	
	--lft-m-border:		1px #666 dashed;; /* Border */	
	--lft-bull-color:	rgba(96, 99, 90,.5); /* default bull color */	
	--lft-sel-bg:		#FFFFFF; /* Selected bg background */	
	--lft-sel-fcolor:	rgb(96, 99, 90); /* Selected Font Color */
	
	/* Center Containt */
	--cont-bg:			#EBEBEB; /* linear-gradient(to right bottom , rgba(230,230,230,.5) 0%, #ffffff 80%, #ffffff 100%);
	
	/* central content top bar */
	--tb-border:		var(--d-a-color); /* top bar left bordrr bolot */
	
	/* Table Property */
	--tbl-bg:			#f1f1f1;	/* Table Background */
	--tbl-boder:		#9097A9; /* bordr color */
	--tbl-th-bg:		#9097a9;/* headr bacground  */
	--tbl-th-color:		#fff;/* header font color */
	--tbl-brradius:		4px;/* border radius  */
	--tbl-shadow:		0 1px 3px rgba(144,151,169,.07), 0 1px 2px rgba(144,151,169,.04);;/* table shadow */
	--tbl-td-bg1:		#E4E4E4; /* odd Row color */
	--tbl-td-bg2:		#ECECEC;  /* Even Row color */
	--tbl-h-bg:			#D8D8D8;/* hover bg  */
	
	
	/* Stick note */
	--nt-bg:			var(--mid-bg); /* Bacground */
	--nt-border:		var(--tbl-boder); /* Bacground */
	--nt-brradius:		5px; /* Bacground */
	
	/* Default Color Palette */
	--success:			#15803d;
	--success-bg:		#eaf4ee; /*rgba(21,128,61,.09); */
	--warn:				#b45309;
	--warn-bg:			#f8efe9; /* rgba(180,83,9,.09); */
	--danger:			#c0392b;
	--danger-bg:		#faefee; /* rgba(192,57,43,.08); */
	--success-1:		#4f974f;
	--active:			green;
	--inactive:			red;
	--lock:				orange;
	
  /*---------------------------------------------------------------------------------------------------------------*/
  
}
/* -------------------------------------------------
   RESET & BASE
------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { font-family: var(--d-font); }
html   { scroll-behavior: smooth; }
body   {
  margin: 0; padding: 0;
  font-size: var(--d-fsize);
  line-height: var(--d-l-height); 
  color: var(--d-fcolor);
  background: var(--d-bg); 
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img    { border: none; display: block; }
form   { margin: 0; padding: 0; }
a      { color: var(--d-a-color); text-decoration: none; transition: color var(--d-trans-time) var(--d-trans-effect); }
a:hover { color: var(--d-ah-color); text-decoration: none; }
/* -------------------------------------------------
   UTILITY CLASSES
------------------------------------------------- */
.floatleft  { float: left  !important; }
.floatright { float: right !important; }
.clear      { clear: both  !important; }
.bold       { font-weight: 600 !important; }
.normal     { font-weight: 400 !important; }
.block      { display: block !important; }
.err        { color: var(--danger); font-weight: 500;}
#errbox     { padding: 0 16px 16px; }

/* -------------------------------------------------
   FORM CONTROLS
------------------------------------------------- */
input, select, textarea {
  font-size: var(--in-fsize);
  color: var(--in-fcolor); 
  background: var(--in-bg);
  border: 1px solid var(--in-border); 
  border-radius: var(--in-radius);
  padding: var(--in-pad); 
  outline: none; 
  vertical-align: middle;
  transition: border-color var(--d-trans-time) var(--d-trans-effect), box-shadow var(--d-trans-time) var(--d-trans-effect);
}
input { height: var(--in-height); }
input:focus, select:focus, textarea:focus { border-color: var(--in-f-border); box-shadow: 0 0 0 3px var(--in-f-shadow); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7280' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px; cursor: pointer;
}
select[multiple] { min-width:340px; max-width:90%; background-image:none; }
textarea { resize: vertical;  } /* min-height: 80px; */
input[type=radio] {  margin: 0 4px 4px 10px; }
input[type=checkbox] {  margin: 0px 4px 0px 10px; }
lable { display: inline-block; padding-right: 10px;  }


input[type=submit],
input[type=button],
input[type=reset] {
  height: var(--in-btn-height); 
  padding: var(--in-btn-pad);
  background: var(--in-btn-bg); 
  color: var(--in-btn-fcolor);
  font-weight: 600;
  border: none; 
  border-radius: var(--in-radius); 
  cursor: pointer;
  box-shadow: 0 2px 8px var(--in-btn-shadow); 
  transition: background var(--d-trans-time) var(--d-trans-effect), transform var(--d-trans-time) var(--d-trans-effect), box-shadow var(--d-trans-time) var(--d-trans-effect);
}
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover  {
  background: var(--d-ah-color); 
  box-shadow: 0 4px 14px var(--in-btn-h-shadow);
  transform: translateY(-1px);
}
input[type=submit]:active,
input[type=button]:active { transform: none; }

/* -------------------------------------------------
   LAYOUT — #main grid
------------------------------------------------- */
#main {
  width: 100%; max-width: 1280px; min-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 60px 1fr auto;
  min-height: 100vh;
}

/* -------------------------------------------------
   HEADER — White / Light (unchanged)
------------------------------------------------- */
#header {
  display: flex; align-items: center; padding: var(--hd-pad); 
  background: var(--hd-bg);
  border-bottom: 1px solid var(--hd-border);
  box-shadow: var(--hd-shadow);
  position: sticky; top: 0; z-index: 200;
  width: 100%; height: 60px;
}
a.logo        { display: flex; align-items: center; position: static; }
a.logo img    { height: 40px; width: auto; }

/* -------------------------------------------------
   INNER NAVIGATION (sub-tabs inside page)
------------------------------------------------- */
#inner-navigation {
  display: flex; float: none; width: 100%;
  border-bottom: 2px solid var(--tab-border);
  padding: 0; margin:20px 0 10px; clear: none;
}
#inner-navigation ul { gap: 2px; margin: 0; padding: 0; list-style: none; } /*  display: flex; */
#inner-navigation li { float: left; margin: 0 0 0 12px; height: auto; border:1px solid var(--tab-border);  }
#inner-navigation li a {
  display: block; float: none; height: auto; line-height: 1;
  margin: 0 0 -1.5px; padding: 9px 16px 9px;
  font-size: var(--tab-fsize); 
  font-weight: 400; 
  color: var(--tab-fcolor);
  background: var(--tab-bg); 
  border: none;
  border-bottom: 1px solid transparent;
  transition: color var(--d-trans-time) var(--d-trans-effect), border-color var(--d-trans-time) var(--d-trans-effect);
}
#inner-navigation li a:hover  { color: var(--tab-h-fcolor); border-color: var(--tab-h-border); background:var(--tab-h-bg); }
#inner-navigation li:hover,
#inner-navigation li a.active, 
#inner-navigation li a.active:hover { color: var(--tab-h-fcolor); border-color: var(--tab-h-border); background:var(--tab-h-bg); font-weight: 500; }

/* -------------------------------------------------
   MIDDLE ROW
------------------------------------------------- */
#middle {
  display: flex; width: 100%; background: var(--mid-bg);
  border: var(--mid-boder); border-radius: var(--mid-brradius); box-shadow: var(--mid-shadow);
  padding: 0; float: none;
  min-height: calc(100vh - 60px - 42px);
}

/* -------------------------------------------------
   LEFT SIDEBAR
------------------------------------------------- */
#left-column {
  width: 220px; min-width: 220px; flex-shrink: 0;
  background: var(--lft-bg); 
  border-right: var(--lft-border); 
  border-left: var(--lft-border);
  padding: 14px 0; 
  overflow-y: auto; 
  float: none;
}

/* Category heading — rendered as <a class="link"> */
#left-column a.link {
  display: block; width: 100%; height: auto;
  padding: 8px 16px; 
  font-size: var(--lft-fsize); 
  font-weight: 600; 
  
  color: var(--lft-gp-fcolor);
  cursor: default;  
  background: var(--lft-gp-bg); /* none; */ 
  
  
}
#left-column a.link:hover {  text-decoration: none; }
/* Category heading — rendered as <h3> */
#left-column a { color: var(--lft-fcolor); }
/* Nav list items */
ul.nav { list-style: none; margin: 0; padding: 0; background: none; border: none; }
ul.nav li { padding: 0; border: none; border-bottom: var(--lft-m-border);}
ul.nav a {
  display: block; padding: 7px 16px 7px 28px;
  font-size: var(--lft-fsize); color: var(--lft-fcolor);
  background: none; position: relative;
  transition: color var(--d-trans-time) var(--d-trans-effect), background var(--d-trans-time) var(--d-trans-effect);
  font-weight: 500;
}
ul.nav a::before {
  content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--lft-bull-color);
  transition: background var(--d-trans-time) var(--d-trans-effect);
}
ul.nav a:hover         { color: var(--lft-sel-fcolor); background: var(--lft-sel-bg); text-decoration: none; }
ul.nav a:hover::before { background: var(--d-a-color); }
ul.nav a.active        { color: var(--lft-sel-fcolor); background: var(--lft-sel-bg); font-weight: 700; }
ul.nav a.active::before { background: var(--d-a-color); }
ul.nav li:last-child   { border: none; }


/* -------------------------------------------------
   CENTER / AGENT COLUMNS
------------------------------------------------- */
#center-column,
#agent-column {
  flex: 1; float: none; width: auto; min-height: auto;
  padding: 20px 0 20px 32px; background: var(--cont-bg);
  border-radius: 0;
  animation: fadeIn .2s var(--d-trans-effect) both;
}
#agent-column { padding: 10px 0px; }

/* -------------------------------------------------
   PAGE TITLE BAR
------------------------------------------------- */
.top-bar,
.ag-top-bar {
  float: none; width: 100%;
  border-left: 3px solid var(--tb-border);
  padding: 0 0 0 14px; margin:0 0 10px;

}
.ag-top-bar { float: none; width: auto; margin-bottom:  10px; margin-top: 4px; }
.top-bar h1,
.ag-top-bar h1 { margin: 0 0 3px; font-size:1.7em; }
.ag-top-bar h6 { font-size: var(--d-fsize); font-weight: 500; color: var(--danger); margin: 0; }


/* -------------------------------------------------
   TABLE WRAPPER DIV
------------------------------------------------- */
div.table {
  float: none; position: relative;
  width: 100%; margin: 0 0 28px;
  animation: fadeIn .2s var(--ease) both;
}
div.table h3 {
  font-weight: 700; 
  text-transform: uppercase; 
  margin: 0 0 10px;
}
div.table .info {
  float: left; margin: 4px 0 0; height: 30px; line-height: 30px;
}
div.table .select {
  float: right; margin: 4px 0 0;
  height: 30px; display: flex; align-items: center; gap: 8px;
}
div.table .select strong { float: none; padding: 0;  }
div.table .select select  { width: 80px; margin: 0; height: 24px; padding: 2px 6px; }


/* -------------------------------------------------
   TABLES Gradient Header 
------------------------------------------------- */
table.listing,
table.listingmodel {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tbl-bg);
  border: 1px solid var(--tbl-boder);
  border-radius: var(--tbl-brradius);
  overflow: hidden;
  box-shadow: var(--tbl-shadow);
  margin: 0; padding: 0;
}

/* Header row — gradient */
table.listing thead tr,
table.listingmodel thead tr {
  background: var(--tbl-th-bg);
}

/* Header cells */
table.listing th,
table.listingmodel th {
  padding: 9px 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tbl-th-color);
  text-align: left; white-space: nowrap;
  background: var(--tbl-th-bg);
  border: none;
  border-right: 1px solid var(--tbl-boder);
  border-top: 0 !important;
  position: relative;
  cursor: pointer; user-select: text;
}
table.listing th:last-child,
table.listingmodel th:last-child { border-right: none; }


/* Body cells */
table.listing td,
table.listingmodel td {
  padding: 7px 10px;
  background: var(--tbl-td-bg1);
  border: none; border-bottom: 1px solid var(--tbl-boder);
  vertical-align: middle;
  transition: background var(--d-trans-time) var(--d-trans-effect);
}
table.listing tr:last-child td,
table.listingmodel tr:last-child td         { border-bottom: none; }
table.listing tr:nth-child(even) td,
table.listingmodel tr:nth-child(even) td    { background: var(--tbl-td-bg2); }
table.listing tbody tr:hover td,
table.listingmodel tbody tr:hover td        { background: var(--tbl-h-bg); }
table.listing .white td,
table.listingmodel .white td                { background: var(--tbl-td-bg1); }

table.listing td:first-child, table.listing th:first-child,
table.listingmodel td:first-child, table.listingmodel th:first-child { border-left: none; }
table.listing td:last-child, table.listing th:last-child,
table.listingmodel td:last-child, table.listingmodel th:last-child   { border-right: none; }

/* Style variants */
table.listing .style1, table.listingmodel .style1, span.style1 { font-weight: 900; color: var(--warn); text-decoration:underline; }
table.listing .style2, table.listingmodel .style2, span.style2 { font-weight: 600; padding-left: 16px;  }
table.listing .style3, table.listingmodel .style3, span.style3 { padding-left: 30px; }
table.listing .style4, table.listingmodel .style4, span.style4 { padding-left: 35px; }

/* Form-layout tables */
table.form td:last-child { padding: 4px 0 4px 6px; text-align: left; }
table.form th,
table.form td            { padding-left: 12px; }

table.listinghalf  { width: 50%; }
table.listingmodel { width: 100%; }

tr.skip td { color: var(--success); }
tr.deleted { text-decoration: line-through; opacity: .5; }

/* -------------------------------------------------
   BUTTONS ROW
------------------------------------------------- */
.buttons {
  clear: both; text-align: center;
  padding: 28px 0 16px;
  display: flex; justify-content: center; gap: 10px;
}
.buttons input { margin: 0; }


a.orangebutton {
  display: inline-flex; align-items: center;
  height: var(--in-btn-height); padding: 0 14px; float: none;
  background: var(--in-btn-bg); color: var(--in-btn-fcolor);
  font-size:  font-weight: 600; border-radius: var(--in-radius);
  transition: background var(--d-trans-time) var(--d-trans-effect);
}
a.orangebutton:hover { background: var(--in-btn-h-bg); text-decoration: none; }


/* -------------------------------------------------
   AGENT STATUS INDICATORS
------------------------------------------------- */
#Pause   { background: rgba(180,83,9,.12);   color: var(--warn);    font-weight: 600; border-radius: 4px; padding: 2px 8px; }
#Preview { background: rgba(105,65,224,.10); color: var(--accent-2);font-weight: 600; border-radius: 4px; padding: 2px 8px; }
#In-Call { background: rgba(21,128,61,.12);  color: var(--success); font-weight: 600; border-radius: 4px; padding: 2px 8px; }
#Wrap    { background: var(--surface-3);     color: var(--text);    font-weight: 600; border-radius: 4px; padding: 2px 8px; }


/* -------------------------------------------------
   FOOTER
------------------------------------------------- */
#footer {

  float: none; width: 100%;
  border-top: 1px solid var(--ft-border);
  background: var(--ft-bg);
  color:var(--ft-color);
  text-align:center;
}
#footer p {
  margin: 0; padding: 11px 24px;
  font-size: .89em; 
}
#footer span[style] { color: var(--ft-color1) !important; }

/* -------------------------------------------------
   STICKY NOTEPAD
------------------------------------------------- */
.divstickyclose {
  position: fixed; right: 0; bottom: 0; z-index: 1000;
  width: 45px; height: 45px;
  background: var(--in-btn-bg);
  border: none; border-radius: var(--in-radius) 0 0 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--in-btn-shadow);
  cursor: pointer; transition: opacity var(--d-trans-time) var(--d-trans-effect);
}
.divstickyclose:hover { opacity: .85; }
.divstickyclose a,
.divstickyclose a:hover {
  color: #fff; font-weight: 700;
  
  text-decoration: none; float: none; margin: 0; line-height: 1;
}

.divsticky {
  position: fixed; right: 0; bottom: 0; z-index: 1000;
  width: 520px; height: 460px;
  background: var(--nt-bg); border: 1px solid var(--nt-border);
  border-radius: var(--nt-brradius) var(--nt-brradius) 0 0;
  display: flex; flex-direction: column;
}

.divsticky .divstickytitle {
  background: var(--tbl-th-bg);
  padding: 11px 14px; color: var(--tbl-th-color);
  font-weight: 700; 
  font-size:1.2em;
  display: flex; align-items: center; justify-content: space-between;
}

.divsticky .divstickyfilter a,
.divsticky .divstickytitle a,
.divsticky .divstickytitle a:hover {
  float: none; color: var(--in-btn-fcolor);
  text-decoration: none; margin: 0; line-height: 1.2em;
  background: var(--in-btn-bg);
  padding:0 5px;
  background: var(--in-btn-bg); 
  color: var(--in-btn-fcolor);
  font-weight: 600;
  border: none; 
  border-radius: var(--in-radius); 
  cursor: pointer;
  box-shadow: 0 2px 8px var(--in-btn-shadow); 
  transition: background var(--d-trans-time) var(--d-trans-effect), transform var(--d-trans-time) var(--d-trans-effect), box-shadow var(--d-trans-time) var(--d-trans-effect);
}
.divsticky .divstickytitle a:hover { background: var(--d-ah-color); 
  box-shadow: 0 4px 14px var(--in-btn-h-shadow);
  transform: translateY(-1px); }
.divsticky .divstickyfilter { padding: 10px; border-bottom: 1px solid var(--tbl-boder); background: var(--tbl-td-bg1); }
.divsticky .divstickyfilter a { padding:5px 5px; }
.divsticky .divstickycontent { flex: 1; padding: 10px; overflow-y: auto; height:305px; background: var(--tbl-td-bg2); }
.divsticky .divstickyform   { padding: 10px; border-top: 1px solid var(--tbl-boder); background: var(--tbl-td-bg1); }

.divstickynote {
  padding: 10px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--tbl-boder); border-radius: var(--tbl-brradius);
  background: var(--tbl-td-bg1); transition: background var(--d-trans-time) var(--d-trans-effect);
}
.divstickynote:hover      { /* background: var(--tbl-h-bg); */ }
.divstickynote:last-child { border-bottom: none; margin-bottom: 0; }
.divstickynote a,
.divstickynote a:hover    { float: right;  }
.divstickynote a:hover    { opacity: 1; }
.divstickynote span       { display: block; margin-top: 4px; line-height: 1.5; }
.divstickynote p          { font-size: .8em; color: var(--d-m-fcolor); margin: 4px 0 0; }


/* -------------------------------------------------
   ANIMATIONS & SCROLLBAR
------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hd-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b0bace; }

/* -------------------------------------------------
   material-icons from google
------------------------------------------------- */

.material-icons {
  vertical-align: -9px;
  /* OR use a specific offset if middle isn't perfect: */
  /* vertical-align: -6px; */
}

.icon-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  align-items: center;
  justify-content: center;
}

.icon-button .material-icons {
  color: var(--d-a-color); /* Adjust color as needed */
  font-size: 24px;
}

.icon-button:hover .material-icons {
  color: var(--d-a-color) ; /* #1a73e8Optional hover color */
}

.material-icons-err {
 color: var(--danger) ;
  /* OR use a specific offset if middle isn't perfect: */
  /* vertical-align: -6px; */
}

.material-icons-success
{
 color: var(--success-1) ;
  /* OR use a specific offset if middle isn't perfect: */
  /* vertical-align: -6px; */
}

.material-icons[data-icon="emoji_emotions"] { color:  var(--success-1) ; }
/* -------------------------------------------------
 Search button 
------------------------------------------------- */

.search-icon { margin: -43px 2px; float: right;both; font-size:24px; text-decoration:none; }
.search-icon .material-icons { font-size:30px; }

tr.skip { opacity: 0.3; }
tr.skip td { text-decoration:line-through;  }

table.listing td.active, .active, table.listing td.yes, .yes, table.listing td.allow_css, .allow_css {color: var(--active); font-weight:500; }
table.listing td.inactive, .inactive, table.listing td.no, .no, table.listing td.block_css, .block_css { color: var(--inactive); font-weight:500;}
table.listing td.lock, .lock { color: var( --lock);font-weight:500;}
/* ------------------------------
Ticket position 
------------------------------ */
#divticker
{
	float:right;
	margin:-30px 0px 0px;
}
#divticker h4 {margin:0; }

/* --------------------------------------
Home Page Summary
---------------------------------------- */
/* Cards (stats) */
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; margin-top:20px;
}
.stat-card {
  background:var(--tbl-bg); border:1px solid var(--tbl-boder); border-radius:var(--tbl-brradius);
  padding:18px 20px; position:relative; overflow:hidden;
  transition:border-color var(--transition),transform var(--transition);
}
.stat-card:hover { border-color:var(--tbl-boder); transform:translateY(-2px); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--d-a-color),var(--d-ah-color));
}
.stat-card .label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--d-m-fcolor); margin-bottom:8px; }
.stat-card .value { font-size:26px; font-weight:700; letter-spacing:-1px; line-height:1; }
.stat-card .sub { font-size:11.5px; color:var(--d-m-fcolor); margin-top:6px; }
.stat-card .trend { font-size:11.5px; font-weight:600; }
.stat-card .trend.up   { color:var(--success); }
.stat-card .trend.down { color:var(--danger); }
.stat-card .icon {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:28px; opacity:.15;
}

/* --------------------------------------
Agent Welcome Page
---------------------------------------- */

.agent-status-grid {
	
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; margin-top:20px;
}
.agent-status-card {
	line-height:1.5em;
  background:var(--tbl-bg); border:1px solid var(--tbl-boder); border-radius:var(--tbl-brradius);
  padding:14px 18px;
}
.agent-status-card.in-call { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.06); }
.agent-status-card.paused  { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.06); }