:root{
    --primary: rgb(19,134,84);
    --secondary: #254336;
    --white:    #fff;
    --gray: #6c757d;
    --black: #041b2b;
    /* --black: #001C30; */
    --bs-black: #051826;
    --bs-blue: #0d6efd;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-cyan: #0dcaf0;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --border: #c4c3c3;
}
body{
    padding: 0;
    margin: 0;
    background: var(--bs-black) !important;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
header{
    top: 0;
    border-bottom: 1px solid var(--primary);
    z-index: 999;
    /* background: rgb(19,134,84);
    background: linear-gradient(90deg, rgba(19,134,84,1) 0%, rgba(19,134,84,1) 35%, rgba(37,154,33,1) 100%); */
}
header a.nav-link:hover{
    color: var(--primary);
    font-weight: 500;
}
header nav{
    padding: 0em 5.6em;
}
header nav .navbar-brand{
    font-family: 'Times New Roman', Times, serif;
}
header nav .navbar-toggler{
    background: rgb(19,134,84);
    background: linear-gradient(90deg, rgba(19,134,84,1) 0%, rgba(19,134,84,1) 35%, rgba(37,154,33,1) 100%);
    border: none;
}
header nav .navbar-toggler .navbar-toggler-icon{
    color: var(--white);
}
main{
    padding: 10px;
    /* background: rgb(14, 171, 192); */
    /* background: linear-gradient(90deg, rgba(19,134,84,1) 0%, rgba(19,134,84,1) 35%, rgba(37,154,33,1) 100%); */
}
main .card-title{
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}
main .card-text{
    color: var(--border);
}

header .btn-primary,
main .btn-primary{
    background: rgb(19,134,84);
    background: linear-gradient(90deg, rgba(19,134,84,1) 0%, rgba(19,134,84,1) 35%, rgba(37,154,33,1) 100%);
    border: none;
}

header .btn,
main .btn{
    border-radius: 8px;
    box-shadow: none;
}
main #partialUserResetForm form label{
    background: var(--bs-black);
    color: var(--white);
}

#loginModal .modal-dialog .modal-content, #registerModal .modal-dialog .modal-content{
    background: var(--bs-black);
    color: var(--white);
}
main#layout-content input,
main#layout-content select,
main #partialUserResetForm form input,
main .users-auth .card-body input[type='text'], 
main .users-auth .card-body input[type='password'],
main .users-auth .card-body input[type='text'], 
main .users-auth .card-body input[type='email'],
main .users-auth .card-body input[type='password']{
    background: var(--black);
    color: var(--white);
    box-shadow: none;
    border: 1px solid var(--border);
}
.card, .modal{
    border-radius: 12px;
}
header .offcanvas .offcanvas-body div a{
    text-decoration: none;
    color: #343a40;
}
header .offcanvas .offcanvas-body div a:hover{
    background: #efefef;
}
main .avatar,
header .avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gray);
} 
header .avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    cursor: pointer;
}
main .offcanvas-bottom{
    margin: 0px 15em;
    border-radius: 8px 8px 0 0;
}
main .container{
    margin-top: 30px;
}

main .category .lists{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: start;
}
main .category .lists a{
    list-style: none;
    margin: 5px;
    padding: 6px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid var(--bs-gray);
    border-radius: 8px;
    font-size: 11px;
}
main .category .lists a:hover{
    color: var(--white);
}
main .category .lists a:nth-child(8n+1), main .category .lists a:nth-child(8n+6){
    color: var(--primary);
}
main .category .lists a:nth-child(8n+2), main .category .lists a:nth-child(8n+5){
    color: var(--bs-primary);
}
main .category .lists a:nth-child(8n+3), main .category .lists a:nth-child(8n+8){
    color: var(--bs-warning);
}
main .category .lists a:nth-child(8n+5), main .category .lists a:nth-child(8n+7){
    color: var(--bs-gray);
}
main .category .lists a:nth-child(8n+6), main .category .lists a:nth-child(8n+8){
    color: var(--bs-danger);
}

main .users-auth{
    display: flex;
    justify-content: center;
}
main .tox-tinymce { 
    background: red !important; 
    /* color:#000; */
}
main .users-auth .card-body,
main .thread a.card,
main .channel .card,
main .heading, 
main .body, 
/* main #replyPost textarea,  */
main .reply{
    text-decoration: none;
    box-sizing: border-box;
    background: var(--black) !important;
    color: var(--white);
}

main .thread a.card:hover,main .channel .card:hover{
    border: 1px solid var(--primary);
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.profile img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--gray-500);
}
.btn{
    box-shadow: none;
}

main .channel a{
    text-decoration: none;
}
main h5, main p{
    font-size: 15px;
}
/* footer */
footer .min-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
}
footer .min-footer{
    border-top: 1px solid var(--primary);
}


/* Extra small devices (portrait phones, less than 576px) */
@media only screen and (max-width: 650px) {     
    header nav{
        padding: 0;
    }
  	main .container .row{
        display: flex;
        flex-direction: column-reverse;
    }
    main .offcanvas-bottom{
        margin: 0px 5px;
        border-radius: 8px 8px 0 0;
    }
    main .category a.create-btn{
        position: fixed;
        bottom: 50px;
        right: 5px; 
        margin: 8px;
        z-index: 999;
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    main .category a.create-btn i{
        font-size: 2em;
    }
    main .category a.create-btn span{
        display: none;
    }
    main .heading .heading-profile{
        display: none;
    }
    .card-text, p, h3{
        font-size: 14px;
    }
    p{
        font-size: 14px;
    }
    .profile img{
        width: 50px;
        height: 50px;
    }
    .card.heading span{
        display: none;
    }
    main .card .col-md-1{
        width: 25%;
    }
    main h5{
        font-size: 15px;
    }
    main h6, main p{
        font-size: 13px;
    }
    main {
        margin: 0;
        padding: 0;
        font-size: 13px;
    }
    main .col-md-11{
        width: 100%;
    }
}

@media only screen and (min-width: 960px) {

}

@media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
}

@media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
}

@media only screen and (max-device-width: 480px) {
   /* styles for mobile browsers smaller than 480px; (iPhone) */
}

@media only screen and (device-width: 768px) {
   /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}