body {
  /* Set the background to a vertical gradient from #000000 to #223138 */
  background: linear-gradient(to bottom, #000000, #223138);
  /* Ensure the gradient covers the entire viewport */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

th,
td,
h1,
h2,
h3,
h4,
li,
label,
p {
  color: white;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Roboto", sans-serif;
}

.table th,
.table td {
  border-top: 1px solid #333; /* Custom color for the top border of cells */
  border-bottom: 1px solid #333; /* Custom color for the bottom border of cells */
}

a {
  color: #a29069; /* Set link color */
  text-decoration: none; /* Remove underline from links */
}

a:hover {
  color: #fff; /* Set hover color for links */
  text-decoration: none; /* Remove underline from links */
}

a:active {
  color: #fff; /* Set active color for links */
  text-decoration: none; /* Remove underline from links */
}


/* Change Bootstrap primary button color */
.btn-primary {
  background-color: rgba(5, 8, 9, 0.2); /* 80% opacity */
  border: 1px solid #333 !important; /* Ensure the border is applied */
  color: #fff; /* Ensure the text color contrasts well with the background */
  transition: background-color 1s, border-color 1s, box-shadow 1s; /* Transition on background color, border color, and box shadow */
  padding: 10px 15px;
}

.btn-primary:hover {
  background-color: rgba(162, 144, 105); /* Set hover background color for button */
  border: 1px solid #a29069 !important; /* Ensure the border is applied */
  color: #fff;
  box-shadow: 0 4px 6px rgba(162, 144, 105, 0.2);
  padding: 10px 15px;
}

.quick-button {
  background-color: rgba(35, 49, 56, 0.1);
  border: 1px solid #2b586f !important;
  color: #fff; /* Text color */
  padding: 10px 10px; /* Padding for square shape */
  transition: background-color 1s, border-color 1s, box-shadow 1s; /* Transition on background color, border color, and box shadow */
  border-radius: 12px; /* Adjust the value as needed to get the desired roundness */
  padding:10px;
}

.quick-button:hover {
  background-color: rgba(35, 49, 56); /* Set hover background color for button */
  border: 1px solid #a29069 !important; /* Ensure the border is applied */
  color: #fff;
  box-shadow: 0 4px 6px rgba(162, 144, 105, 0.2);
  border-radius: 12px; /* Ensure the hover state maintains the same border-radius */
  padding:10px;
}

.quick-button-associate {
  background-color: rgba(5, 8, 9, 0.2); /* 80% opacity */
  border: 1px solid #333 !important; /* Ensure the border is applied */
  color: #fff; /* Ensure the text color contrasts well with the background */
  transition: background-color 1s, border-color 1s, box-shadow 1s; /* Transition on background color, border color, and box shadow */
  border-radius: 12px; /* Adjust the value as needed to get the desired roundness */
  padding:10px;
  display:block;
  width:230px;
}

.quick-button-associate:hover {
  background-color: rgba(162, 144, 105); /* Set hover background color for button */
  border: 1px solid #a29069 !important; /* Ensure the border is applied */
  color: #fff;
  box-shadow: 0 4px 6px rgba(162, 144, 105, 0.2);
  border-radius: 12px; /* Ensure the hover state maintains the same border-radius */
  padding:10px;
  display:block;
  width:230px;
}

.quick-event-button {
  background-color: rgba(35, 49, 56, 0.1);
  border: 1px solid #2b586f !important;
  color: #fff; /* Text color */
  padding: 10px 10px; /* Padding for square shape */
  transition: background-color 1s, border-color 1s, box-shadow 1s; /* Transition on background color, border color, and box shadow */
  border-radius: 12px; /* Adjust the value as needed to get the desired roundness */
  padding:10px;
  margin-bottom:15px;
}

.quick-event-button:hover {
  background-color: rgba(35, 49, 56); /* Set hover background color for button */
  border: 1px solid #a29069 !important; /* Ensure the border is applied */
  color: #fff;
  box-shadow: 0 4px 6px rgba(162, 144, 105, 0.2);
  border-radius: 12px; /* Ensure the hover state maintains the same border-radius */
  padding:10px;
  margin-bottom:15px;
}

.btn-primary:focus, 
.btn-primary:active, 
.btn-primary:focus:active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: rgba(162, 144, 105, 0.9); /* Set active/focus background color for button */
  border: 1px solid #a29069 !important; /* Ensure the border is applied */
  color: #fff;
  box-shadow: none; /* Remove Bootstrap's default focus shadow */
}

.btn-secondary {
  background-color: rgba(35, 49, 56, 0.8);
  border: 1px solid #2b586f !important;
  padding-top:10px;
  padding-left:15px;
  padding-right:15px;
  padding-bottom:10px;
}

.btn-secondary:hover {
  background-color: rgba(35, 49, 56, 1);
  border: 1px solid #2b586f !important;
  padding-top:10px;
  padding-left:15px;
  padding-right:15px;
  padding-bottom:10px;
}

.scored {
	background: linear-gradient(to top, #021118, #0a2029);
}

.search-result {
    max-height: 150px;
    overflow-y: auto;
    margin-bottom:3px;
    background-color:#2f3739;
    color:#fff;
}
        
.search-result div {
    padding: 8px;
    cursor: pointer;
}

.search-result div:hover {
    background-color: #000;
    color:#fff;
}

.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  z-index: 1000; /* Adjust the z-index to ensure it appears above other elements */
  position: absolute;
  width: 100%; /* Make it full width */
  border: 1px solid #ccc; /* Add a border for a cleaner look */
  background-color: #fff; /* Set a background color */
}

.ui-autocomplete .ui-menu-item {
  color: black; /* Set the text color to black */
  list-style-type: none; /* Remove the bullet point */
}

.dropdown-menu.show {
  display: block;
  width: 100%;
}

.header-container {
  /* Set the background to a vertical gradient from #000000 to #223138 */
  background: linear-gradient(to bottom, #000000, #223138);
  /* Ensure the gradient covers the entire container */
  min-height: 100vh; /* Adjust the height as needed */
  /* Center the content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Apply a background image */
  background-image: url("path/to/your/background-image.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  width: 100%;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* 50% smaller */
  max-width: 100%; /* Ensure the logo doesn't exceed its natural size */
  z-index: -1; /* Place the logo behind the content */
}

.content {
  color: #fff; /* Adjust text color to ensure visibility */
  z-index: 1; /* Place the content above the logo */
  width: 100%; /* Set the content width to 100% of the container */
}

.project-container {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border: 1px solid #333;
    border-radius: 10px;
}

/* Additional border styles based on project type */
.orange-border {
    border-color: orange;
     background-color: #332b11;
}

.red-border {
    border-color: #8b0202;
    background-color: #3b2828;
}

.img-fluid.project-image {
  max-width: 100%;
  transition: filter 1s;
  filter: grayscale(100%);
}

.img-fluid.project-image:hover {
  filter: grayscale(0%);
}

/* Style required fields with a red border on focus */
input:required:focus,
textarea:required:focus,
select:required:focus {
    border-color: red;
    outline: none;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Add a red asterisk to labels of required fields */
/* Assumes labels are directly associated with inputs */
input:required + label::after,
textarea:required + label::after,
select:required + label::after {
    content: " *";
    color: red;
    font-weight: bold;
}

/* Ensure the input and label are correctly styled */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="file"],
input[type="number"],
textarea,
select.form-control {
    width: 300px;
    border: 0;
    border-radius: 10px;
    padding: 10px;
    background-color: rgba(169, 169, 169, 0.1);
    color: #fff;
    display: block;
}

/* Apply the same styling for readonly and disabled inputs */
input[readonly],
textarea[readonly] {
    background-color: rgba(169, 169, 169, 0.1) !important; /* Ensure background color is applied */
    color: #fff !important; /* Ensure text color is applied */
    cursor: not-allowed; /* Indicate that the field is not editable */
}

/* Placeholder Text Styling */
input::placeholder {
    color: #fff !important; /* Keep placeholder text white */
}

.container {
  width: 80%; /* Set the width of the container to 80% of the viewport width */
  margin: 0 auto; /* Center the container horizontally */
}

.info-box {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(
    68,
    68,
    68,
    0.2
  ); /* Set background color with 20% transparency */
  border-radius: 5px; /* Apply border-radius to the .info-box */
  border: 1px solid transparent; /* Add a 1px transparent border to create space for the gradient */
  
  border-image: linear-gradient(
    to bottom right,
    #444,
    #000,
    #444
  ); 
  
  
  border-image-slice: 1; /* Ensure the whole border is the gradient */
}

.person-type {
  position: relative;
  border: 1px dotted #790d0d; /* Main border color is a dark red */
  padding: 2px;
  margin: 2px;
}

.aliases-container {
  border: 0px;
  padding: 5px;
  min-height: 50px;
}

.alias-tag {
  display: inline-block;
  background-color: #213036;
  color: white;
  padding: 5px;
  margin-right: 5px;
  border-radius: 5px;
}

.alias-tag button {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  margin-top:3px;
}

.person-type::before,
.person-type::after,
.person-type .corner {
  content: "";
  position: absolute;
  width: 15px; /* Width of the thick border */
  height: 15px; /* Height of the thick border */
  border: 4px solid #a30c0c; /* Thickness and color of the corner border is red */
}

.person-type::before {
  top: -4px;
  left: -4px;
  border-right: none;
  border-bottom: none;
}

.person-type::after {
  bottom: -4px;
  right: -4px;
  border-top: none;
  border-left: none;
}

.person-type .corner-tl {
  top: -4px;
  left: -4px;
  border-right: none;
  border-bottom: none;
}

.person-type .corner-tr {
  top: -4px;
  right: -4px;
  border-left: none;
  border-bottom: none;
}

.person-type .corner-bl {
  bottom: -4px;
  left: -4px;
  border-top: none;
  border-right: none;
}

.person-type .corner-br {
  bottom: -4px;
  right: -4px;
  border-top: none;
  border-left: none;
  /* Main border color is red */
  padding: 2px;
  margin: 2px;
}

.person-type::before,
.person-type::after,
.person-type .corner {
  content: "";
  position: absolute;
  width: 10px; /* Width of the thick border */
  height: 10px; /* Height of the thick border */
  border: 3px solid #a30c0c; /* Thickness and color of the corner border is red */
}

.person-type::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.person-type::after {
  bottom: -2px;
  right: -2px;
  border-top: none;
  border-left: none;
}

.person-type .corner-tl {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.person-type .corner-tr {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}

.person-type .corner-bl {
  bottom: -2px;
  left: -2px;
  border-top: none;
  border-right: none;
}

.person-type .corner-br {
  bottom: -2px;
  right: -2px;
  border-top: none;
  border-left: none;
}

/* Add this CSS to change the background color of the dropdown */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  background-color: #ccc;
}

/* Optional: Add this CSS to change the text color of the dropdown items */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu .nav-link {
  color: #000; /* You can adjust the color as needed */
}

.nav-tabs {
  border-bottom: none !important; /* Remove the bottom border for the nav-tabs */
}

.nav-tabs .nav-link {
  border: none !important; /* Remove the borders */
  border-radius: 5px; /* Optional: Add border radius for rounded corners */
  padding: 5px 10px; /* Optional: Adjust padding for better spacing */
}

.nav-tabs .nav-link.active {
  background-color: #333; /* Change background color for the active tab */
  color: #fff; /* Change text color for the active tab */
}

.spacer {
  flex: 1; /* This will push the footer to the bottom */
}

.footer {
  background-color: rgba(18, 25, 28); /* 70% black */
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 9pt;
}

#checkNameSuggestions {
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  max-height: 150px; /* Limit the maximum height of the suggestion list */
  overflow-y: auto; /* Enable vertical scrolling if the list exceeds the max height */
}

#checkNameSuggestions option {
  background-color: white;
  color: black;
}

.category-border {
  border-radius: 50%; /* Create a circle */
  border: 3px solid #999; /* Add a border with the desired color and width */
  width: 100px; /* Set the desired width */
  height: 100px; /* Set the desired height */
  object-fit: cover; /* Maintain aspect ratio and fill the circular container */
  display: block; /* Ensure the image takes up the entire cell */
  margin: 20px auto; /* Increase margin to ensure shadow is visible */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7); /* Increase the shadow's visibility */
  /* Optionally remove or adjust clip-path if it's clipping the shadow */
  display: inline-block;
}

