/* Universal */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 2;
}

.container {
    max-width: 90%;
    margin: auto;
}

/* Utility */
.l-heading {
    font-size: 5rem;
    font-weight: 900;
}

.m-heading {
    font-size: 2rem;
    font-weight: 800;
}

.s-heading {
    font-size: 1rem;
    font-weight: 700;
}

.btn {
    outline: none;
    text-decoration: none;
}

.clr {
    clear: both;
}

/* Navbar */
#navbar {
    background-color: #196b69;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 70px;
    position: sticky;
    top: 0;
    z-index: 1;
}

#hamburger {
    display: none;
}

#navbar .logo-brand,
footer .logo-brand {
    background-color: #fff;
    color: #196b69;
    padding: 5px;
}

.nav-items {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin-top: 1.5rem;
    text-align: center;
}

#navbar .nav-items input {
    padding: 7px 10px;
    margin-top: -2rem;
    margin: initial 2rem;
    border-radius: 100rem;
    border: none;
    outline: none;
}

#navbar .nav-items li a {
    margin: 0.7rem 1rem;
    padding: 0.5rem 1rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

#navbar .nav-items li a:hover {
    background-color: #fff;
    color: #196b69;
    font-weight: 700;
    border: 2px #ddd solid;
}

.nav-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: -1.5rem;
}

.nav-flex > li {
    padding: 0.5rem;
}

.nav-flex > li:hover {
    padding: 0.5rem;
}

/* Showcase */
/*  background: url('/img/main-bg.png') no-repeat center center/cover;*/
#showcase {
    color: #fff;
    position: relative;
    height: 85vh;
}

#showcase > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 85vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

#showcase .showcase-text {
    text-align: left;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 12rem;
}

/* Join Forum */
#join-forum {
    background-color: #196b69;
    padding: 1rem 0;
    color: #fff;
    max-width: 60%;
    margin: 2rem auto;
    z-index: 1;
}

#join-forum #hide-form {
    margin-right: 1rem;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 900;
    position: absolute;
    top: 0;
    right: 0;
}

#join-forum form {
    max-width: 90%;
    margin: auto;
    text-align: center;
}

#join-forum form input,
#join-forum form textarea,
#join-forum form select {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin: 1rem 0;
}

#join-forum form textarea {
    padding-top: 1rem;
}

#join-forum form .s-input-1,
#join-forum form .s-input-2 {
    width: 48%;
}

#join-forum form .s-input-1 {
    float: left;
}

#join-forum form .s-input-2 {
    float: right;
}

#join-forum form .submit-btn {
    color: #196b69;
    background: #fff;
    font-size: 1rem;
    font-weight: 900;
    outline: none;
    border: none;
}

#join-forum form .submit-btn:hover {
    background: #1f7979;
    color: #fff;
    border: 1px solid #fff;
}

/* About Section */
#about {
    background: #e8f1f1;
}

#about .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2rem 0;
}

#about .about-img-1 img {
    max-width: 500px;
    margin: 4.5rem 0 0 2rem;
}

#about .about-img-2 img {
    max-width: 500px;
    margin: 4rem 3rem 0 0;
}

#about .about-text .about-btn {
    background-color: #2f7977;
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    margin: 2rem 0 4rem;
}

#about .about-text .about-btn:hover {
    background-color: #196b6f;
}

/* Featured Articles */
article {
    margin: 3rem 0;
}

article .article-description {
    max-width: 50%;
}

article h5 {
    margin-top: 1rem;
}

article .article-grid {
    display: flex;
    justify-content: space-between;
    /*margin: 1.5rem 0 0 2rem;*/
}

article .article-grid p {
    width: 90%;
    color: #444;
}

article .article-grid img {
    width: 90%;
}

article .article-grid a {
    color: #000;
    text-decoration: none;
    font-weight: 900;
}

article .article-grid a:hover {
    border-bottom: #000 solid 2px;
}

/* Categories Section */
#categories {
    margin: 3rem 0 0;
    padding: 2rem 0 3rem;
    background-color: #e8f1f1;
}

#categories .container p {
    margin-bottom: 1.5rem;
    max-width: 90%;
}

#categories .container .categories-grid {
    display: flex;
    justify-content: space-between;
}

#categories .container .categories-grid .div-1 div {
    background: #fff;
    margin: 0.3rem 0;
    padding: 0.5rem 2rem;
    font-size: 16px;
    max-width: 90%;
}

#categories .container .categories-grid .div-2 {
    max-width: 50%;
}

#categories .container .categories-grid .div-2 h3 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-top: 1rem;
}

#categories .container .categories-grid .div-2 img {
    max-width: 100%;
    height: 400px;
}

