:root {
    --bg-color-primary: #1e382a;
    --bg-color-secondary: #4d926e;
    --bg-color-topic: #f0efef;
    --bg-color-text-green: #22ac83;
}

.rtl{
    direction:rtl;
    text-align:right;
}

.divModalLogo {
    margin-bottom: 20px;
}
body {
    font-family: MRegular !important;
}

.border-grey {
    border: 2px grey solid;
}
.bg-light-green {
    background-color: #E7F5EE;
}

.bg-button-color {
    background-color: #16A77C;
}

.text-green-color {
    color: #16A77C !important;
}

.line-height-1 {
    line-height: 1.2;
}

#loadingscreen {
    display: none;
}

.pointer {
    cursor: pointer;
}


.bg-color-light-green {
    background-color: #eafef2;
}

.sitemap-wrapper a {
    color: #16A77C !important;
}

.pagination-post {
    justify-content: center;
    display: flex;
}

.pagination-wrapper span {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

    .pagination-wrapper span.active {
        background-color: #4CAF50;
        color: white;
    }

    .pagination-wrapper span:hover:not(.active) {
        background-color: #ddd;
    }

#topic-pagination a.active {
    background-color: #535554;
}

/*=======Global use========*/
/*.bg-color-primary {
    background-color: #1e382a;
}

.bg-color-secondary {
    background-color: #4d926e;
}

.bg-color-reply {
    background-color: #ff9a04;
}*/

.notification-content a {
    color: black;
}

.sitemap-wrapper {
}

.font-size-1-8rem {
    font-size: 1.8rem !important;
}

.font-size-1-4rem {
    font-size: 1.4rem !important;
}

.font-size-1-2rem {
    font-size: 1.2rem !important;
}

.font-size-1rem {
    font-size: 1rem !important;
}

.font-size-1-5rem {
    font-size: 1.5rem !important;
}

.font-size-0-8rem {
    font-size: 0.8rem !important;
}

.font-size-0-6rem {
    font-size: 0.6rem !important;
}
.topic-pagination {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
}

    /*    .topic-pagination a {
        color: white;
        float: left;
        padding: 1px 6px;
        text-decoration: none;
        background-color: #b8babc;
        border: 1px solid #ddd;
        margin: 0 4px;
        border-radius: 3px
    }*/

    .topic-pagination a {
        color: white;
        float: left;
        padding: 1px 6px;
        text-decoration: none;
        background-color: #b8babc;
        margin-right: 0.2rem;
        border-radius: 3px
    }

/*=======End Global use========*/

/*=======nav========*/

