html, body {
	background-color: rgb(237, 239, 240) !important; /*rgb(237, 239, 240) !important;*/
	min-height: 100%; /* Ensures body is at least the viewport height */
}

label {
	font-size: 0.9rem;
}

@font-face {
  font-family: 'Courgette';
  src: url('/assets/fonts/Courgette-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


.courgette-text {
  font-family: 'Courgette', cursive;
}

img {
    max-width: 100%;
}

@media (max-width: 991.99px) {
	.logo__img {
		max-width: 90%;
	}
}

.page-header img {
	height: 50px !important;
    position: absolute;
    right: 5px;
    top: 0.9rem;
}

@media (max-width: 991.99px) {
	.page-header img {
		height: 45px !important;
		top: 1rem;
	}
}

/* xxxxxl+ */
@media (min-width: 1642px) {	
	.sidebarcard {
		width: 275px !important;
	}
}

/* xxxxl+ */
@media (min-width: 1600px) and (max-width: 1641.99px) {
	.dash-1 {
		padding-bottom: clamp(10.5vw, 11.5vw + 1rem, 12rem);
	}
	
	.sidebarcard {
		width: 260px !important;
	}
}

/* xxxl */
@media (min-width: 1500px) and (max-width: 1599.99px) {
	.sidebarcard {
		width: 235px !important;
	}
}

/* xxl+ resolution bar top-bar adaptation */
@media (min-width: 1400px) {
	.dash-1 {
		padding-bottom: clamp(10.5vw, 11.5vw + 1rem, 12rem);
	}
}

.sidebarcard {
	width: 227px;
}

#sidebarholder .sidebarnav .nav-link {
	font-size: 14px; /* Set the desired font size */
	transition: all 0.3s ease; /* Smooth transition for hover effects */
	padding-bottom: 5px;
	cursor: pointer;
}

#sidebarholder .sidebarnav .nav-link i {
    vertical-align: -3.4px;
    font-size: 20px;
}

/* Active link styles */
#sidebarholder .sidebarnav .nav-link.active {
	color: #7feafb !important;
	font-weight: 500 !important;
}

/* Change the color of nav links on hover */
.nav-link:hover {
	color: #7feafb !important;
}
.nav-link2:hover {
	color: #000 !important;
	font-weight: 500 !important;
}

/* Submenu styles */
#sidebarholder .sidebarnav .submenu {
	transition: all 0.3s ease;
	padding-left: 35px;
	font-weight:400;
}

#sidebarholder .sidebarnav .submenu .nav-link {
	font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    padding-left:30px;
    font-weight:400;
}

.submenudropdownicon {
	font-size:15px !important;
	vertical-align:middle !important;
}

/* toggling sidebar on smaller screens */
@media (max-width: 1399.99px) {
	#toggleSidebar {
		display: block !important;
        border: none;
        position: absolute;
        top: 315px;
        left: 0;
        z-index: 1050;
        padding: 0.5rem 0.5rem;
        min-height: 10px;
		pointer: cursor;
	}
	
	#toggleSidebar:hover {
		color: #4dbed0 !important;
	}
	
	#sidebarclosebtn {
		display: block !important;
		padding: 5px;
		position: absolute;
		color: #fff;
		right: 0;
		top: 0;
		font-size: 25px;
		cursor: pointer;
		border: 2px solid #313738;
		border-radius: 3px;
	}
	
	#sidebarclosebtn:hover {
		color: #4dbed0 !important;
	}
	
	/* open sidenav settings */
	.mobilenavcontaineropen {
		display: none !important;
	}
	
	.sidebarcardopen {
		transition: transform 0.3s ease;
	}
	
	.navcontaineropen {
		display: flex !important;
		transition: all 0.3s ease;
	}
	
	.navholderopen {
		transition: all 0.3s ease;
		position: absolute !important;
		top:255px;
		left:-15px;
	}
}

/* Submenu Dropdown */
/* Hide the submenu by default */
.submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Make the checkbox invisible */
.dropdown-checkbox {
    display: none;
}

/* Show the submenu when the checkbox is checked */
.dropdown-checkbox:checked + .dropdown-toggle + .submenu {
    display: block;
}


.specialcontainer {
	max-width:100%;
	padding: 0 25px;
}

@media (max-width: 1299.99px) {
	.specialcontainer {
		margin-bottom:15px;
	}
}

.content {
      min-height: calc(100vh - 50px);
      box-sizing: border-box; /* Ensure padding doesn't affect height */
}

