[contenteditable] {
    outline: 0px solid transparent;
}
span.lastMessageIndicator {
    display: block;
    font-size: 0.8rem;
    color: rgba(31, 31, 31, 0.5)!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.25rem;
}
.navbar-brand {
    margin-top: -0.78rem;
}
#navbar.sticky .navbar-brand {
    margin-top: -0.65rem;
}
.navbar .navbar-nav .nav-item .nav-link {
    padding: 2rem 0;
}
#navbar.sticky .navbar-nav .nav-item .nav-link {
    padding-bottom: 27px !important;
    padding-top: 32px !important;
}
#navbar .navbar-nav .nav-item .nav-link.notification {
    padding-top: 2.2rem;
    padding-bottom: 1.6rem;
}

#navbar {
    transition: .2s linear all;
}

#navbar.sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 56px;
    z-index: 1030;
    background: #FFF;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#navbar.sticky .navbar-brand img {
    filter: brightness(0) saturate(100%) invert(78%) sepia(76%) saturate(1639%) hue-rotate(166deg) brightness(97%) contrast(103%) !important;
}
#navbar.sticky .navbar-brand strong {
    color: #5BCEFA;
}

#navbar.sticky .navbar-brand  span {
    color: #F5A8B8;
}
#navbar.sticky .navbar-nav .nav-item .nav-link {
    color: #4e4e4e;
}
#navbar.sticky .navbar-nav .nav-item .nav-link:before {
    background: #5BCEFA;
    top: 15px;
}
#navbar.sticky .navbar-nav .nav-item .nav-link.notification {
    color: #5BCEFA;
    padding-top: 30px !important;
}
#navbar.sticky .navbar-nav .nav-item .btn-register {
    background: #5BCEFA;
    border: 1px solid #5BCEFA;
    padding: 0.4rem 1.4rem;
    margin-top: 23px;
}
#navbar.sticky .navbar-nav .nav-item .btn-register:hover {
    background: #FFF;
}
#navbar.sticky .navbar-nav .nav-item .nav-link.flag {
    padding-top: 31px !important;
    padding-bottom: 26px !important;
}
#navbar.sticky .navbar-nav .nav-item .nav-link .user-img {
    margin-top: -8px;
}

#navbar .navbar-brand {
    position: relative;
}


.image-wrapper .chat-image-sender {
    cursor: pointer;
    border-radius: 6px;
    width: 100%;
    height: 300px;
    overflow: hidden;
    /* background-color: #f7f7f7; */
    background-color: #FFF;
    /* background-size: cover; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* float: left; */
}



.image-wrapper .image-left,
.image-wrapper .image-right {
    cursor: pointer;
    border-radius: 6px;
    width: 260px;
    height: 260px;
    overflow: hidden;
    background-color: #FFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    float: right;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .image-wrapper .image-left,
    .image-wrapper .image-right {
        width: 160px;
        height: 160px;
    }
    .messages-box .chat-screen .chat-messages {
        height: calc(100svh - 15rem);
    }
}

.messenger-sendCard{
    border: 1px solid #eee;
    border-radius: 0.75rem;
    padding: 0;
    font-size: 1rem;
    color: #1f1f1f;
    width: 70%;
}

#message-form button.send-button {
    margin-right: -108px;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
}

.delete-btn {
    /* float: right; */
    cursor: pointer;
}
.wrapper{
    margin-top: -53px;
    margin-left: -83px
}

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

