.emvSelectionRow { 
 	padding: 6px; 
 	max-width: 260px;
 	max-height: 125px;
 	width: 260px;
 	clear:both;
 	display: table-cell;
	border: dotted 1px gray;
	text-align: center;
	background: #99CCFF !important;
}
#allDevicesContainer .emvSelectionRow {	
	position: relative;
	left: -35px;
	top: -7px;
}
.emvSelectionRow:hover{
	border: solid 1px blue;
	cursor: pointer;
}
.emvLogoBox{
	float: left;
	width: 125px; 
}
.emvDetailBox{
}

.emvHostInfo{
	font-weight: bold;
	font-size: 14px;
}
.emvDeviceInfo{
	font-style: italic;
	font-size: 12px;
}
.emvStatus_online{
	color: #005842;
}
.emvStatus_offline{
	color: red;
	font-weight: bold;
}
.emvStatus_busy{
	color: #a64e00;
	font-weight: bold;
}


/***
	width: 535px;
	height: 158px;
	border: solid 9px gray;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('images/devices/card_status_removecard.png');
	background-color: #69c;
	top: -47px;
	position: relative;
***/

.emvProgressBox{
	width: 535px;
	min-height: 158px;
	border: dotted 1px blue;
	padding: 15px;
	background-color: #69c;
}
.emvProgressTitle{
	border-bottom: solid 2px black;
	font-size: 20px;
	color: blue;
}
.emvProgressDetail{
	font-size:32px;
	font-style: italic;
	color: blue;
	background: #e8e8e9;
	border: solid 1px black;
	padding: 10px;
	text-align: center;
}	
#emvProgressImage{
	background-repeat: no-repeat;
	background-size: contain; 
	background-color: #99ccff;
	height: 250px;
}
/** Below are for the WP Status Codes **/
.emvStatus_NotInUse{
	background-image: url('../images/devices/card_status_connecting.png');
}
.emvStatus_PromptingForCardInput, 
.emvStatus_PinPad{
	background-color: yellow;
	background-image: url('../images/devices/card_status_insertcard.png');
}
.emvStatus_PromptingToConfirmConvenienceFeeAmount,
.emvStatus_PromptingToConfirmAmount,
.emvStatus_PromptingToConfirmCashBack,
.emvStatus_PromptingForCashBackAmount,
.emvStatus_PromptingToConfirmTipAmount,
.emvStatus_PromptingToConfirmTotalAmount
{
	background: orange;
	background-image: url('../images/devices/card_status_confirm.png');
}
.emvStatus_PromptingForPinEntry{
	background: purple;
	background-image: url('../images/devices/card_status_pin.png');
}
.emvStatus_PromptingToRemoveCard{
	background: red;
	background-image: url('../images/devices/card_status_removecard.png');
}
.emvStatus_PromptingProcessing,
.emvStatus_PromptingForQuickChipPreRead,
.emvStatus_CompletingQuickChipPreRead,
.emvStatus_PromptingFinishPreProcessing
{
	background: lime;
	background-image: url('../images/devices/card_status_processing.png');
}
.emvStatus_Pipeline,
.emvStatus_Host,
.emvStatus_ShuttingDown,
.emvStatus_Initializing {
	background: #f6f6f6;
	background-image: url('../images/devices/card_status_connecting.png');
} 



/** below is layout related, for the transaction Device selection screen **/


/* ==========================
   DEVICE GRID SCROLLING + LAYOUT
   ========================== */

/* Container holding device items - flex with wrap + scroll */
.deviceGridContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  max-height: 400px;
  
  overflow-y: auto;    /* vertical scroll ONLY */
  overflow-x: hidden;  /* prevent horizontal scroll */

  padding: 10px;
  box-sizing: border-box;
  background: transparent; /* keep transparent for tab background */
}

/* Each device block - flex item, 4 across max */
.emvSelectionRow {
flex: 1 1 calc(25% - 10px); /* roughly 4 per row, minus gap */
  min-width: 220px;
  max-width: 260px;
  height: auto;
  box-sizing: border-box;
  border: 1px dotted gray;
  padding: 8px;
  display: flex;
  flex-direction: row;
  background: white;
  position: relative;
  transition: border 0.2s ease;
}
.emvSelectionRow {
  
  max-width: 260px;
  min-width: 200px;

  display: flex;
  gap: 10px;

  padding: 6px;
  max-height: 125px;
  border: dotted 1px gray;
  text-align: left;
  background: #fff;
  box-sizing: border-box;
}

