/* ================== General Styling ================== */

/* Default text color */
p {
  color: var(--secondary-color);
}

html.dark-theme main {
  background-color: black;
}

/* Main Component  */
html.dark-theme .main {
  background-color: black;
}

/* Nav bar */
html.dark-theme .topbar {
  background-color: #12181a;
  border-bottom: 1px solid rgb(237 237 237 / 12%);
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%);
}
html.dark-theme .user-box {
  padding-left: 3px;
  padding-right: 3px;
  border-left: 1px solid rgb(255 255 255 / 0.15);
  border-right: 1px solid rgb(255 255 255 / 0.15);
}
html.dark-theme .user-info .user-name {
  color: #e4e5e6;
}
html.dark-theme .user-info .designattion {
  color: #b3b3b3;
}

html.dark-theme .topbar .app-container .app-box:hover {
  cursor: pointer;
  background-color: rgb(255 255 255 / 0.15);
}
html.dark-theme .topbar .navbar .dropdown-menu {
  border: 1px solid rgb(241 241 241 / 15%);
}

/* ================== Small Scrollbar Styling ================== */

html.dark-theme {
  scrollbar-color: #555 #2c2c2c;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}

html.dark-theme ::-webkit-scrollbar {
  width: 3px;
}

html.dark-theme ::-webkit-scrollbar-track {
  background: #2c2c2c;
}

html.dark-theme ::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 2px;
}

html.dark-theme ::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

/* ================== Card Components ================== */
html.dark-theme .card {
  background-color: #12181a !important;
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%) !important;
  box-shadow: 10px 10px 10px 10px rgba(10, 9, 10, 0.98);
}
html.dark-theme .card-header {
  border-bottom: 0.5px solid rgb(255 255 255 / 12%);
}
html.dark-theme .card-title {
  color: white;
}

/* ================== Table Styling ================== */
html.dark-theme table {
  --bg-table-color: #e4e5e6 !important;
}
html.dark-theme .table {
  --bs-table-bg: rgb(12, 12, 12);
  --bg-table-color: white;
  border-color: rgb(255 255 255 / 12%);
  --bs-table-color: #e4e5e6 !important;
  --bs-table-striped-bg: #18191a !important;
  --bs-table-striped-color: white;
}

/* ================== Form Elements ================== */
html.dark-theme .form-control,
html.dark-theme .form-select {
  color: #c0c8d1;
  background-color: #12181a;
  border: 1px solid rgb(255 255 255 / 34%);
}
html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
  color: #c0c8d1;
}

html.dark-theme .ng-valid[required],
html.dark-theme .ng-valid.required {
  border-left: 5px solid #42a948; /* green */
}

html.dark-theme .ng-invalid:not(form) {
  border-left: 5px solid #cc1310; /* red */
}

html.dark-theme .inputerror {
  color: #cc1310; /* red */
}
html.dark-theme input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

html.dark-theme .required:after {
  content: " *";
  color: red;
}
html.dark-theme .task-button,
html.dark-theme.search-btn {
  color: white !important;
  background-color: #000 !important  ;
}
html.dark-theme .flex-fill {
  color: white;
}
html.dark-theme .card-body1 {
  background-color: #12181a;
}
html.dark-theme input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  color: white;
  filter: invert(0.8);
}

/* Styling the select dropdown in dark mode without changing the arrow */
html.dark-theme .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 fill%3D%22white%22 class%3D%22bi bi-chevron-down%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708%22%2F%3E%3C%2Fsvg%3E");
  background-image: var(--bs-form-select-bg-img);
}







/* ================== Labels and Text ================== */
html.dark-theme label,
html.dark-theme .text-muted {
  color: white !important;
}

/* ================== Sidebar Styling ================== */

html.dark-theme #sidebar {
  box-shadow: 0 0.1rem 0.7rem rgb(0 0 0 / 20%) !important;
  background: #12181a;
  border-right: 1px solid rgb(255 255 255 / 12%);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme #sidebar li a:hover {
  background-color: rgb(255 255 255 / 0.15);
  color: white !important;
}
html.dark-theme #sidebar .logobox {
  background-color: black;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