.navbar-Image {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.navbar-username {
    padding: 8px;
    color: white;
    border-radius: 10px;
    width: 5vw;
    background-color: #345a46;
}


.navbar {
    padding: 0.5rem !important;
    background-color: var(--bg-color-primary);
}

.layout-line-divider {
    width: 2px;
    background-color: white;
    float: left;
    color: white;
    height: 30px;
    margin-left: 1rem;
    margin-right: 1rem;
}

.navbar-Web > ul > li.nav-item > a {
    color: white;
    border-radius: 50px;
    background-color: #16a77c;
    text-align: center;
    border: 1px solid #fff;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    /*font-size: 1rem;*/
}

.navbar-Web > ul {
    width: 100%;
    gap: 2%;
}

    .navbar-Web > ul > li {
        width: 25%;
    }

.divNotificationList-s {
    min-width: 30rem !important;
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 150% !important;
}

.Notification-Pointer {
    position: absolute;
    color: #e4f2e9;
    left: 235px;
    top: -33px;
}
/*=======End Nav========*/
/*=======Home========*/
.top-header-forum {
    border-bottom: 1px solid #ededed;
    display: flex;
}

.btnBell {
    font-size: 2rem !important;
}
.dropdown-redeem {
    background-color: #1e382a;
    color: white;
    font-size: 1.3rem;
    padding: 0.5rem;
    width: 100%;
    text-align: center;
}

.notification-bell {
    /*  padding: 0.5em;*/
    width: 100px;
    min-width: 0;
    background-color: #ffffff;
    color: #45815a;
    font-family: monospace;
    flex: initial;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid grey;
    /*    border-left: 1px solid grey;*/
}

.guideline-arrow {
    width: 50px;
    min-width: 0;
    background-color: #a5a0a0;
    color: white;
    font-family: monospace;
    flex: initial;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.guide-arrow {
    font-size: 1.2rem !important;
}
.guideline-section {
    padding-left: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: auto;
    min-width: 0;
    background-color: #a5a0a0;
    color: white;
    font-family: monospace;
    display: flex;
    align-items: center;
    flex: auto;
    font-size: 1.2rem;
}

    .guideline-section > h1 {
        font-size: 1.2rem !important;
        font-family: monospace;
        margin: 0;
    }

    .home-trending-topic {
        padding-top: 5px;
    }

.home-trending-topic-header {
    background-color: var(--bg-color-primary);
    color: white;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .home-trending-topic-header > h2 {
        font-family: MBold;
        font-size: 1rem !important;
        font-weight: bolder !important;
        margin: 0;
    }

.home-trending-topic-content {
}

.category-container {
    padding-top: 5px;
}

.category-header {
    background-color: var(--bg-color-secondary);
    color: white;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.category-header > h2{
    margin: 0 !important;
}

.trending-category-wrapper {
    display: flex;
    border: 3px solid grey;
    border-top: none;
    min-height: 80px;
}

.trending-category-right {
    flex: 40;
    text-align: center;
}

.trending-category-left {
    padding-left: 1rem;
    flex: 60;
    max-width:60%;
}

.sub-category-wrapper {
    display: flex;
    border: 3px solid grey;
    min-height: 80px;
    border-top: none;
}

.sub-category-right {
   /* flex: 40;*/
    width:30%;
    /* text-align: center;*/
}

.sub-category-middle {
/*    flex: 60;*/
width:63%;
cursor: pointer;
}

.sub-category-left {
    padding-left: 1rem;
    padding-right: 1rem;
    align-self: center;
    width: 7%;
}

.sub-category-description {
    min-height: 40px;
}

.icon-circle-background {
    background-color: #b8babc;
    border-radius: 25px;
    padding: 0.3rem;
    color: white;
}

.trending-icon-circle-background {
    background-color: #b8babc;
    border-radius: 25px;
    padding: 0.3rem;
    color: white;
}

.image-border {
    border-radius: 25px;
}

.sub-category-profile {
    display: flex;
    justify-content: center;
}

.sub-category-image {
    height:50px;
    width: 50px;
}

.sub-category-post {
    color: black;
}

.trending-icon-section {
    /*  flex: 20;*/
}

.trending-title {
    flex: 60;
    min-width: 0;
    cursor: pointer;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guideModal {
/*    margin: 1rem !important;*/
    margin-top: 2rem !important;
    overflow-y: initial !important
}

.guideCenterModal {
    margin-top: 2rem !important;
    overflow-y: initial !important
}

.guideModalBody {
    height: 80vh;
    overflow-y: auto;
}
/*=======End Home========*/

/*======= Topic========*/
.topic-section {
    padding: 0.3rem;
    display: flex;
    background-color: var(--bg-color-topic);
    min-height: 80px;
    padding-left: 1rem;
}

.topic-right {
    flex: 30;
    text-align: center;
    align-items: center;
}

.topic-left {
    flex: 70;
}

.topic-create-new {
    padding: 1rem;
}

.topic-create-button {
    font-weight: bolder;
    font-size: 1rem;
    background: #16a77c;
    border-radius: 20px;
    margin-left: 2rem;
    margin-right: 2rem;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
/*.topic-create-button {
    font-weight: bolder;
    font-size: 1.5rem;
    background: #16a77c;
    border-radius: 25px;
    margin-left: 2rem;
    margin-right: 2rem;
    color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;*/
/* padding: 1rem; */
/*padding-left: 2rem;
    padding-right: 2rem;
    text-transform:uppercase;
}*/

.color-text-green {
    color: var(--bg-color-text-green)
}

.topic-title-input {
    width: 100%;
    border: 3px solid var(--bg-color-text-green);
    height: 50px;
}

.required-text {
    color: red;
    font-weight: bolder;
    font-size: 0.8rem;
}

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.follow-topic {
    color: #bdbdbd;
}

.pagination-topic {
    display: flex;
    justify-content: space-between;
}

.pagination-button {
    background-color: #707070;
    color: white;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.6rem;
    border-radius: 5px;
}

.topic-detail {
    padding: 0.3rem;
    /* display: flex; */
    background-color: var(--bg-color-topic);
    min-height: 110px;
    padding-left: 1rem;
    /*   background-color: #535554;*/
}

.divider {
    border-top: 2px solid black;
}

.topic-detail-content-left {
    /* flex:20;*/
}

.topic-detail-content-right {
    /*   flex: 80;*/
    flex: 1;
}

.topic-detail-image {
    width: 40px;
    height:40px;
}
.topic-detail-image-big {
    width: 100px;
    height: 100px;
    border-radius: 50px !important;
}


.topic-detail-reply-image {
    width: 60px;
}

.topic-detail-button {
    justify-content: end;
}

.topic-detail-share {
    background-color: #16a77c;
}

.topic-detail-follow {
    background-color: #9c9c9c;
}

.topic-main {
    min-height: 110px;
}

.border-green-2px {
    border: 2px solid #46775c;
}

.topic-main-header {
    background-color: #535554;
    padding: 0.5rem;
}

.topic-main-reply {
    background-color: #999e9c;
    padding: 0.5rem;
    width:250px;
}

.topic-main-header-left {
    flex: 3;
}

.topic-main-header-right {
    flex: 6;
}

.topic-main-image {
    width: 50px;
}

.topic-header-right-section {
    justify-content: space-between;
}

.color-yellow {
    color: yellow !important;
}

.topic-main-footer {
    background-color: #f0efef;
}

.create-switch label{
    margin-bottom:0px;
}

.topic-reply {
    display: flex;
    padding: 0.5rem;
    background-color: #e3e3e3;
}

.note-editable {
    background-color: white;
}

.topic-reply-button {
    justify-content: end;
}

.topic-submit-reply {
    background: #16a77c;
    border-radius: 20px;
    color: white;
}
.topic-reply-left {
    min-width: 100px;
    text-align: center;
}

.topic-reply-right .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 29px;
}

.edit-save-topic {
    display: flex;
}

.edit-save {
    display: flex;
}

.topic-reply-right .slider:before {
    height: 20px;
    width: 20px;
}

.topic-create-section input:checked + .slider:before {
    transform: translateX(35px);
}

.topic-reply-right input:checked + .slider:before {
    transform: translateX(35px);
}

.topic-create-section .slider:before {
    height: 20px;
    width: 20px;
}

.topic-create-section .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 29px;
}

.post-reply {
    background-color: #0c684d;
}

.divPostDropdown {
    background-color: rgb(12, 104, 77);
    text-align: center;
}

.post-dropdown-link {
    color: white !important;
}

.alight-icon-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-wrapper {
    position: relative;
}

.badge {
    position: absolute;
    top: 0;
    right: -5px;
    display: inline-block;
    font-size: 10px;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.guideline-arrow-section {
    background-color: #a5a0a0;
    color: white;
}

.pin-deactive {
    color: white;
}

.pin-active {
    color: yellow;
}

.text-ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.notification-wrapper a {
    color: black !important;
}

/*======================Start Ranking====================*/

.rules-header {
    color: white;
}

.rules-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rules-left {
    flex: 50;
    text-align: center;
}

.rules-right {
    flex: 50;
}
/*.fa-stack:after {
    position: absolute;
    right: -10%;
    top: 15%;*/
/*    content: attr(data-count);*/
/*font-size: 46%;
    padding: .6em;
    border-radius: 999px;
    line-height: .75em;
    color: white;
    background: rgba(255,0,0,.85);
    text-align: center;
    min-width: 2em;
    font-weight: bold;
}*/
/*.follow-topic.round {
    border-radius: 34px;
}

    .follow-topic.round:before {
        border-radius: 50%;
    }

.switch-topic {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.follow-topic {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}*/
/*=======End Topic========*/
/*======================Start Font====================*/
.font-weight-bold {
    font-family: MBold;
}

.font-weight-bolder {
    font-family: MBold;
}

.font-italic {
    font-family: MRegularItalic;
}

@font-face {
    font-family: MBlack;
    src: url("font/Metropolis-Black.otf") format('opentype');
}

@font-face {
    font-family: MBlackItalic;
    src: url("font/Metropolis-BlackItalic.otf") format('opentype');
}

@font-face {
    font-family: MBold;
    src: url("font/Metropolis-Bold.otf") format('opentype');
}

@font-face {
    font-family: MBoldItalic;
    src: url("font/Metropolis-ExtraBold.otf") format('opentype');
}

@font-face {
    font-family: MExtraBold;
    src: url("font/Metropolis-ExtraBold.otf") format('opentype');
}

@font-face {
    font-family: MExtraBoldItalic;
    src: url("font/Metropolis-ExtraBoldItalic.otf") format('opentype');
}

@font-face {
    font-family: MExtraLight;
    src: url("font/Metropolis-ExtraLight.otf") format('opentype');
}

@font-face {
    font-family: MExtraLightItalic;
    src: url("font/Metropolis-ExtraLightItalic.otf") format('opentype');
}

@font-face {
    font-family: MLight;
    src: url("font/Metropolis-Light.otf") format('opentype');
}

@font-face {
    font-family: MLightItalic;
    src: url("font/Metropolis-ExtraLightItalic.otf") format('opentype');
}

@font-face {
    font-family: MMedium;
    src: url("font/Metropolis-Medium.otf") format('opentype');
}

@font-face {
    font-family: MMediumItalic;
    src: url("font/Metropolis-MediumItalic.otf") format('opentype');
}

@font-face {
    font-family: MRegular;
    src: url("font/Metropolis-Regular.otf") format('opentype');
}

@font-face {
    font-family: MRegularItalic;
    src: url("font/Metropolis-RegularItalic.otf") format('opentype');
}


@font-face {
    font-family: MSemiBold;
    src: url("font/Metropolis-SemiBold.otf") format('opentype');
}

@font-face {
    font-family: MSemiBoldItalic;
    src: url("font/Metropolis-SemiBoldItalic.otf") format('opentype');
}

@font-face {
    font-family: MThin;
    src: url("font/Metropolis-Thin.otf") format('opentype');
}

@font-face {
    font-family: MThinItalic;
    src: url("font/Metropolis-ThinItalic.otf") format('opentype');
}

/*======================End Font====================*/


/*======================Start Profile====================*/
.divProfileContainer {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.Profile {
    position: relative;
    height: 222px;
}

.bgImage {
    position: absolute;
    width: 100%;
    height: 222px;
    top: 0;
    left: 0;
}

.divProfilrNav {
    position: absolute;
    top: 5%;
    right: 1%;
}

.navProfileButton {
    padding-left: 0.5rem;
}

.ImgProfile {
    height: 150px;
    width: 160px;
    border-radius: 50%;
}

.divProfileImg {
    position: absolute;
    top: 130px;
    left: 150px;
}

.divChangeImg {
    position: absolute;
    top: 110px;
}

    .divChangeImg > button {
        border-radius: 50%
    }

.divProfileName {
    position: absolute;
    bottom: 20px;
    left: 350px;
}

.divFollow {
    position: absolute;
    bottom: 20px;
    left: 550px;
}

.divProfile {
    display: flex;
    align-items: center;
    height: 8vh;
    background-color: #232424;
    width: 100%;
    padding-left: 335px;
}

.divUserActivity {
    padding: 1rem 1rem 0rem !important; 
}


.profile-color-gray {
    color: #d7d5d5;
}

.divProfileContent {
    margin-left: 155px;
    margin-right: 155px;
    display: flex;
    gap: 2%;
    flex-direction: row;
}

.divAbout {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.divCard {
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.divCardHeader {
    padding: 0.5rem;
    justify-content: space-between;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    color: white;
    background-color: #326047;
}


.divOptions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.divCardBody {
    text-align: center;
    border-style: none solid solid;
    border-color: #ced4da;
    flex-direction: column;
    min-height: 6vh;
    justify-content: space-evenly;
    display: flex;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.divFollowerContainer {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 1rem;
}

.divFollowerName {
 /*   text-align: center;*/
    width: 100%;
/*    color: white !important;*/
    font-weight: bolder;
   /* font-size: 1rem;*/
   padding-left:0.5rem;
}


.aLinkWhiteTxt {
    color: white !important;
    text-decoration: none;
}



.divEmptyBio {
    text-align: center;
    color: #6c7771;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}


.divAboutCardBody {
    text-align: center;
    border-style: none solid solid;
    border-color: #ced4da;
    display: flex;
    justify-content: center;
    min-height: 8.5vh;
    flex-direction: column;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.divRankingImg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.AboutMeTextArea {
    background-color: #1e382a !important;
    width: 100%;
    border-radius: 0.4rem !important;
    border: 2px solid #ced4da !important;
    text-align: center;
    font-size: 0.8rem !important;
    color: white !important;
    line-height: 1rem !important;
    padding: 0.75rem 0.75rem !important;
}


    .AboutMeTextArea:focus {
        color: white;
        background-color: #1e382a;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.div-left-info {
    width: 20%;
    background-color: #1e382a;
}

.div-right-info{
    width: 75%;
}

.card-Header-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #16a77c;
    border-radius: 0 !important;
}

.profile-about-header {
    background-color: #16a77c;
    color: white;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.divBR_section_1 {
    background-color: #1e382a;
}

.divBR_Title {
    text-align: center;
    color: white;
    font-size: 1.3rem;
    padding: 1rem;
}

.color-yellow {
    color: yellow;
}


.divBR_ImageGroup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2rem;
}

.bonus-Image-03 {
    background-image: url("/Content/images/bonus redeem_ai-03.png");
    background-size: cover;
    width: 96px;
    height: 96px;
}

.bonus-Image-04 {
    background-image: url("/Content/images/bonus redeem_ai-04.png");
    background-size: cover;
    width: 96px;
    height: 96px;
}

.divBR_section_2 {
    background-color: #232424;
}

.divTotalPointContent {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 1.5rem;
}

.divTotalPointTitle {
    color: #16a77c;
    font-size: 1.2rem;
    width: 100%;
}

.divTotalPoints {
    color: white;
    font-size: 1.8rem;
    width: 100%;
}


.divBR_section_3 {
    background-color: #e7f5ee;
}

.divBonusRedeemContent {
    flex-direction: column;
    text-align: center;
    display: flex;
    align-items: center;
    padding: 1.5rem;
}

.divDeductTxt {
    color: #16a77c;
    font-size: 1.2rem;
}


.divPointInput {
    font-size: 1.3rem;
    border: 1px solid green;
    background-color: white;
    padding: 0.5rem;
}

.divDeductTxt {
    color: #16a77c;
    font-size: 1.2rem;
}

.divBonusInput {
    background-color: #1e382a;
    color: white;
    font-size: 1.3rem;
    padding: 0.5rem;
}

.color-green {
    color: #16a77c;
}

.btnSubmitRedeem {
    background-color: #16a77c;
    color: white;
    width: 100%;
    border-radius: 50px;
}

.sub-about-wrapper {
    border-top: none;
    border: 1px solid #d3d5d4;
    padding: 1rem;
}

.divPointInput::-webkit-inner-spin-button,
.divPointInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.divAchievementTitle {
    background-color: #3e4140;
    color: white;
    text-align: center;
    padding: 0.5rem;
}

.divAchievementIcon {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
    row-gap: 1vh;
}

.divIconItem {
    position: relative;
    text-align: center;
}

.divIconName {
    line-height: 1rem;
    word-wrap: break-word;
    font-size: 1rem;
    max-width: 85%;
}

    .divIconName > .IconName {
        color: #868484;
    }


.selectedRank {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    color: #50bd9c;
}

.progressBar-radius {
    border-radius: 50px;
}

.bg-color-green {
    background-color: #16a77c;
}

.bg-color-gray {
    background-color: #c4c4c4;
}

.divTaskContent {
    display: flex;
    flex-direction: column;
}


.Completed-Task-Item {
    background-color: #326047;
    padding: 0.8rem 1rem 0.5rem;
    margin-bottom: 0.5rem;
}

.Uncompleted-Task-Item {
    background-color: #e7f5ee;
    padding: 0.8rem 1rem 0.5rem;
    margin-bottom: 0.5rem;
}

    .Uncompleted-Task-Item > .txt-color {
        color: black;
    }

        .Uncompleted-Task-Item > .txt-color > .txt-color-count {
            color: red;
        }

.Completed-Task-Item > .txt-color {
    color: white;
}

.Completed-Task-Item > .txt-color-count {
    color: white;
}

.divActivityHeader {
    display: flex;
    justify-content: space-around;
}

.divActivityBody {
    overflow: auto;
    max-height: 90%;
}


.divFilterSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5em;
    padding: 1rem;
}

.btnRadius {
    border-radius: 50px;
    color: white;
    background-color: #16a77c;
    padding: 0.5rem 2rem !important;
}

.btnAInActive {
    background-color: #ccc;
    color: white;
    padding: 0.5rem 2rem !important;
    border-radius: 50px;
}

.divActivityList {
    padding-right: 1rem;
}

/*=========================================Start Topic=======================================*/

.TopicContainer {
    background-color: #f0efef;
    margin: 0.5rem;
    height: 11.5vh;
    display: flex;
    justify-content: space-between;
}

.TopicContainer-post {
    background-color: #f0efef;
    margin: 0.5rem;
    /* min-height: 100px;*/
    display: flex;
    justify-content: space-between;
}

.divTopicInfo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.5rem;
    max-width: 75%;
}

.TopicInfo {
    font-size: 0.7rem;
    color: #b3b2b2;
}

.TopicName {
    font-size: 1rem;
}

.divTopicMember {
    max-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 25%;
}

.divTopicMember-post {
    max-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.avatar {
    vertical-align: middle;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

/*.MemberName {
    font-weight: bolder;
}*/

.TopicTimerRange {
    font-size: 0.7rem;
    color: #9b9a9a;
}

.divTopicMemberInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*=========================================End Topic=======================================*/

/*=========================================Start Like Topic=======================================*/

.LikeContainer {
    background-color: #f0efef;
    margin: 0.5rem;
    height: auto;
    display: flex;
    flex-direction: column;
}

.LikeDateTime {
    font-weight: bolder;
    font-size: 1rem;
}

.LikeTopicContent {
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
    align-items: center
}

.LikeAvatar {
    vertical-align: middle;
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

/*.LikeContent {
    display: flex;
    align-items: center;
}*/
/*
.Checkbox {
    width: 10%;
    text-align: center;
}*/

.TopicDecs {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
}

.LikeTopicMemberRank {
    font-weight: bolder;
    font-size: 0.7rem;
}

.divSelectAll {
    border-bottom: 1px solid #c3c6c4;
    padding-left: 0.5rem;
    font-weight: bold;
    display: flex;
    font-size: 1rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}


/*=========================================End Like Topic=======================================*/

/*=========================================Start Saved Topic=======================================*/

.SavedContainer {
    background-color: #f0efef;
    margin: 0.5rem;
    height: auto;
    display: flex;
    flex-direction: column;
}

.SavedDateTime {
    font-weight: bolder;
    font-size: 1rem;
}

.SavedTopicContent {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem;
}

/*.SavedContent {
    display: flex;
    align-items: center;
}*/

.SavedAvatar {
    vertical-align: middle;
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

.SavedTopicName {
    font-weight: bolder;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50vw;
    overflow: hidden;
}

.TopicMemberRank {
    font-size: 0.7rem;
}


/*=========================================End Saved Topic=======================================*/

/*======================End Profile====================*/