@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

body {
  background: #EDF6F9;
  color: #333333;
  margin-top: 3rem;
  font-family: 'Poppins', sans-serif;
}

a:hover {
  color: blue;
}

a {
  text-decoration: none;
}

.display-6 {
  color: #444444;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: #000;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  z-index: 1;
  position: relative;
}

.bg-steel {
  background-color: #83C5BE;
}

.site-header .navbar-nav .nav-link {
  color: white;
}

.site-header .navbar-nav .nav-link:hover {
  color: #d3e8f5;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border-radius: 15px;
  margin-bottom: 20px;
}

a.text-decoration-none:hover {
  text-decoration: none !important;
}

.content-section-a {
  background: #ffffff;
  padding: 10px 20px;
  border-radius: 15px;
  margin-bottom: 15px;
}

.message-section-from {
  background: #2e6aa3;
  padding: 10px 20px;
  color: white;
  border-radius: 15px;
  border-top-left-radius: 0;
  display: inline-block;
  max-width: 80%;
}

.message-section-to-wrapper {
  display: inline-block;
}

.message-section-to {
  background: #b5d1eb;
  padding: 10px 20px;
  border-radius: 15px;
  border-top-right-radius: 0;
  display: flex;
  justify-content: flex-end;
  max-width: 75%;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3;
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.card {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-header,
.card-footer {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: none;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.card-body {
  padding: 1.5rem;
}

.modal-content,
.table {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.modal-content {
  border-radius: 15px;
}

.jumbotron {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.alert {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.alert .close {
  color: #000;
  opacity: 0.8;
}

.content-section {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.form-control {
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form-control:focus {
  box-shadow: 0 0 5px rgba(66, 164, 214, 0.5);
  outline: none;
}

.dropdown-top {
    z-index: 1050; /* Set to a high value to ensure it is above other elements */
    position: relative; /* Ensure it has a positioning context */
}
/* Sidebar styles */
#sidebar {
    height: calc(100vh - 30px); /* Adjust height for top and bottom margins */
    width: 250px;
    position: fixed;
    left: -250px; /* Initially hidden */
    transition: left 0.3s;
    background: rgba(255, 255, 255, 0.9); /* White with slight translucency */
    backdrop-filter: blur(10px); /* Blur effect */
    border-radius: 15px; /* Rounded edges */
    padding: 15px; /* Inner padding for content */
    margin: 15px; /* Gap between sidebar and viewport edges */
    z-index: 999;
}
/* Sidebar styles */
#sidebar {
    height: calc(100vh - 30px); /* Adjust height for top and bottom margins */
    width: 250px;
    position: fixed;
    left: -250px; /* Initially hidden */
    transition: left 0.3s;
    background: rgba(255, 255, 255, 0.6); /* White with slight translucency */
    backdrop-filter: blur(10px); /* Blur effect */
    border-radius: 15px; /* Rounded edges */
    padding: 15px; /* Inner padding for content */
    margin: 0 15px 0 15px; /* Gap between sidebar and viewport edges */
    z-index: 999;
}
#sidebar.active {
    left: 0; /* Show sidebar when active */
}
.sidebar-header {
    padding: 20px;
    background: rgba(255, 255, 255, 0.9); /* Match the sidebar background */
    backdrop-filter: blur(10px); /* Blur effect */
    color: white;
    border-radius: 15px 15px 0 0; /* Rounded top corners */
    margin: 0 0 0px 0px; /* Full-width margins at the bottom */
}
#sidebar.active .sidebar-header {
    display: block; /* Show the header when the sidebar is active */
}
.components {
    padding: 0; /* Remove default padding to use sidebar's padding */
}
.components li {
    margin: 10px 0;
}
.components li a {
    color: #2d2d2d; /* Darker link color for better visibility */
}
.btn-sidebar {
    background-color: #42a4d6;
    border-style: none;
}

/* Disable scrolling on body when sidebar is active */
body.sidebar-active {
    overflow: hidden; /* Disable scrolling */
}


.btn-outline-info {
  background: rgba(66, 164, 214, 0.3);
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-outline-info:hover {
  background: rgba(66, 164, 214, 0.5);
}

.btn {
  background: rgba(66, 164, 214, 0.7);
  border-radius: 5px;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  color: white;
  transition: background 0.3s, transform 0.2s;
}

.btn:hover {
  background: rgba(66, 164, 214, 1);
  transform: translateY(-2px);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(66, 164, 214, 0.5);
}
.carousel {
    position: relative;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: transparent; /* Make background transparent */
    border: none; /* Remove borders */
    width: 5%; /* Adjust width as needed */
    top: 50%; /* Align vertically */
    transform: translateY(-50%); /* Center vertically */
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1); /* Change icon color if needed */
}