/* Event Video Section */
#event-video {
    padding: 2rem 0 5rem;
    background-color: #e8f1f1;
    position: relative;
}

#event-video h2 {
    margin-bottom: 2.5rem;
}

#event-video .video-links {
    background: url("/img/about-bg.png") no-repeat center center/cover;
    width: 100%;
    height: 700px;
}

#event-video .video-links .flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
}

#event-video .video-links .flex-container h5 {
    color: #fff;
    font-size: 1.5rem;
}

#event-video .video-links .flex-container .play-video-btn {
    color: #fff;
    font-size: 2rem;
    display: inline-block;
    margin-bottom: 2rem;
}

#event-video .video-links .flex-container .video-btn {
    background: #fff;
    color: blue;
    display: inline-block;
    font-weight: 600;
    padding: 0.6rem 2rem;
    margin-top: 10rem;
}

/* Blog Page */
#intro {
    margin: 3rem 0 1rem;
    text-align: center;
    /* color: #6d5d49; */
    color: #333;
}

#intro p {
    font-size: 1.2rem;
    font-weight: 800;
    max-width: 50%;
    margin: auto;
}

#articles {
    background: #e8f1f1;
    /* color: #6d5d49; */
    color: #333;
    padding: 1rem 0 5rem;
    margin-bottom: 0;
}

#articles .container {
    display: flex;
    justify-content: space-between;
}

#articles .container .content {
    flex-basis: 700px;
}

#articles h2 {
    color: #000;
    /* margin-left: 4rem; */
    margin-bottom: 2rem;
    width: 100%;
}

#articles small {
    display: block;
    background: #196b6f;
    color: #fff;
    width: 30%;
    padding: 0.4rem 0.6rem;
    text-align: center;
    margin-bottom: 0.2rem;
}

#articles .container .content img {
    max-width: 420px;
    height: 300px;
}

#articles .container .content h5 {
    color: #000;
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0.3rem 0;
}

#articles .container .content p {
    font-weight: 500;
}

#articles .container .content .article-footer {
    font-size: 1.5rem;
    font-weight: 400;
    color: #196b6f;
}

#articles .container .content .title {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
    margin: 0.5rem 0;
    margin-top: 0.3rem;
}

#articles .container .content hr {
    margin: 0 0 2rem;
}

#articles .container aside {
    flex-basis: 400px;
}

#articles .container aside {
    background-color: #333;
    padding: 15px;
    color: #fff;
}

#articles .container aside h3 {
    color: #fff;
    margin: 2rem 0 0.5rem;
}

#articles .container aside h3:first-child {
    margin: 0rem 0 0.5rem !important;
}

#articles .container aside input {
    /* width: 70%; */
    height: 40px;
    padding: 0 1rem;
    border-radius: 5px;
    outline: none;
    border: none;
}

#articles .container aside ul {
    list-style: none;
}

#articles .container aside li {
    padding: 0.2rem 0 0.2rem;
    border-bottom: 2px solid #196b6f;
}

#articles .container aside li a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
}

#articles .container aside li a p {
    font-size: 1rem;
    color: #ccc;
}

/* Blog Post */
#blog-post {
    background: #e8f1f1;
    padding: 3rem 0;
}

#blog-post .container {
    max-width: 70%;
}

#blog-post .container h3 {
    font-size: 1.2rem;
    width: 70%;
    margin-bottom: 2rem;
    margin-top: 3rem;
}

#blog-post .container .flex-container {
    display: flex;
    justify-content: space-between;
}

#blog-post .container .flex-container .sidebar {
    flex-basis: 200px;
}

#blog-post .container .flex-container .sidebar nav h3 {
    margin: 2rem 0 1rem 2rem;
}

#blog-post .container .flex-container .sidebar nav ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
}

#blog-post .container .flex-container .sidebar nav ul li a {
    color: #000;
    background: #fff;
    padding: 5px 8px;
}

#blog-post .container .flex-container .content {
    flex-basis: 750px;
}

#blog-post .container .flex-container .content .blog-btn-1,
#blog-post .container .flex-container .content .blog-btn-2 {
    background: #196b69;
    color: #fff;
    display: block;
    padding: 0.7rem 3rem;
    margin: 1rem 0 2rem;
    width: 25%;
    text-align: center;
}

#blog-post .container .flex-container .content .blog-btn-1 {
    float: left;
}

#blog-post .container .flex-container .content .blog-btn-2 {
    float: right;
}

#blog-post .container .flex-container .content form input,
#blog-post .container .flex-container .content form textarea {
    display: block;
    margin-bottom: 1rem;
    width: 100%;
    height: 60px;
    padding: 0 1rem;
    border: none;
    border-radius: 5px;
    outline: none;
}

#blog-post .container .flex-container .content form textarea {
    padding-top: 1rem;
    height: 200px;
}

