/* Define common variables for both light and dark mode */
:root {
  /* --bg-stream-light: #000; */
  /* --bg-color-light: #dfe3ee; */
  /* --text-color-dark: #fff; */
  --text-color-light: #000;
  /* --navbar-bg-dark: #141414; */
  --navbar-bg-light: #f8f9fa;
  /* --link-color-dark: #bbb; */
  --link-color-light: #333;
  /* --link-hover-color-dark: #fff; */
  --link-hover-color-light: #131314;
  /* --button-bg-dark: #1c1c1c; */
  --button-bg-light: #131314;
  /* --footer-bg-dark: #000; */
  --footer-bg-light: #f8f9fa;
  --h2-text-color-light: #000;
  /* --h2-text-color-dark: #fff; */
  /* --a-text-color-dark: #fff; */
  /* --bs-nav-link-color-dark: #fff; */
  --bs-nav-link-color-light: #000;

  /* --bs-nav-link-hover-dark-color: #fff; */
  --bs-nav-link-hover-light-color: #000;
  /* stream.php */
  /* --bg-stream-light: #EDF2F6; */
}



.dropdown-menu {
  top: 50px !important;
  right: 31px !important;
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: 0.375rem;
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(0.375rem - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  left: auto !important;

  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}

.dropdown-menu {
  background-color: var(--bs-dropdown-link-active-color) !important;
}

.category h2 {
  color: var(--bs-nav-link-color-light);
}

/* .category-title.light-theme h2 {
  color: var(--h2-text-color-light) !important;
}
.category-title.dark-theme h2 {
  color: var(--h2-text-color-dark) !important;
} */

#settingsDropdown .setting-text {
  color: #fff;
}


.nav-link:focus,
.nav-link:focus {
  color: var(--bs-nav-link-hover-color) !important;
}

.nav-link {
  display: block;
  padding: 0 1rem !important;
}

.dropdown-toggle::after {
  display: none !important;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  /* border-bottom: 0; */
  border-left: .3em solid transparent;
}




.nav-tabs .nav-item {
  margin-bottom: 1px !important;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: transparent !important;
}



.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  /* color:; */
  background-color: #dfe3ee;
  border-bottom: #1c1c1c !important;
  border-color: transparent !important;
}



.nav-tabs {
  border-bottom: 1px solid #1a1b1b;
}

/* Styles for light mode */
.nav-link {
  color: var(--bs-nav-link-color-light);
}

.nav-link:hover {
  color: var(--bs-nav-link-hover-light-color);
}

#headOfArticles {
  color: var(--bg-color-light) !important;
}

.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}



@media screen and(min-width:768px) {
  .modal-content {
    background-color: var(--bg-color-light);
    color: black !important;
    border: none;
    margin-bottom: 20px;
    transition: transform 0.3s;
    width: 600px;

  }
}

.modal-content {
  background-color: var(--bg-color-light);
  color: black !important;
  border: none;
  margin-bottom: 20px;
  transition: transform 0.3s;

}


.morewithlike i {
  color: black;
  border: none;
  padding: 0;
}




.card {
  background-color: var(--bs-nav-link-color-dark);
  color: var(--bg-color-light) !important;
  border-color: #f8f9fa;
  border-radius: 10px;
}





.card-body a {
  background-color: transparent;
  border-color: #db5919;
}




.light-theme #settings-text {
  color: var(--settings-text-light) !important;
}

.dark-theme #settings-text {
  color: var(--settings-text-dark) !important;
}


.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: #e50914 !important;
}

.navbar-nav .nav-link {
  color: var(--link-color-dark) !important;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: var(--link-hover-color-dark) !important;
}


.footer {
  text-align: center;
  padding: 20px;
  background-color: var(--navbar-bg-dark);
  color: #777;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer p {
  margin-bottom: 0px !important;
}


.navbar-nav .nav-link {
  color: var(--link-color-light) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--link-hover-color-light) !important;
}

.btn-primary {
  background-color: #db5919 !important;
  border-color: var(--button-bg-light);
}



.footer {
  background-color: var(--footer-bg-light) !important;
  color: #333;
}

.navbar-logo {
  height: 60px;
}


/* Responsive Adjustments */
@media (max-width: 992px) {
  .item-card {
    min-width: 180px;
  }

  .category-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .item-card {
    min-width: 160px;
  }

  .navbar-logo {
    height: 40px;
    /* Adjust to a different height if needed */
  }

  .navbar {
    padding: 8px;
  }

  .category-title {
    font-size: 1.25rem;
  }

  .action-card .card-title {
    font-size: 1.1rem;
  }

  .action-card .btn {
    font-size: 0.95rem;
  }
}

@media (max-width: 576px) {
  .navbar-brand {
    font-size: 1.25rem;
  }

  .navbar-logo {
    height: 40px;
    /* Smaller height for small screens */
  }

  .nav-link {
    /* margin-left: 0.5rem; */
    font-size: 0.9rem;
    padding: 0 0.5rem !important;
  }

  .item-card {
    max-width: 140px;
  }

  .category-title {
    font-size: 1rem;
  }

  .action-card .card-title {
    font-size: 1rem;
  }

  .action-card .btn {
    font-size: 0.9rem;
  }

}

.btn-success {
  color: #fff;
  background-color: #f26522;
  border-color: #f26522;
}



.nav-item a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #131314;
  text-decoration: none;
  background-color: transparent;
}


.hyperlink {
  padding: 5px;
  background-color: #fafaff;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}



#linkHeading {
  color: #000;
}



#linkDesc {
  color: #232222;
}

.float-left a {
  color: #333;
}

.float-left a:hover {
  color: #333;
}

.list-group {
  color: #232222;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: .25rem;
}