html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    background-color: #454d55 !important;
}

.content {
    flex: 1;
}

.lead {
    color: #fff;
}

.dark-mode .lockscreen-wrapper .lockscreen-name {
    font-weight: 600;
    text-align: center;
}

.dark-mode .lockscreen-wrapper .lockscreen-image {
    border-radius: 50%;
    background-color: #fff;
    padding: 5px;
    position: absolute;
    top: -22px; !important;
    left: -73px; !important;
    z-index: 10;
}

.dark-mode .fitm8-link {
    color: #17a564 !important;
    text-decoration: none;
    background-color: transparent;
}

.dark-mode .fitm8-link:not(.btn):hover {
    color: #008045;
}

.dark-mode .btn-fitm8 {
    color: #fff;
    background-color: #17a564;
    border-color: #17a564;
    box-shadow: none;
}

.dark-mode .btn-fitm8:hover {
    color: #fff;
    background-color: #008045;
    border-color: #008045;
    box-shadow: none;
}

.fitm8-link {
    color: #17a564 !important;
}

.dark-mode a:not(.btn):hover {
    color: #17a564 !important;
}

.nav-link {
    color: #17a564;
}

.card .reset-search-input{
    padding: 4px 14px 0 7px;
    font-size: 20px;
    color: #ffffff !important;
}
.card .reset-search-input:hover,.card .reset-search-input:focus{
    color:#00a65a !important;
}

.dark-mode .card {
    background-color: #343a40;
    color: #fff;
}

.dark-mode .card.card-dark {
    background-color: #454c52;
    color: #babec8;
    border: 1px solid #1a1a1a;
}

.text-body2 {
    color: #dddddd !important;
}

.dataTable{
    color: #343a40;
}
.dataTable .card-header,.dataTable .card-footer,.card-primary:not(.card-outline) > .card-header{
    background-color: #343a40 !important;
    color: #babec8;
    /*border: 1px solid #1a1a1a;*/
}
.card-secondary:not(.card-outline)>.card-header, .card-secondary:not(.card-outline)>.card-header a {
    color: #babec8;
}
.dataTable .card-footer{
    border-top: 0;
}
.dataTable th{
    background-color: #2e2e2e;
    color: #babec8;
    border: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a !important;
    border-top: 0;
}
.dataTable td{
    background-color: #454c52;
    color: #babec8;
    border: 1px solid #1a1a1a;
}
.dataTable th a{
    padding-left:10px;
    color:#bdbebf;
    cursor:pointer;
}
.dataTable th a:hover{
    color: #212529;
}
.dataTable th a.sort_asc .btnUp{
    color: #212529;
}
.dataTable th a.sort_asc .btnDown{
    color:#bdbebf;
}
.dataTable th a.sort_desc .btnUp{
    color:#bdbebf;
}
.dataTable th a.sort_desc .btnDown{
    color: #212529;
}
.dataTable .pagination a.active{
    color: #ffffff;
    background-color: #00a65a;
    border: 1px solid #1a1a1a;
}
.dataTable .pagination a.active:hover{
    background-color: #008447;
    color: #ffffff;
    border: 1px solid #008447;
}
.dataTable .btn-group{
    position: initial !important;
}

.card-tabs-fitm8 {
    color: #17a564;
    background-color: #3f474e;
    border-color: #17a564;
}
.card .table thead th {
    padding:14px !important;
}
.card .table thead th span {
    display: block;
}
.card .card-tools a{
    margin-left:5px;
}
.card .table thead th a {
    display: block;
    padding-left: 10px;
    color: #a1a1a1;
    cursor: pointer;
    text-decoration: none;
    min-width: 38px;
}
.card .table th a.sort_asc .btnUp{
    color: #000;
}
.card .table th a.sort_desc .btnDown {
    color: #000;
}
.card .table td{
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    max-width:500px;
    padding:14px !important;
}
.dark-mode .table td, .dark-mode .table th{
    border-color: #1a1a1a !important;
}
.dark-mode .table-bordered, .dark-mode .table-bordered td, .dark-mode .table-bordered th{
    border: 1px solid #1a1a1a !important;
}
.dark-mode .table-hover tbody tr:hover,.dark-mode .dataTable .table-hover tbody tr:hover td{
    color: #dee2e6;
    background-color: #343a40;
    border-color: #6c757d;
}
.dark-mode .btn-outline-secondary{
    color: #00a65a;
    background-color: #2e2e2e;
    border: 1px solid #1a1a1a;
}
.dark-mode .btn-outline-secondary:hover,.dark-mode .btn-outline-secondary:focus {
    color: #FFFFFF;
    background-color: #00a65a;
    border: 1px solid #1a1a1a;
}

/* Override bg-light with dark theme color */
.bg-light {
    background-color: #343a40 !important;  /* Dark gray background */
    color: #ffffff !important;            /* White text for better contrast */
}

/* Ensure text is visible on the dark background */
.bg-light,
.bg-light a:not(.btn) {
    color: #ffffff !important;
}

/* Style buttons on the dark background */
.bg-light .btn-outline-dark {
    color: #ffffff;
    border-color: #ffffff;
}

.bg-light .btn-outline-dark:hover {
    background-color: #ffffff;
    color: #343a40;
}

/* Navbar text color for mb-4 class */
.mb-4 {
    color: #ffffff !important;
}

/* Update text-muted for better visibility on dark backgrounds */
.text-muted {
    color: #b0b0b0 !important;  /* Light gray that's visible on dark backgrounds */
}

/* Ensure links with text-muted class are also styled */
a.text-muted {
    color: #b0b0b0 !important;
    text-decoration: none;
}

a.text-muted:hover {
    color: #d0d0d0 !important;  /* Slightly lighter on hover for better interactivity */
    text-decoration: underline;
}