.about-bg {
    background-image: url('../img/about_bg.png');
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.splide {
    height: 460px;
    text-align: center;
    margin-top: -60px;
}
.splide img {
    height: 550px;
    /* max-width: 100%; */
}

.main.smaller-main.v4 .posted-by a:hover {
      background: rgba(255,255,255, 0.2);
      border-radius: 2rem;
      text-decoration: none !important;
}
.main.smaller-main.v4 .posted-by a {
    padding-right: 0.4rem;
}
.clinic-basic-info{
    background: #fff;
    padding: 2rem 0;
    margin: 0;
    position: sticky;
    top: 0px;
    z-index: 99;
    border-bottom: 1px solid #eee;
}
.clinic-name{
    font-weight: 700;
    color: #071232;
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
}
.clinic-address-index{
    position: relative;
    margin: 0;
    color: rgba(7,18,50,.5);
    padding-left: 1.5rem
}
.clinic-basic-info .clinic-address-index:before{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    background: url(../img/icons/map-marker\(2\).svg) center no-repeat;
    background-size: contain;
    content: " ";
    margin: auto;
    opacity: .2
}
.clinic-logo{
    width: 100%;
    aspect-ratio: 1/1;
    padding: 0.5rem;
    border: 1px solid #eee;
    border-radius: 0.75rem;
}
.btn.border-primary {
    color: #007cfd
}
.clinic-boxes{
    padding: 2.5rem 0;
}
.clinic-address-maps {
    font-weight: 700;
    font-size: 1.2rem;
    color: #071232;
}
.clinic-box{
    display: block;
    position: relative;
    background: #fff;
    box-shadow: rgba(7,18,50,.025) 0 0.5rem 1.5rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.clinic-contact-item{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: rgba(7,18,50,.75);
    font-size: 1rem;
    margin: 0.75rem 0 0;
}
.clinic-contact-item img {
    width: 1rem;
    height: 1rem;
    opacity: .25;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
.clinic-contact-item:hover{
    color: #007cfd ;
}
.event-map{
    margin-bottom: 13px;
}
.clinic-working-status {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}
.clinic-working-status.status-open span.status-color {
    background: #008026;
    box-shadow: rgba(0,128,38,.1) 0 0 0 0.5rem;
}
.clinic-working-status span.status-color {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #999;
    display: block;
    box-shadow: rgba(153,153,153,.1) 0 0 0 0.5rem;
    margin: 0 1rem 0 0.5rem;
}
.clinic-working-status.status-open .h3,
.clinic-working-status.status-open h3 {
    font-weight: 700;
    color: #000000;
    font-size: 1.35rem;
}
.clinic-service-item + .clinic-service-item {
    margin-top: 1rem;
}
.clinic-working-hours-entry + .clinic-working-hours-entry {
    margin-top: 0.5rem;
}
.text-black {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important;
}
.clinic-working-hours-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #071232;
}
.font-day{
    font-weight: 600;
}
.clinic-boxes .clinic-box .clinic-box-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #071232;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f2f3f4;
}
.clinic-service-item .clinic-service-item-label {
    display: block;
    position: relative;
    padding-left: 8rem;
    min-height: 6.5rem;
}
.clinic-service-item .clinic-service-item-label .service-image {
    width: 6.5rem;
    height: 6.5rem;
    text-align: center;
    border-radius: 0.75rem;
}
.clinic-service-item .clinic-service-item-label .service-image img {
    filter: brightness(0) invert(1);
    width: 40px;
    height: 40px;
    margin-top: 30px;
}
.clinic-service-item .clinic-service-item-label .service-title {
    font-weight: 700;
    color: #071232;
    font-size: 1.25rem;
}
.clinic-service-item .clinic-service-item-label .service-description {
    font-weight: 400;
}
.clinic-service-item .clinic-service-item-label .service-info-item img {
    width: 1rem;
    height: 1rem;
    filter: grayscale(1);
    opacity: .25;
    margin-right: 0.25rem;
}
.clinic-service-item .clinic-service-item-label .service-info-item {
    display: inline-flex;
    align-items: center;
    font-size: .95rem;
    color: rgba(7,18,50,.5);
    margin-right: 0.75rem;
}
.svg-inline--fa {
    display: var(--fa-display,inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}
.clinic-service-item .clinic-service-item-label .v1{
    background: rgb(0, 98, 255);
}
.clinic-service-item .clinic-service-item-label .v2 {
    background: #ffdd00;
}
.clinic-service-item .clinic-service-item-label .v3 {
    background: #ff0000;
}
.clinic-service-item .clinic-service-item-label .v4 {
    background: rgb(0, 255, 157);
}
.clinic-service-item .clinic-service-item-label .v5 {
    background: #ff7700fd;
}
.clinic-service-item .clinic-service-item-label .v6 {
    background: #0062ff;
}
.clinic-service-item .clinic-service-item-label .v7{
    background: #ae00ff;
}
.fonts-text{
    font-family: 'Mitr', sans-serif;
    font-size: 16px;
}

.clinic-gallery {
    display: block;
    position: relative;
    margin-bottom: -1rem;
}
.clinic-gallery .gallery-image {
    display: block;
    width: 100%;
    height: 15rem;
    cursor: pointer;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
}
.clinic-gallery .gallery-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.clinic-gallery .gallery-image.image-large {
    height: 31rem;
}
.ddd{
    padding: 5rem 0 1.5rem 0;
}
.clinic-gallery .gallery-image {
    display: block;
    width: 100%;
    height: 15rem;
    cursor: pointer;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
}
.tz-gallery {
    padding: 40px;
}

.tz-gallery .thumbnail {
    padding: 0;
    margin-bottom: 30px;
    border: none;
}

.tz-gallery img {
    border-radius: 2px;
}

.tz-gallery .caption{
    padding: 26px 30px;
    text-align: center;
}

.tz-gallery .caption h3 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 0;
}

.tz-gallery .caption p {
    font-size: 12px;
    color: #7b7d7d;
    margin: 0;
}

.baguetteBox-button {
    background-color: transparent !important;
}
.clinic-gallery .btn {
    position: absolute;
    bottom: 2rem;
    right: 2.5rem;
    z-index: 2;
    display: flex;
    align-items: center
  }
.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    border: 0;
    padding: calc(0.775rem + 1px) calc(1.5rem + 1px);
}
.clinic-gallery .btn img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    margin-left: -0.5rem;
}
.breadcrumb{
    background-color: #ffffff00;
}