.square-container {
  width: 100%; /* Adjust the width as needed */
  padding-top: 100%; /* Create a square aspect ratio */
  position: relative; /* Create a positioning context */
}

.category-border-medium {
  position: absolute; /* Position the circle within the square container */
  top: 0;
  left: 0;
  width: 60%; /* Set the width to 100% to fill the square container */
  height: 60%; /* Set the height to 100% to fill the square container */
  border-radius: 50%; /* Create a circle */
  border: 5px solid #999; /* Add a border with the desired color and width */
  object-fit: cover; /* Maintain aspect ratio and fill the circular container */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7); /* Add shadow */
}


.category-border-large {
  position: absolute; /* Position the circle within the square container */
  top: 0;
  left: 0;
  width: 90%; /* Set the width to 100% to fill the square container */
  height: 90%; /* Set the height to 100% to fill the square container */
  border-radius: 50%; /* Create a circle */
  border: 5px solid #999; /* Add a border with the desired color and width */
  object-fit: cover; /* Maintain aspect ratio and fill the circular container */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7); /* Add shadow */
}

/* Terrorists */
.terrorist-designated {
  /* Terrorist (Designated) */
  border-color: #9a0d0d; /* Dark red */
}

.terrorist-known {
  /* Terrorist (Known) */
  border-color: #ff8c00; /* Dark orange */
}

