.bg-vj-background, .page-logo {
	background-image: none;
	background-image: none;
	background-color: #ffffff;
}
.bg-vj-background2, .page-logo2 {
	background-image: none;
	background-image: none;
		transparent);
	background-color: #ffffff;
}
.page-logo, .page-logo2 {
    padding: 0px 1.6rem;
}
.page-logo2 {
    height: 4.125rem;
    width: 16.875rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    overflow: hidden;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-positive: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    min-height: 1px;
    padding: 0 2rem;
}
.page-logo2 img {
    width: 28px;
    height: 28px;
}
.logo_con {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start;
    height: 28px;
}
img.bf_icon {
    width: 30px;
}
.sub_title_txt {
    margin-left: 10px;
}
span.page-logo-text {
    font-family: 'VijaySoftware-Regular';
    color: #231F20;
    font-size: 1.5rem;
    margin-left: .5rem;
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    text-align: left;
    font-weight: bold;
}
span.page-logo-text1 {
    font-family: 'VijaySoftware-Regular';
    color: #231F20;
    font-size: 1.5rem;
    margin-left: .5rem;
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    text-align: left;
    font-weight: bold;
	padding-top: 6px;
}
span.page-logo-sep {
    font-family: 'VijaySoftware-Regular';
    color: #0067A7;
    font-size: 1.45rem;
	position: relative;
    top: -2px;
}
span.page-logo-grey {
    font-family: 'VijaySoftware-Light';
    color: #939598;
    font-size: 1.42rem;
}

.text-black {
	color: rgba(0, 0, 0);
}
.disabled-btn {
  pointer-events: none;
  opacity: 0.65;
}
.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table {
    width: 100% !important;
    table-layout: fixed;
}

.dataTables_scrollHeadInner th,
.dataTables_scrollBody td {
    white-space: nowrap;
}

/* Fixed Columns */
/* --- raise fixed-column wrappers above scrolling head --- */
div.DTFC_LeftHeadWrapper,
div.DTFC_LeftBodyWrapper,
div.DTFC_LeftFootWrapper {
  position: relative;
  z-index: 60 !important;
}
div.dataTables_scrollHead {
  position: relative;
  z-index: 10; /* stays below the fixed side */
}

/* --- FIXED HEADERS: 1) # (th_Sort_Id) --- */
#bigcomdata_head th.th_Sort_Id,
.DTFC_LeftHeadWrapper thead th.th_Sort_Id,
.DTFC_Cloned thead th.th_Sort_Id,
/* fallback if clone lacks classes */
#bigcomdata_head th.dtfc-fixed-left:nth-child(1),
.DTFC_LeftHeadWrapper thead th:nth-child(1) {
  position: sticky;
  z-index: 70 !important;
  background-color: var(--primary-800, #0a70bd) !important; /* swap fallback if desired */
  color: #fff;
}

/* --- FIXED HEADERS: 2) Product Id (td_product_id) --- */
#bigcomdata_head th.td_product_id,
.DTFC_LeftHeadWrapper thead th.td_product_id,
.DTFC_Cloned thead th.td_product_id,
/* fallback */
#bigcomdata_head th.dtfc-fixed-left:nth-child(2),
.DTFC_LeftHeadWrapper thead th:nth-child(2) {
  position: sticky;
  z-index: 70 !important;
  background-color: var(--primary-800, #0a70bd) !important;
  color: #fff;
}

/* --- FIXED HEADERS: 3) Image (td_image_file) --- */
#bigcomdata_head th.td_image_file,
.DTFC_LeftHeadWrapper thead th.td_image_file,
.DTFC_Cloned thead th.td_image_file,
/* fallback */
#bigcomdata_head th.dtfc-fixed-left:nth-child(3),
.DTFC_LeftHeadWrapper thead th:nth-child(3) {
  position: sticky;
  z-index: 70 !important;
  background-color: var(--primary-800, #0a70bd) !important;
  color: #fff;
}

/* keep non-fixed headers below the fixed ones */
div.dataTables_scrollHead thead th:not(.dtfc-fixed-left),
div.dataTables_scrollHead thead td:not(.dtfc-fixed-left) {
  z-index: 15;
}

/* Target the last fixed column (your 3rd one: .td_image_file) */
#bigcomdata_head th.td_image_file,
.DTFC_LeftBodyWrapper td.td_image_file {
  position: sticky; /* required for pseudo-element positioning */
  z-index: 71; /* stay above neighbors */
}

/* Last fixed column header + body cells */
#bigcomdata_head th.td_image_file,
.DTFC_LeftBodyWrapper td.td_image_file {
  position: sticky;
  z-index: 71; /* above scroll cells */
}

/* Target the wrapper that holds your left fixed columns */
#bigcomdata_head th.td_image_file,
.DTFC_LeftBodyWrapper td.td_image_file {
  position: relative;
  z-index: 70; /* keep above scrolling table */
}
.free_trial{
	font-size:10px;
}

/*----*/
/* --- Header: last fixed column shadow (0.75 opacity) --- */
#bigcomdata_head th.td_image_file {
  position: sticky;
  z-index: 72 !important;
  overflow: visible;
}

#bigcomdata_head th.td_image_file::after {
  content: "";
  position: absolute;
  top: 0;
  right: -14px; /* push shadow outside */
  width: 14px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.75),  /* darker for thead */
    rgba(0,0,0,0)
  );
}