.nav-link i {
	vertical-align:middle;
}

@media (max-width: 992px) {
	#primaryMenu .nav-link {
		font-size: small !important;
	}
	
	#primaryMenu .nav-link i {
		font-size: large !important;
	}
}

@media (min-width: 350px) and (max-width: 992px) {
	#primaryMenu .navbar-nav {
		flex-direction:row;
		float:right;
		margin-top:10px;
	}
}

.navbar-toggler {
	/*background-color: rgb(201 201 201);*/
    border: 1px solid rgb(171 168 168 / 85%);
}

@media (min-width: 0px) {
    .contain-sub-1__content {
        width: 225px;
        max-height: none;
        overflow-y: unset;
        display: block;
        position: absolute;
        top: calc(100% + 1rem);
        left: 0;
		z-index: 3;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        -webkit-box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    }
}

.contain-sub-1__title {
	line-height:0.95;
}

.contain-sub-1__content.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.navbar-overlay {
	position: absolute;
}

.form-label {
	font-size: 14px;
	margin-bottom: .5rem;
}

#maindisplay {
	margin-top: -160px;
}

#agent_name {
	background-color: rgba(47, 120, 139, 0.5);
	border-radius: 20px; 
	padding: 10px 15px 10px 20px; 
	max-width:fit-content; 
	float: right;
}

/*----- Global Loader -----*/
#global-loader {
  position: fixed;
  z-index: 50000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f2f6f9;
  margin: 0 auto;
  text-align: center; }
  #global-loader i {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 45%;
    margin: 0 auto;
	scale: 2;
    font-size: 20px; }
	
/*----- Local Loader -----*/
#local-loader {
  position: fixed;
  z-index: 50000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f2f6f9;
  margin: 0 auto;
  text-align: center; }
  #local-loader i {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 45%;
    margin: 0 auto;
	scale: 2;
    font-size: 20px;}
	
/*----- Process Loader -----*/
#process-loader {
  position: fixed;
  z-index: 50000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f2f6f9;
  margin: 0 auto;
  text-align: center; 
  opacity:0.5; }
  #process-loader i {
    position: absolute;
    left: 49.5%;
    right: 0;
    text-align: center;
    top: 45%;
    scale: 2;
    font-size: 20px; }

/*------ Custom Default -------*/
.loader {
  border: 2px solid #ffffff;
  border-top: 2px solid #000000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: inline-block;
  margin: 1rem 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease; }
  .loader.animate {
    opacity: 1; }

.stickytoast {
	position: fixed;
	top: 0;
	right: 0;
	margin:20px;
	z-index:9999;
}

.ml-1 {
    margin-left: 0.312rem!important;
}

.mr-1 {
    margin-right: 0.312rem!important;
}

.ml-2 {
    margin-left: 0.625rem!important;
}

.mr-2 {
    margin-right: 0.625rem!important;
}

.ml-3 {
    margin-left: 1.25rem!important;
}

.mr-3 {
    margin-right: 1.25rem!important;
	line-height: 1.374rem;
}

.ml-4 {
    margin-left: 1.875rem!important;
}

.mr-4 {
    margin-right: 1.875rem!important;
}

.ml-5 {
    margin-left: 2.600rem !important;
}

.mr-5 {
    margin-right: 2.600rem !important;
}

.ml-6 {
    margin-left: 3.675rem !important;
}

.mr-6 {
    margin-right: 3.675rem !important;
}

.ml-7 {
    margin-left: 4.025rem !important;
}

.mr-7 {
    margin-right: 4.025rem !important;
}

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

/* Style for the custom tooltip */
.custom-tooltip {
  background-color: #fff;
  color: #000;
  padding: 8px; /* Adjust padding as needed */
  font-size: 12px; /* Adjust font size as needed */
  position: absolute; /* Use absolute positioning */
  z-index: 1002; /* Adjust the z-index to ensure the tooltip appears above other elements */
  border: 1px solid #000;
  border-radius: 5px;
  display: none; /* Hide the tooltip initially */
  margin-top: 20px;
  max-width: 290px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.form-control {
  border-color: rgb(224, 224, 224);
  background-color: rgb(247, 247, 247)
}

.form-control:disabled {
    opacity: .9;
}

.form-select {
   border-color: rgb(224, 224, 224);
   background-color: rgb(247, 247, 247)
}

.form-select:disabled {
	opacity: .5;
}

.selectreadonly {
	opacity: .5;
	cursor: not-allowed; /* Change cursor to indicate it's not selectable */
	pointer-events: none; /* Disable pointer events to make it non-interactive */
}

.controlnavmenu {
	color: #fff !important;
    background-color: rgba(255,255,255,0.1) !important;
}

.copyclipboard {
	cursor:pointer;
	border-bottom: 1px solid #000;
    border-bottom-style: dashed;
	max-width: fit-content;
}

.copyclipboardinactive {
	pointer-events: none !important;
	border-bottom: 0 !important;
}

.censored {
	-webkit-text-security: disc;
    text-security: disc;
	letter-spacing: 2px;
}

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 52%;
    right: 5px; /* Adjust as needed */
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
	font-size: smaller;
}

