*,h1,h2,h3,h4,h5,h6{
	box-sizing:border-box;
	margin:0;padding:0;
}

html{
	max-width:100%;
	height:100%;
	font-family:Arial,Helvetics,sans-serif;
}

body {
	min-height: 100vh;
	overflow-x: auto;
	overflow-y: auto;

	font-family:Arial,Helvetics,sans-serif;
	
  }

li{
	list-style-type:none;
}
/* moreinfo table start */
.moreinfotable {
	width: 100%;
	border-collapse: collapse;
}
.moreinfotable, th, td {
	border: 1px solid black;
}
.moreinfotable, th, td {
	padding: 10px;
	text-align: left;
}
.moreinfotable, th {
	background-color: #f2f2f2;
}
/* moreinfo table end */
.moreinfoimage {
	max-height: 150px; 
	max-width: 100%; 
	object-fit: cover;
}

li.mainpage{
	list-style-type:disc;
	font-weight: 500;
	font-size: 1.2em;
}
li.mainpageol{
	list-style-type:decimal;
	font-weight: 500;
	font-size: 1.2em;
}
li.mainpageol::marker {
    font-weight: bold; 
}
div{
	vertical-align:top;
}

/* Links and list item hover styles */
a:hover, a:focus, li:hover, li:focus, span:hover, span:focus {
    background-color: #f5f5f5;
}

h1{font-size:2.6em;}
h2{font-size:2em;}
h3{font-size:1.8em;}
h4{font-size:1.6em;}
h5{font-size:1.4em;}
h6{font-size:1.2em;}

.icon-actions-flex {
    display: flex;
    align-items: center;
}

.thumbnail-img {
    max-height: 150px;
}

/* Style the container */
.date-picker-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Space between elements */
    width: 100%;
    box-sizing: border-box; /* Include padding and borders in width calculations */
}

/* Style the inputs and button */
.date-picker-container input[type="date"],
.date-picker-container button {
    flex: 1; /* Make inputs and button stretch evenly */
    padding: 10px; /* Add padding for better usability */
    font-size: 1rem; /* Adjust font size */
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    min-width: 100px; /* Prevent elements from becoming too small */
}

/* Style the labels */
.date-picker-container label {
    white-space: nowrap; /* Prevent labels from wrapping */
}