#blog-post .container .flex-container .content form .s-input-1,
#blog-post .container .flex-container .content form .s-input-2 {
    width: 48%;
}

#blog-post .container .flex-container .content form .s-input-1 {
    float: left;
}

#blog-post .container .flex-container .content form .s-input-2 {
    float: right;
}

#blog-post .container .flex-container .content form .submit-btn {
    background: #196b69;
    color: #fff;
    margin-bottom: 5rem;
}

#blog-post .container .flex-container .content form .submit-btn:hover,
#blog-post .container .flex-container .content .blog-btn-1:hover,
#blog-post .container .flex-container .content .blog-btn-2:hover {
    background-color: #2f7977;
}

/* SignUp section */
#signup {
    background: #e8f1f1;
    padding: 2rem 0 3rem;
}

#signup h2 {
    text-align: center;
    margin: 2rem 0;
    font-size: 3rem;
    font-weight: 600;
}

#signup .container {
    max-width: 60%;
}

#signup form label,
#signup form input {
    display: block;
}

#signup form label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#signup form input {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
    border: none;
    border-radius: 5px;
    outline: none;
}

#signup form #firstname {
    float: left;
    width: 48%;
}

#signup form #lastname {
    float: right;
    width: 48%;
}

#signup form .signup-btn {
    background-color: #196b69;
    color: #fff;
    padding: 1.5rem 0 2.5rem;
    font-size: 1rem;
    font-weight: 600;
}

#signup h6 {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
}

#signup .facebook-btn,
#signup .google-btn {
    display: block;
    background: #fff;
    width: 45%;
    height: 75px;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 2rem 0;
    border: none;
    border-radius: 5px;
}

#signup .facebook-btn {
    float: left;
}

#signup .google-btn {
    float: right;
}

#signup .facebook-btn .facebook-icon {
    width: 15px;
    margin: -5px 15px -5px 0;
}

#signup .google-btn .google-icon {
    width: 35px;
    margin: 0px 15px -10px -2rem;
}

#signup p {
    text-align: center;
}

#signup a {
    color: #196b69;
    font-weight: 800;
}

/* SignIn Page */
#signin {
    background: #e8f1f1;
    padding: 2rem 0 3rem;
}

#signin h2 {
    text-align: center;
    margin: 2rem 0;
    font-size: 3rem;
    font-weight: 600;
}

#signin .container {
    max-width: 60%;
}

#signin form label,
#signin form input {
    display: block;
}

#signin form label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#signin form input {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
    border: none;
    border-radius: 5px;
    outline: none;
}

#signin form .signin-btn {
    background-color: #196b69;
    color: #fff;
    padding: 1.5rem 0 2.5rem;
    font-size: 1rem;
    font-weight: 600;
}

#signin p {
    text-align: center;
}

#signin a {
    color: #196b69;
    font-weight: 800;
}

/* Forgotten Password Page */
#fpassword {
    background: #e8f1f1;
    padding: 2rem 0 3rem;
}

#fpassword h2 {
    text-align: center;
    margin: 2rem 0;
    font-size: 3rem;
    font-weight: 600;
}

#fpassword .container {
    max-width: 60%;
}

#fpassword form label,
#fpassword form input {
    display: block;
}

#fpassword form label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#fpassword form input {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
    border: none;
    border-radius: 5px;
    outline: none;
}

#fpassword form .signin-btn {
    background-color: #196b69;
    color: #fff;
    padding: 1.5rem 0 2.5rem;
    font-size: 1rem;
    font-weight: 600;
}

#fpassword p {
    text-align: center;
}

#fpassword a {
    color: #196b69;
    font-weight: 800;
}

/* Forgotten Password Page */
#contact {
    background: #e8f1f1;
    padding: 2rem 0 3rem;
}

#contact h2 {
    text-align: left;
    margin: 2rem 0;
    font-size: 1.8rem;
    font-weight: 600;
}

#contact .container {
    max-width: 60%;
    margin: auto 5rem;
}

#contact form label,
#contact form input {
    display: block;
}

#contact form label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#contact form input,
#contact form textarea {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
    border: none;
    border-radius: 5px;
    outline: none;
    background-color: #fcfcfc;
}

#contact form textarea {
    padding: 1rem;
    height: 150px;
}

#contact form .signin-btn {
    background-color: #196b69;
    color: #fff;
    padding: 1.5rem 0 2.5rem;
    font-size: 1rem;
    font-weight: 600;
}

#contact p {
    text-align: center;
}

#contact a {
    color: #196b69;
    font-weight: 800;
}

/* Tutor Info Page */
#tutorinfo {
    margin: 2rem auto 5rem;
    max-width: 100%;
}