.password-text {
	padding-right: 32px;
}

.password-toggle {
	cursor:pointer;
}

#2faqrcode {
	width: 210px !important;
    height: 210px !important;
    margin: auto !important;
	color: #000 !important;
    background: #fff !important;
	border-radius: 3px !important;
    padding: 5px !important;
    margin-bottom: 10px !important;
}

.border-grey {
    border-color: #d5d5d5;
}

.mh-cardcontainer {
	min-height:850px;
}

.nav-tabs .nav-link.active {

border-color: #dcddde !important;
border-top-right-radius: 20px !important;
border-top-left-radius: 20px !important;
background-color:#4dbed0 !important;
color: #fff !important;	
/*padding: 12px !important;
font-size: 14px;*/
}

.nav-tabs .nav-custom {

border-color: rgb(237, 239, 240) !important;
border-width: 1px;
border-top-right-radius: 18px !important;
border-top-left-radius: 18px !important;
background-color:rgb(237, 239, 240) !important;
color: #000 !important;	
padding: 12px !important;
font-size: 14px;
margin-right: 2px;
margin-bottom: 24px;
margin-left: 0px;
}
.nav-tabs .nav-custom2 {

border-color: #dcddde !important;
border-width: 1px;
border-top-right-radius: 18px !important;
border-top-left-radius: 18px !important;
background-color:#e7eaeb !important;
color: #000 !important;	
padding: 12px !important;
font-size: 14px;
margin-right: 2px;
margin-bottom: 24px;
margin-left: 0px;
}



.card .border-custom {
border-color: rgb(221, 223, 223) !important;
border-top-right-radius: 20px;
border-top-left-radius: 0px;
border-bottom-right-radius: 20px;	
border-bottom-left-radius: 20px;	
background-color:#f6f7f7;
}

.card .border-custom2 {
border-color: rgb(221, 223, 223) !important;
border-top-right-radius: 20px !important;
border-top-left-radius: 0px !important;
border-bottom-right-radius: 20px !important;
border-bottom-left-radius: 20px !important;
background-color:#fafafa;
}

.card .border-cus1 {
border-color: rgb(221, 223, 223) !important;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;	
border-bottom-left-radius: 20px;	
background-color:#f6f7f7;
}

.card-header {
	/*overflow:auto;*/
}
	
.card-body {
	overflow:auto;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1000;
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    width: 200px;
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s;
}

/* Arrow pointing up */
.tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.modal {
    z-index: 1050 !important; /* Ensure it's above the overlay */
	max-width: -webkit-fill-available;
    max-height: -webkit-fill-available;
	top: 0;
}
.modal-backdrop {
    z-index: 1040 !important; /* Ensure backdrop is behind the modal */
}

.rounded-2{
	border-radius: 20px !important;
}

.rounded-3{
	border-radius: 30px !important;
}

.rounded-25{
	border-radius: 25px !important;
}

.rounded-50{
	border-radius: 50px !important;
}

.modal-body {
	overflow:auto;
}

.modal-content {
	border-radius: 20px !important;
}

.progress {
	border-radius: 20px !important;
	margin: auto 0;
}

.iconhoveraction {
	cursor:pointer !important;
}

/* Set a fixed width for the day buttons and add break buttons */
#customTimesList .btn[data-day], 
#customTimesList .btn-break-toggle {
  width: 175px; /* Adjust width as needed */
  min-width: 65px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

/* Set height for time input fields to match button height */
#customTimesList .start-time, 
#customTimesList .end-time, 
#customTimesList .break-start-time, 
#customTimesList .break-end-time,
#customTimesList .selectreadonly {
  height: 38px !important; /* Match the button height */
}