/* --- Body: last fixed column shadow (0.25 opacity) --- */
/* make sure the last fixed column can host outside shadows */
#bigcomdata_head th.td_image_file,
#bigcomdata tbody td.td_image_file,
#bigcomdata tbody td:nth-child(3) { /* fallback if TDs lack class */
  position: relative;            /* header is sticky already; body just needs a context */
  z-index: 72 !important;
  overflow: visible;             /* allow ::after outside the cell */
}

/* base pseudo-elements: positioned OUTSIDE, but invisible by default */
#bigcomdata_head th.td_image_file::after,
#bigcomdata tbody td.td_image_file::after,
#bigcomdata tbody td:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -14px;                  /* push shadow outside the fixed column */
  width: 14px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  opacity: 0;                    /* hidden until scrolled */
  transition: opacity 160ms ease;
}

/* when scrolled horizontally, fade in with different strengths */
.fixedShadow-on #bigcomdata_head th.td_image_file::after { opacity: 0.25; } /* thead darker */
.fixedShadow-on #bigcomdata tbody td.td_image_file::after,
.fixedShadow-on #bigcomdata tbody td:nth-child(3)::after { opacity: 0.25; } /* body lighter */

/* keep scrolling header below so shadows render on top */
div.dataTables_scrollHead { position: relative; z-index: 10; }




.fontcolor{
	color:blue;
}

/* Product Icon in Table */
th[column="price"] {
  text-align: center;
}
.parent_product_icon {
	margin-left: 4px;
	position: absolute;
    padding-top: 1px;
}
.product_child_table_checkbox {
	padding-left: 30px !important;
}
.product_child_id {
    padding-left: 30px !important;
}
td[column="price"], 
td[column="price"] .cell-content {
  text-align: right;
}
td[column="weight"], 
td[column="weight"] .cell-content {
  text-align: right;
}
td[column="type"], 
td[column="type"] .cell-content {
  text-align: center !important;
}
td[column="sale_price"], 
td[column="sale_price"] .cell-content {
  text-align: right !important;
}
td[column="retail_price"], 
td[column="retail_price"] .cell-content {
  text-align: right !important;
}
td[column="is_visible"], 
td[column="is_visible"] .cell-content {
  text-align: center !important;
}
td[column="inventory_level"], 
td[column="inventory_level"] .cell-content {
  text-align: right !important;
}
td[column="availability"], 
td[column="availability"] .cell-content {
  text-align: center !important;
}
td[column="purchasing_disabled"], 
td[column="purchasing_disabled"] .cell-content {
  text-align: center !important;
}
td[column="inventory_tracking"], 
td[column="inventory_tracking"] .cell-content {
  text-align: center !important;
}