/* Style the button specifically */
.date-picker-container button {
    flex: 0; /* Prevent the button from stretching */
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.date-picker-container button:hover {
    background-color: #0056b3;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 576px) {
    .date-picker-container {
        flex-direction: column; /* Stack elements vertically on small screens */
        gap: 15px; /* Increase gap between elements */
    }

    .date-picker-container input[type="date"],
    .date-picker-container button {
        flex: unset; /* Remove flex property to fit natural width */
        width: 100%; /* Make elements full width */
    }
}



tr.selected {
    background-color: rgb(218, 234, 240) !important;
}

	.custom-ibox {
		border: 1px solid #ddd;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		padding: 20px;
		margin: 10px;
	}
	.custom-box1 {
		border: 1px solid #ddd;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		padding: 20px;
		margin: 10px;
	}

	/* Add dark gray vertical line */
	.custom-box1 + .custom-box1 {
		border-left: 4px solid #333;
		padding-left: 20px;
	}
	a.menuwhite{
		text-decoration:none;
		color:inherit;
		cursor:pointer;
	}
	a {
		text-decoration:none;
		color:inherit;
		cursor:pointer;
	}
	a img {
		text-decoration: none; /* Remove underlines from links */
		border: none; /* Remove borders from links */
		outline: none; /* Remove outline when clicked (optional) */
		/* Add any other CSS styles as needed */
	  }
	a.underline{
		text-decoration:underline;
		color:inherit;
		cursor:pointer;
	}
	a.underline:hover {
		color: rgb(16, 88, 213);
	  }

	input, label, select, textarea{
		display:block;
	}
	button{
		background-color:white;
		cursor:pointer;
		border:1px solid;
	}
	.custom-tooltip {
		--bs-tooltip-color: #fbce12;
	 
		--bs-tooltip-bg: #000;
	  } 

	  /* send_client_emails page css */
	  .text-tooltip {
		--bs-tooltip-color: #171717 !important;
		--bs-tooltip-bg: rgb(204, 231, 249) !important; 
		--bs-tooltip-max-width: 300px !important;
		font-size: 18px;
		font-weight: 500 !important;
	}
	.smallertext-tooltip {
		--bs-tooltip-color: #171717 !important;
		--bs-tooltip-bg: rgb(204, 231, 249) !important; 
		--bs-tooltip-max-width: 300px !important;
		font-size: 14px;
		font-weight: 400 !important;
	}
	.email-alert {
		border: 3px solid red;
		border-radius: 10px; 
		padding: 5px; 
	}
	.email-alert p{
		font-size: 18px;
		font-weight: 700;
	}

	.tooltip {
		--bs-tooltip-color: #fbce12;
		font-weight: bold; /* You can change "bold" to other values like "normal" or a specific font weight (e.g., 400, 700, etc.) */

		--bs-tooltip-bg: #000;
	  } 
	img{
		max-width:100%;
	}


  @media (max-width: 767px) {
    .col-3, .col-4 {
      width: 100%;
    }
  }

 


.ql{
	display:flex;
	flex-flow:row nowrap;
	align-items:stretch;
	padding:.5em;
	margin-right:1.5em;
	width:100%;
	border-radius: 10px;
}

.ql:hover{
	box-shadow:0 0 0.75em rgb(197, 197, 197);
	background-color: #fff;
}
.custom-alert {
    width: 35%; /* Set the width of the alert to 25% of its parent/container */
    max-width: 100%; /* Ensure it doesn't exceed the width of its container */
    margin-left: auto; /* Center the alert horizontally */
    margin-right: auto; /* Center the alert horizontally */
    word-wrap: break-word; /* Ensure long words can wrap and not overflow */
}

@media (max-width: 768px) {
    .custom-alert {
        width: 100%; /* On smaller screens, make the alert full width */
    }
}


/*subscription timeline */
.timeline-container {
	display: flex;
  }
  
  .timeline {
	position: relative;
	height: 100%;
	width: 20px;
	margin-right: 20px;
  }
  
  .outer-container {
	width: 100%;
  }
/* Light/Dark Icon size */
  .theme-icon, .theme-icon-active {
	width: 1.2em;
	height: 1.2em;
	fill: var(--custom-svg-color);
  }

/* Light Mode Custom Styles */
[data-bs-theme="light"], [data-bs-theme="auto"] {
	--default-container-bg: #e0f0f7 !important;/* Light mode container background color */
	--custom-navbar-bg: #c2dce6 !important; /* Light mode upper navbar background color */
	--custom-sidebarCollapse-bg: #f2f2f2 !important; /* Dark mode upper navbar background color */
	--custom-topNav-bg: #c2dce6 !important; /* Dark mode upper navbar background color */
	--admin-nav-bg: #c2dcaf !important; /* Dark mode upper navbar Sidebar Toggle link text color */
	--logout-btn-bg: #bdd3dc !important; /* Dark mode upper navbar Sidebar Toggle link text color */
	--custom-table-bg: #ffffff; /* Light mode Mailing List Table Rows BG color */
	--custom-selected-bg: #e9e9e9 !important;  /* Light mode Mailing List Table Rows Selected Contacts BG color */
	--custom-odd-selected-bg: #f1f1f1; /* Light mode Mailing List Table Rows Selected Contacts ODD number rows BG color */
  }
    /* Light Mode HOVER styles */
	[data-bs-theme="light"] a:hover,
	[data-bs-theme="light"] a:focus,
	[data-bs-theme="auto"] a:hover,
	[data-bs-theme="auto"] a:focus,
	[data-bs-theme="light"] li:hover,
	[data-bs-theme="light"] li:focus,
	[data-bs-theme="auto"] li:hover,
	[data-bs-theme="auto"] li:focus,
	[data-bs-theme="light"] tr:hover,
	[data-bs-theme="light"] tr:focus,
	[data-bs-theme="auto"] tr:hover,
	[data-bs-theme="auto"] tr:focus {
	  --custom-topNav-bg: #bdd3dc !important; /* Light mode upper navbar link background color */
	  --custom-topNav-color: #000000 !important; /* Light mode upper navbar link background color */
	  --admin-nav-color: #060404 !important; /* Light mode upper navbar Sidebar Toggle link text color */
	  --admin-nav-bg: #87e571 !important; /* Light mode upper navbar Sidebar Toggle link text color */	
	  --custom-table-bg: #f3f3f3; /* Light mode Mailing List Table Rows BG color on HOVER */
	  --custom-selected-bg: #d5d5d5; /* Light mode Mailing List Table Selected Rows BG color on HOVER */	
	}
	

/* Admin Navbar and Logout Button LIGHT/DARK is called from navbar.css */


  /* Dark Mode Custom Styles */
  [data-bs-theme="dark"] {
	--default-container-bg: #020211; /* Dark mode container background color */
	--custom-navbar-bg: #070912; /* Dark mode upper navbar background color */
	--custom-sidebarCollapse-bg: #070912; /* Dark mode upper navbar sidebar button color */
	--slightly-darker-container-bg: #1b1b1a; /* Dark mode Div background darker than normal background */
	--admin-nav-bg: #013809; /* Dark mode vertical navbar Admin buttons background */
	--custom-topNav-bg: #181818; /* Dark mode upper navbar background color */
	--dark-bg-color: #1e252c; /* Dark mode  a:hover background color */
	--dark-text-color: #fdc912; /* Dark mode a:hover text color */
	--dark-icon-color: #f3f3f3;  /* Custom icon color in dark mode */
	--custom-topNav-color: #cccccc;  /* Dark Mode Top Nav Bar Link/Text Color */
	--custom-svg-bg: #000000;  /* Custom icon color in dark mode */
	--custom-svg-color: #fdc912;  /* Custom icon color in dark mode */
	--custom-selected-bg: #111111 !important;  /* Dark mode Mailing List Table Rows Selected Contacts BG color */
	--custom-odd-selected-bg: #1b1b1a; /* Dark mode Mailing List Table Rows Selected Contacts ODD number rows BG color */
  }
    /* Dark Mode HOVER styles */
[data-bs-theme="dark"] a:hover, [data-bs-theme="dark"] a:focus,
[data-bs-theme="dark"] li:hover, [data-bs-theme="dark"] li:focus {
  background-color: var(--dark-bg-color); /* Dark mode HOVER Default background color */
  color: var(--dark-text-color); /* Dark mode HOVER Default text color */
  --custom-topNav-color: #fdc912; /* Dark mode upper navbar link background color */
  --custom-sidebarCollapse-color: #fdc912; /* Dark mode upper navbar sidebar link text color */
  --admin-nav-color: #bbf216; /* Dark mode Admin Section Vertical Navbar text color */
  --admin-nav-bg: #276a1f; /* Dark mode Admin Section Vertical Navbar background color */
}


  [data-bs-theme="dark"] .white_when_dark {
	color: #cccccc !important; /* Set text color to white in dark mode */
  }
  [data-bs-theme="dark"] .yellow_when_dark {
	color: #fdc912 !important; /* Set text color to yellow in dark mode */
  }
  [data-bs-theme="dark"] .blue_when_dark {
	color: #569cd6 !important; /* Set text color to blue in dark mode */
  }
  [data-bs-theme="dark"] .green_when_dark {
	color: #6a9752 !important; /* Set text color to green in dark mode */
  }
  [data-bs-theme="dark"] .black_when_dark {
	color: #dbdbdb !important; /* This is styling the Group Dropdown Selection */
  }
  [data-bs-theme="dark"] .black_when_dark_bg {
	background-color: #121111 !important; /* This is styling the Group Dropdown Selection */
  }
  [data-bs-theme="dark"] .black_when_dark_ul li:hover {
	background-color: #121111 !important; /* This is styling the Group Dropdown Selection */
	color: #fdc912 !important; /* Set text hover color to yellow in dark mode */
  }



  /* Subscriptions Page - Default Choices Container bg-color */
  #default-outer-container {
	background-color: var(--default-container-bg);
  }
    /* Sticky Top Navbar Dark/Light styling */
	#upper_navbar {
		background-color: var(--custom-navbar-bg);
	  }
	  /* Sticky Top Navbar Dark/Light styling */
	  #sidebarCollapse {
		background-color: var(--custom-sidebarCollapse-bg);
		color: var(--custom-sidebarCollapse-color);
	  }
	  /* Sticky Top Navbar Dark/Light styling */
	  #topNav {
		background-color: var(--custom-topNav-bg) !important;
		color: var(--custom-topNav-color) !important;
		  }

		/* Universal Div Styling for Dark Mode */
	  .slightly-darker-container {
		background-color: var(--slightly-darker-container-bg);
	  }
	
	  /* Icon Styling for Dark/Light Mode - Group Icon Mailing List */
	  .custom-svg {
		background-color: var(--custom-svg-bg);
		color: var(--custom-svg-color);
	  }
	  