/* Safari-specific fix */
@supports (-webkit-touch-callout: none) {
  .dropdown-menu {
    transform: translateY(0); /* Stops Safari layout shift */
  }
}
#notificationCount {
    transform: translate(-35px, 0px) scale(0.8);
}

.notification-item:hover {
  background-color: #f0f0f0; /* Light grey */
}

#topMenuDropdown.dropdown-panel {
    position: absolute;
    top: 0; /* will be repositioned by JS near the hamburger */
    left: 0;
    min-width: 220px;
    background: #fff; /* matches dark header vibe */
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 1055;
	max-width: min(92vw, 320px);
	width: max-content;
	box-sizing: border-box;
  }
  #topMenuDropdown .dropdown-item {
    color: #fff;
  }
  #topMenuDropdown .dropdown-item:hover,
  #topMenuDropdown .dropdown-item:focus {
    background: rgba(255,255,255,0.08);
    color: #fff;
  }
  /* Ensure nav relative positioning for absolute dropdown */
  .specialcontainer { position: relative; }
  @media (min-width: 992px) {
    /* keep behavior consistent on desktop: still a dropdown menu */
  }
  



/* Centered, scrollable stage area */
.handset-stage-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  max-height: 70vh;
  padding: 6px 0;
}

/* Column keeps stage + nav centered, fixed width */
.handset-stage-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 500px; /* lock with stage width */
}

/* Fixed-size stage – gets exact height from JS, never resizes */
.handset-stage {
  position: relative;
  width: 500px !important;
  height: 500px; /* JS overwrites per model */
  user-select: none;
  margin: 0 auto;
}

/* Base handset image (no border) */
.handset-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: .5rem;
  z-index: 1;
  opacity: 1;
}

/* Per-page visual overlay (page numbers/graphics) */
.handset-page-overlay {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
}

/* Hotspot button overlay (click target over each physical key) */
.handconfbtn {
  position: absolute;
  z-index: 4;
  cursor: pointer;
  /*background-color: #6d92ff80;*/
  background-color: transparent;
  border: 0;
  border-radius: 5px;
}

