body.dark-mode {
    background-color: #161B22;
    color: white;

    .navbar {
        background-color: #0D1117;
        border-bottom: 1px solid grey;
    }
    
    .nav-link .notificationIcon {
        opacity : 1 !important;
        color : #FEFEFE;
        font-size : 20px;
        margin-top : 5px;
        padding-bottom : -10px;
    }
    .nav-link.active {
        opacity: 1;
    }
    .navbar-dark .navbar-nav {
        color: white;
    }

    .form-label {
        color: white;
    }

    .form-control {
        background-color: #0D1117;
        color: white;
        

        &::placeholder {
            color: white;
        }
    }

    .btn-primary {
        background-color: #0D1117;
        border-color: #0D1117;
        color: white;

        &:hover {
            background-color: #1F6FD3;
            border-color: #1F6FD3;
        }
    }

    .alert {
        background-color: #0D1117;
        color: white;
        text-align: center;
        overflow: hidden;
    }

    .btn-add {
        background-color: #0DBEF3;
        border: 1px solid white;
        color: white;

        &:hover {
            background-color: #333;
        }
    }
    table.table {
        background-color: #212529;
        border-radius: 5px;
        padding: 5px;

        td {
            color: white;
        }

        thead th {
            color: white;
            background-color: #343a40;
        }
    }

    .icon-dark-mode::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }

    .form-select {
        background-color: #0D1117;
        color: white;
    }

    button[type="submit"][class=btn-btn-danger] {
        background-color: red; 
        border-color: #fff;  
        color: white;

        &:hover {
            color: #fff;
            border-color: red;
        }
    }

    .btn-edit {
        background-color: blue;
        border-color: blue;
        color: white;
        border-radius: 50%;
    }

    .btn-search {
        background-color: #0D1117;
        border-color: white;
        color: white;
    }

    .linked {
        color: #0DBEF3;
        text-decoration: none;
    }

    .btn-close { 
        filter: invert(1);
    }
    
    .categoryBtnContainer {
        background: rgba(50, 50, 50, 0.8);
        background-color: #343a40;
        display: flex;
        width: 340px;
        border: 1px solid #444;
        border-radius: 50px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .categoryBtnContainer .btn {
        color: white;
        background-color: #343a40;
    }
    .categoryBtnContainer .btn:hover {
        background-color: #555;
    }
    .categoryBtnContainer .active {
        background-color: #007bff;
    }
    .mode {
        background-color: grey;
    }
    
    .modal-body {
        background-color: #0D1117;
        color: white;
    }
    
    .field-name {
        background-color: #A9A9A9;
        padding: 5px;
        margin-bottom: 5px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
    }
    
    .field {
        background-color: black;
        padding: 5px;
        margin-bottom: 5px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-color: white;
        overflow:hidden;
        text-overflow: ellipsis;
    }
    .char-counter {
        color: white;
    }
    tr:hover {
        box-shadow: 0 0 11px rgba(0, 0, 255, .2),
                    0 0 6px rgba(255, 255, 255, .5),
                    0 0 16px rgba(128, 0, 128, .5);
    }
    .page-item.active .page-link {
        background-color: #343a40;
        border-color: #343a40;
    }
    .message .error {
        background-color: #f8d7da;
        border-color: red;
        color: black;
        padding-right: 50px;
    }
    .message .success {
        background-color: #7be894;
        border-color: #306f58;
        color: green;
        padding-right: 50px;
    }
    .deleteSection {
        background-color: #161B22;
        color: #f8d7da;
        border: 1px solid #f5c6cb;
    }
    
    .deleteSection .form-label {
        color: #f8d7da;
    }
    
    .deleteSection input[type="text"],
    .deleteSection input[type="password"] {
        background-color: #161B22;
        border: 1px solid #6c757d;
        color: white;
    }
    
    .deleteSection .btn-danger {
        background-color: #bd2130;
        border-color: #bd2130;
    }
    
    .deleteSection .btn-danger:hover {
        background-color: #dc3545;
        border-color: #dc3545;
    }
}
body {
    background-color: #f4f6f9;
}
.pagination {
    display: flex;
    justify-content: center;
}
.page-item.active .page-link {
    background-color: write;
    border-color: #007bff;
}
.page-link {
    border-radius: 50%;
    border-color: #007bff;
}
tr:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.2);
}

.char-counter {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
    text-align: right;
}
.noCategory {
    background-color: white;
    border : 1px solid black;
}

.mode {
    background-color: #f8f9fa;
}

.modal-body {
    background-color: #0D1117;
    color: white;
}

.field-name {
    background-color: #A9A9A9;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.field {
    background-color: black;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: white;
    overflow:hidden;
    text-overflow: ellipsis;
}

.form-check-input,
.form-control,
.form-select {
    border : 1px solid grey;
    border-radius : 5px;
}

::placeholder {
    color: #ffffff;
    opacity: 1;
}

.input-class ::placeholder {
    color: #ffffff;
    opacity: 1;
}

#input-id ::placeholder {
    color: #ffffff;
    opacity: 1;
}


.tasks-heading {
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
}

.disabled-button {
    background-color: #ccc;
    cursor: not-allowed;
}

.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    column-gap: 10px;
}

.profilePicture {
    margin-bottom: 1px;
}

