/*====================================
Refactored CSS: Cleaned and Organized
======================================*/

/* General User Section */
/* ------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  font-family: 'Poppins', 'Roboto', 'Arial', sans-serif;
  font-size: 10px;
  line-height: 1.5;
  zoom: 90%;
  /* Sets zoom to 90% */
}

.login-panel {
  margin-top: 1%;
  background-color: rgb(212, 214, 166);
}

/* Wrappers */
.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box {
  width: 0px;
  height: 0px;
  border-width: 50px;
  border-style: dotted;
  border-color: #393 #933 #399 #993;
  border-radius: 50%;
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 50;
  animation-iteration-count: 50;


}

.user-section {
  margin-top: 15px;
  font-size: 25px;
  background-color: rgb(253, 255, 255);
  padding: 20px;
  text-align: center;
}

.user-section-inner {
  height: 65px;
  width: 65px;
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  margin-right: 15px;
  margin-top: 20px;
}

.user-section-inner img {
  margin-left: 10px;
  width: 55px;
  height: 60px;
}

.user-info {
  display: inline-block;
  color: #000 !important;
  padding-left: 10px;
  margin-bottom: 0;
}

.user-text-online {
  font-size: 15px;
  color: rgb(228, 9, 9);
}

.user-circle-online {
  width: 15px !important;
  height: 15px !important;
}

/* Sidebar Base Styles */
.sidebar {
  position: fixed;
  top: 120px;
  left: 0;
  width: 70px;
  /* Collapsed width */
  height: calc(100vh - 120px);
  /* Adjust sidebar height to fill remaining space */
  background: #000000;
  transition: width 0.4s ease;
  z-index: 1000;
  overflow-y: auto;
  /* Enable vertical scrolling */
  border-radius: 10px;
  padding: 0;
}



/* Hover and active state for submenu */
.sidebar .sub-menu li a:hover,
.sidebar .sub-menu li.active>a {
  background-color: #16a085;
  /* Accent color for active submenu */
  color: #ffffff;
  /* Bright text for active or hovered submenu items */
}

.sidebar:hover {
  width: 250px;
  /* Expanded width */
  background: #000000;
}

/* Sidebar Links */
.sidebar a {
  display: flex;
  align-items: left;
  padding: 12px 15px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  border-radius: 0px;
  margin: 5px 0;
  transition: all 0.3s ease;

}

/* Collapsed sidebar */
.sidebar.closed {
  width: 60px;
  /* Adjust to your preferred collapsed width */
}


/* Sidebar Icon and Title */
.sidebar i {
  font-size: 20px;
  /* Icon size */
  margin-right: 15px;
  /* Space between icon and text */
}

.sidebar .nav span {
  display: none;
  /* Hide titles by default */
}

.sidebar:hover .nav span {
  display: inline-block;
  /* Show titles on hover */
}

/* Sidebar Submenu Default State */
.sidebar .sub-menu {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  /* Smooth open/close */

}

/* Submenu Visible State */
.sidebar .has-sub.active .sub-menu {
  height: auto;
  /* Allow the full submenu to display */

}

/* Optional Styling */
.sidebar .has-sub>a {
  cursor: pointer;
}

/* Toggle Icon */
.sidebar .toggle-icon {
  margin-left: auto;
  font-size: 6px;
  transition: transform 0.3s ease;
}

.sidebar .has-sub.active .toggle-icon {
  transform: rotate(180deg);
  /* Rotate down when active */
}


.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Sidebar background color on hover for individual menu items */
.sidebar .nav li a:hover {
  background-color: #003366;
  /* Dark blue color on hover */
  color: white;
  /* White text color on hover */
  text-decoration: none;
  /* Remove underline */
}

/* Hover effect for sub-menu items */
.sidebar .nav li.has-sub .sub-menu li a:hover {
  background-color: #0055A5;
  /* Lighter blue background for sub-menu items */
  color: white;
  /* White text color on hover */
}

/* Hover effect for the dropdown toggle (e.g., Staff, Projects, etc.) */
.sidebar .nav li.has-sub>a:hover {
  background-color: #003366;
  /* Dark blue background for the main dropdown link */
  color: white;
  /* White text on hover */
}

/* Optional: Add a shadow effect to the submenu when hovered */
.sidebar .nav li.has-sub .sub-menu {
  display: none;
}

.sidebar .nav li.has-sub:hover .sub-menu {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  /* Add a shadow effect on hover */
}

/* Active state for clicked menu items */
.sidebar .nav li a.active {
  background-color: rgba(0, 85, 165, 0.8);
  /* Semi-transparent blue */
  color: white;
  /* White text color */
  border-radius: 5px;
  /* Rounded corners for a polished look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  transition: background-color 0.3s, box-shadow 0.3s;
  /* Smooth hover effects */
}


/* Navigation Styling */
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Consolas', monospace;
  /* Apply Consolas font to nav items */
}

.nav li {
  position: relative;
  padding: 8px 8px;
  white-space: nowrap;
}

.nav li a {
  color: #ecf0f1;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 40px;
  font-family: 'Consolas', monospace;
  /* Apply Consolas font to links */
}