#tutorinfo .container {
    display: flex;
    justify-content: space-between;
}

#tutorinfo .container .tutor-requirements {
    flex-basis: 56%;
}

#tutorinfo .container .tutor-roles {
    flex-basis: 38%;
}

#tutorinfo .tutor-roles div {
    background: #e8f1f1;
    padding: 15px 25px;
    border-radius: 0.75rem;
}

#tutorinfo .tutor-roles .cta {
    display: flex;
}

#tutorinfo .tutor-roles .cta .apply-btn {
    background: #196b69;
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: 5px;
}

#tutorinfo .tutor-roles .cta .apply-btn:hover {
    background: #1f7979;
}

#tutorinfo .tutor-roles h4 {
    color: #196b69;
    font-size: 1.1rem;
}

#tutorinfo p {
    margin-bottom: 1rem;
    color: #444;
}

#tutorinfo h3 {
    font-size: 1.2rem;
    color: #196b69;
    margin: 3rem 0 1rem;
}

/* Student Info Page */
#studentinfo {
    margin: 2rem auto 5rem;
    max-width: 100%;
}

#studentinfo .container {
    display: flex;
    justify-content: space-between;
}

#studentinfo .container .student-requirements {
    flex-basis: 56%;
}

#studentinfo .container .student-roles {
    flex-basis: 38%;
}

#studentinfo .student-roles div {
    background: #e8f1f1;
    padding: 15px 25px;
    border-radius: 0.75rem;
}

#studentinfo .student-roles .cta {
    display: flex;
}

#studentinfo .student-roles .cta .apply-btn {
    background: #196b69;
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: 5px;
}

#studentinfo .student-roles .cta .apply-btn:hover {
    background: #1f7979;
}

#studentinfo .student-roles h4 {
    color: #196b69;
    font-size: 1.1rem;
}

#studentinfo p {
    margin-bottom: 1rem;
    color: #444;
}

#studentinfo h3 {
    font-size: 1.2rem;
    color: #196b69;
    margin: 3rem 0 1rem;
}

/* Application Page */
#application {
    background: #e8f1f1;
    padding: 5rem 0 10rem;
}

#application h2 {
    text-align: center;
    margin: 2rem 0 3rem;
    font-size: 2.2rem;
    font-weight: 600;
}

#application .container {
    background: #fff;
    padding: 20px 50px 50px;
    max-width: 50%;
}

#application form label,
#application form input {
    display: block;
}

#application form label {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

#application form input,
#application form textarea {
    background: #ddd;
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
    border: none;
    border-radius: 5px;
    outline: none;
}

#application form textarea {
    padding: 1rem;
    height: 250px;
}

#application form .apply-btn {
    background-color: #196b69;
    color: #fff;
    padding: 1.5rem 0 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    width: 30%;
    float: right;
}

#application p {
    margin-bottom: 2rem;
    text-align: center;
}

/* Dashboard Section */
/* Main Area */
#dashboard {
    position: relative;
}

#dashboard .sidebar {
    background: #fff;
    position: fixed;
    padding: 16px 0 2px;
    overflow-y: scroll;
    height: 100%;
}

#dashboard #sidebar h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-left: 15px;
    margin-bottom: 1.5rem;
}

#dashboard #sidebar h1 span {
    color: #196b69;
}

#dashboard #sidebar input {
    display: inline-block;
    margin: 1rem 0 -19rem 3rem;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    z-index: 2;
}

#dashboard #sidebar .hamburger {
    width: 40px;
    height: 3px;
    background: #1f7979;
    position: absolute;
    top: 2.5rem;
    right: 5px;
}

#dashboard #sidebar .hamburger:before {
    content: "";
    width: 40px;
    height: 3px;
    background: #1f7979;
    position: absolute;
    top: -15px;
}

#dashboard #sidebar .hamburger:after {
    content: "";
    width: 40px;
    height: 3px;
    background: #1f7979;
    position: absolute;
    top: 15px;
}

#dashboard #sidebar ul {
    list-style: none;
    margin-top: 1rem;
}

#dashboard #sidebar ul li {
    padding: 1rem 3rem 1rem 1rem;
    border-left: #fff solid 5px;
    margin-bottom: 5px;
}

#dashboard #sidebar ul li a {
    color: #000;
    text-decoration: none;
    padding: 1rem;
}

#dashboard #sidebar ul li:hover,
#dashboard #sidebar ul .active {
    background: #eee;
    border-left: #196b69 solid 5px;
}

#dashboard .content {
    background: #e8f1f1;
    max-width: 90%;
    margin-left: 18.5rem;
    padding: 0 0 2rem;
}

#dashboard #notification-bar {
    background-color: #fff;
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding: 0.8rem 2rem;
}