td.readonly {
    pointer-events: none;
    background-color: #f5f5f5; /* greyed out */
    color: #999;
}

.tooltip {
  z-index: 99999 !important;
}


table.dataTable {
	table-layout: fixed;
	
}

.panel-hdr {
	position: relative;
	z-index: 2;
}
div#panel-7 {
    margin-bottom: .5rem !important;
}
/* Copy hightlighted cells popup */
.dt-autofill-list.dtaf-popover-closeable {
    z-index: 1200;
}
span.copy_instuctions {
    font-size: 1.2em;
}

div.dataTables_wrapper .dataTables_scrollHead {
	z-index: 1050 !important; /* or higher if needed */
}

.editCategoryModal {
	max-height: 100vh;
	overflow-y: auto;
	width: 300px !important;
}

.store {
	display: flex;
	align-items: center; /* Vertical center */
	justify-content: center; /* Horizontal center (optional) */
	padding-right: 5px
}
.toolbar-left{
	display: flex;
	align-items: center;
}
.left-buttons{
	display: flex; 
	gap: 5px;
}

/* remove top padding from tab content. be sure to add element in each tab to space the top. */
.tab-content.p-3 {
    padding: 0 1rem 1rem 1rem !important;
}

.store_layout {
  position: relative;       /* anchor the pseudo-element */
  z-index: 0;               /* create a stacking context */
  padding: 20px 0;
  margin-bottom: 30px;
}

/* draw a background that bleeds to the viewport edges */
.store_layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* extend to the left/right edges of the viewport */
  left: -32px;
  right: -32px;

  background: #f3f3f3;      /* your color */
  z-index: -1;              /* sit behind the content */
}
.layout_section_container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 15px 0;
}
.store_layout_title {
    align-self: center;
    padding-right: 10px;
}
h3.storeLayout_h3 {
    margin-bottom: 0;
}

.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.6); /* lightbox effect */
	z-index: 9999; /* on top of other content */
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-bar {
	text-align: center;
}

#loader-text {
	font-size: 20px;
	font-weight: bold;
}

.fullscreen-active {
	width: 100vw !important;
	height: 100vh !important;
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 9999;
	background: #fff;
	overflow: auto;
}

.page_select_size {
	min-width: 55px;
}
div#bigcomdata_length label {
    margin-bottom: 0px !important;
}

/* Search field width */
div.dataTables_wrapper div.dataTables_filter input {
    width: 20vw !important;
    max-width: 30vw;
}

/* Column Panel View */
div#bc_fields_to_edit_con .section_container {
    border-bottom: 1px solid #999999;
}
div#bc_fields_to_edit_con .attribute-item {
    padding-left: 15px;
}
/* Exclude field section */
div#excludeto_edit_fields_con {
    padding: 15px 0 20px;
}
/* remove the solid background from the element itself */
#excludeto_edit_fields_con {
  position: relative;       /* anchor the pseudo-element */
  z-index: 0;               /* create a stacking context */
}

/* draw a background that bleeds to the viewport edges */
#excludeto_edit_fields_con::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* extend to the left/right edges of the viewport */
  left: -32px;
  right: -32px;

  background: #fbecec;      /* your color */
  z-index: -1;              /* sit behind the content */
}
div#bc_fields_excludeto_edit_con #excluded_columns {
    padding-left: 20px;
}

/* Settings Panel */
.setting_panel {
	display: flex; 
	gap:0px; 
	align-items: center;
	margin-bottom:10px;
	margin-left:10px;
}
/*.setting_item {
	flex: 1;
}*/
.setting_item {
  display: flex;
  gap: 10px; /* space between input and select */
}
.settings_modal .section_container {
    padding: 20px 0 5px;
    border-bottom: 1px solid #bcbcbc;
    margin-bottom: 20px;
}

/* Filter Panel */
.filter_modal .section_container {
	padding: 20px 0 5px;
    border-bottom: 1px solid #bcbcbc;
    margin-bottom: 20px;
}
.filter_column_headings {
    display: flex;
    gap: 0px;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 10px;
	font-size: 1.4em;
    padding: 5px 10px;
}
/* keep the text from touching the divider */
.filter_column_headings > div {
  position: relative;
  padding-right: 22px; /* 10px offset + a little breathing room */
}