.nav li a i {
  margin-right: 15px;
  font-size: 18px;
}

.menu-text {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sidebar:hover .menu-text {
  opacity: 1;
  transform: translateX(0);
}

/* Submenu Styling */
.sub-menu {
  background-color: #17242e;
  border-radius: 10px;
  border-bottom: 2px solid rgb(15, 18, 203);
  border-top: 2px solid rgb(19, 172, 88);
  display: none;
}

.sub-menu a {
  color: #FFBF00;
  /* Change this to your desired color */
}

.sub-menu a:hover {
  color: #33FF57;
  /* Change this to a different color on hover */
}


.nav li:hover .sub-menu {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.sub-menu li {
  padding: 0;
}

.sub-menu li a:hover {
  background-color: green;
  border-radius: 5px;
}

.sub-menu li::marker {
  color: rgb(255, 1, 217);
}

/* Custom Navbar Styling */
.navbar {
  background-color: #2C3E50;
  /* Dark Blue */
  border-radius: 0;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  /* Add shadow for depth */
}

.navbar-brand {
  color: #F5F5F5;
  /* Light Gray for the brand text */
  font-family: 'Arial Black', sans-serif;
  font-size: 28px;
}

.navbar-nav .nav-link {
  color: #ECF0F1;
  /* Light color for nav links */
  font-size: 18px;
  margin-left: 20px;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: #16A085;
  /* Accent color for hover */
}

.nav-item .badge {
  background-color: #E74C3C;
  /* Red badge color for unread messages */
  font-size: 12px;
}

.navbar .dropdown-menu {
  background-color: #435e34;
  /* Darker background for the dropdown */
  border-radius: 10px;
}

.navbar .dropdown-item {
  color: #ECF0F1;
  /* Light color for dropdown items */
}

.navbar .dropdown-item:hover {
  background-color: #16A085;
  /* Accent color for hover */
  color: #a62323;
}

.navbar .dropdown-item-text {
  font-size: 14px;
  color: #FFD700;
  /* Gold color for the account type */
  margin-bottom: 10px;
}

.navbar-toggler {
  border-color: #FFFFFF;
}

.navbar-toggler-icon {
  background-color: #FFFFFF;
}

/* Align the company name to the extreme right */
.navbar .navbar-nav.ml-auto {
  margin-right: auto;
}

.navbar span {
  margin-left: 20px;
  /* Adjust spacing between logo and navbar items */
  font-size: 20px;
  color: #F5F5F5;
  font-family: 'Arial', sans-serif;
}

@media (max-width: 768px) {
  .navbar-brand {
    font-size: 24px;
    /* Adjust brand text size for smaller screens */
  }
}

.top-label {
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -24px;
  margin-right: -24px;
}

#wrapper {
  width: 100%;
  margin-top: 55px !important;
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
}

#page-wrapper {
  padding: 0 2px;
  min-height: 568px;
  background-color: #c6c9ec53;
  overflow-y: auto;
  font-size: 16px;
  white-space: nowrap;


}

/* Media Queries */
@media(min-width: 768px) {
  #page-wrapper {
    margin: 0 0 0 20px;
    padding: 0 60px;
    min-height: 1000px;
  }
}

@media(max-width: 768px) {
  #wrapper {
    margin-top: 100px !important;
  }
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}

#popup {
  visibility: hidden;
  height: 40px;
  width: 350px;
  float: right;
  border-radius: 5px;
  text-align: center;
  text-anchor: left;
  border: 1px solid rgb(21, 52, 194);
  font-family: 'Consolas', monospace;
  color: #ccc;
}

.popup {
  font-size: 15px;
  margin-top: 20px;
  font-family: 'Consolas', monospace;
  padding-top: 3px;
}

.dashboardpanels {
  padding: 0px;
  height: 40px;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
}

/* The Modal (background) */
.modal {

  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  font-family: 'Consolas', monospace;
  font-size: 16px;
}

.modal-content {
  background-color: #fcfcfc;
  margin: 15% auto;
  padding: 2px;
  border: 3px solid rgb(187, 42, 131);

}

.quote {
  color: green;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
  border-bottom: 2px solid rgb(20, 1, 18) !important;
  border-top: 2px solid rgb(20, 1, 18) !important;
}

.receiptbody {
  text-align: center;
  padding-left: 100px;
  width: 90%;
}

.receiptbodycontrol {

  text-align: center;
  border: 0pt;
}

.page-header {
  color: rgb(15, 96, 128);
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  /* Add this line if you specifically want bold text */
}

/* Circle Buttons */

.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  border-radius: 25px;
  font-size: 18px;
  line-height: 1.33;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}

/* Top Right Navigation Dropdown Styles */

.navbar-top-links li {
  display: inline-block;
}

.navbar-top-links li:last-child {
  margin-right: 15px;
}

.navbar-top-links li a {
  padding: 20px;
  min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
  display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
  margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
  white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
  width: 310px;
  min-width: 0;
}

.navbar-top-links .dropdown-messages {
  margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
  margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
  margin-left: -123px;
}