.icon-image-rul{
    margin-left: -16px;
    background: #0000002a;
    border-radius: 23px;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
}

.logo-skyblue {
    filter: brightness(0) saturate(100%) invert(78%) sepia(76%) saturate(1639%) hue-rotate(166deg) brightness(97%) contrast(103%) !important;
}
.carousel-inner {
    overflow: visible !important;
}
.carousel-item {
    transition: transform 2s ease-in-out;
  }
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
    transition: opacity 2s;
}
.text-policy-top{
    display:flex;
}
.text-policy{
    margin-left: 90px !important;
}
.text-policy a {
    text-decoration:none;
    color: #5bcefa;
}
.img-primary{
    max-width: 300px;
    height: auto;
    width: 80%;
}
.item-text{
    font-size: 20px;
    color: #5bcefa;
    line-height: 50px;
}
.user-img{
    width: 40px;
    height: 40px;
    border-radius: 25px;
    border: 2px solid #FFF;
    background: rgb(91,206,250) !important;
    background: linear-gradient(90deg, rgba(91,206,250,1) 0%, rgba(0,164,227,1) 50%, rgba(91,206,250,1) 100%) !important;
}
.content-checkbox{
    display: flex;
}
.checkbox-text{
    padding: 1px;
    margin-left: 5px;
}
.text-href {
    text-decoration: none;
    color: #5bcefa;
}

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .isDisabled > a {
    color: currentColor;
    display: inline-block;  /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
  }

#respond-comment{
    display: none;
}

/* .notification-count{
    padding: 2px 0 !important;
} */
.button-green{
    width: 90px !important;
    height: 31px !important;
    padding: 3px;
    text-align: center;
    background-color: #008026;
    border-radius: 12px;
    color: #ffffff;
}
.min-w-150px{
    width: 150px;
}
.button-yellow{
    width: 100px !important;
    height: 31px !important;
    padding: 3px;
    text-align: center;
    background-color: #ebad04;
    border-radius: 12px;
    color: #ffffff;
}
.button-red{
    width: 90px !important;
    height: 31px !important;
    padding: 3px;
    text-align: center;
    background-color: #ff0000;
    border-radius: 12px;
    color: #ffffff;
}

.winner-container {
    position: relative;
}
.winner-btn {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    padding-top: 1rem;
    padding-left: 3rem;
    padding-bottom: 1rem;
}
.winner-btn > div {
    display:block;
    padding-top: 0.4rem;
}
.winner-btn img {
    width: 60%;
}
.winner-btn a {
    color: #333;
    font-size: 0.8rem;
    font-weight: 600;
}

  @media only screen and (min-width: 768px) {
    .splide {
        height: 360px;
        margin-top: -20px;
    }
    .splide img {
        height: 450px;
    }
    .splide__slide img {
        height: 420px;
    }
    .splide__track {
        margin-top: -80px;
    }
    .align-items-md-center {
        align-items: start !important;
    }
    .winner-btn {
        position: absolute;
        max-width: 388px;
        right: -5rem;
        bottom: -0.8rem;
    }
    .winner-btn > div {
        padding-top: 0.6rem;
    }
    .winner-btn a {
        font-size: 0.9rem;
    }
    .winner-btn img {
        width: 55%;
        height: auto;
    }
    .navbar-brand strong{
        display: block;
    }
    .navbar-brand span{
        display: block;
    }
  }
  .navbar .navbar-nav .nav-item .link-item{
    padding: 26px 0px;
  }

  @media only screen and (min-width: 992px) {
    .splide {
        height: 420px;
        margin-top: -100px;
    }
    .splide img {
        height: 600px;
    }

    .winner-btn {
        max-width: 400px;
        right: -1rem;
    }
    .winner-btn > div {
        padding-top: 0.6rem;
    }
    .winner-btn a {
        font-size: 0.9rem;
    }
    .winner-btn img {
        width: 60%;
        height: auto;
    }
  }

  @media only screen and (min-width: 1200px) {
    .splide {
        height: 520px;
        margin-top: -180px;
    }
    .splide img {
        height: 750px;
    }
    .winner-btn {
        max-width: 480px;
        gap: 0.6rem;
        right: 2.4rem;
    }
    .winner-btn a {
        font-size: 1rem;
    }
    .winner-btn img {
        width: 80%;
        height: auto;
    }

  }

  @media only screen and (min-width: 1401px) {
    .winner-btn {
        gap: 2rem;
        right: 5rem;
    }

  }