/* add a 1px vertical divider on the first two only */
.filter_column_headings > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #fff;          /* matches your blue header’s white text */
  right: 10px;               /* <-- move the line 10px left from the edge */
}
div#filter_field_name {
    flex: 1;
}
div#filter_query_txt {
    flex: 2;
	width: 100%;
}
div#filter_paramter_select {
    flex: 1;
	width: auto;
}
.filter_div{	
	display: flex; 
	gap:0px; 
	align-items: center;
	margin-bottom:10px;margin-left:10px;
}
.filter_field_name {
    flex: 1;
}
.filter_query_txt {
    flex: 2;
	width: 100%;
}
.filter_paramter_select {
    flex: 1;
	width: auto;
}


/*.variant {
		  width: 100%;
		  table-layout: fixed;
		}
		.variant th, .variant td {
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		}
		
		.variant th {
		  white-space: normal;
		  overflow: visible;
		  text-overflow: unset;
		  word-wrap: break-word;
		  padding: 8px;
		  min-width: 90px; /* Adjust as needed 
		  font-size: 12px;
		  text-align: left;
		  vertical-align: middle;
			}*/
.form-switch .form-check-input {
	width: 80px;
	height: 40px;
	appearance: none;
	position: relative;
    cursor: pointer;
    outline: none;
    transition: background 0.3s;
    vertical-align: middle;	
	background-image: url("/img/circle.svg");
	background-position: left center;
	border-radius: 2em;
	transition: background-position .15s ease-in-out;
}

.form-check-input:checked[type=checkbox] {
	background-image: url("/img/whitecircle.svg");
	background-position: right center;
}

.form-check-input {
	width: 1em;
	height: 1em;
	margin-top: .25em;
	vertical-align: top;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: 1px solid rgba(0, 0, 0, .25);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
}

.form-check-input:checked {
	background-color: #0d6efd;
	border-color: #0d6efd;
}

.form-check {
	margin: 5px 24px;
}

.fa-chevron-down {
	font-size: 16px;
	color: blue; /* Default color for down */
	transition: color 0.3s ease, transform 0.3s ease;
	padding: 10px;
	background-color: #b8d9ed; /* Light blue background */
	border-radius: 50%; /* Makes it circular */
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa-chevron-up {
	font-size: 16px;
	color: red; /* Default color for down */
	transition: color 0.3s ease, transform 0.3s ease;
	padding: 10px;
	background-color: #edb8b8; /* Light blue background */
	border-radius: 50%; /* Makes it circular */
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.select2-search--inline .select2-search__field {
	width: 330px !important;
}

#filter_fields {
	margin-right: 100px;
}

.div-hr {
	border: 0;
	border-top: 1px solid #6c757d;
	margin-top: 25px;
}

.select2-container .select2-dropdown {
	display: block !important;
	max-height: 300px;
	overflow-y: auto;
}

.attributeNamesContainer {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.attribute-item {
	padding-top: 15px;
}

.no-edit {
	color: #808080;
	pointer-events: none; /* Disable clicking */
	cursor: not-allowed;
}

.modal-sm .modal-footer {
	display: flex;
	justify-content: flex-end; /* Align buttons to the right */
	flex-wrap: wrap; /* Allow buttons to wrap if space is limited */
}

.modal-sm {
	max-height: 100vh;
	overflow-y: auto;
}

.exampleModal {
	width: 800px !important;
}

#allcategories_modal, #allbrand_modal, #alltaxclass_modal,
	#alltype_modal, #allvisible_modal, #table_parameter {
	padding: 10px;
	width: 400px !important;
}
.bulk_updatemodal{
	padding: 10px;
	width: 400px !important;
}
#category-info{
	padding: 10px;
	width: 600px !important;
}


td.readonly {
	color: #999;
	pointer-events: none; /* Prevent clicking or interaction */
}