/* Label/display chip (icon + text). Fully positioned/sized from JS. */
.key-label {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  /*background: #c4005a;*/
  color: #fff;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  padding: 2px;
  width: 70px !important;
  height: 19px !important;
  /*box-shadow: 0 1px 2px rgba(0, 0, 0, .25);*/
}
.key-label img { width: 22px; height: 22px; }
.key-label span {
  font-size: 12px;
  font-weight: 600;
  font-family: "Arial Narrow", Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Unconfigured label slots: faint background so placement stays visible */
.key-label.unset { /*background: #c0648e;*/ }

/* Loading chip inside stage */
.handconfloading{
  position:absolute; z-index:6; top:47%; left:50%; transform:translateX(-50%);
  width:120px; border-radius:6px; padding:10px 12px; background:rgba(0,0,0,.70);
  color:#fff; text-align:center; font-size:13px;
}

/* Page nav (centered under image) */
.handset-page-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.page-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background: #4dbed0;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}
.page-dot:hover { background: #0396ad; }
.page-dot.active { background: #0dcaf0; }

/* Headings/helpers */
.section-title { font-weight: 600; color: #111827; margin: 0; }
.subtle { color: #6b7280; }
.accordion-button { font-weight: 700; }
.hr-strong { border: 0; height: 2px; background: #e5e7eb; }
.hr-sep    { border: 0; height: 1px; background: #e5e7eb; }

.modal-body-tight { padding: 12px 16px; }

/* Debug guides (toggle via BLF.setGuides(true)) */
.show-guides .handconfbtn  { outline: 2px dashed rgba(255,255,255,.6); }
.show-guides .key-label    { outline: 2px dashed rgba(0,0,0,.35); }

/* Make all nav-tabs horizontally scrollable if content overflows */
.nav-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  min-width: 0;       /* ensures scrolling works inside flex containers */
  flex: 1 1 auto;     /* allows the tabs to expand and shrink properly */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) transparent;
}

/* Prevent tab items from wrapping or shrinking */
.nav-tabs .nav-item {
  flex: 0 0 auto;
}

/* Prevent tab text from breaking into multiple lines */
.nav-tabs .nav-link {
  white-space: nowrap;
}

/* Scrollbar styling (optional, looks cleaner) */
.nav-tabs::-webkit-scrollbar {
  height: 6px;
}

.nav-tabs::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

/* Mobile layout: move button above tabs and remove spacing */
@media (max-width: 1067.98px) {
  .row > .col-12.d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  /* Move the button above tabs */
  .row > .col-12.d-flex > div {
    order: -1;
    margin-top: 0 !important;     /* override your inline margin */
    margin-bottom: 0.5rem;        /* small breathing room below button */
    display: flex;
    justify-content: flex-end;    /* keep it right-aligned; change to center if desired */
  }

  .nav-tabs {
    border-top: none;
  }
  
  .justify-content-between.align-items-center .btn {
    font-size: 10px !important;
  }

  h6 {
    font-size: 85%;
  }
  
  .fs-36 {
	font-size:30px;
  }
  
  .fs-34 {
	font-size:30px;
  }
  
  .fs-32 {
	font-size:30px;
  }
}

/* Small screens: reduce page title font size */
@media (max-width: 767.98px) {
  .card-header h5 {
    font-size: 16px !important;
  }
  
  h6 {
    font-size: 80%;
  }
  
  .fs-36 {
	font-size:26px;
  }
  
  .fs-34 {
	font-size:26px;
  }
  
  .fs-32 {
	font-size:26px;
  }
  
  .nav-tabs .nav-custom {
    margin-bottom: 24px !important;
  }

  .justify-content-between.align-items-center .btn {
    font-size: 10px !important;
	width:100%;
	max-width: fit-content;
	max-height: fit-content;
  }

  /* Shrink "What happens..." text on small screens */
  .responsive-title {
    font-size: 12px !important;
  }
  
  /* Stack search and buttons vertically */
  .card-header.d-flex.justify-content-between.align-items-center {
    flex-direction: row;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  /* Full-width search bar */
  .card-header .form-control {
    max-width: 100% !important;
	width: fit-content !important;
  }

  /* Keep buttons side-by-side, right aligned */
  .card-header .d-flex.gap-2 {
    justify-content: flex-end;
    width: 100%;
    flex-wrap: nowrap;
  }
  
  /* Stack the text and button vertically */
  .border.intbg.d-flex.justify-content-between.align-items-center {
    /*flex-direction: column;*/
    align-items: stretch !important;
    text-align: left;
    gap: 0.75rem;
  }

  /* Keep the text full width */
  .border.intbg.d-flex.justify-content-between.align-items-center span {
    width: 100%;
    margin-left: 0 !important;
	text-wrap: auto;
  }

  /* Make the button align right but on its own line */
  .border.intbg.d-flex.justify-content-between.align-items-center > div {
    width: auto;
    display: flex;
    justify-content: flex-end;
  }
  
  .border.intbg.rounded-2.mt-2.p-3.d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
    text-align: left;
  }

  .border.intbg.rounded-2.mt-2.p-3.d-flex > div {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  
  .modal {
	left:0;
  }
  
  .fs-14 {
    font-size: 12px !important;
  }
  
  .card-header.header-background.d-flex {
	  flex-wrap: nowrap !important; /* prevent wrapping */
	}

	.card-header.header-background h6 {
	  flex: 1 1 auto; /* allow the text to take available space */
	  min-width: 0;   /* prevents overflow pushing icon */
	}

	.card-header.header-background > i {
	  flex-shrink: 0; /* icon can NEVER shrink or wrap */
	  margin-left: 0.5rem;
	}
	.card-header.header-background h6 {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}

  /* Search bar goes full width */
  .card-header.header-background-6 .form-control {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Keep both buttons on the same line */
  .card-header.header-background-6 .d-flex.gap-2 {
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    width: 100%;
  }

  /* Prevent button text from wrapping or stretching vertically */
  .card-header.header-background-6 .d-flex.gap-2 .btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  /* Make sure the toggle section takes full width nicely */
  .me-0.d-flex.justify-content-between.align-items-center .mb-2 {
    width: 100%;
  }
  
  #phonenumbersheader .card-header.header-background-6.d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem; 
  }
  
  #phonenumbersheader .me-0.d-flex.justify-content-between.align-items-center {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  
  .m-8 {
	margin: 1rem !important
  }
  
  .m-9 {
	margin: 1rem !important
  }
  
  .ms-8 {
	margin-left: 1rem !important;
  }
  
  .me-8 {
	margin-right: 1rem !important;
  }
  
  .align-items-center {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
	align-items: start !important;
  }
  
  #shop-cart-summary {
	position: static;     /* removes absolute positioning */
	margin-left: auto;    /* pushes it to the right if flex container */
	margin-top: 20px;     /* spacing so it doesn’t hit the button */
  }
  
  #checkoutsummary {
	margin-top:160px;
  }
  
  #paymentcardheader {
	flex-direction: column;   /* stack text + image */
	text-align: center;
  }

  #paymentcardheader img {
	margin-top: 15px !important;         /* space between text + image */
	float: none;              /* remove float on small screens */
	margin: 0 auto;
  }
  
  #emergencyaddresssection {
	overflow-x: auto;      /* allow horizontal scroll */
	-webkit-overflow-scrolling: touch;
  }

  #emergencyaddresssection .row {
	min-width: 600px;      /* prevents squashing - adjusts width */
  }
}