#dashboard #notification-bar input {
    border-radius: 1rem;
    border: none;
    background: #f4f4f4;
    outline: none;
    padding: 0.5rem 1rem;
    margin-right: 8rem;
    margin-left: 5rem;
}

#dashboard #notification-bar ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    list-style: none;
    color: #444;
    text-align: center;
}

#dashboard .content .content-info {
    margin: 2rem 0;
    padding: 0 3rem;
}

#dashboard .content .content-info .intro {
    margin-bottom: 3rem;
    color: #196b69;
}

#dashboard .content .content-info .intro .first {
    float: left;
}

#dashboard .content .content-info .intro .second {
    float: right;
}

#dashboard .content .content-info .stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    margin-bottom: 2rem;
}

#dashboard .content .content-info .stats .stat {
    margin: 0 6px;
}

#dashboard .content .content-info .stats .stat {
    display: flex;
    justify-content: flex-start;
    border-radius: 10px;
    padding: 30px 0;
}

#dashboard .content .content-info .stats h1,
#dashboard .content .content-info .stats small {
    color: #fff;
}

#dashboard .content .content-info .stats h1 {
    font-size: 2.5rem;
    margin-bottom: -1.5rem;
}

#dashboard .content .content-info .stats small {
    font-size: 11px;
}

#dashboard .content .content-info .stats .stat-1 {
    background: linear-gradient(#24bfb6, #41e595);
}

#dashboard .content .content-info .stats .stat-2 {
    background: linear-gradient(#9c56fe, #e16cdb);
}

#dashboard .content .content-info .stats .stat-3 {
    background: linear-gradient(#9c56fe, #58c8f2);
}

#dashboard .content .content-info .stats .stat-4 {
    background: linear-gradient(#ffc107, #f96cd6);
}

#dashboard .content .content-info .stats img {
    width: 50px;
    background: transparent;
}

#dashboard .content-links {
    background-color: #fff;
    border-radius: 10px;
    margin: 5rem 0 3rem;
    padding: 1rem 3rem;
}

#dashboard .content-links .forum-article,
#dashboard .content-links .guardians-counselling {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#dashboard .content-links .guardians-counselling {
    margin-top: 3rem;
}

#dashboard .content:last-child {
    text-align: center;
}

/* Help Page */
#dashboard #help {
    text-align: left;
}

#dashboard #help h6 {
    font-size: 1.3rem;
}

#dashboard #help .first {
    margin-top: 1.5rem;
}

#dashboard #help .last {
    margin-bottom: 2rem;
}

/* Create Article, Forum, Categories */
#dashboard .article-content,
#dashboard .forum-content {
    background: #e8f1f1;
    max-width: 100%;
    margin-left: 17rem;
    padding: 0 0 2rem;
}

#dashboard .article-content .content-info .intro,
#dashboard .forum-content .content-info .intro {
    color: #196b69;
    margin-bottom: 2rem;
}

#dashboard .article-content .content-info,
#dashboard .forum-content .content-info {
    margin: 2rem 0;
    padding: 0 0 0 3rem;
}

#dashboard .article-content .flex-container,
#dashboard .forum-content .flex-container {
    background: #fff;
    padding: 1rem 0 0 1rem;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#dashboard .article-content .flex-container .content-post,
#dashboard .forum-content .flex-container .content-post {
    flex: 3.5;
    margin-right: 4rem;
}

#dashboard .article-content .content-post .title,
#dashboard .forum-content .content-post .title {
    width: 100%;
    height: 60px;
    padding: 0 10px;
    margin-bottom: 2rem;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 5px;
    border: 1.2px solid #f4f4f4;
    box-shadow: 2px 3px 10px rgb(189, 189, 189);
    outline: none;
}

#dashboard .article-content .upload,
#dashboard .forum-content .upload {
    float: left;
    margin-right: 2rem;
    background: #ddd;
    padding: 5px 1rem;
}

#dashboard .article-content .add-to-forum,
#dashboard .forum-content .add-to-forum {
    float: left;
    background: #ddd;
    padding: 5px 1rem;
    margin-bottom: 1rem;
}

#dashboard .forum-content ul {
    list-style-type: none;
    margin-bottom: 1rem;
}

#dashboard .forum-content ul li {
    display: inline-block;
    margin-left: 1rem;
}

#dashboard .article-content .text,
#dashboard .forum-content .text {
    margin-bottom: 2rem;
}

#dashboard .article-content .text textarea,
#dashboard .forum-content .text textarea {
    width: 100%;
    height: 600px;
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgb(189, 189, 189);
    outline: none;
}

#dashboard .article-content .flex-container .content-function,
#dashboard .forum-content .flex-container .content-function {
    flex: 1.5;
}

#dashboard .article-content .content-function h2,
#dashboard .forum-content .content-function h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