.div_align {
	width: 55%;
	padding-right: 14px;
}
/* Toolbar container */
.toolbar {
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: #f4f4f4;
	border-bottom: 1px solid #ccc;
	border: 1px solid #ccc;
	justify-content: space-between;
}

.right_toolbar {
    margin-left: auto;   /* ensures it hugs the right */
    text-align: right;   /* right-align text inside */
    display: flex;       /* keep totals + button inline */
    gap: 10px;           /* space between totals and button */
    align-items: center; /* vertically center them */
}
.total_products_import span,
.total_last_import span {
	font-weight: bold;
}

/* Toolbar button styles */
.toolbar button {
	/* border: 1px solid #007bff; */
	color: white;
	padding: 8px 12px;
	margin: 0 5px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

.variant_fontcolor {
	color: #9b9393;
	font-size: 13px;
}

.tablefontsize {
	font-size: 13px;
}

.cell-content {
	white-space: normal;
	word-break: break-word;
}

.description-cellContent {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.option-cellContent {
     white-space: pre-line;    /* allows wrapping */
    overflow: visible;     /* let content expand normally */
    text-overflow: unset;  /* disable ellipsis */
    word-break: break-word; /* (optional) breaks long words to fit */
}


/* Thead text alignment */
th.td_sku div,
th.td_type div,
th.td_price div,
th.td_sale_price div, 
th.td_inventory_level div,
th.td_availability div,
th.td_retail_price div {
    text-align: center;
}
th.th_Sort_Id {
    font-size: 0;
    line-height: 6px;
}
th.th_Sort_Id::before, th.th_Sort_Id::after, th.th_Sort_Id input {
    font-size: initial;
}
th[column="sku"],
th[column="type"],
th[column="price"],
th[column="sale_price"],
th[column="weight"],
th[column="inventory_level"],
th[column="availability"],
th[column="retail_price"],
th[column="is_visible"] {
  text-align: center !important;
}


/* Thead fixed columns color fix */
table.dataTable thead tr>.dtfc-fixed-left, table.dataTable thead tr>.dtfc-fixed-right, table.dataTable tfoot tr>.dtfc-fixed-left, table.dataTable tfoot tr>.dtfc-fixed-right {
	background-color: revert !important;
}
/* Datatable column Alignment */
td.td_type,
td.td_inventory_level,
td.td_availability {
    text-align: center;
}
td.td_price,
td.td_sale_price,
td.td_retail_price {
    text-align: right;
}

/* Icon and text alignment */
.toolbar button i {
	/* margin-right: 5px; */
	
}

/* Hover effect */
.toolbar button:hover {
	background-color: #0056b3;
	border-color: #d9033400;
}

/* Optional: Set border style for clarity */
.dataTable {
	border: 1px solid #ccc;
	border-collapse: collapse; /* Ensures no extra spacing around cells */
}

 .dataTables_scrollBody {
	background-color: white;
	overflow-x: auto;
}

/* Optional: Adjust header and footer if needed */
.dataTables_wrapper .dataTables_scrollHead, .dataTables_wrapper .dataTables_scrollFoot
	{
	background-color: white;
	
}

#bigcomdata_wrapper {
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    /* max-height: calc(100vh - 410px) !important; */
}
div#bigcomdata_wrapper {
    overflow: visible;
}



/* Style the buttons container */
.dt-buttons {
	display: flex;
	gap: 10px; /* Adds space between each button */
	margin-right: 10px;
	/* Optional: Adjusts spacing on the right of the button group */
}

/* Style for individual buttons */
.dt-button {
	/* Bootstrap primary color */
	color: #fff;
	border: 1px solid #007bff;
	padding: 5px 10px;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.dt-button:hover {
	background-color: #0056b3; /* Darker shade for hover */
	border-color: #0056b3;
	color: #fff;
}

.dt-button:focus {
	outline: none;
	box-shadow: 0 0 3px rgba(0, 123, 255, 0.5); /* Light blue focus ring */
}

.buttons-excel, .buttons-csv, .buttons-copy, .buttons-print {
    font-weight: normal !important;
}

/* Optional: Style for disabled buttons */
.dt-button.disabled {
	background-color: #e0e0e0;
	border-color: #d0d0d0;
	color: #999;
	cursor: not-allowed;
}

.columns {
	margin-right: 5px;
	background: #ffffff;
	padding: 5px 10px;
	text-align: center;
	border: 2px solid #ebe0e0;
	border-radius: 10px;
}

.unsel_columnsContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 10px;
}