.terrorist-suspected {
  /* Terrorist (Suspected) */
  border-color: #ffd700; /* Gold */
  border-style: dotted;
}

/* Criminals */
.criminal-sentenced {
  /* Criminal (Sentenced) */
  border-color: #dc143c; /* Crimson */
  border-style: dotted;
}

.criminal-suspected {
  /* Criminal (Suspected) */
  border-color: #ff4500; /* Orange red */
  border-style: dotted;
}

.criminal-charged {
  /* Criminal (Charged) */
  border-color: #ff8c00; /* Dark orange */
  border-style: dotted;
}

/* Person of Interest */
.person-of-interest {
  /* Person of Interest */
  border-color: #808080; /* Grey */
}

/* Deceased */
.deceased {
  /* Deceased */
  border-color: #333; /* Dark grey */
}

/* Victim */
.victim {
  /* Victim */
  border-color: #32cd32; /* Lime green */
}

/* Employee */
.employee {
  /* Employee */
  border-color: #4169e1; /* Royal blue */
}

/* Government Official */
.government-official {
  /* Government Official */
  border-color: #00008b; /* Dark blue */
}

/* Law Enforcement */
.law-enforcement {
  /* Law Enforcement */
  border-color: #008b8b; /* Dark cyan */
}

/* Non-Governmental Organization */
.ngo {
  /* Non-Governmental Organization */
  border-color: #6a5acd; /* Slate blue */
}