#dashboard .article-content .content-function .publish-btn,
#dashboard .forum-content .content-function .publish-btn {
    background: #196b69;
    color: #fff;
    padding: 1rem 10px;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    width: 90%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#dashboard .content-function .publish-btn:hover,
#dashboard .forum-function .publish-btn:hover {
    background: #2f7977;
}

#dashboard .article-content .content-function .first div div {
    background: #ddd;
    display: inline-block;
    margin-right: 1rem;
    padding: 3px 16px;
}

#dashboard .article-content .content-function ul {
    list-style-type: none;
    margin-top: 1rem;
}

#dashboard .article-content .content-function ul li,
#dashboard .forum-content .content-function ul li {
    margin-bottom: 0.5rem;
}

#dashboard .article-content > p,
#dashboard .forum-content > p,
#dashboard .category-content > p {
    text-align: center;
    margin: 0 2.5rem;
    padding-bottom: 1rem;
}

/* Category */
#dashboard .category-content {
    background: #e8f1f1;
    max-width: 100%;
    margin-left: 18rem;
    padding: 0 0 2rem;
}

#dashboard .category-content .category-bar {
    padding: 1rem 2rem;
    border-bottom: 2px solid rgb(172, 169, 169);
}

#dashboard .category-content .category-bar ul {
    list-style: none;
    display: flex;
}

#dashboard .category-content .category-bar ul li {
    margin-left: 1.1rem;
}

#dashboard .category-content .category-bar ul li:nth-child(1) {
    font-size: 1.2rem;
    font-weight: 600;
}

#dashboard .category-content .category-bar ul li #select-1,
#dashboard .category-content .category-bar ul li #select-2 {
    background: #fb9d45;
    color: #fff;
    font-size: 0.9rem;
    padding: 10px 2rem 10px 1.5rem;
    border: none;
    border-radius: 5px;
}

#dashboard .category-content .category-bar ul li #select-2 {
    background: initial;
    color: #196b69;
    border: 1px solid #196b69;
}

#dashboard .category-content .category-bar ul li option {
    background: #fff;
    color: #fb9d45;
}

#dashboard .category-content .category-bar ul li .btn {
    border: none;
    font-size: 0.9rem;
}

#dashboard .category-content .category-bar ul li .search-btn {
    background: #e8f1f1;
    border-radius: 5px;
    color: #196b69;
    border: 1px solid #196b69;
    padding: 10px 2rem;
}

#dashboard .category-content .category-bar ul li .search-btn:hover {
    background: #196b6f;
    color: #fff;
}

#dashboard .category-content .category-bar ul li .reset-btn {
    background: #f862b7;
    border-radius: 5px;
    color: #fff;
    padding: 11px 2rem;
}

#dashboard .category-content .category-bar ul li .reset-btn:hover {
    background: #fff;
    color: #f862b7;
}

#dashboard .category-content .category-select {
    margin: 1rem 2rem;
}

#dashboard .category-content .category-select select {
    background: initial;
    color: #196b69;
    padding: 5px 1rem;
    border: 1px solid #196b69;
    border-radius: 5px;
}

#dashboard .category-content .category-select .categories {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 1rem;
    padding: 1.5rem 3rem;
}

#dashboard .category-content .category-select .categories .first {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 8rem;
}

#dashboard .category-content .category-select .categories .second {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#dashboard .category-content .category-select .categories .first > div {
    padding-left: 2rem;
}

#dashboard .category-content .category-select .categories .second > div {
    padding-left: 2rem;
}

#dashboard .category-content .category-select .categories h2 {
    font-size: 1.4rem;
    font-weight: 700;
}

#dashboard .category-content .category-select .categories .publish-btn {
    float: right;
    border: none;
    background-color: #196b69;
    color: #fff;
    padding: 15px 5rem;
    margin: 1.5rem 5rem 0 0;
}

#dashboard .category-content .category-select .categories .publish-btn:hover {
    background-color: #2f7977;
}

/* Student User List */
.table {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 1rem;
    padding: 1.5rem 1.5rem;
    overflow-x: auto;
}

#dashboard .add-student {
    float: right;
}

#dashboard .add-student .add-btn {
    background: #e8f1f1;
    border-radius: 5px;
    color: #196b69;
    border: 1px solid #196b69;
    padding: 8px 2rem;
}

#dashboard .add-student .add-btn:hover {
    background: #196b6f;
    color: #fff;
}

.table table {
    border: 1px solid #aaa;
}

.table th,
.table td {
    border-bottom: 1px solid #ddd;
}

.table th {
    background: #e8f1f1;
    text-align: center;
    padding: 5px 15px;
    width: 2rem;
}

.table tr:nth-child(even) {
    background-color: #e8f1f1;
}