.attribute-item_settings {
	width: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.div-attribute {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	margin-bottom: 10px;
}

.toggle-column_sel {
	margin-right: 10px;
}

.margin {
	margin-top: 20px;
	margin-left: 20px;
}

.topmargin {
	margin-top: 25px;
}

.bottommargin {
	margin-bottom: 25px;
}

.left_padding {
	padding-left: 25px;
}

.input_padding {
	padding-left: 25px;
	padding-right: 25px;
}

.toggle-column_ex {
	margin-left: 5px;
}
.attribute-item_settings.columns label {
    margin-bottom: 0;
    font-size: 1.3em !important;
}

.btndeletemodal {
	margin: 10px;
}

.active {
	/*font-weight:bold;*/
	
}

.modal-content {
	/*width:700px !important;*/
	
}

.dataTable, .dataTable th, .dataTable td {
	border-color: #ccc; /* Adjust this grey shade as needed */
}

#users_wrapper {
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
}

.subscription-page {
	font-family: Arial, sans-serif;
	padding: 20px;
}

.profile-header {
	text-align: center;
	margin-bottom: 20px;
}

.tabs {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
}

.tab {
	padding: 10px 20px;
	border: none;
	background-color: #f1f1f1;
	cursor: pointer;
}

.tab.active {
	background-color: #007bff;
	color: #fff;
}

.subscription-section, .payment-methods, .payment-history {
	border: 1px solid #ddd;
	padding: 20px;
	margin-bottom: 20px;
}

.plan-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.plan-info p {
	margin: 5px 0;
}

.plan-actions button {
	margin: 5px;
	padding: 10px 15px;
	border: none;
	color: #fff;
	cursor: pointer;
}

.cancel-btn {
	background-color: #ff4b5c;
}

.change-btn {
	background-color: #28a745;
}

.enable-btn {
	background-color: #C0C0C0;
}

.add-payment-method-btn {
	background-color: #A0A0A0;
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
}

#subscriptionbtn {
	background-color: #0f619f;
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
}

#subscribe {
	background-color: #0f619f;
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
}

#table_plan {
	width: 100%;
	border-collapse: collapse;
}

.css_plan {
	border: 1px solid #ddd;
	padding: 12px;
	text-align: left;
}

.heading {
	background-color: #f4f4f4;
}

.subscription-page {
	font-family: Arial, sans-serif;
	padding: 20px;
}
.plan-toggle-con {
    margin: 0 24px;
}