/* Person of Interest with a grey solid line */
.victim {
  /* Person of Interest */
  border: 3px dotted green;
}

/* Person of Interest with a grey solid line */
.media-personality {
  /* Media Personality */
  border: 3px dotted purple;
}

/* Non-Governmental Organization */
.non-governmental-organization {
  /* Non-Governmental Organization */
  border-color: #6a5acd; /* Slate blue */
}

/* Journalist */
.journalist {
  /* Journalist */
  border-color: #20b2aa; /* Light sea green */
}

/* Politician */
.politician {
  /* Politician */
  border-color: #8b0000; /* Dark red */
}

/* Professional */
.professional {
  /* Professional */
  border-color: #2f4f4f; /* Dark slate grey */
}

/* Military */
.military {
  /* Military */
  border-color: #556b2f; /* Dark olive green */
}

.category-label {
  display: block; /* ensures it appears on a new line */
  font-size: 0.8em; /* smaller font size */
  color: #666; /* a more subdued color */
  /* Add more styling as needed */
}

.name-category-cell {
  /* Styles for the name and category cell */
}

.name-category-cell .category-label {
  display: block; /* ensures it appears on a new line */
  font-size: 0.8em; /* smaller font size */
  color: #999; /* a more subdued color */
  border: none; /* no border for category label */
}