.table td {
    text-align: center;
    vertical-align: middle;
    padding: 15px;
}

.table table tbody input {
    width: 20px;
    height: 20px;
}

.table table .approved {
    color: #fff;
    background-color: #f862b7;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
}

.table table .approved:hover {
    background-color: #f96cd6;
}

.table table .unapproved:hover {
    background-color: #9c56fe;
}

.table table .unapproved {
    color: #fff;
    background-color: #7f63f4;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
}

/* Notifiction Page */
.notifications {
    background-color: #fff;
    margin-top: 1.5rem;
    padding: 1rem 2rem;
}

.notifications div {
    margin: 1rem 0;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid;
}

/* Message Details */
.message-details {
    background-color: #fff;
    margin-top: 1.5rem;
    padding: 5rem 8rem;
    border-radius: 10px;
}

.message-details .msg-btn {
    color: #fff;
    background: #1f7979;
    border: none;
    margin-top: 1rem;
    padding: 12px 30px;
    float: right;
}

.message-details .msg-btn:hover {
    background: #2f7977;
}

/* Update Page */
#dashboard .update {
    background-color: #fff;
    padding: 20px 30px 30px;
    border-radius: 10px;
}

#dashboard .update form {
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 2.5rem;
}

#dashboard .update form label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}

#dashboard .update form .checkboxlists label {
    display: inline;
    font-weight: 700;
    margin-bottom: 5px;
}

#dashboard .update form input {
    height: 45px;
    width: 100%;
    border-radius: 5px;
    border: none;
    background: #f2f2f2;
    padding: 0 20px;
}

#dashboard .update form input[type="checkbox"] {
    height: 1em !important;
    width: 1em !important;
    border-radius: 1px !important;
    border: none;
    background: #f2f2f2;
    color: yellow !important;
    padding: 0 2px !important;
}

#dashboard .update form select,
#dashboard .update form textarea {
    height: 45px;
    width: 100%;
    border-radius: 5px;
    border: none;
    background: #f2f2f2;
    padding: 0 20px;
}

#dashboard .update form #upload {
    padding-top: 10px;
}

#dashboard .update form .update-btn {
    border: none;
    background: #1f7979;
    color: #fff;
    margin-top: 2.3rem;
    padding: 15px 50px;
}

#dashboard .update form .update-btn:hover {
    background: #196b6f;
}

/* Account Details */
#dashboard .update {
    background-color: #fff;
    padding: 20px 30px 30px;
    border-radius: 10px;
}

#dashboard .update section {
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 2.5rem;
}

#dashboard .update section label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}

#dashboard .update section p {
    height: 45px;
    width: 100%;
    border-radius: 5px;
    border: none;
    background: #f2f2f2;
    padding: 5px 20px;
}

/* Logout Page */
#dashboard .logout {
    background: #fff;
    height: 72vh;
    padding: 3rem 10rem 20rem;
}

/* #dashboard .logout:before{
    content: '';
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
} */

#dashboard .logout h2 {
    color: red;
    margin-bottom: 1rem;
}

#dashboard .logout > div {
    margin-top: 5rem;
}

#dashboard .logout a {
    background: #1f7979;
    color: #fff;
    padding: 15px 50px;
    margin: 0 5rem;
}

#dashboard .logout a:hover {
    background-color: #2f797f;
}

/* Forum Details Page */
#forum-details {
    max-width: 90%;
    margin: 5rem auto 15rem;
}

#forum-details h6,
#forum-details strong {
    color: #196b69;
}

#forum-details h6 {
    float: left;
    font-size: 1.3rem;
    font-weight: 700;
}

#forum-details p {
    float: right;
}

#forum-details article {
    background: #f2f2f2;
    border-radius: 10px;
    margin-bottom: 3rem;
    padding: 4rem 10rem 5rem 3rem;
    display: flex;
    justify-content: space-between;
}

#forum-details article .info {
    margin-left: 1.5rem;
}

#forum-details textarea {
    display: block;
    height: 350px;
    width: 100%;
    padding: 2rem;
}

#forum-details .submit-btn {
    background-color: #196b69;
    color: #fff;
    float: right;
    font-size: 1rem;
    margin-top: 3rem;
    padding: 1.5rem 3rem;
    width: 20%;
    border: none;
    border-radius: 5px;
}

#forum-details .submit-btn:hover {
    background: #2f7977;
}

/* List of Articles */
.list-of-articles {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 1rem;
    padding: 1.5rem 1.5rem;
    overflow-x: auto;
    width: 100%;
}

.list-of-articles table {
    border: 1px solid #aaa;
}

.list-of-articles th,
.list-of-articles td {
    border-bottom: 1px solid #ddd;
}