.action-column {
    text-align: center;
}

.mark-completed-btn {
    background-color: #28a745;
    color: #fff;
}

.btn-group {
    margin-left: 12px;
}

.btn-search {
    background-color: #fff;
    border-color: black;
    color: #000;
}

.linked {
    text-decoration: none;
    color: hsl(211, 72%, 77%);
}

.mode {
    background-color: #f8f9fa;
}

.modal-title {
    color: black;
    right: 50%;
    transform: translateX(50%);
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.task-row {
    cursor: pointer;
}


.altPic {
    border: 2px solid white;
}

.no-caret::after {
    display: none;
}

    /* -- Categories Section -- */
@media (max-width: 600px) {
    .category-name {
        max-width: 200px;
    }
    .card-body table {
        min-width: 600px;
    }
}
@media (max-width: 799px) {
    .card .category-name {
        max-width: 300px;
    }
}
@media (min-width: 800px) {
    .card .category-name {
        max-width: 100%;
    }
}
.des-field {
    overflow:auto;
    white-space:nowrap;
    max-height:200px;
}
.card-header .category-name-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration:none;
}
.category-name  {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 21px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
.category-count {
    display:inline-block;
    font-size: 21px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.categoryBtnContainer {
    background: rgba(255, 255, 255, 0.8);
    background-color: white;
    display: flex;
    width: 340px;
    border: 1px solid black;
    border-radius: 50px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.categoryBtnContainer .btn {
    width: 50%;
    padding: 10px;
    border-radius: 50px;
    border: none;
    transition: all 0.3s 0.1s ease-in-out;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    color: black;
    background-color: white;
}
.categoryBtnContainer .btn:hover {
    background-color: #f0f0f0;
}
.categoryBtnContainer .active {
    background-color: #007bff !important;
    color: white;
}


::-webkit-scrollbar {
    scrollbar-width: thin; 
    scrollbar-color: #555 #2b2b2b;
}

::-webkit-scrollbar-track {
    background-color: #2b2b2b; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #555; 
    border-radius: 10px; 
    border: 3px solid #2b2b2b; 
}
::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}


/* Accounts page delete section  */

.deleteSection {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: 5px;
    margin-top: 1rem;
}

.deleteSection .form-label {
    font-weight: bold;
}

.deleteSection input[type="text"],
.deleteSection input[type="password"] {
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin-bottom: 1rem;
    color: #4d5154;
}

.deleteSection .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    width: 45%;
}

.deleteSection .btn-danger:hover {
    background-color: #bd2130;
    border-color: #bd2130;
}


.deleteSection .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    width: 45%;
}

.deleteSection .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.form-row-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.form-row-buttons .btn {
    width: 48%;
}
.fa-times-circle {
    color: #FF0000;
}
.fa-check-circle {
    color: green;
}
.fa-times-circle,
.fa-check-circle {
    top: 48%;
    right: 20px;
    transform: translateY(-50%);
    position: absolute;
}
.button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-primary {
        background-color : #1F6FD3 !important;
        color : white;
        border : 1px solid #1F6FD3;
    }
}
.valid {
    color: green;
    opacity : 0.8;
}

.invalid {
    color: red;
    opacity : 0.8;
}

.password-policy {
    display: none;
    position: relative;
    width: 210px;
    margin: 10px auto;
    padding-right : 40px;
    z-index:100;
    margin-bottom:-10px;
}

.password-policy p {
    margin: 0 0 10px;
    font-weight: bold;
    opacity : 0.8;
    text-align: center;
    border-bottom:1px solid grey;
    padding-bottom: 5px;
}

.password-policy ul {
    list-style: disc inside;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: left;
}

.password-policy li {
    margin: 3px 3px;
    font-size: 14px;
}
/*  */
.container__ {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    flex-direction: column;
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 11px rgba(0, 0, 255, .2),
            0 0 6px rgba(255, 255, 255, .5),
            0 0 16px rgba(128, 0, 128, .5);
    overflow: hidden;
}

.btnContainer_ {
    background-color:white;
    display: flex;
    width : 170px;
    border:1px solid black;
    border-radius: 50px;
    margin: 0 auto;
    button {
        width:50%;
        padding: 10px;
        border-radius:50px;
        border: none;
        transition: all 0.3s 0.1s ease-in-out;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
}

/* Global message design */ 
.fade-out {
    animation: fadeOut 5s forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.message {
    opacity: 1;
    transition: opacity 1s ease-out;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
}

.message .success {
    background-color: #7be894;
    padding: 20px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    color: #155724;
    display: flex;
    align-items: center;
    padding-right:50px;
}

.message .error {
    background-color: #f8d7da;
    padding: 20px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    color: #721c24;
    display: flex;
    align-items: center;
    padding-right : 50px;
}

.message.fade {
    opacity: 0;
}

.message.top-15 {
    top: 15%;
}

.message.top-dynamic {
    top: auto;
}
.form-control-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* running,completed,show categories table design for longer fields */

.table-responsive {
    margin: 0 -15px;
}
.table a {
    text-decoration: none;
    color: white;
    justify-content: center;
    align-items: center;
    gap: 5px;
    display: inline-block;
    max-width: 100%;
}
td, th {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    vertical-align: middle;
}
.field .truncate-text {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}