/* This applies a vertical gradient background to tr elements within the .gradient-table class only */
.gradient-table tr {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

/* Ensure the cells in the .gradient-table do not have a solid background color */
.gradient-table td {
  background-color: transparent;
}

/* Lower the dropdown by 5px and add a gradient background */
.nav-link + .dropdown-menu {
  top: calc(100% + 6px); /* Adjust this value as needed */
  background: linear-gradient(to bottom, #000000, #223138);
  border-radius: 0; /* Remove rounded edges */
}

/* Set the text color for dropdown items and remove the background color */
.dropdown-menu > a {
  color: white; /* Text color for menu items */
  background-color: transparent;
}

/* Change text color to orange on hover */
.dropdown-menu > a:hover {
  color: #9a8254; /* Text color on hover */
  background-color: transparent;
}

/* Remove rounded edges from the dropdown menu */
.dropdown-menu {
  border-radius: 0;
}

/* Add pseudo-element for the dotted and solid line */
.dropdown-menu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #000000 50%, transparent 50%),
    linear-gradient(to right, transparent 50%, #000000 50%);
  border-top: 1px dotted #000; /* Half of the line dotted */
  border-bottom: 1px solid #000; /* Half of the line solid */
}

#linkCanvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#zoomButtons {
  position: absolute;
  top: 80px;
  right: 10px;
}

.card {
  background-color: rgba(0, 0, 0, 0.6);
  min-height: 100px;
  border-radius: 10px;
}

/* Dedicated classes for custom card styles */
.custom-card-header {
  background-color: #333; /* Solid black background */
  color: #ffffff; /* White text */
  font-weight: bold;
  opacity: 0.8; /* Adjust transparency */
}

.custom-card-body {
  background-color: #666; /* Solid black background */
  color: #ffffff; /* White text */
  opacity: 0.8; /* Adjust transparency */
  display: flex; /* Establish flex container */
  flex-direction: column; /* Stack children vertically */
  height: 100%; /* Take full height of the parent */
}

.flex-grow-spacer {
  flex-grow: 1; /* Takes up all available space */
}

.btn-sign-up {
  align-self: flex-end; /* Aligns the button to the bottom */
  width: 100%; /* Optional: makes the button full width */
}

/* Ensure text and children elements are fully opaque */
.custom-card-header *,
.custom-card-body * {
  opacity: 1 !important;
}
.spacer {
  flex: 1; /* This will push the footer to the bottom */
}

/* Vertically Center the login form */
.center-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 80vh; /* Full viewport height */
  padding: 0 20px; /* Horizontal padding */
  box-sizing: border-box; /* Include padding in height calculation */
}

.center-login {
    width: 30%;
    margin: 0 auto;
    border: 1px solid #000;
    border-radius: 15px;
    padding: 45px 0 100px;
    box-shadow: 
        inset 0 0 50px #0a2029,      /* inner white */
        inset 20px 0 80px #202e35,   /* inner left magenta short */
        inset -20px 0 80px #202e35,  /* inner right cyan short */
        inset 20px 0 300px #202e35,  /* inner left magenta broad */
        inset -20px 0 300px #202e35, /* inner right cyan broad */
        0 0 50px #021118,            /* outer white */
        -10px 0 80px #021118,        /* outer left magenta */
        10px 0 80px #021118;         /* outer right cyan */
}

/* Center the login form */
.login-form {
  max-width: 300px;
  width: 100%; /* Ensure it doesn't exceed the container's width */
  margin: auto; /* Helpful for additional centering if needed */
  box-sizing: border-box;
}

.login-form * {
  text-align: center;
}

.fa-calendar {
	color:#fff;
}

/* Logo styling */
.logo_home {
  width: 300px;
  margin: 0 auto;
  padding-top: 10%;
  max-width: 300px;
}

.logo-login {
    width: 300px;
    margin-left-10px;
}

.toolbar {
  background-color: rgba(35, 49, 56, 0.1);
  border: 1px solid #2b586f !important;
  border-radius: 5px;
  color: #fff; /* Text color */
  padding: 10px 10px; /* Padding for square shape */
  margin: 5px;
}

/* Optional: Add this if you want to change the appearance when the button is hovered or focused */
.toolbar:hover,
.toolbar:focus {
  background-color: rgba(35, 49, 56); /* Set hover background color for button */
  border: 1px solid #a29069 !important; /* Ensure the border is applied */
  color: #fff;
  box-shadow: 0 4px 6px rgba(162, 144, 105, 0.2);
  border-radius: 5px; /* Ensure the hover state maintains the same border-radius */
  padding: 10px 10px; /* Padding for square shape */
  margin: 5px;
}