/* ================== Dropdown Menu ================== */
html.dark-theme .dropdown-menu {
  background-color: black;
  border: 1px solid rgb(255 255 255 / 0.15);
}
html.dark-theme .dropdown-menu li a {
  color: #fdfdfd !important;
}
html.dark-theme .dropdown-menu li a:hover {
  background-color: rgb(255 255 255 / 0.15);
  color: white !important;
}
html.dark-theme .dropdown-menu .msg-header {
  background-color: black;
  border-bottom: 1px solid rgb(241 241 241 / 15%);
}
html.dark-theme .dropdown-menu .msg-header:first-child p:first-of-type {
  color: white;
}
html.dark-theme .dropdown-menu .msg-footer {
  border-top: 1px solid rgb(241 241 241 / 15%);
}

html.dark-theme .header-notifications-list .dropdown-item {
  border-bottom: 1px solid rgb(241 241 241 / 15%);
}
html.dark-theme .header-notifications-list .dropdown-item:hover {
  border-bottom: 1px solid rgb(241 241 241 / 15%);
  background-color: #555;
}

/* ================== Modal Styling ================== */
html.dark-theme .modal-content {
  background-color: #12181a;
  background-color: #313334;
}
html.dark-theme .modal-header {
  border-bottom: 1px solid rgb(222 226 230 / 16%);
}
html.dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
html.dark-theme .footer {
  background: #12181a;
  border-top: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .btn-light-warning {
  color: #ff9305;
}
html.dark-theme .btn-light-dark {
  color: #757c83;
}
html.dark-theme .modal-content {
  background-color: #12181a;
}
html.dark-theme .modal-header {
  border-bottom: 1px solid rgb(222 226 230 / 16%);
}
html.dark-theme .modal-footer {
  border-top: 1px solid rgb(222 226 230 / 16%);
}

/* ================== List Groups ================== */
html.dark-theme .list-group-item {
  background-color: #313334;
  color: #fbfcfd;
  border-bottom: 1px solid rgb(255 255 255 / 13%);
  background-color: #12181a;
}
html.dark-theme .list-group-item a {
  color: white;
}
html.dark-theme .list-group-item li:hover {
  background-color: #7f8385;
}

/* ================== Miscellaneous ================== */
html.dark-theme footer {
  border: none;
}
html.dark-theme hr {
  color: rgb(255 255 255 / 12%);
  color: white;
}
html.dark-theme .report {
  color: white;
}
/* ================== Tab ================== */
html.dark-theme #myTab {
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .nav-link .nav-item {
  background-color: black;
}
/* alart msg */
html.dark-theme .tooltip-inner {
  background-color: white;
  color: black;
}

html.dark-theme .bs-tooltip-auto[data-popper-placement^="right"],
html.dark-theme .tooltip-arrow::before,
html.dark-theme .bs-tooltip-end {
  /* border-right-color: white !important; */
  border-top-color: white !important;
}


html.dark-theme .task-button {
  background-color:#12181a;
  background-color: var(--primary-color);;
}
html.dark-theme .bx-search:before{
  color: white;
}

html.dark-theme .bx-support:before{
  color: white;
}
/* card-table-view */
html.dark-theme .card-view{
  -webkit-box-shadow: 10px 10px 5px 0px rgba(4,7,8,1) !important;
-moz-box-shadow: 10px 10px 5px 0px rgba(4,7,8,1) !important;
  box-shadow: 10px 10px 5px 0px rgba(4,7,8,1) !important;
  background-color: #424245 !important;
  color: white !important;
}
html.dark-theme .button-1{
  background-color: #424245 ;
}
html.dark-theme .button-2{
  background-color: #424245 ;
}
html.dark-theme .button-1:hover{
  background-color: #008cff ;
    border-color: #008cff;
}


html.dark-theme .button-2:hover{
  background-color:red ;
  border-color: red;
}

html.dark-theme .button-position-fiexed{
  position: sticky;
  top: -5px;
  background:#424245 ;
  z-index: 1;
  padding: 2px 0;
  color: white !important;
 
}
html.dark-theme .card-view strong{
  color: white
}

html.dark-theme .colorForheadings{
  color: white !important;
}