.noti-ring {
    /* background-color: red!important; */
    animation-name: ring;
    transform-origin: 70% 1em;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}

@keyframes ring
{
    0% { transform: rotate(0deg) }
    5% { transform: rotate(45deg) }
    15% { transform: rotate(-40deg) }
    25% { transform: rotate(20deg) }
    35% { transform: rotate(-15deg) }
    45% { transform: rotate(10deg) }
    55% { transform: rotate(-5deg) }
    60% { transform: rotate(0deg) }
    100% { transform: rotate(0deg) }
}

.navbar .navbar-nav .nav-item .notification:before {
    background: unset!important;
}

.navbar .navbar-nav .nav-item .notification .badge {
    /* position: absolute; */
    /* top: 27px; */
    /* left: -2px; */
    font-size: 14px;
    color: #000;
    /* top: 8px;
    left: 5px;
    font-size: 11px; */
    /* color: #FFF; */
    /* background-color: red; */
}


.notification-ui a:after {
    display: none;
}

.notification-ui_icon {
    position: relative;
}

.notification-ui_icon .unread-notification {
    display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 7px;
    background-color: #66BB6A;
    position: absolute;
    top: 7px;
    left: 12px;
}

.message-type-right{
    position: relative;
    float: right;
    width: auto;
}
.message-type-left{
    position: relative;
    float: left;
    width: auto;
}

@media (min-width: 900px) {
    .notification-ui_icon .unread-notification {
        left: 20px;
    }
}

.notification-ui_dd {
    padding: 0;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
    box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
    border: 0;
    max-width: 400px;
}

@media (min-width: 900px) {
    .notification-ui_dd {
        min-width: 400px;
        position: absolute;
        left: -192px;
        top: 70px;
    }
}

/* .notification-ui_dd:after {
    content: "";
    position: absolute;
    top: -30px;
    left: calc(50% - 7px);
    border-top: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    border-left: 15px solid transparent;
} */

.notification-ui_dd .notification-ui_dd-header {
    border-bottom: 1px solid #ddd;
    padding: 15px;
}

.notification-ui_dd .notification-ui_dd-header h3 {
    margin-bottom: 0;
}

.notification-ui_dd .notification-ui_dd-content {
    max-height: 500px;
    overflow: auto;
}
.notification-ui_dd .notification-ui_dd-content a {
    text-decoration: unset;
    color: #212529;
}

.notification-list {
    /* display: -webkit-box;
    display: -ms-flexbox; */
    display: flex;
    /* -webkit-box-pack: justify; */
    /* -ms-flex-pack: justify; */
    /* justify-content: space-between; */
    padding: 20px 0;
    margin: 0 25px;
    border-bottom: 1px solid #ddd;
}


.notification-list .notification-list_img img {
    height: 48px;
    width: 48px;
    border-radius: 50px;
    margin-right: 20px;
}

.notification-list .notification-list_detail p {
    margin-bottom: 5px;
    line-height: 1.2;
}

.notification-list .notification-list_feature-img img {
    height: 48px;
    width: 48px;
    border-radius: 5px;
    margin-left: 20px;
}
.post-person-name a {
    color: unset;
}

.feed .feed-posts .feed-post .post-thread .post-replies .post-reply .post-reply-details a {
    text-decoration: unset;
    color: #1f1f1f;
}
.add-new-friend{
    background: #bde9ff !important;
}
.referral-item a {
    text-decoration: unset!important;
    color: #ffffff;
}

.events .event-item {
    text-decoration: none !important;
}
.events.v2 h3 {
    margin-top: 0.2rem;
}