/* MailingList DataTable Dark Mode Link style */
[data-bs-theme="dark"] .dt-link {
    background-color: transparent !important;
} 
/* MailingList DataTable Light Mode Link style */
[data-bs-theme="light"] .dt-link {
    background-color: transparent !important;
    color: #000;
} 

/* MailingList DataTable row hover style */
[data-bs-theme="dark"] tr.dt-row:hover, [data-bs-theme="dark"] tr.dt-row:focus {
	--custom-table-bg: #1b1b1a; /* Light mode Mailing List Table Rows BG color on HOVER */
	--custom-selected-bg: #1b1b1a; /* Light mode Mailing List Table Selected Rows BG color on HOVER */	
	color: #fdc912 !important;
}

  /* Subscription Page Dark Mode - Custom radio button styles */
  [data-bs-theme="dark"] input[type="radio"]:checked {
	/* Define your custom styles for selected radio buttons in dark mode */
	background-color: #000;
	border-color: #fdc912;
  }

/* Subscription Page Dark Mode - Custom Input Box styles */
[data-bs-theme="dark"] input[type="number"] {
  color: #fdc912;
  background-color: #121212;
}

/*myAccount deactivate checkbox */
[data-bs-theme="dark"] input[type="checkbox"] {
    width: 18px; /* Adjust the width as needed */
    height: 18px; /* Adjust the height as needed */
    border-width: 2px; /* Increase the border width for a thicker line */
	border-color: #fdc912;
	background-color: #121212;
}
[data-bs-theme="light"] input[type="checkbox"] {
    width: 18px; /* Adjust the width as needed */
    height: 18px; /* Adjust the height as needed */
    border-width: 2px; /* Increase the border width for a thicker line */
	border-color: #656565;

}