.plan-card input[type="radio"] { position: absolute; opacity: 0; }
.plan-card input[type="radio"]:checked~.plan_head {
	background: linear-gradient(90deg, #007bff, #00bfff);
	color: #fff;
}
.plan-card input[type="radio"]:checked~.plan-price {
	font-size: 1.3rem;
	font-weight: bold;
	color: #007bff;
}
.plan-card input[type="radio"]:checked~.checkmark { display: block; }
.checkmark {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: #00ff7b;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 5px rgb(0 121 22 / 20%);
}
.toggle-label {
    cursor: pointer;
    transition: color 0.3s;
    font-size: 2.25em;
    font-weight: bold;
}
.toggle-label.active { color: #424242; }
.plan-card input[type="radio"]:checked~.plan_head {
	background: linear-gradient(90deg, #007bff, #00bfff);
	color: #fff;
}
.plan-card input[type="radio"]:checked~.plan-price {
	font-size: 1.3rem;
	font-weight: bold;
	color: #007bff;
}


.plan-card {
	border: 2px solid #ddd;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	padding: 0px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	font-size: 16px;
}
.plan_head {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(90deg, #1e90ff, #00bfff);
        border-radius: 5px 5px 0 0;
    }
.plan_head h4 {
    margin-bottom: 0;
    font-size: 2.1em;
    margin-top: 0;
    color: #ffffff;
	font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}

.plan-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 10px;
}

.plan-price, .trial-price h4, .monthly-price h4, .yearly-price h4 {
	font-size: 2rem;
	font-weight: 700;
	color: #222222;
	padding-top: 8px;
}
h4 span.card_termLength {
    font-size: 23px;
}
p.plan_footer {
    text-align: left;
    padding: 10px 20px;
}
.plan_features {
	display: inline-block;
	text-align: left;
	margin-bottom: 1rem;
	padding-left: 15px;
}

.subscribe-btn {
	color: #fff;
	padding: 10px 15px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
}

.subscription-card {
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid #ddd;
	transition: 0.3s;
}

.subscription-card:hover {
	border-color: #007bff;
	background-color: #f8f9fa;
}

input[type="radio"] {
	display: none;
}

input[type="radio"]:checked+label {
	border: 2px solid #3d3b3b;
	background-color: #fff5f5;
	border-radius: 8px;
}


/* New Account Register Account Page */
.register_page_header {
	background-color: #fff;
}
.row.register_plan_con {
    margin: 50px 0 60px 0;
}
.registerCon {
	padding: 50px 24px;
}
.register-left {
	align-self: stretch;       /* overrides the container’s align-items */
    margin-top: 50px;
	flex-direction: column;
	justify-content: center;   /* vertical centering */
	align-items: center;       /* horizontal centering of the block, text still centered */
	text-align: center;
}
img.registerLogo {
    width: 300px;
	margin-right: 40px;
}
.registerWelcomeTxt {
    font-size: 1.4em;
    margin: 40px 50px 40px 20px;
}
.registerHr_con {
	text-align: center;
	margin: 40px 0 30px;
}
.registerHr {
    border: 1px solid #e1e0e0;
    margin: auto;
    width: 50%;
}

/* --- Layout: left/right columns via CSS Grid --- */
.registerCon { padding: 1.25rem; } /* keeps the card comfy */

.register-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  column-gap: 2.5rem;
  row-gap: 1.25rem;
  align-items: stretch;
  min-height: 100vh;
}
*, *::before, *::after { box-sizing: border-box; }

/* Make sure media & iframes don't overflow */
.register-left img,
.register-right-inner img,
.register-right-inner iframe,
.register-right-inner .StripeElement {
  max-width: 100%;
  width: 100%;
  height: auto;
}

@media (max-width: 992px) {
  .register-grid {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    min-height: auto;         /* don't force a tall section on mobile */
  }

  /* Make the left column start near the top on mobile (not “too far down”) */
  .register-left {
    justify-content: flex-start;  /* no vertical centering on small screens */
    align-items: center;
    margin-top: 0;                 /* remove any extra top offset */
  }

  /* Neutralize Bootstrap .row negative margins inside the right column ONLY */
  .register-right-inner .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Also reduce column padding so content fits neatly */
  .register-right-inner [class^="col-"],
  .register-right-inner [class*=" col-"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: 100%;                 /* ensure they don't try to be wider than the column */
    max-width: 100%;
  }

  /* Inputs should never overflow */
  .register-right-inner .form-control {
    width: 100%;
    max-width: 100%;
  }

  /* Plan cards: stack cleanly, fill column, no overflow */
  .plan-cards {
    /* if you want a tidy stack, switch to grid on mobile */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .plan-cards .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .plan-card {
    display: block;
    width: 100%;
    max-width: 100%;
    /* ensure inner padding + borders don’t overflow */
    box-sizing: border-box;
  }

  /* Long price lines / headings shouldn’t push width */
  .plan-card h4,
  .plan-card .plan-price,
  .plan-card .plan_features,
  .plan-card .plan_footer {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Stripe element wrapper should be fluid */
  #card-element {
    width: 100%;
    max-width: 100%;
  }

  /* Optional: shrink big gaps on small screens */
  .billing-toggle { margin-bottom: 1rem !important; }
  .registerHr_con { margin: 1rem 0 !important; }

  .register-right-inner {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* stops any sneaky horizontal scroll from inner rows */
    padding-inline: 0;  /* we’ll neutralize rows instead of adding padding here */
  }


}

/* --- Tabs header --- */
.registerTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 50% / 50% */
  border-bottom: 1px solid #e5e7eb;   /* subtle divider */
  margin-bottom: 1.5rem;
}

.registerTab {
  position: relative;
  padding: 0.75rem 1rem;
  text-align: center;          /* center tab text */
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: #6b7280;              /* muted by default */
}

.registerTab.active {
  color: #111827;              /* darker when active */
}

.registerTab.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;                /* sits on divider line */
  height: 4px;                 /* 4px indicator */
  width: 100%;
  background: #007bff;         /* brand blue */
  border-radius: 2px 2px 0 0;
}

/* --- Panels --- */
.tab-panel { display: block; }
.tab-panel.is-hidden { display: none; }

/* Right column internal spacing */
.register-right-inner { padding-top: .25rem; }




@media (max-width: 768px) {
  .register-grid {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}

@media ( max-width : 768px) {
	.top {
		flex-direction: column;
		align-items: flex-start; /* Stack elements vertically */
	}
	.dt-buttons {
		margin-top: 10px;
		margin-bottom: 10px;
		width: 100%; /* Make buttons stack or take full width */
	}
	.dataTables_filter, .dataTables_length {
		margin-bottom: 10px;
		/* Add margin between search and length selectors */
		width: 100%; /* Make the input and select elements take full width */
	}
	.container {
		max-width: 900px;
		padding: 0rem;
	}
	div.dataTables_wrapper div.dataTables_filter label {
		font-weight: normal;
		/* white-space:nowrap; */
		text-align: left;
		/* width: 30%; */
	}
}

#attributeNamesContainer {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two equal-width columns */
	gap: 5px; /* Space between grid items */
}

.attribute-item {
	/* class name already exists and in use for checkboxes in User Preferences*/
	/*width: 50%; /* Each item takes up half the width for two columns 
		    box-sizing: border-box;*/
	
}

.thead-background {
	background-color: #7393B3;
}

.dataTable tbody tr:nth-child(even) {
	/* background-color: #c6e2ff;  Choose your desired light color */
	
}

#logTable_wrapper {
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
}