.toolbar-header {
	padding-bottom:0px;
}

.toolbar-row {
  padding-top:10px;
  padding-bottom: 10px;
  padding-left:10px;
  background-color:#222;
  border: solid:1px solid #555;
}

.home-login {
  color: black;
}

* {
  box-sizing: border-box;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Image container */
.timeline-image {
  flex-shrink: 0; /* Prevents the image from shrinking */
}

/* Image styles */
.timeline-image img {
  border-radius: 50%;
  border: 3px solid #999;
  width: 50px;
  height: 50px;
  object-fit: cover;
  display: block;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
  margin: 0; /* Remove margin */
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  background-color: #333;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline-container::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #ff9f55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.timeline-left {
  left: 0;
}

/* Place the container to the right */
.timeline-right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timeline-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid #666;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #666;
}

/* Add arrows to the right container (pointing left) */
.timeline-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid #666;
  border-width: 10px 10px 10px 0;
  border-color: transparent #666 transparent transparent;
}

/* Fix the circle for containers on the right side */
.timeline-right::after {
  left: -16px;
}

/* The actual content */
.timeline-content {
  padding: 20px 30px;
  background-color: #333;
  position: relative;
  border-radius: 6px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adjust as needed */
}

.features-list {
  list-style-type: none;
  padding: 0;
}

.features-list li {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* Adjust as needed */
}

.custom-btn {
  background-color: #a29061;
  border-color: #a29061; /* Optional: Change border color if needed */
}

.feature-text {
  width: 40%;
  margin-left: 10%; /* Margin between image and text */
}

.feature-image {
  width: 40%; /* Adjusted for margin */
  background-color: rgba(
    68,
    68,
    68,
    0.2
  ); /* Set background color with 20% transparency */
  border-radius: 10px; /* Apply border-radius to the .info-box */
  border: 1px solid transparent; /* Add a 1px transparent border to create space for the gradient */
  border-image: linear-gradient(
    to bottom right,
    #444,
    #000,
    #444
  ); /* Diagonal gradient border */
  border-image-slice: 1; /* Ensure the whole border is the gradient */
}

.feature-image-home {
  width: 100%; /* Adjusted for margin */
  background-color: rgba(
    68,
    68,
    68,
    0.2
  ); /* Set background color with 20% transparency */
  border-radius: 10px; /* Apply border-radius to the .info-box */
  border: 1px solid transparent; /* Add a 1px transparent border to create space for the gradient */
  border-image: linear-gradient(
    to bottom right,
    #444,
    #1d2a2f,
    #444
  ); /* Diagonal gradient border */
  border-image-slice: 1; /* Ensure the whole border is the gradient */
}

.feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-image-home img {
  width: 100%;
  height: auto;
  display: block;
}

.features-list .feature-text ul {
  list-style-type: disc !important;
  margin-left: 20px !important;
  color: #fda429 !important;
}

.features-list .feature-text ul li {
  display: list-item !important;
}

.modal-dialog {
  max-width: 70%; /* Adjust this value to change the size of the modal */
}

.modal-content {
    border:1px solid #333;
    background-color: #202020; /* Not focus color */
    color:white !important;
}

.modal-title {
  color: white; /* White text for the title */
}

.modal-header {
	border:1px solid #333; /* Change this to the color you want */
}

.modal-header .close {
  color: white; /* White color for the close button */
}

.modal-body {
}

hr {
  border-top: 1px solid #666; /* Black line */
  opacity: 1; /* Make sure it's not transparent */
}

.hr-gradient {
  height: 1px; /* You can adjust the height as needed */
  background-image: linear-gradient(to right, #000, #444, #000, #444, #000);
  border: none; /* Removes default border of HR */
  opacity: 1; /* Make sure it's not transparent */
}

.about-image-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px; /* Space between rows */
}

.image-container {
  width: 30%; /* Adjust the width as needed */
  text-align: center; /* Center-aligns the caption */
}

.image-container img {
  width: 100%; /* Make image fill the container */
  border-radius: 10px; /* Rounded edges */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow */
  object-fit: cover; /* Ensures the images maintain their aspect ratio */
  background-color: rgba(
    68,
    68,
    68,
    0.2
  ); /* Set background color with 20% transparency */
  border: 1px solid transparent; /* Add a 1px transparent border to create space for the gradient */
  border-image: linear-gradient(
    to bottom right,
    #444,
    #000,
    #444
  ); /* Diagonal gradient border */
  border-image-slice: 1; /* Ensure the whole border is the gradient */
}