.list-of-articles th {
    background: #e8f1f1;
    text-align: center;
    padding: 5px 15px;
    width: 10%;
}

.list-of-articles table th.empty {
    width: 1%;
}

.list-of-articles tr:nth-child(even) {
    background-color: #e8f1f1;
}

.list-of-articles td {
    text-align: center;
    vertical-align: middle;
    padding: 15px;
}

/* Footer section */
footer {
    padding: 3rem 0;
    background: #196b69;
    color: #f4f4f4;
}

footer .container h1 {
    margin-bottom: 2rem;
}

footer .container h6 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

footer .container .small-flex p {
    margin: 2.5rem 0;
}

footer .container .small-flex a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    margin-bottom: 15px;
}

footer .container .small-flex a:hover {
    border-bottom: 2px solid #fff;
}

footer .container {
    display: flex;
    justify-content: space-between;
}

footer .container .bigger-flex {
    flex-basis: 1000px;
    margin: 0 2rem 0 0;
}

footer .container .big-flex {
    flex-basis: 500px;
    margin: 0 0 0 2rem;
}

footer .container .big-flex p {
    margin-bottom: 1rem;
}

footer .container .small-flex {
    flex-basis: 200px;
    margin: 0 1rem;
}

footer hr {
    margin: 2rem 4rem;
}

footer .copyright {
    /* margin-left: 4rem; */
}

footer .footer-links a {
    display: inline-block;
    background-color: #fff;
    color: #196b69;
    margin-right: 1rem;
    padding: 0 0.6rem;
}

@media only screen and (max-width: 1120px) {
    /* Navbar */
    #navbar {
        background-color: #196b69;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 20px 70px;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    #hamburger {
        display: block;
        margin-top: 1rem;
        background: none;
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
    }

    #navbar .logo-brand,
    footer .logo-brand {
        background-color: #fff;
        color: rgb(32, 32, 32);
        padding: 5px;
    }

    #navbar .nav-items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        margin-top: 1.5rem;
        text-align: center;
    }

    #navbar .hide {
        display: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        margin-top: 1.5rem;
        text-align: center;
    }

    #navbar .nav-items input {
        padding: 7px 10px;
        margin-top: -2rem;
        margin: initial 2rem;
        border-radius: 100rem;
        border: none;
        outline: none;
    }

    #navbar .nav-items li {
        margin: 10px 1px 0;
        padding: 5px 1px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
    }

    #navbar .nav-items li a {
        margin: 0.7rem 0.5rem;
        padding: 0.5rem 1rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
    }

    #navbar .nav-items li a:hover {
        background-color: #fff;
        color: #196b69;
        font-weight: 700;
        border: 2px #ddd solid;
    }

    .nav-flex {
        display: flex;
        flex-direction: row;
        margin-top: 5px;
    }

    .nav-flex > li {
        padding: 2px;
    }

    .nav-flex > li:hover {
        padding: 0.5rem;
    }

    /* Tutor Info Page */
    #tutorinfo {
        margin: 2rem auto 5rem;
        max-width: 95%;
    }

    #tutorinfo .container {
        display: block;
    }

    #tutorinfo .tutor-roles .cta {
        margin: 3rem 0 0;
        max-width: 100%;
    }

    #tutorinfo .tutor-roles div {
        background: #e8f1f1;
        padding: 18px 20px 24px;
        border-radius: 0.75rem;
    }

    #tutorinfo .tutor-roles h4 {
        color: #196b69;
        font-size: 1.1rem;
    }

    #tutorinfo p {
        margin-bottom: 1rem;
        color: #444;
    }

    #tutorinfo h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #196b69;
        margin: 3rem 0 0.5rem;
    }

    /* Student Info Page */
    #studentinfo {
        margin: 2rem auto 5rem;
        max-width: 95%;
    }

    #studentinfo .container {
        display: block;
    }

    #studentinfo .student-roles .cta {
        margin: 3rem 0 0;
        max-width: 100%;
    }

    #studentinfo .student-roles div {
        background: #e8f1f1;
        padding: 18px 20px 24px;
        border-radius: 0.75rem;
    }

    #studentinfo .student-roles h4 {
        color: #196b69;
        font-size: 1.1rem;
    }

    #studentinfo p {
        margin-bottom: 1rem;
        color: #444;
    }

    #studentinfo h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #196b69;
        margin: 3rem 0 0.5rem;
    }
}

.default_theme_color1_bg {
    background-color: #196b69;
}

.default_theme_color1_fg {
    color: #196b69;
}

.default_theme_color2_bg {
    background-color: yellow;
}

.default_theme_color2_fg {
    color: yellow;
}

.default_theme_color3_bg {
    background-color: white;
}

.default_theme_color3_fg {
    color: white;
}