/* Small screens */
@media (max-width: 550px) {
	  #createcallflowheader {
	flex-direction: column;      /* stack text + button vertically */
	align-items: flex-start;     /* left align both */
  }

  #createcallflowheader button {
	margin-top: 10px;            /* space between text + button */
	width: auto;                 /* keep normal button width */
  }
}

/* Very small screens (mobile phones, narrow cards) */
@media (max-width: 389px) {
  /* Stack buttons vertically */
  .card-header .d-flex.gap-2 {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .page-header-content {
	flex-direction: row !important;
  }

  /* Make each button full width */
  .card-header .d-flex.gap-2 .btn {
    max-width: 100%;
	width: fit-content;
  }
  
  .card-header.header-background-6.d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem; 
  }
  
  .me-0.d-flex.justify-content-between.align-items-center {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
}

/* Stack the text and button vertically */
.border.intbg.d-flex.justify-content-between.align-items-center {
	flex-wrap: nowrap !important;
	white-space: nowrap;
}

/* Make all tables inside .card-body scrollable and non-wrapping */
.card-body table {
  border-collapse: collapse;
  overflow-x: auto;               /* horizontal scroll when needed */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;            /* prevent wrapping */
}

/* Table cell styling (optional, for consistency) */
.card-body table th,
.card-body table td {
  padding: 0.5rem 1rem;
  vertical-align: middle;
  white-space: nowrap;            /* no line breaks inside cells */
}

/* Optional: minimal scrollbar styling */
.card-body table::-webkit-scrollbar {
  height: 6px;
}

.card-body table::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

/* Firefox scrollbar appearance */
.card-body table {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) transparent;
}

.btn {
  white-space: nowrap;
  align-items: center;
}

.card {
	overflow:auto;
}

.select {
	max-width:250px;
	min-width:max-content;
}

#shop-cart-summary {
    position: absolute;
    right: 20px;
	margin-top: 20px;     /* spacing so it doesn’t hit the button */
}

#checkoutsummary {
	margin-top:160px;
}

#paymentcardheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#createcallflowheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#emergencyaddresssection {
    overflow-x: visible;  /* normal behavior */
}


/* Chart button group styling */
.btn-group .btn-outline-secondary {
	border-color: #dee2e6;
	color: #6c757d;
}

.btn-group .btn-outline-secondary:hover {
	background-color: #f8f9fa;
	border-color: #4dbed0;
	color: #4dbed0;
}

.btn-group .btn-outline-secondary.active {
	background-color: #4dbed0;
	border-color: #4dbed0;
	color: #fff;
}

@media (max-width: 768px) {
	.chart-container {
		height: 250px !important;
	}
}

