/* ligh theme and others */
body {
    font-weight: 500;
    font-family: 'Quicksand', sans-serif;
}

html body.vsc-initialized header nav.navbar.navbar-expand-lg.navbar-dark.bg-dark {
    margin-bottom:30px;
}

/* navbar */

html body.vsc-initialized header nav.navbar.navbar-expand-lg.navbar-dark.bg-dark a:not(a.dropdown-item),
html body.vsc-initialized header nav.navbar.navbar-expand-lg.navbar-dark.bg-dark div.d-flex.flex-row-reverse.bd-highlight div.navbar-nav.pe-5 span.nav-item.nav-link {
    color: white;
}

html body.vsc-initialized header nav.navbar.navbar-expand-lg.navbar-dark.bg-dark div.d-flex.flex-row-reverse.bd-highlight div.navbar-nav.pe-5 a.nav-item.nav-link:hover,
#navbarDropdown:hover,
html body.vsc-initialized header nav.navbar.navbar-expand-lg.navbar-dark.bg-dark a.navbar-brand.ps-5.logo:hover,
html body.vsc-initialized header nav.navbar.navbar-expand-lg.navbar-dark.bg-dark div.d-flex.flex-row-reverse.bd-highlight div.navbar-nav.pe-5 span.nav-item.nav-link:hover {
    color: #979797
}


ul.navbar-nav {
    color: white;

}

/* logo styling */

a.logo {
    font-family: 'Pacifico', cursive;
    font-size: 1.3rem;
}

form div label span.asteriskField {
    display: none;
}


@media screen and (max-width:900px) {
    html body.vsc-initialized div.container {
        width: 800px;
    }
}

/* dark mode */

.dark-mode {
    background-color: #212529;
    color: white;
}

.dark-mode button:not(.login-box button):not(.btn-close) {
    background-color: white;
    color: #212529
}

/* for profile edit profile button */
.dark-mode button:not(.login-box button):not(.btn-close):hover {
    background: #292421;
    color: #fff;
    outline:white;
}

/* doesn't show on edit profile form section Update button and Post on comments -> white background hides the border */
.dark-mode .btn.btn-outline-dark:not(.login-box button):not(.btn-close):hover {
    background: #292421;
    border:1px solid white;
    color: #fff;
}

.dark-mode img {
    border: 1px solid rgb(77, 76, 76);
}

.dark-mode div.card:not(.alert .alert-danger) {
    color: black;
}

/* profile section */
.dark-mode .font-weight-bold {
    color: black;
}
.dark-mode div h5.mb-0{
    color:#6c757d;
}

.dark-mode form div.form-check.mt-1 label.form-check-label {
    color:#6c757d
}




/*  login box in dark mode */
.dark-mode .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
    border-radius: 10px;
}

.dark-mode .login-box button {
    color: #f8f9fa;
    border-color: #f8f9fa;
}

.dark-mode form div.form-check.mt-2 label.form-check-label {
    color:white;
}