.image-preview-container{
    width: 100%;
    height: 500px;
    background: ghostwhite;
    border-radius: 18px;
    position: relative;
}
.image-preview-container img{
    width: 100%;
    height: inherit;
    object-fit: cover;
    border-radius: 18px;
}
.image-preview-container .close{
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 22px;
    cursor: pointer;
    color: #ffffff;
}
.modal-dialog.modal-preview-img-story .modal-content{
    /* width: 300px; */
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 0;
}
.sumbit-post-story{
    cursor: pointer;
    position: absolute;
    height: 50px;
    width: 50px;
    bottom: 15px;
    right: 30px;
    background: #ffffff;
    padding: 5px;
    border: 1px solid #e7f2f3;
    border-radius: 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.sumbit-post-story img{
    width: 40px;
    height: 40px;
}
#myCarousel{
    z-index: -1;
}

@media (min-width: 576px) {
    .modal-dialog.modal-preview-img-story {
        max-width: 90%;
        margin: 1.75rem auto;
        border-radius: 18px;
    }
    #myCarousel{
        z-index: 0;
    }

}

.custom-tag-a {
    text-decoration: unset;
    color: #212529;
}
.custom-tag-a:hover,
.custom-tag-a:active,
.custom-tag-a:focus {
    text-decoration: unset;
    color: #212529;
}

.btn-delete-comment {
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.25rem 0.75rem;
    border-radius: 0.75rem;
    color: #c65858!important;
    font-size: 0.8rem;
    cursor: pointer;
}
.comment-user-details .btn-delete-comment:hover,
.reply-detail .btn-delete-comment:hover {
    text-decoration: underline;
}

.feed .feed-posts .feed-post .post-summary .post-actions .post-action.active {
    color: #5bcefa;
    background: #effaff;
}
.feed .feed-posts .feed-post .post-summary .post-actions .post-action.active img {
    filter: none;
}