.image-caption {
  margin-top: 8px; /* Space between image and caption */
  color: #fda429; /* Caption text color, adjust as needed */
  font-size: 0.9em; /* Caption font size, adjust as needed */
}

.custom-toggle {
  position: relative;
  display: inline-block;
  width: 60px; /* Adjust the width as needed */
  height: 34px; /* Adjust the height as needed */
}

/* Hide the default checkbox input */
.custom-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style for the slider */
.custom-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc; /* Background color of the slider */
  border-radius: 34px; /* Make it round */
  transition: 0.4s; /* Smooth transition effect */
}

/* Styling for when the checkbox is checked */
.custom-toggle input:checked + .slider {
  background-color: #2196f3; /* Change the background color when checked */
}

/* Slider thumb (the circle inside the slider) */
.custom-toggle .slider:before {
  position: absolute;
  content: "";
  height: 26px; /* Size of the thumb circle */
  width: 26px; /* Size of the thumb circle */
  left: 4px; /* Position it inside the slider */
  bottom: 4px; /* Position it inside the slider */
  background-color: white; /* Color of the thumb circle */
  border-radius: 50%; /* Make it round */
  transition: 0.4s; /* Smooth transition effect */
}

/* Styling for when the checkbox is checked */
.custom-toggle input:checked + .slider:before {
  transform: translateX(
    26px
  ); /* Move the thumb circle to the right when checked */
}