.label_css {
	margin-left: 10px;
	font-weight: bold;
	font-size: 15px;
}

/*.container-fluid, .container-lg, .container-md, .container-sm,
	.container-xl {
	width: 100%;
	padding-right: .75rem;
	padding-left: .75rem;
	margin-right: auto;
	margin-left: auto
}*/

#tickets_wrapper {
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
}
.reimport{
	margin-left: auto;
}

.label_css {
	margin-left: 10px;
	font-weight: bold;
	font-size: 15px;
}

.lblfontsize {
	font-size: 20px;
}



@media ( min-width :992px) {
	.container, .container-lg, .container-md, .container-sm {
		max-width: 100vw;
		padding: 0rem;
	}
	#tbl_bigcomdata, #table_users {
		max-height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

@media ( min-width :1399px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 100vw;
		padding: 0rem;
	}
	#tbl_bigcomdata, #table_users {
		max-height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

@media ( max-width : 576px) {
	.top {
		padding-left: 10px;
		padding-right: 10px;
	}
	.dataTables_length select {
		width: 100%; /* Make the "entries" select dropdown take full width */
	}
	.container {
		max-width: 100vw;
		padding: 0rem;
	}
	#tbl_bigcomdata, #table_users {
		max-height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
	div.dataTables_wrapper div.dataTables_filter label {
		font-weight: normal;
		/* white-space:nowrap; */
		text-align: left;
		/* width: 30%; */
	}
}

.nav-tabs {
	border-right: 1px solid #ddd; /* Add a vertical separator */
}

.nav-link {
	text-align: left; /* Align text for better readability */
}

.tab-content {
	padding-left: 15px; /* Space between tabs and content */
}