.badge-success {
    color: #198754;
    font-size: 16px;
}
.badge-warning {
    color:#ffca2c;
    font-size: 16px;
}
.comment-thread-reply{
    display: flex;
    align-items: center;
    border-radius: 0.75rem;
    border: 1px solid #eee;
    padding: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.comment-thread-reply img{
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}
.comment-thread-reply .form-control{
    padding: 0rem 1rem;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 0.9rem !important;
}
.noti-section-two{
    font-size: 12px !important;
}

.post-person-details .post-person-name a:hover {
    color: #0d6efd;
}

.see-more-comment {
    color: #5bcefa!important;
}


.wrap-events .event-type {
    display: inline-flex!important;
    background: rgb(91 207 250);
    border-radius: 0.75rem;
    padding: 5px;
    color: #FFF!important;
    margin-bottom: 5px;
}

.wrap_notification .is_read {
    opacity: 0.5;
}

@media (max-width: 767.9px) {
    .places .places-header .nav {
        flex-wrap: wrap;
        /* overflow-y: hidden; */
    }
}
.profile-img-container{
    position: relative;
    top: 40px;
    width:  195px;
    height:  195px;
}
.profile-img{
    width:  195px;
    height:  195px;
    background-image: url('../img/thaisisterhood-1.jpg');
    background-size: 150%;
    border-radius: 0.75rem;
    border: 10px solid #fff;
    padding: 0 !important;
    position: absolute;
    overflow: hidden;
}

.profile-img img {
    width:  195px;
    height:  195px;
    object-fit: cover;
    display: block;
}
.main.profile-header .img-fluid {
    border: none !important;
    border-radius: 0 !important;
}
.profile-name-text{
    margin-left: 17px;
}

.image-profile {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

label.filebutton {
    width: 30px;
    height: 30px;
    position: absolute;
    box-shadow: 1px 1px 7px 4px rgba(56, 56, 56, 0.1);
    border-radius: 32px;
    background-color: #ffffff;
    margin-top: -14px;
    margin-left: -14px;
}

.filebutton svg {
    margin-left: 1px;
}

.un-filebutton {
    background: #ffffff;
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 1px 7px;
    border-radius: 50%;
    box-shadow: 1px 1px 7px 4px rgba(56, 56, 56, 0.1);
    cursor: pointer;
    margin-top: -15px;
    margin-left: 134px
}

.un-filebutton svg {
    margin: 0;
}
.feed-comment-line{
    width: 1px;
    height: 50px;
    background-color: #f0f2f5;
    margin: auto;
}
.comment-user-img-container {
    position: relative;
    z-index: 50;
}
.comment-line{
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #f0f2f5;
    margin: 0 1rem;
}
.comment-line-one{
    width: 1px;
    height: 46px;
    background-color: #f0f2f5;
    /* margin: auto; */
}
.reply-comment-line-flex{
    display: flex;
    margin-left: 29px;
}
.reply-comment-line-expand{
    display: flex;
}
.reply-comment-line-detail{
    /* margin-left: 15px; */
    display: flex;
}
.reply-comment-line{
    width: 30px;
    height: 15px;
    border: solid 1px #f0f2f5;
    border-color: transparent transparent #f0f2f5 #f0f2f5;
    border-radius: 0 0 0 100px;
}
.reply-comment-line-line-none {
    width: 30px;
    height: 20px;
    /* border: solid 1px #333;
    border-color: transparent transparent #333 #333; */
    border: solid 1px #f0f2f5;
    border-color: transparent transparent #f0f2f5 #f0f2f5;
    border-radius: 0 0 0 16px;
    /* margin-left: 14px; */
}
.reply-comment-line-expand .reply-comment-line-line-none {
    margin-left: -1px;
    height: 30px;
}
.reply-comment-line-expand .reply-comment-line-line-none.reply-last {
    margin-left: 0;
}
/* .line-none .reply-comment-line{
    width: 25px;
    height: 17px;
    border: solid 2px #f0f2f5;
    border-color: transparent transparent #f0f2f5 transparent;
    border-radius: 0 0 0 50%/100px;
} */
.see-more-reply {
    margin-left: 12px;
    margin-top: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #5BCEFA;
}
.see-more-reply:hover {
    text-decoration: underline;
}

.count-content {
    right: 36px;
    margin-top: 13px;
    margin-left: 10px;
}


.notification-count-content {
    margin: auto;
    width: 20px;
    height: 20px;
    background-color: #f30404;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
}


.notification-count-content p {
    font-size: 15px;
    color: #ffffff;
    margin: 0;
}
.text-notification{
    text-align: center;
    padding: 12px;
}
.forum-font-status{
    color: #5c5c5c6e !important;
}
.forum-status{
    color: var(--bs-warning);
    background-color: #fff8dd;
    width: 100px;
    height: 30px;
    font-size: 15px;
    text-align: center;
    padding: 2px;
    border-radius: 12px;
    margin-bottom: 5px;
}
.btn-register{
    margin-top: 12px
}
.post-replies {
    margin-top: 1rem;
}
.comment-user-details{
    display: flex;
}
.comment-detail-container {
    display: flex;
    flex-direction: column;
}
.comment-detail {
    display: flex;
    flex-direction: column;
    background: #ebf7fa;
    padding: 0.4rem 1rem;
    border-radius: 1rem;
    color: #333;
}
.comment-detail-user .comment-date {
    color: #ACACAC;
    font-size: 0.8rem;
}
.comment-detail-user .comment-user-name,
.comment-detail-user .reply-user-name {
    color: #333;
    font-weight: 500;
    font-size: 0.8rem;
}
.comment-detail-description {
}
.comment-detail-description p {
    margin-bottom: 0.2rem;
    color: #515151;
}
.comment-utility {
    font-size: 0.8rem;
    margin-left: 1rem;
}
.comment-utility span {
    color: #999;
    padding: 0.25rem 0;
}
.comment-utility span:hover {
    color: #5bcefa;
    background: none !important;
}
.post-reply-avatar-margin{
    margin:0 0.8rem;
    position: relative;
}
.post-content-short-0{
    width: 100%;
    background: #12c2e9;
    background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    text-align: center;
    padding: 1rem;
}
.post-content-short-1{
    width: 100%;
    background: #FDC830;
    background: -webkit-linear-gradient(to left, #F37335, #FDC830);
    background: linear-gradient(to left, #F37335, #FDC830);
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    text-align: center;
    padding: 1rem;
}
.post-content-short-2{
    width: 100%;
    background: #ff00cc;
    background: -webkit-linear-gradient(to left, #333399, #ff00cc);
    background: linear-gradient(to left, #333399, #ff00cc);
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    text-align: center;
    padding: 1rem;
}
.post-content-short-3{
    width: 100%;
    background: #11998e;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    text-align: center;
    padding: 1rem;
}
.navbar.sticky .nav-mt{
    margin-top: 0px;
}
.nav-mt{
    margin-top: 6px;
}
.comment-container {
    background: rgba(31, 31, 31, 0.025);
    border-radius: 0.75rem;
    padding: 1.6rem;
    position: relative;
}
.comment-container .num {
    font-size: 0.8rem;
    color: #5BCEFA;
}
.comment-container a {
    text-decoration: none;
}
.comment-container a img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    /* margin-right: 0.5rem; */
    border-radius: 50%;
    margin-right: 0.5rem;
}
.comment-container a strong {
    margin: 0 0.5rem;
    color: #1f1f1f;
}
.comment-container a:hover strong {
    color: #5BCEFA;
}
.comment-container span {
    font-size: 0.8rem;
    color: rgba(31, 31, 31, 0.5);
}
.comment-container .comment-content {
    margin-top: 1rem;
    padding-left: 1rem;
}
.comment-add-container {
    border-left: 4px solid #5BCEFA;
}
.comment-container .btn-delete-comment {
    color: #797979 !important;
    text-decoration: none !important;
    font-size: 24px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -8px;
    right: -8px;
    transition: all 0.2s linear;
    cursor: pointer;
}
.comment-container .btn-delete-comment:hover {
    background: #eee;

}
.comment-container .btn-delete-comment i {
    margin-top: -8px;
}


.post-bg-color img{
    width: 38px;
    height: 38px;
}
.post-bg-container{
    cursor: pointer;
    display: flex;
}
.bg-container{
    display: flex;
}
.bg-color-0{
    background: #ffffff;  /* fallback for old browsers */
}
.container-description{
    height: 200px;
    border: 1px solid #d8d5d5;
    border-radius: 12px;
    padding: 12px;
    display:table-cell;
    align-items: center;
justify-content: center;
vertical-align: middle;
}
.form-field .form-control.bg-color-1:focus,
.form-field .form-control.bg-color-2:focus,
.form-field .form-control.bg-color-3:focus,
.form-field .form-control.bg-color-4:focus,
.form-field .form-control.bg-color-5:focus{
    outline: 0;
    color: #ffffff;
}
.post-bg-select {
    display: table;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 100%;
    height: 15rem;
    max-height: 15rem;
    border: 1px solid #ddd;
    border-radius: 0.4rem;
    overflow-y: hidden;
    cursor: text;
}
.post-bg-select #description,
.post-bg-select #description-share {
    height: 100%;
    max-height: 16rem;
    margin-bottom: 0;
    border: none !important;
    overflow-y: auto;
    display: inline-block !important;
    padding: 1rem;
    font-weight: 400 !important;
    word-break: break-all;
    inline-size: 470px;
    border: 1px solid red;
    overflow: auto;
}
.post-bg-select.post-bg #description {
    height: unset;
}
.post-bg-select.post-share {
    height: unset;
}
.post-bg{
    font-size: 20px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    text-align: center;
    padding: 1rem;
    border-radius: 0.4rem;
}
.post-bg a {
    color: #FFF;
    text-decoration: underline;
}
.bg-color-1{
    color: #ffffff;
    font-weight: 600;
    background: #8E2DE2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-color-2{
    color: #ffffff;
    font-weight: 600;
    background: #12c2e9;
    background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
.bg-color-3{
    color: #ffffff;
    font-weight: 600;
    background: #FDC830;
    background: -webkit-linear-gradient(to left, #F37335, #FDC830);
    background: linear-gradient(to left, #F37335, #FDC830);
}
.bg-color-4{
    color: #ffffff;
    font-weight: 600;
    background: #ff00cc;
    background: -webkit-linear-gradient(to left, #333399, #ff00cc);
    background: linear-gradient(to left, #333399, #ff00cc);
}
.bg-color-5{
    color: #ffffff;
    font-weight: 600;
    background: #11998e;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-container-color {
    width: 38px;
    height: 38px;
    margin-left: 5px;
    border-radius: 30%;
    border: 4px solid #f5f5f5;
}

.bg-container-color:hover{
    border: 4px solid #b3b3b3;
}
.placeholder {
    color: #999; /* Placeholder text color */
    font-style: italic; /* Italicize the placeholder */
}

.auth-screen .auth-box .btn.btn-auth {
    color: #444444;
}
.auth-screen .auth-box .auth-options {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.auth-screen .auth-box .btn.btn-auth.btn-social {
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
}
.auth-screen .auth-box .btn.btn-auth.btn-social img {
    margin: 0 auto;
}
.auth-screen .auth-box .btn.btn-auth.btn-twitter img {
    width: 12px !important;
    height: auto;
}
.auth-screen .auth-box .btn.btn-auth.btn-facebook {
    /* filter: brightness(0) saturate(100%) invert(29%) sepia(90%) saturate(2539%) hue-rotate(217deg) brightness(100%) contrast(102%); */
}
.auth-screen .auth-box .btn.btn-auth img {
    filter: none !important;
}
.auth-options .btn-auth.btn-facebook {
    color: #444444 !important;
}
.auth-screen .auth-box .btn.btn-auth>div {
    width: 24px;
    padding-left: 6px;
    text-align: center;
}
.auth-screen .auth-box .btn.btn-auth span {
    border-left: 1px solid #ccc;
    padding-left: 10px;
}

.feed-post .post-content .post-content-text a {
    color: #F5AABA;
}
.feed-post .post-content .post-content-text a:hover {
    color: #ef92a6;
    text-decoration: underline;
}
.feed-post .post-content .post-content-text [class^="bg-color-"] a {
    color: #FFF;
    text-decoration: underline;
    margin: 0 0.6rem;
}
.article-body .container li {
    list-style-type: disc;
    margin-left: 32px;
}
.article-body .container img {
    max-width: 100%;
}

.form-floating>label {
    background: #FFF;
    padding: 0 0.5rem;
    height: inherit;
    margin-top: 0.5rem;
    margin-left: 0.2rem;
}
.form-floating>.form-control:focus~label {
    opacity: 1;
    transform: scale(.85) translateY(-1.6rem) translateX(0.5rem);
}
.form-floating>.form-control:focus {
    padding-top: 1rem;
}

.swal2-popup {
    padding-top: 1rem !important;
}

/* message */
.chat-messages .person-message {
    display: flex;
    flex-direction: column;
    width: inherit !important;
    padding-left: 0.8rem !important;
}
.chat-message .delete-btn {
    color: #ccc;
    border-radius: 20px;
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s all linear;
    display:none;
}
.chat-message .delete-btn:hover {
    background: #F1F1F1;
    color: #aaa;
}
.chat-messages .message-type-right,
.chat-messages .message-type-left {
    padding: 0.75rem 1.4rem !important;
    border-radius: 1rem !important;
}
.messages-box .chat-screen .chat-messages .chat-message .person-details span {
    font-size: 0.7rem;
    margin-top: 0.2rem;
}
.messages-box .chat-screen .chat-messages .chat-message.my-message .person-details span {
    margin-right: 0.6rem !important;
}

.chat-messages .person-details .seen {
    color:#ccc;
    font-size: 0.8rem;
}
.messages-box .chat-screen .chat-messages .chat-message.my-message .person-message .message {
    width: fit-content;
}
.chat-message.my-message .person-message {
    justify-content: end;
    flex-direction: flex-start;
}

.feed .feed-profile-sidebar .profile-avatar,
.feed .feed-share img.avatar,
.feed .feed-posts .feed-post .post-person img.post-person-avatar,
.feed .feed-posts .feed-post .post-summary .post-likes .post-likes-avatars img,
.feed .feed-posts .feed-post .post-thread .post-thread-reply img,
.feed .feed-profile-sidebar .feed-sidebar-account img.account-avatar {
    background: rgb(91,206,250) !important;
    background: linear-gradient(90deg, rgba(91,206,250,1) 0%, rgba(0,164,227,1) 50%, rgba(91,206,250,1) 100%) !important;
}

.app-download-qr {
    margin: 0 auto;
    width: 100%;
}
.app-download-qr img {
    width: 100%;
}
.app-download-link {
    width: 55%;
}
.app-download-link img {
    width: 90%;
}
.referrals-summary .referral-stats .referral-item {
    text-align: right;
}
#redeemModal .container-modal h5 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
}
#redeemModal .container-modal {
    padding: 2rem;
}
#redeemModal .container-modal .redeem-product-img img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: contain;
}
#redeemModal .container-modal .redeem-product {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    border: 1px solid #F6B3C1;
    background: #fff7f8;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
}
#redeemModal .container-modal .product-name {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.2rem !important;
}
#redeemModal .container-modal .redeem-header {
    color: #666;
    font-size: 0.9rem;
    margin-top: 2rem;
    display: block;
}
a.memberwinner {
    color: #5BCEFA;
    text-decoration: none;
}
a.memberwinner:hover {
    color: #5BCEFA;
}

.feed-description {
    word-wrap: break-word;
}

@media (max-width: 992px) {
    .app-download-link img {
        width: 75%;
    }
}
@media (max-width: 768px) {
    .app-download-link img {
        width: 60%;
    }
}
@media (max-width: 600px) {
    .chat-message.my-message .person-message {
        padding-right: 0 !important;
    }
    .chat-messages .message-type-right,
    .chat-messages .message-type-left {
        padding: 0.5rem 1.2rem !important;
        border-radius: 0.6rem !important;
    }
    .messages-box .chat-screen .chat-messages .chat-message .person-message .message {
        font-size: 0.8rem;
    }
    .messages-box .chat-screen .chat-messages .chat-message .person-details span {
        font-size: 0.6rem;
    }
    .chat-message .person-details .seen {
        font-size: 0.6rem;
    }
    .messages-box .chat-screen .chat-messages .chat-message .person-avatar {
        width: 2rem;
        height: 2rem;
    }
}