html,
body {
    height: 100%;
}

body {
    background-color: #f5f5f5;
}

.form-signin {
    max-width: 330px;
    padding: 15px;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.bootbox-close-button {
    display: none;
}

@keyframes shake-shadow {
    20% {
        box-shadow: 0 0 5px #702137, 0 0 10px #702137, 0 0 20px #702137;
        transform: translate3d(-5px, 0, 0);
    }

    50% {
        box-shadow: 0 0 5px #3211ed, 0 0 10px #3211ed, 0 0 20px #3211ed;
        transform: translate3d(5px, 0, 0);
    }

    80% {
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        box-shadow: 0 0 5px #bb64c4, 0 0 10px #bb64c4, 0 0 20px #bb64c4;
        transform: translate3d(0, 0, 0);
    }
}

/* The switch - the box around the slider */
.switch {
    font-size: 14px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    --background: #28096b;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background);
    transition: .5s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    left: 10%;
    bottom: 15%;
    box-shadow: inset 8px -4px 0px 0px #fff000;
    background: var(--background);
    transition: .5s;
}

input:checked+.slider {
    background-color: #522ba7;
}

input:checked+.slider:before {
    transform: translateX(100%);
    box-shadow: inset 15px -4px 0px 15px #fff000;
}

/* dark-mode.css */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

.dark-mode .navbar,
.dark-mode .footer {
    background-color: #333;
}

body.dark-mode span[style*="color: #000000"],
body.dark-mode span[style*="color: #000"] {
    color: #ffffff !important;
}

body.dark-mode th.sorting,
body.dark-mode th.sorting_disabled {
    color: #ffffff !important;
}

body.dark-mode .modal-content {
    background-color: #292828;
}

body.dark-mode .table {
    background-color: #333;
    color: #fff;
}

body.dark-mode .table th,
body.dark-mode .table td {
    border-color: #444;
}

body.dark-mode .text-danger {
    color: #ff4b4b !important;
}

.edit-icon, .save-icon, .delete-icon {
    cursor: pointer;
}
.background-ordinary {
    background-color: #ceebfd;
    border: 1px solid #000;
    border-radius: 10px;
}

body.dark-mode .background-ordinary {
    background-color: #03456d;
    border: 1px solid #ffffff;
    border-radius: 10px;
}
.comment-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.comment-icons-and-date {
display: flex;
align-items: center;
margin-left: auto; /* Pushes the date and icons to the far right */
}
.comment-date {
color: gray;
font-style: italic;
font-size: .8em;
margin-right: 2px; /* Optional: Adds some space between the date and the icons */
}