/* Hover effect */
.emvSelectionRow:hover {
  border: solid 1px blue;
  cursor: pointer;
}

/* Remove float - use flexbox for inner layout */
.emvLogoBox {
  /* float: left; */  /* REMOVED */
  width: 125px;
  flex-shrink: 0;
}

/* Details container stays as is */
.emvDetailBox {
  flex-grow: 1;
}

/* Typography */
.emvHostInfo {
  font-weight: bold;
  font-size: 14px;
}

.emvDeviceInfo {
  font-style: italic;
  font-size: 12px;
}

/* Force text wrap inside spans */
.emvHostInfo span,
.emvDeviceInfo span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: block;
}

/* Status indicators */
.emvStatus_online {
  color: #005842;
}
.emvStatus_offline {
  color: red;
  font-weight: bold;
}
.emvStatus_busy {
  color: #a64e00;
  font-weight: bold;
}

/* ==========================
   JQUERY UI TABS (SCOPED TO #deviceTabs)
   ========================== */

/* Background for tabs' content area */
#deviceTabs .ui-widget-content {
  background: #99CCFF !important;
  border: none;
}

/* Tab panels */
.ui-tabs .ui-tabs-panel {
	padding: 0px !important;
}
#deviceTabs .ui-tabs .ui-tabs-panel {
  background: transparent;
  border: none;
  width: 100%;
  min-height: 100px;
}

/* Tab label bar */
#deviceTabs .ui-tabs .ui-tabs-nav {
  background: #99CCFF;
  border: none;
  padding-left: 0;
  margin-left: 0;
}
#deviceTabs .ui-tabs-nav {
 background: #99CCFF;
 border: 0px; /* removed the subtle tab border box */
 border-bottom: solid 3px #003eff;
}

/* Individual tabs (inactive) */
#deviceTabs .ui-tabs .ui-tabs-nav li {
  background: #e0e0ff;
  border: 1px solid #aaa;
  border-bottom: none;
  margin-right: 4px;
  border-radius: 4px 4px 0 0;
}

/** --- below to cleanup jquery borders..... **/
/* Remove the outer border around the entire tab group */
#deviceTabs.ui-widget {
  border: none;
  background: transparent; /* optional, in case background sneaks in */
}

/* Remove the border around the tab panel content area */
#deviceTabs .ui-widget-content {
  border: none !important;
  background: #99CCFF !important; /* your canvas color */
}

/* Remove border on active panel area (inside tab) */
#deviceTabs .ui-tabs-panel {
  border: none;
  background: transparent;
}
/** --- **/



/* Active tab */
#deviceTabs .ui-tabs .ui-tabs-nav li.ui-tabs-active {
  background: #ffffff;
  border-color: #888;
  font-weight: bold;
}

/* Tab anchor text */
#deviceTabs .ui-tabs .ui-tabs-nav li a {
  color: #000;
  padding: 8px 12px;
  text-decoration: none;
}

/* Hover on tab labels */
#deviceTabs .ui-tabs .ui-tabs-nav li:hover {
  background: #f5f5ff;
}

/* Use page font */
#deviceTabs .ui-widget {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================
   OPTIONAL: HIDDEN ELEMENTS FOR FAVORITES
   ========================== */

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

/* ---- now we add our favorite icon styles **/

/* Floating favorite star icon */
.favoriteStar {
  position: relative;
  top: -20px;
  left: -5px;
  width: 24px;
  height: 24px;

  font-size: 32px;
  color: #aaa; /* outlined gray by default */
  background: transparent;
  cursor: pointer;

  z-index: 2;
  user-select: none;
}

/*** We don't want the floating star to show 
  *  on the elements already in the favorites tab 
  **/
#favoriteDevicesContainer .favoriteStar {
  display: none !important;
}


/* When marked as favorite */
.favoriteStar.favorited {
  color: gold; /* solid yellow */
}

/* Optional: hover effect */
.favoriteStar:hover {
  color: orange;
}

.favoriteStar {
  transition: color 0.4s ease;
  cursor: pointer;
  pointer-events: auto;
}

/** tiles vs tabular view styles **/
#deviceTable {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  color: black;
}

#deviceTable th,
#deviceTable td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

#deviceTable th {
  background-color: #e0eaff;
}

#toggleViewBtn {
  position: absolute;
  top: 15px;
  left: 435px;
  display: inline;
  color: #0645ad;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

#toggleViewBtn:hover {
  color: #0b0080;
  text-decoration: none;
}