[data-bs-theme="dark"] textarea {
    background-color: #121212; /* Dark background color */
    color: #ffffff; /* Light text color */
    border: 2px solid #fdc912; /* Border style */
    /* Add any other styles you need */
}

[data-bs-theme="dark"] .btn-light {
    background-color: #131212; /* Light background color */
    color: #ececec; /* Dark text color */
	border-color: #565656
}
[data-bs-theme="dark"] .btn-light:hover {
    background-color: #030b2d; /* Light background color */
    color: #decf02; /* Dark text color */
	border-color: #7a7a7a
}
[data-bs-theme="light"] .btn-light {
    background-color: #e7e5e5; /* Light background color */
    color: #000000; /* Dark text color */
	border-color: #aaa7a7
    /* Add any other styles you need */
}
[data-bs-theme="light"] .btn-light:hover {
    background-color: #bac7d5; /* Light background color */
    color: #090902; /* Dark text color */
	border-color: #000
    /* Add any other styles you need */
}

.icon-white {
	color: #fff

}

ul.bullets {
	padding-left: 1em !important;
	margin-left: 1em;
  }
  
  li.bullets {
	list-style-type: disc !important;
	margin-left: 2em;
	padding-top: .3em;
	padding-bottom: .3em;
  }

/*admin-dashboard css */
  .stat_container {
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	padding: 1rem;
	margin-bottom: 1rem;
  }
  .stat_container table tr {
	border-bottom: 1px solid #dee2e6;
  }
  .registration-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px; /* Adjust the spacing between rows */
}

.registration-table th,
.registration-table td {
    padding: 10px; /* Adjust the padding within cells */
	border-right: 1px solid #ccc;
	text-align:center;
}

.registration-table th {
    background-color: #f0f0f0; /* Background color for header cells */
    font-weight: bold; /* Bold font for header cells */
    border-bottom: 2px solid #ccc; /* Bottom border for header cells */
}

.registration-table tbody tr {
    background-color: #fff; /* Background color for odd rows */
	border-bottom: 1px solid #ccc;
}

.registration-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Background color for even rows */
}

.registration-table tbody tr:hover {
    background-color: #e0e0e0; /* Background color on hover */
}

/* customize.php */
.image-container {
	width: 600px; /* Set the width of the container */
	height: 600px; /* Set the height of the container */
	display: flex; /* Use flexbox layout */
	flex-direction: column; /* Arrange items vertically */
	justify-content: center; /* Center items vertically */
	align-items: center; /* Center items horizontally */
	text-align: center; /* Center text */
}
.image-container img {
	max-width: 100%;
	max-height: 100%;
}