.fourw-column-container {
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.fourw-column {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  width: 18%;
  min-height: 300px;
  background-color: #333; /* Added a light background color for visibility */
  color: #fff;
  text-align: center;
}

.fourw-column h4 {
  min-height: 80px; /* Adjust the min-height as needed */
  margin-bottom: 20px; /* This adds some space between the heading and the cards */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #333; /* Optional: adds a background color to the heading */
  padding: 10px;
  border-radius: 4px; /* Optional: rounds the corners of the heading */
}

.fourw-draggable {
  padding: 15px;
  margin-bottom: 10px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background-color: #444;
  cursor: move;
  transition: background-color 0.3s, box-shadow 0.3s;
  color: white;
}

.fourw-draggable:hover {
  background-color: #666;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tools-image .image-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tools-image .image-item {
  flex-basis: calc(33.33% - 10px); /* Adjust the width of each image item */
  text-align: center;
  background-color: #333; /* Background color for each image item */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); /* Add shadow effect */
}

.tools-image .image-item img {
  max-width: 100%;
  height: auto;
}

/* General Chat Styles */
.wa-chat-container {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #444;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #e5ddd5;
}

.wa-chat-bubble {
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 8px;
  width: 60%;
  word-wrap: break-word;
}

.wa-left {
  background-color: #dcf8c6; /* Light green background for Party 1 messages */
  text-align: left;
}

.wa-right {
  background-color: #fff; /* White background for Party 2 messages */
  text-align: left;
  margin-left: auto; /* Align to right */
}

/* Timestamps */
.wa-timestamp {
  font-size: 14px;
  color: #999;
  margin-top: 4px;
  align-self: center; /* Center-align timestamps */
}

/* Image Styles */
.wa-image {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Link Styles */
.wa-link {
  color: #1a73e8;
  text-decoration: none;
  word-break: break-all;
}

.wa-link:hover {
  text-decoration: underline;
}

/* PDF and Document Viewer Styles */
.wa-document-viewer {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  text-align: center;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height:width) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.search-form {
  display: flex;
  align-items: center;
  width: 40px; /* Initial width */
  overflow: hidden;
  transition: width 0.5s ease;
  background-color: transparent; /* Set background color to transparent */
  border: 1px solid #666; /* Add a border with color #666 */
  border-radius: 5px; /* Add rounded borders with 5px radius */
}

.search-input {
  flex-grow: 1; /* Allow input to expand within the container */
  background-color: transparent; /* Set background color to transparent */
  border: none; /* Remove border */
}

.social-icon {
	margin-right:10px;
}

/* Default row layout */
.row-layout {
    display: table;
    width: 100%;
}

/* Grid layout */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.search-icon {
  margin-left: -36px; /* Adjust as needed */
  transition: margin 0.5s ease;
}

.search-form.open {
  width: 300px; /* Expanded width */
}

.search-icon.open {
  margin-left: 0; /* Ensure icon stays aligned */
  transition: margin 0.5s ease;
}

/* Remove hover and active effects from the button */
.search-icon button {
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

  
.tag {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px 30px 5px 10px; /* Adjust padding for the tag */
    border-radius: 5px;
    background-color: #666;
    position: relative;
}

.displaytag {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px 10px 5px 10px; /* Adjust padding for the tag */
    border-radius: 5px;
    background-color: #666;
    position: relative;
	color: #fff; /* Set default color for display tags */
  	text-decoration: none; /* Remove underline from display tags */
 	transition: color 0.3s ease; /* Add transition for smooth color change */https://www.instagram.com/luckylukhele
}

.displaytag:hover {
  color: #a29069; /* Set hover color for display tags */
}


/* Adjust the position of the remove button */
.remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 90%; /* Set height to match the tag */
    line-height: 20px; /* Center the button vertically */
    background-color: #f00;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-right:5px;
}

.delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 90%; /* Set height to match the tag */
    line-height: 20px; /* Center the button vertically */
    background-color: #f00;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-right:5px;
}

/* Ensure the remove button is visible */
.tag:hover .remove-btn {
    display: block;
}

/* Adjust the padding for the tag wrapper */
.tag-wrapper {
    display: inline-block;
    position: relative; /* Ensure proper positioning of the remove button */
    vertical-align: top; /* Align tags to the top */
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

.page-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:10px;
    margin-bottom: 10px;
    color:#fff;
}

.page-info span {
    color: #fff;
    font-weight: normal;
    margin: 0 5px;
}

.page-info .page-number {
    font-weight: normal;
}

header.sticky-top {
    z-index: 1030; /* Ensures the header stays above other content */
}

/* Styling for pagination links */
.pagination a {
    background-color: rgba(35, 49, 56, 0.1); /* Same background as toolbar */
    border: 1px solid #2b586f !important; /* Same border as toolbar */
    color: #fff; /* Same text color as toolbar */
    padding: 10px; /* Padding for square shape */
    margin: 5px; /* Space between buttons */
    text-decoration: none; /* Remove underline from links */
    border-radius: 4px; /* Rounded corners */
    font-weight: normal;
    display: inline-block;
}

/* Active page styling */
.pagination a.active {
    background-color: #2b586f; /* Darker background for active page */
    border-color: #2b586f; /* Match border color for active page */
    font-weight: bold;
}

/* Optional: Add hover/focus effect */
.pagination a:hover,
.pagination a:focus {
    background-color: rgba(35, 49, 56, 1); /* Darker background on hover */
    color: #fff; /* Text color */
    text-decoration: none; /* No underline on the text */
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

  .about-image-row img {
    width: 80%; /* Larger images for smaller screens */
    margin-bottom: 15px; /* Space between images */
  }
}

/* Full-width containers */
.container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
}

/* Make sure that all arrows are pointing leftwards */
.container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Make sure all circles are at the same spot */
.left::after,
.right::after {
  left: 15px;
}

/* Make all right containers behave like the left ones */
.right {
  left: 0%;
}

#fileList {
    margin-top: 20px;
}
#fileList ul {
    list-style: none;
    padding-left: 0;
}
#fileList li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px 10px;
    background-color: #222; /* dark mode friendly */
    color: #ddd;
}
#fileList img {
    max-width: 100px;
    height: auto;
    margin-right: 12px;
    border-radius: 4px;
    border: 1px solid #555;
}
.file-remove-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #ff5c5c;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 8px;
}
.file-remove-btn:hover {
    color: #ff2c2c;
}

.existing-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}
.image-thumb {
    background-color: #1e1e1e;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 6px;
    text-align: center;
    width: 120px;
}
.image-thumb img {
    max-width: 100%;
    border-radius: 4px;
    margin-bottom: 5px;
    border: 1px solid #333;
}
.image-checkbox {
    display: block;
    font-size: 0.9em;
    color: #ccc;
}