body {
    background-color: var(--bs-body-color, #ffffff);
    background-image: linear-gradient(0deg, hsla(41, 100%, 50%, 0.05), hsla(170, 100%, 50%, 0.05), hsla(202, 100%, 50%, 0.05), hsla(234, 100%, 50%, 0.05));
    background-size: cover;
    background-attachment: fixed;
}

@media (min-width: 576px) {

    .container.width-xxl,
    .container.width-xl,
    .container.width-lg,
    .container.width-md,
    .container.width-sm{
        max-width: 540px
    }

    .width-xxl,
    .width-xl,
    .width-lg,
    .width-md,
    .width-sm {
        width: 540px
    }
}

@media (min-width: 768px) {

    .container.width-xxl,
    .container.width-xl,
    .container.width-lg,
    .container.width-md{
        max-width: 720px
    }

    .width-xxl,
    .width-xl,
    .width-lg,
    .width-md {
        width: 720px
    }
}

@media (min-width: 992px) {

    .container.width-xxl,
    .container.width-xl,
    .container.width-lg{
        max-width: 960px
    }

    .width-xxl,
    .width-xl,
    .width-lg {
        width: 960px
    }
}

@media (min-width: 1200px) {

    .container.width-xxl,
    .container.width-xl{
        max-width: 1140px
    }

    .width-xxl,
    .width-xl {
        width: 1140px
    }
}

@media (min-width: 1400px) {
    .container.width-xxl{
        max-width: 1320px
    }
    .width-xxl {
        width: 1320px
    }
}

@media(min-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        border-radius: 20px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: var(--bs-body-bg);
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--secondary);
        border-radius: 20px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--bs-primary, var(--primary));
    }
}

.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--bs-primary, var(--primary));
    font-weight: bold;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--bs-body-color, var(--dark));
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--bs-primary, var(--primary));
}

.navbar-dark .navbar-brand {
    color: var(--gray);
}

.card {
    background-color: var(--bs-container-background-color, #ffffff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    border-radius: 0.5rem;
}

.thread:hover {
    background-color: var(--light);
}

.thread,
.post {
    border-bottom: 1px solid var(--light);
    padding: 0.5rem 0px;
    border-radius: 0.5rem;
}

p {
    font-family: var(--font-family-sans-serif);
}

.nav-links {
    color: var(--bs-body-color, var(--dark));
}

.list-group-item {
    border-color: transparent;
    border-width: 1px !important;
}

.list-group-item.active {
    background-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--bs-primary, var(--primary)) !important;
    color: var(--bs-primary, var(--primary));
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: var(--white);
    background-color: var(--bs-primary, var(--primary));
    border-color: var(--bs-primary, var(--primary));
}

.avatar-1 {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.2rem;
}

.avatar-3 {
    width: 3rem;
    height: 3rem;
    border-radius: 9px;
    clear: left;
    float: left;
    padding: 2px;
}

.list-group-item {
    margin-bottom: 0px;
}

#topimg {
    margin: 0;
}

#topimg img {
    width: 100%;
    object-fit: cover;
    object-position: top left;
}

#footer {
    border-radius: 0 0 0.5rem 0.5rem;
}

.page-link {
    color: var(--bs-primary, var(--primary));
}

.page-item.active .page-link {
    background-color: var(--bs-primary, var(--primary));

}

.list-inline-item:not(:last-child) {
    margin-right: 0.3rem;
}

.nav-link1 {
    display: block;
    padding: 0rem 0rem;
}

.nav-item.usernotice.current>.nav-link1>.unread {
    display: inline-block !important;
}

.threadhr {
    border-bottom: 1px solid #88888833;
    padding: 0px 0px 0.5rem 0px;
}

.thread-cover-img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    object-position: center;
}

hr.othr {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #88888833;
    margin: 0;
    padding: 0;
    height: 1px;
}

.top-menu {
    top: 10px;
    position: sticky;
}

#header_nav .pure-menu-link,
#header_nav .nav-link {
    padding: 0;
}

#header_nav a {
    font-size: 0.85rem;
    color: var(--bs-body-color, var(--dark));
}

#header_nav a:hover,
#header_nav a:focus {
    opacity: .9;
}

#header_nav .btn.dropdown-toggle {
    color: var(--bs-body-color, var(--dark));
}

.pure-menu-active>.pure-menu-link,
.pure-menu-link:focus,
.pure-menu-link:hover {
    background-color: transparent;
    background-image: linear-gradient(180deg, transparent 0% 59%, var(--base01, transparent) 60% 100%);
}

#header_nav .active a {
    color: var(--bs-primary, var(--primary));
    font-weight: bold;
}

.threadlist .thread .subject a:not([class]):not(:hover):not(:focus):not(:active) {
    color: var(--bs-body-color, var(--dark));
}

#user_dropdown_menu li:not(.divider) {
    padding: .375em;
}

#user_dropdown_menu li>a {
    display: block;
}

#user_dropdown_menu li.divider {
    height: 1px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    padding: 0;
    margin: 0;
}

#header_secondary_menu .pure-menu-list .nav-item {
    padding: .25em;

}