:root {
    --body-light-bg-color: #cccccc;
    --body-dark-bg-color: #18222B;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.form-signin .checkbox {
    font-weight: 400;
}

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

.form-signin input[type="text"] {
    margin-bottom: -1px;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
}

/* Light Mode Styling */
html[data-bs-theme="light"] body {
    background-color: var(--body-light-bg-color) !important;
    --bs-bg-body: var(--body-light-bg-color) !important;
}

/* Dark Mode Styling */
[data-bs-theme="dark"] .nav-link {
    color: #ffffff;
}

[data-bs-theme="dark"] .nav-link:hover {
    color: #cccccc;
}

[data-bs-theme="dark"] .equip-box {
    border: 1px solid #444; /* Darker border */
    background: rgb(40, 40, 40); /* Darker background */
    box-shadow: 0 0 15px rgba(214, 214, 214, 0.2) !important; /* Adjust shadow for better visibility */
}

html[data-bs-theme="dark"] .equip-box {
    border: 1px solid #444 !important; /* Darker border */
    background: rgb(40, 40, 40) !important; /* Darker background */
    box-shadow: 0 0 15px rgba(87, 87, 87, 0.2) !important; /* Adjust shadow for better visibility */
    color: #ffffff;
}

html[data-bs-theme="dark"] .equip-box.bg-light,
html[data-bs-theme="dark"] .equip-box.bg-white {
    background: rgb(40, 40, 40) !important;
    box-shadow: 0 0 15px rgba(214, 214, 214, 0.2) !important; /* Adjust shadow for better visibility */
}

html[data-bs-theme="dark"] .equip-box2 {
    border: 1px solid #444 !important; /* Darker border */
    background: rgb(40, 40, 40) !important; /* Darker background */
    box-shadow: 0 0 15px rgba(87, 87, 87, 0.2) !important; /* Adjust shadow for better visibility */
    color: #ffffff;
}

html[data-bs-theme="dark"] .equip-box2.bg-light,
html[data-bs-theme="dark"] .equip-box2.bg-white {
    background: rgb(40, 40, 40) !important;
    box-shadow: 0 0 15px rgba(214, 214, 214, 0.2) !important; /* Adjust shadow for better visibility */
}

[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: #2a2a2a; /* Adjust to suit dark mode */
    color: #ffffff;
}
[data-bs-theme="dark"] .equip-box {
    border: 1px solid #444; /* Darker border */
    background: rgb(40, 40, 40); /* Darker background */
    box-shadow: 0 0 15px rgba(214, 214, 214, 0.2) !important; /* Adjust shadow for better visibility */
}

html[data-bs-theme="dark"] .equip-box {
    border: 1px solid #444 !important; /* Darker border */
    background: rgb(40, 40, 40) !important; /* Darker background */
    box-shadow: 0 0 15px rgba(87, 87, 87, 0.2) !important; /* Adjust shadow for better visibility */
    color: #ffffff;
}

html[data-bs-theme="dark"] .equip-box.bg-light,
html[data-bs-theme="dark"] .equip-box.bg-white {
    background: rgb(40, 40, 40) !important;
    box-shadow: 0 0 15px rgba(214, 214, 214, 0.2) !important; /* Adjust shadow for better visibility */
}

html[data-bs-theme="dark"] .equip-box2 {
    border: 1px solid #444 !important; /* Darker border */
    background: rgb(40, 40, 40) !important; /* Darker background */
    box-shadow: 0 0 15px rgba(87, 87, 87, 0.2) !important; /* Adjust shadow for better visibility */
    color: #ffffff;
}

html[data-bs-theme="dark"] .equip-box2.bg-light,
html[data-bs-theme="dark"] .equip-box2.bg-white {
    background: rgb(40, 40, 40) !important;
    box-shadow: 0 0 15px rgba(214, 214, 214, 0.2) !important; /* Adjust shadow for better visibility */
}

[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: #2a2a2a; /* Adjust to suit dark mode */
    color: #ffffff;
}

[data-bs-theme="dark"] .equip-checkout-box {
    border: 1px solid #444 !important; /* Darker border */
    background: rgb(40, 40, 40) !important; /* Darker background */
    box-shadow: 0 0 15px rgba(214, 214, 214, 0.2) !important; /* Adjust shadow for better visibility */
}

html[data-bs-theme="dark"] body {
    background-color: var(--body-dark-bg-color) !important;
    --bs-bg-body: var(--body-dark-bg-color) !important;
}

html[data-bs-theme="dark"] .container {
    background: rgb(24, 34, 43) !important;
    --bs-bg-body: rgb(24, 34, 43) !important;
}

[data-bs-theme="dark"] .navbar {
    background-color: rgb(31, 31, 31) !important;
    border-bottom: 1px solid #444 !important;
}

[data-bs-theme="dark"] .preview-form {
    background: rgb(70, 67, 67);
    color: #ffffff;
}

html[data-bs-theme="dark"] .dropdown-menu {
    background-color: rgb(31, 31, 31) !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: rgb(60, 60, 60) !important;
    color: #ffffff !important;
}