.navbar-top-links .dropdown-user {
  right: 0;
  left: auto;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid rgb(155, 120, 181);
  background-color: #eee1e1;
  height: 40px;
  text-align: justify;
  padding: 5px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1px 15px;
  transition: 0.5s;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgb(107, 131, 199);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgb(100, 160, 113);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent {
  animation: fadeEffect 1.5s;
  /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* DataTables Overrides */

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background: transparent;
}

table.dataTable thead .sorting_asc:after {
  content: "\f0de";
  float: right;
  font-family: fontawesome;
}

table.dataTable thead .sorting_desc:after {
  content: "\f0dd";
  float: right;
  font-family: fontawesome;
}

table.dataTable thead .sorting:after {
  content: "\f0dc";
  float: right;
  font-family: fontawesome;
  color: rgba(50, 50, 50, .5);
}

#map {
  height: 600px;
  width: 100%;
}

@keyframes bounceIn {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
    color: #0166CC;
    /* Amber pulse */
  }

  100% {
    transform: scale(1);
  }
}

.animated-text {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  color: #a21fc6;
  animation: bounceIn 10.5s infinite ease-in-out;
}

.animated-text1 {
  display: inline-block;

  font-size: 14px;
  color: #FF9900;
  text-align: center;
  overflow: hidden;
  /* Ensures no overflow from sliding words */
  white-space: nowrap;
  /* Keeps text in one line */
}

.word {
  display: inline-block;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.word.visible {
  transform: translateX(0);
  opacity: 1;
}

/* From Uiverse.io by mrhyddenn */
button {
  position: relative;
  padding: 10px 20px;
  border-radius: 7px;
  border: 1px solid rgb(61, 106, 255);
  font-weight: 600;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

button:hover {
  background: rgb(61, 106, 255);
  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

button:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

button::before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

button:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}

/* For the popup */
.popupmessage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeOut 8s forwards;
}

/* Animation for the success (tick) icon */
.success-icon {
  animation: scaleIn 0.5s ease-out;
}

/* Animation for the error (X) icon */
.error-icon {
  animation: scaleIn 0.5s ease-out;
}

/* Scale in animation */
@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

svg {
  width: 100%;
}

.tick {
  transform-origin: center;
  animation: grow 0.8s ease-in-out forwards;
}

@keyframes grow {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.circle {
  transform-origin: center;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 1s linear;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
  }
}

#myTable.loading-overlay {
  position: relative;
}

#myTable.loading-overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

#myTable.loading-overlay:after {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.2em;
  z-index: 10000;
}

@keyframes tickAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.ticking-icon {
  animation: tickAnimation 0.5s ease-in-out;
}

.custom-modal-xl {
  max-width: 60%;
  width: auto;
}

.customstaff-modal-xl {
  max-width: 60%;
  width: auto;
}

.blue-text {
  color: blue;
  background: lightskyblue;
}

#ageMessage {
  color: red;
}

#ageMessage.valid {
  color: green;
}

.expandable-cell {
  word-wrap: break-word;
  /* Allows long words to break and wrap to the next line */
  white-space: pre-wrap;
  /* Preserves whitespace and allows wrapping */
}

#spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 200px;
  /* Adjust based on your design */
  margin: 0 auto;
  /* Center the spinner horizontally */
}

#spinner p {
  margin-top: 15px;
  /* Space between spinner and text */
  font-size: 1.5rem;
  /* Larger font size */
  color: #333;
  /* Adjust text color */
  font-weight: bold;
}

/* Spinner CSS */
.loading {
  --speed-of-animation: 0.9s;
  --gap: 10px;
  /* Increased gap */
  --first-color: #FFBF00;
  --second-color: #0166CC;
  --third-color: #C0C0C0;
  --fourth-color: #000000;
  --fifth-color: #C0C0C0;
  --sixth-color: #0166CC;
  --seventh-color: #FFBF00;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  /* Increased width */
  height: 150px;
  /* Increased height */
  gap: var(--gap);
  margin: 0 auto;
}

.loading span {
  width: 60px;
  /* Increased width of each bar */
  height: 150px;
  /* Increased height of each bar */
  background: var(--first-color);
  animation: scale var(--speed-of-animation) ease-in-out infinite;
}

.loading span:nth-child(2) {
  background: var(--second-color);
  animation-delay: -0.8s;
}

.loading span:nth-child(3) {
  background: var(--third-color);
  animation-delay: -0.7s;
}

.loading span:nth-child(4) {
  background: var(--fourth-color);
  animation-delay: -0.6s;
}

.loading span:nth-child(5) {
  background: var(--fifth-color);
  animation-delay: -0.5s;
}

.loading span:nth-child(6) {
  background: var(--sixth-color);
  animation-delay: -0.4s;
}

.loading span:nth-child(7) {
  background: var(--seventh-color);
  animation-delay: -0.3s;
}

@keyframes scale {

  0%,
  40%,
  100% {
    transform: scaleY(0.05);
  }

  20% {
    transform: scaleY(1);
  }
}