#imageUpload
{
    display: none;
}

#profileImage
{
    cursor: pointer;
}

#profile-container {
    margin: auto;
    width: 150px;
    height: 150px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

#profile-container img {
    width: 150px;
    height: 150px;
}

.no-border {
  border: none;
}

.upload_dropZone {
    color: #0f3c4b;
    background-color: var(--colorPrimaryPale, #c8dadf);
    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
    outline-offset: -12px;
    transition:
      outline-offset 0.2s ease-out,
      outline-color 0.3s ease-in-out,
      background-color 0.2s ease-out;
  }
  .upload_dropZone.highlight {
    outline-offset: -4px;
    outline-color: var(--colorPrimaryNormal, #0576bd);
    background-color: var(--colorPrimaryEighth, #c8dadf);
  }
  .upload_svg {
    fill: var(--colorPrimaryNormal, #0576bd);
  }
  .btn-upload {
    color: #fff;
    background-color: var(--colorPrimaryNormal);
  }
  .btn-upload:hover,
  .btn-upload:focus {
    color: #fff;
    background-color: var(--colorPrimaryGlare);
  }
  .upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
  }

  .trip-image-container {
    position: relative;
  }

  .trip-image {
    opacity: 1;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
  }

  .trip-image-remove {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }

  .trip-image-container:hover .trip-image {
    opacity: 0.3;
  }
  
  .trip-image-container:hover .trip-image-remove {
    opacity: 1;
  }

#trips-dashboard {
  display: flex;
  justify-content: space-around;
  width: 80%;
  max-width: 1000px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

.trip-section {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  width: 30%;
  background-color: #fff;
}

.trip-section {
  display: none; 
}

.trip-section.active {
  display: block;
}

.trip-section h2 {
  text-align: center;
  font-size: 1.5em;
  margin: 10px 0;
  color: #007bff;
}


.trip-item {
  background-color: #f9f9f9;
  margin: 10px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.trip-item:hover {
  background-color: #e0f0ff;
}

.trip-section li:last-child {
  border-bottom: none;
}

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

.tab-button {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #e0e0e0;
  border-radius: 5px;
  transition: background-color 0.3s;
}

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

@media (max-width: 600px) {
  #trips-dashboard {
      width: 95%;
  }

  .tab-buttons {
      flex-direction: column;
      align-items: center;
  }

  .tab-button {
      width: 80%;
      margin: 5px 0;
  }
}

.content {
  flex: 1; /* Take up remaining space */
  padding: 20px; /* Padding inside the content area */
  background-color: #fff; /* White background for content */
}

.whitespace {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.form-control-dark {
  border-color: var(--bs-gray);
}
.form-control-dark:focus {
  border-color: #fff;
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}

.text-small {
  font-size: 85%;
}

.dropdown-toggle:not(:focus) {
  outline: 0;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

.nav-link-hover:hover {
  color: #fff;
  background-color: #00aaff;
}

.required:after {
  content:" *";
  color: red;
}

.nav-bar-background-color {
  background-color: #ffffff;
}

.nav-bar-items-padding {
  padding-left: 2%;
}

.no-border {
  border: 0px;
}

.media-object-title {
  height: auto;
  width: 200px;
}

.text-bg-success {
  color: #fff;
  background-color: #198754;
}

.text-bg-warning {
  color: #212529;
  background-color: #ffc107;
}
.text-bg-danger {
  color: #fff;
  background-color: #dc3545;
}

.text-bg-unread {
  background-color: #c0d7f9cf;
}

.text-color-sanchari-platform {
  color: #07074d;
}

.loader {
  position: fixed;
  z-index: 999;
  height: 4em;
  width: 4em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #07074d;
}

.loader-bg {
  background-color: grey;
  position: fixed;
  z-index: 998;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

#user-profile-container {
    margin: auto;
    width: 35px;
    height: 35px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

#user-profile-container img {
    width: 35px;
    height: 35px;
}

.confirm-modal-content {
  border-radius: 10px; /* Rounded corners for the modal */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
}

.confirm-modal-header {
  background-color: #f0f0f0; /* Custom header background */
  border-bottom: 1px solid #ddd;
}

.confirm-modal-title {
  color: #333; /* Custom title color */
}

.confirm-modal-footer {
  background-color: #f8f9fa; /* Custom footer background */
  border-top: 1px solid #ddd;
}

/* Customize button styles (optional) */
.custom-modal-btn-primary {
  background-color: #28a745; /* Green confirm button */
  border-color: #28a745;
}

.custom-modal-btn-secondary {
  background-color: #6c757d; /* Grey cancel button */
  border-color: #6c757d;
}

/* Mobile Navigation Improvements */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }
  
  .navbar-nav {
    margin-bottom: 1rem;
  }
  
  .navbar-nav .nav-item {
    text-align: center;
    padding: 0.25rem 0;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin: 0.125rem 0;
  }
  
  .navbar-nav .nav-link:hover {
    background-color: #f8f9fa;
  }
  
  /* Mobile user menu adjustments */
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none;
    border: 1px solid #dee2e6;
    margin-top: 0.5rem;
  }
  
  /* Mobile buttons */
  .d-flex.align-items-center.ms-auto {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* Hide welcome text on very small screens */
  @media (max-width: 575.98px) {
    .d-none.d-lg-inline {
      display: none !important;
    }
  }
}

/* Navbar toggler improvements */
.navbar-toggler {
  border: 1px solid #dee2e6;
  padding: 0.375rem 0.75rem;
  background-color: transparent;
  border-radius: 0.375rem;
  position: relative;
}

.navbar-toggler:hover {
  background-color: #f8f9fa;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-color: #86b7fe;
}

/* Custom hamburger icon - fallback if Bootstrap icon doesn't show */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
}

/* Show SVG fallback if Bootstrap icon fails */
.navbar-toggler:not(.collapsed) .hamburger-icon,
.navbar-toggler .hamburger-icon {
  display: inline-block !important;
}

/* Hide the fallback SVG if Bootstrap icon is working */
.navbar-toggler-icon:not(:empty) + .hamburger-icon {
  display: none !important;
}

/* Alternative hamburger icon using CSS-only approach as additional fallback */
.navbar-toggler-icon:empty::before {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  box-shadow: 0 6px 0 #333, 0 12px 0 #333;
  border-radius: 2px;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  
  .navbar-toggler-icon:empty::before {
    background-color: #fff;
    box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
  }
  
  .hamburger-icon path {
    stroke: #fff;
  }
}

/* Better spacing for navigation items */
.nav-bar-items-padding {
  padding-left: 2%;
}

@media (max-width: 991.98px) {
  .nav-bar-items-padding {
    padding-left: 0;
  }
}

.sidebar {
    width: 20%;
}
.main-content {
    width: 70%;
}
.year-scroll-bar {
    width: 10%;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.year-scroll-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
.card-bg {
    background-color: #ffffff;
    border-radius: 1.5rem; /* Rounded corners for the cards */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-bg:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}
/* Mobile layout adjustments */
@media (max-width: 992px) {
    .sidebar, .main-content, .year-scroll-bar {
        width: 100%;
    }
    .year-scroll-bar {
        position: static;
        height: auto;
        overflow-y: visible;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .year-scroll-bar ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .year-scroll-bar li {
        margin: 0.5rem;
    }
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.duration-200 {
    transition-duration: 200ms
}

.duration-300 {
    transition-duration: 300ms
}

.duration-500 {
    transition-duration: 500ms
}

.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:gap-2 {
    gap: 0.5rem
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1
}

.grid {
    display: grid
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

/* Custom Styles for Feature Blocks */
.feature-block {
    margin: 4rem 0;
    padding: 2rem;
    border-radius: 1rem;
    background-color: #ffffff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    opacity: 0; /* Hidden initially for animation */
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out, box-shadow 0.3s ease-in-out;
}

/* Animation class added by JavaScript */
.feature-block.animate {
    opacity: 1;
    transform: translateY(0);
}

.feature-block:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 4rem;
    color: var(--primary-color);
    transition: transform 0.3s ease-in-out;
}

/* Subtle icon pulse animation on hover */
.feature-block:hover .feature-icon {
    transform: scale(1.05);
}

/* Removed .divider-line styles as requested */

/* Responsive adjustments for alignment */
@media (min-width: 768px) {
    .feature-content.right {
        text-align: end;
    }
}