/* Callflow container */
	.callflow-preview-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: font-family: var(--font-main);
	}
	.callflow-preview-container .flow-phone-icon {
		margin-bottom: 5px;
		transition: color 0.3s ease;
	}
	.callflow-preview-container .flow-phone-icon.active i {
		color: #00d4aa !important;
	}
	.callflow-preview-container .flow-phone-icon.active.animate i {
		animation: phoneWiggle 0.3s ease-in-out infinite;
	}
	@keyframes phoneWiggle {
		0%, 100% { transform: rotate(0deg); }
		25% { transform: rotate(-10deg); }
		75% { transform: rotate(10deg); }
	}
	.callflow-preview-container .flow-arrow {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.callflow-preview-container .arrow-line {
		width: 2px;
		height: 20px;
		background: #ccc;
		transition: background 0.3s ease;
	}
	.callflow-preview-container .arrow-head {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid #ccc;
		transition: border-color 0.3s ease;
	}
	.callflow-preview-container .flow-arrow.active .arrow-line {
		background: #00d4aa;
	}
	.callflow-preview-container .flow-arrow.active .arrow-head {
		border-top-color: #00d4aa;
	}
	.callflow-preview-container .flow-node {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 50px;
		font-size: 0.75rem;
		color: #333;
		white-space: nowrap;
		margin: 3px 0;
		transition: all 0.3s ease;
	}
	.callflow-preview-container .flow-node.highlight {
		border: 2px solid #4dbed0;
		box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.15);
	}
	.callflow-preview-container .flow-node .icon {
		font-size: 0.85rem;
	}
	.callflow-preview-container .flow-node .icon.purple { color: #a855f7; }
	.callflow-preview-container .flow-node .icon.green { color: #22c55e; }
	.callflow-preview-container .flow-node .icon.pink { color: #f472b6; }
	.callflow-preview-container .flow-node .icon.blue { color: #3b82f6; }
	.callflow-preview-container .flow-node.faded { opacity: 0.5; }
	.callflow-preview-container .branch-wrapper {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.callflow-preview-container .branch-stem {
		width: 2px;
		height: 20px;
		background: #ccc;
		margin: 0 auto;
		transition: background 0.3s ease;
	}
	.callflow-preview-container .branch-stem.active {
		background: #00d4aa;
	}
	.callflow-preview-container .branch-bracket {
		position: relative;
		height: 25px;
		width: 280px;
		margin: 0 auto;
	}
	.callflow-preview-container .branch-bracket::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: #ccc;
		transition: background 0.3s ease;
	}
	.callflow-preview-container .branch-bracket.active-left::before {
		background: linear-gradient(90deg, #00d4aa 0%, #00d4aa 50%, #ccc 50%, #ccc 100%);
	}
	.callflow-preview-container .branch-bracket::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 2px;
		height: 100%;
		background: #ccc;
		transition: background 0.3s ease;
	}
	.callflow-preview-container .branch-bracket.active-left::after {
		background: #00d4aa;
	}
	.callflow-preview-container .branch-bracket .right-drop {
		position: absolute;
		top: 0;
		right: 0;
		width: 2px;
		height: 100%;
		background: #ccc;
	}
	.callflow-preview-container .branch-columns {
		position: relative;
		width: 280px;
		margin: 0 auto;
		height: auto;
	}
	.callflow-preview-container .branch-col {
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.callflow-preview-container .branch-col.open {
		left: 0;
		transform: translateX(-50%);
	}
	.callflow-preview-container .branch-col.closed {
		right: 0;
		transform: translateX(50%);
	}
	.callflow-preview-container .branch-spacer {
		height: 180px;
	}
	.callflow-preview-container .branch-label {
		padding: 4px 12px;
		border-radius: 12px;
		font-size: 0.7rem;
		font-weight: 600;
		margin-bottom: 3px;
		transition: all 0.3s ease;
	}
	.callflow-preview-container .branch-label.open {
		background: rgba(0, 212, 170, 0.15);
		color: #00b894;
	}
	.callflow-preview-container .branch-label.open.pulse {
		animation: labelPulse 0.5s ease 3;
	}
	@keyframes labelPulse {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.1); }
	}
	.callflow-preview-container .branch-label.closed {
		background: rgba(255, 107, 107, 0.15);
		color: #ff6b6b;
	}
	.callflow-preview-container .small-arrow {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.callflow-preview-container .small-arrow .arrow-line {
		height: 12px;
	}
	.callflow-preview-container .small-arrow .arrow-head {
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid #ccc;
	}
	.callflow-preview-container .small-arrow.active .arrow-line {
		background: #00d4aa;
	}
	.callflow-preview-container .small-arrow.active .arrow-head {
		border-top-color: #00d4aa;
	}
  @media (max-width: 991px) {
    .callflow-preview-container {
			transform: scale(0.85);
			transform-origin: top center;
		}
  }
  @media (max-width: 576px) {
		/* Extra small screens - scale flowchart more */
		.callflow-preview-container {
			transform: scale(0.75);
			transform-origin: top center;
		}
  }
  @media (max-width: 400px) {
		/* Tiny screens */
		.callflow-preview-container {
			transform: scale(0.65);
		}
	}
	/* ============================================
	   STATUS PANEL - 50% WIDTH VERSION
	   ============================================ */

	.summary-row {
	    display: flex;
	    align-items: stretch;
	    min-height: 140px;
	}

	.info-section {
	    flex: 0 0 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 1.5rem;
	}

	.info-col {
	    flex: 1;
	    text-align: center;
	    padding: 0 1.5rem;
	}

	.info-col:first-child {
	    border-right: 1px solid rgba(50, 158, 171, 0.61);
	}

	.info-col .label {
	    font-size: 0.875rem;
	    color: #6c757d;
	    font-weight: 500;
	    margin-bottom: 0.5rem;
	}

	.info-col .value {
	    font-size: 1.25rem;
	    font-weight: 400;
	    color: #212529;
	    margin-bottom: 0;
	}

	.info-col .action-link {
	    font-size: 0.75rem;
	    color: #3dbbdb;
	    text-decoration: none;
	    font-weight: 500;
	    display: inline-flex;
	    align-items: center;
	    gap: 0.5rem;
	    margin-top: 0.5rem;
	}

	

	.info-col .spacer {
	    height: 1.8rem;
	}

	.status-panel-col {
	    flex: 0 0 50%;
	    display: flex;
	    align-items: center;
	    padding: 1rem 1.5rem;
	}

	.status-panel {
	    background: white;
	    border-radius: 20px;
	    padding: 1.2rem 1.3rem;
	    box-shadow: 
	        0 1px 3px rgba(0,0,0,0.09),
	        0 4px 12px rgba(0,0,0,0.09);
	    border: 1px solid rgba(0,0,0,0.04);
	    position: relative;
	    overflow: hidden;
	    width: 100%;
	}

	.status-panel::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    height: 2px;
	    
	}

	.status-panel-header {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 0.5rem;
	    margin-bottom: 0.875rem;
	}

	.status-panel-title {
	    font-size: 0.6875rem;
	    font-weight: 700;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	    color: #6c757d;
	    margin: 0;
	}

	.status-panel-icon {
	    color: #3dbbdb;
	    font-size: 1.6rem;
	}

	.status-grid {
	    display: flex;
	    gap: 1.5rem;
	}

	.status-item {
	    flex: 1;
	    background: linear-gradient(135deg, #fafbfc 0%, #f5f7f9 100%);
	    border-radius: 20px;
	    padding: 0.75rem 0.5rem;
	    text-align: center;
	    border: 1px solid transparent;
	    transition: all 0.25s ease;
	}

	

	.status-item.active {
	    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.03) 100%);
	    border-color: rgba(34, 197, 94, 0.2);
	}

	.status-item.active .status-item-label {
	    color: #212529;
	}

	.status-item.active .status-item-icon {
	    color: #212529;
	    opacity: 1;
	}

	.status-item.inactive {
	    border-color: rgba(0,0,0,0.05);
	}

	.status-item-label {
	    font-size: 0.6875rem;
	    color: #6c757d;
	    font-weight: 500;
	    margin-bottom: 0.8rem;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 0.25rem;
	}

	.status-item-icon {
	    font-size: 1.1rem;
	    opacity: 0.6;
	}

	.status-indicator {
	    width: 7px;
	    height: 7px;
	    border-radius: 50%;
	    display: inline-block;
	    position: relative;
	    flex-shrink: 0;
	}

	.status-indicator.active {
	    background: #22c55e;
	    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
	}

	.status-indicator.inactive {
	    background: #d1d5db;
	}

	.status-badge {
	    display: inline-flex;
	    align-items: center;
	    gap: 0.375rem;
	    padding: 0.3rem 0.75rem;
	    border-radius: 50px;
	    font-size: 0.75rem;
	    font-weight: 600;
	}

	.status-badge.active {
	    background: rgba(34, 197, 94, 0.12);
	    color: #16a34a;
	    border: 1px solid rgba(34, 197, 94, 0.2);
	}

	.status-badge.inactive {
	    background: rgba(156, 163, 175, 0.1);
	    color: #6b7280;
	    border: 1px solid rgba(156, 163, 175, 0.15);
	}

	/* Responsive for status panel */
	@media (max-width: 991.98px) {
	    .summary-row {
	        flex-wrap: wrap;
	    }

	    .info-section {
	        flex: 1 1 100%;
	        border-bottom: 1px solid rgba(0,0,0,0.08);
	    }

	    .status-panel-col {
	        flex: 1 1 100%;
	        padding-top: 1rem;
	    }
	}

	@media (max-width: 575.98px) {
	    .info-section {
	        flex-direction: column;
	        gap: 1rem;
	    }

	    .info-col {
	        padding: 0.5rem 0;
	    }

	    .info-col:first-child {
	        border-right: none;
	        border-bottom: 1px solid rgba(0,0,0,0.08);
	        padding-bottom: 1rem;
	    }

	    .status-grid {
	        flex-direction: column;
	    }
	}