/*
 *	Global Community Board Stylesheet
 *	@version 1.0.0
 */
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");

 @font-face {
   font-family: "CK";
   src: url("../../assets/uploads/fonts/CKingdom.ttf") format("truetype");
   /* You can also include other font formats like WOFF or WOFF2 for better compatibility */
 }
 
 body {
   background-color: #f8f9fd;
    font-family: "Open Sans", sans-serif;
 }
 
 .fs-7 {
   font-size: .85rem;
 }
 .property-graph-wrapper {
    border: 1px solid #969292;
    border-radius: 12px;
    background-color: white;
 }
 .nav-icon.active > i {
   font-weight: 600;
   color: #0d6efd;
 }
 
 .search-wrapper {
   border: 1px solid #e4e4e4;
   box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.32),
     0px 2px 6px rgba(60, 64, 67, 0.15), 0px 1px 8px rgba(0, 0, 0, 0.1);
   border-radius: 1rem;
   background-color: #ffffff;
 }
 .dispoaid-bg {
   background-color: #23292F;
 }
 .signin-wrapper {
   min-height: 650px;
   height: 80vh;
 }
 
 #faqs-content {
   word-wrap: break-word;
 }
 
 .search-input,
 .search-input:focus {
   border: none !important;
   box-shadow: none !important;
 }
 
 .classroomsList .card-body {
   padding: 0;
 }
 .group-membership-list .inactive {
   filter: grayscale(100%);
   opacity: 0.7;
 }
 
 .group-membership-list .inactive a {
   pointer-events: none;
 }
 
 div.group-parent-wrapper {
   max-width: 1600px;
 }
 
 
 /* Summernote WYSIWYG TextEditor Images */
 div.group-parent-wrapper div#comm-main .note-editable img,
 div#editPostWrapper div.note-editable img,
 div#comm-main div.feed-wrapper div.post-content div.post-desc img,
 div#comm-main div.feed-wrapper div.post-content div.post-description img,
 div#comm-main div.feed-wrapper div.comment-wrap div.comment-body img {
   max-width: 20% !important;
   max-height: 20% !important;
   transition: all 0.2s ease-in-out;
   border-radius: 10px;
 }
 
 div.group-parent-wrapper div#comm-main .note-editable img:hover,
 div#editPostWrapper div.note-editable img:hover,
 div#comm-main div.feed-wrapper div.post-content div.post-desc img:hover,
 div#comm-main div.feed-wrapper div.post-content div.post-description img:hover,
 div#comm-main div.feed-wrapper div.comment-wrap div.comment-body img:hover {
   cursor: pointer;
   transform: scale(1.02);
 }
 
 div.group-parent-wrapper div.feed-wrapper .poll-summary-wrapper {
   margin-top: 1rem;
   font-size: 14px;
 }
 
 div.group-parent-wrapper div.feed-wrapper .post-attachments-wrapper a {
   text-decoration: none;
 }
 
 div.group-parent-wrapper div.feed-wrapper .poll-summary-wrapper .badge {
   padding: 4px 15px;
   border-radius: 15px;
 }
 
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   form#votePost-poll-options
   ul
   li {
   border: none;
   padding-left: 0px;
 }
 
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   form#votePost-poll-options
   ul
   li
   input[type="radio"] {
   display: none;
 }
 
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   form#votePost-poll-options
   ul
   li
   .custom-radio {
   display: inline-block;
   width: 25px;
   height: 25px;
   border: 2px solid #0d6efd;
   border-radius: 50%;
   position: relative;
   cursor: pointer;
   margin-right: 10px;
 }
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   form#votePost-poll-options
   ul
   li
   .custom-radio::after {
   content: "";
   position: absolute;
   width: 15px;
   height: 15px;
   background: #0d6efd;
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: opacity 0.2s;
 }
 
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   form#votePost-poll-options
   ul
   li
   input[type="radio"]:checked
   + .custom-radio::after {
   opacity: 1;
 }
 
 /* Optional: Label styles */
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   form#votePost-poll-options
   ul
   li
   label.radio {
   display: flex;
   align-items: center; /* Center align items */
 }
 
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   form#votePost-poll-options
   ul
   li.pollItemWrapper
   div.label-container {
   border-radius: 7px;
   font-size: 16px;
   cursor: pointer;
 }
 
 div.group-parent-wrapper div.votePost-attachmentPoll-wrapper .custom-radio {
   display: inline-block;
   width: 25px;
   height: 25px;
   border: 2px solid #0d6efd;
   border-radius: 50%;
   position: relative;
   cursor: pointer;
 }
 
 .post-author-wrapper {
   padding-bottom: .25rem;
   padding-top: .5rem;
   padding-right: 1rem;
   padding-left: 1rem;
   display: flex;
 }
 
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   input[type="radio"] {
   display: none;
 }
 
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   .progress-container {
   position: relative;
   height: 8px;
   margin-top: 5px;
   border-radius: 5px;
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.1);
 }
 
 div.group-parent-wrapper div.votePost-attachmentPoll-wrapper .progress-bar {
   height: 100%;
   border-radius: 5px;
   transition: width 0.4s;
   opacity: 0.8;
 }
 
 div.group-parent-wrapper div.votePost-attachmentPoll-wrapper .percentage {
   margin-left: 10px;
   font-size: 0.9em;
   opacity: 0.7; /* Slightly transparent percentage */
 }
 
 div.group-parent-wrapper div.votePost-attachmentPoll-wrapper .radio-container {
   display: flex;
   align-items: center;
 }
 
 div.group-parent-wrapper div.votePost-attachmentPoll-wrapper .label-container {
   width: 94%;
   border: 1px solid #dee2e6;
   padding: 10px;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
 }
 div.group-parent-wrapper div.votePost-attachmentPoll-wrapper .pollItemWrapper {
   border: none;
   padding-left: 0px;
 }
 /* For transition effect */
 div.group-parent-wrapper
   div.votePost-attachmentPoll-wrapper
   .content-container {
   transition: opacity 0.5s ease-in-out;
   opacity: 1; /* Initially full opacity */
 }
 
 /* Loader styling */
 div.group-parent-wrapper div.votePost-attachmentPoll-wrapper .loader-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1000; /* Make sure loader is on top */
 }
 
 .classroomsList .intro-card {
   margin-bottom: 1.875rem;
   background-color: #fff;
   transition: all 0.5s ease-in-out;
   position: relative;
   border: 0rem solid transparent;
   border-radius: 0.625rem;
   box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgba(82, 63, 105, 0.05);
   height: calc(100% - 30px);
   padding: 1.875rem;
 }
 
 .leaderboard-card {
   box-shadow: 0 0 0 0 rgba(0 0 0 0 20%);
   border-radius: 1rem;
   margin-bottom: 1rem;
 }
 
 .leaderboard-card a {
   text-decoration: none;
   color: #000;
 }
 
 .profile-card {
   box-shadow: 0 0 0 0 rgba(0 0 0 0 20%);
   border-radius: 1rem;
 }
 
 .post-date {
   color: #565656;
   font-size: 14px;
 }
 
 .group-tag {
   color: #565656;
   font-size: 14px;
   font-weight: 600;
   /* text-transform: uppercase; */
 }
 
 .group-member-imgs {
   max-width: 30px;
   margin-right: 0px;
 }
 
 .comment-member-imgs {
   max-width: 30px;
   padding: 1px;
 }
 
 .point-count {
   color: #1292f1;
 }
 
 .fa-trophy {
   font-size: 1.5rem;
 }
 
 .leaderboard-rank {
   font-size: 14px;
   padding-bottom: 10px;
 }
 
 .tag-bubble,
 .post-filters-wrap {
   padding: 1.8px;
   color: #777777;
   background-color: #fff;
   /* border: 1px solid #bdbdbd;
   border-radius: 20px; */
   cursor: pointer;
 }
 
 .tag-bubble.active {
   padding: 2.5px;
   color: #ffffff;
   background-color: #777777;
   border: 1px solid #777777;
   border-radius: 20px;
 }
 
 .feed-card {
   border-radius: 0px;
   box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.26);
   -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.26);
   -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.26);
   border: none;
 }
 
 .post-title {
   font-weight: 700;
   font-size: 18px;
   margin-bottom: 10px;
 }
 
 .post-title a {
   color: var(--bs-body-color);
   text-decoration: none;
 }
 
 .post-desc,
 .post-description,
 .comment-body {
   font-size: 16px;
   min-height: 70px;
 }
 
 .post-desc img,
 .post-description img,
 .comment-body img {
   margin: 5px;
   border: 1px solid rgba(0, 0, 0, 0.176);
   box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2);
 }
 
 .search-div {
   display: flex;
   margin: 0 auto;
   text-align: center;
   justify-content: center;
 }
 
 .post-last-comment {
   color: #565656;
   font-size: 12px;
 }
 
 .interact-btn {
   color: #565656;
   text-decoration: none;
 }
 
 .interact-btn:hover {
   color: #1292f1;
   text-decoration: none;
 }
 
 .avatar-lvl {
   background-color: #1292f1;
   border-radius: 100%;
   color: #fff;
   margin-right: -5px;
   margin-bottom: -5px;
   width: 24px;
   height: 24px;
   font-size: 14px;
   text-align: center;
   border: 2px solid #fff;
 }
 
 .message-icon-cntr {
   background-color: #f11212;
   border-radius: 100%;
   color: #fff;
   margin-right: -5px;
   margin-bottom: -5px;
   width: 24px;
   height: 24px;
   font-size: 14px;
   text-align: center;
   border: 2px solid #fff;
 }
 
 .commprofile-img {
   border-radius: 100%;
   width: 280px;
   z-index: 2;
 }
 
 .round-progress-bar {
   z-index: 1;
   border-radius: 50%;
   background: radial-gradient(closest-side, white 94%, transparent 95% 100%),
     conic-gradient(#005697 75%, #1292f1 0);
 }
 
 .level-bubble {
   background-color: #1292f1;
   border-radius: 100%;
   color: #fff;
   width: 50px;
   height: 50px;
   text-align: center;
   border: 2px solid #fff;
   font-size: 24px;
   font-weight: 600;
 }
 
 .level-rank {
   width: 40px; 
   height: 40px; 
   background-color: #1292f1;
   bottom: 10px;
   left: 49%;
   line-height: 40px;
   font-size: 19px;
   color: #fff;
   position: absolute;
   transform: translate(50%, 50%);
   border-radius: 50%;
 }
 
 .locked-level {
   padding: 7px;
   text-align: center;
   width: 40px;
   height: 40px;
   margin-top: auto;
   margin-bottom: auto;
   background-color: #EBEBEB;
   border-radius: 20px;
 }
 
 .social-links {
   font-size: 20px;
 }
 
 .nav-search {
   background-color: #ebebeb;
   border-radius: 10px;
 }
 
 .nav-search-input {
   background-color: #ebebeb;
   border: unset;
 }
 
 .nav-search-input:focus {
   box-shadow: unset;
   background-color: #ebebeb;
   border: unset;
 }
 
 .community-navbar {
   /* background-color: #ffffff;
   box-shadow: 0px 5px 4px #e5e5e5; */
 }
 
 .community-navbar.dashboard {
   /* background-color: #ffffff;
   box-shadow: unset; */
 }
 
 .section-header {
   color: #565656;
 }
 
 #previewClassDesc {
   text-align: justify;
 }
 
 .tag-bubble {
   white-space: nowrap !important;
 }
 
 .post-desc {
   font-size: 14px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   -webkit-box-orient: vertical;
 }
 
 .btn-kick {
   color: #ffffff;
   background-color: #ff9494;
 }
 
 .btn-kick:hover {
   color: #ffffff !important;
   background-color: #e11d1d;
 }
 
 .event-img {
   border-radius: 22px;
   overflow: hidden;
 }
 
 .event-title {
   color: #27354e;
   font-weight: 400;
 }
 
 .event-time {
   color: #27354e;
   font-size: 14px;
 }
 
 .event-feed-card:hover {
   box-shadow: 0px 5px 4px #e5e5e5;
   cursor: pointer;
 }
 
 .blue-btn {
   margin-right: -5px;
   margin-bottom: -5px;
   background-color: #1292f1;
   border-radius: 8px;
   z-index: 10;
 }
 
 .blue-btn:hover {
   background-color: #57b7ff;
 }
 
 .note-editor.note-airframe,
 .note-editor.note-frame {
   border: unset !important;
 }
 
 .note-editor.note-airframe .note-statusbar,
 .note-editor.note-frame .note-statusbar {
   border-top: unset !important;
 }
 
 .post-wrapper {
   overflow: hidden;
   height: 50px;
   transition: all 2s ease;
 }
 
 .post-wrapper.expand {
   height: unset !important;
   transition: all 2s ease;
 }
 
 #closeWrapper {
   height: 24px;
   width: 24px;
   border-radius: 12px;
 }
 
 #submitNewPost {
   margin-right: -5px;
   margin-bottom: -5px;
   background-color: #1292f1;
   border-radius: 8px;
   z-index: 10;
 }
 
 #drop-div {
   background: #efefef;
   border-radius: 14px;
 }
 
 #banner-drop-div {
   background: #efefef;
   border-radius: 14px;
   margin-top: 10px;
 }
 
 .ui-helper-hidden-accessible {
   display: none !important;
 }
 
 
 .intro-card .group-header-img {
   width: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .intro-card .group-header-img img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   margin-bottom: 10px;
 }
 
 div.desc {
   height: 100px;
   margin-top: 20px;
   overflow: hidden;
 }
 
 /* .post-content {
 cursor: pointer;
 } */
 
 .notification-container {
   min-width: 300px;
   max-width: 500px;
 }
 
 .notification-container ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .notification-container ul li {
   border-bottom: 1px solid #e7e7e7;
 }
 
 .notification-container ul li a {
   color: #757171;
   display: block;
   padding: 10px 20px;
   text-decoration: none !important;
 }
 
 .message-container {
   min-width: 500px;
   max-width: 500px;
   inset: 0px 19px auto -8% !important;
 }
 
 .message-container .popover-header {
   height: 50px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* align-content: center; */
   width: 100%;
 }
 
 .notification-container .popover-arrow,
 .message-container .popover-arrow {
   display: none;
 }
 
 .message-row.active,
 .group-message.active {
   border-left: 5px solid #52acff;
   background-color: rgb(228, 228, 228);
 }
 
 .message-row,
 .group-message {
   cursor: pointer;
   width: 100%;
   padding: 10px;
   margin: 0;
   height: 70px;
   align-content: center;
   align-items: center;
   margin-bottom: 1px;
 }
 
 .message-row:hover,
 .group-message:hover {
   background-color: rgb(228, 228, 228);
 }
 
 .popover-body {
   padding: 0;
 }
 
 .hideBackdrop {
   opacity: 0 !important;
 }
 
 .hideBackdrop.fade {
   opacity: 0 !important;
   animation: none;
 }
 
 #chatModal .modal-content,
 #groupChatModal .modal-content,
 #chatModal .modal-dialog {
   max-width: 630px;
   height: 420px;
 }
 
 #chatModal .modal-content > div {
   display: none;
 }
 
 #messageModal .modal-dialog {
   margin-right: 10%;
   margin-top: 5%;
 }
 
 #messageModal .modal-content {
   max-height: 500px;
 }
 
 #messageModal .modal-title {
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 16px !important;
   line-height: 1.5;
 }
 
 #messageModal .modal-mark-all {
   color: rgb(46, 110, 245);
   margin: 0px;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   line-height: 1.5;
 }
 
 #messageModal .modal-body {
   padding: 0;
   overflow-x: scroll;
 }
 
 #chatModal .modal-body,
 #groupChatModal .modal-body {
   height: 400px;
   overflow-y: scroll;
 }
 
 #chatModal .modal-header,
 #chatModal .modal-footer {
   height: 70px;
 }
 
 #chatModal .modal-footer {
   display: unset;
 }
 
 .onlineText {
   color: rgb(144, 144, 144);
   margin: 0px;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   line-height: 1.5;
 }
 
 #typeHere:focus {
   outline: none;
   box-shadow: none;
   cursor: text;
 }
 
 #typeHere {
   padding: 10px !important;
   height: 100px;
 }
 
 .messageSent {
   color: rgb(144, 144, 144);
   margin: 0px;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   line-height: 1.5;
 }
 
 #chatModal .modal-body .modal-header {
   height: auto;
 }
 
 .chatDate {
   color: rgb(144, 144, 144);
   margin: 0px;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   font-size: 14px;
   line-height: 1.5;
 }
 
 #latestMessage {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
 .cursor {
   cursor: pointer;
 }
 
 span.category-name {
   cursor: pointer;
   color: white;
 }
 
 /* span.category-name:hover {
 color: #1292f1;
 } */
 
 .module-container {
   border-bottom-style: dotted;
   padding-bottom: 1rem !important;
 }
 
 .classroom-img {
   width: 100%;
   /* height: 200px; */
   max-height: 300px;
   object-fit: fill;
   /* aspect-ratio: 16/9; */
   /* border-radius: 0.625rem; */
 }
 
 .classroom-desc {
   min-height: 60px;
   font-size: 14px;
   font-family: inter;
 }
 
 .p-container {
   max-height: 3.6em;
   /* Three lines with some padding */
   overflow: hidden;
   line-height: 1.2em;
   /* Adjust based on your font size and line height */
   margin: 0;
   /* Remove any default margin */
 }
 
 /* Optional: Add some styling for better visibility */
 .p-container {
   border: 1px solid #ccc;
   padding: 10px;
   width: 200px;
 }
 
 /* .add-classroom {
 position: fixed;
 bottom: 5%;
 right: 2%;
 } */
 .add-classroom a {
   /* border-radius: 50%; */
   padding: 5px 15px !important;
 }
 
 #lesson-content {
   height: fit-content;
 }
 
 #lesson-content * {
   max-width: 100% !important;
 }
 
 #lesson-content video {
   width: 100%;
   background: black;
   object-fit: cover;
 }
 
 /* 
 .accordion-body .item:hover,
 .accordion-item.active {
 background: #ebebeb;
 } */
 
 .accordion-body {
   background: transparent;
 }
 
 div.community-size ul.mainSidebar .accordion-body,
 .dashboard-menu .accordion .accordion-body{
   padding: initial;
 }
 
 #classroom .accordion-item {
   background: transparent;
   border-radius: 10px;
   padding-left: 5px;
   /* margin-bottom: 10px; */
   /* border-top: 1px solid #b3b3b3 !important; */
   /* border-bottom: 1px solid !important; */
   /* border-radius: 0;
 padding-bottom: 30px;
 padding-top: 15px; */
 }
 
 .no-lesson,
 .no-classroom {
   border: 2px dashed #b3b3b3;
 }
 
 /* .lesson:hover {
 background: #fff;
 } */
 /* .lesson.active {
 background-color: #fff;
 border: 1px;
 } */
 
 .lesson h4 {
   font-size: 14px;
   width: 75%;
   padding-left: 5px;
   font-weight: 400;
 }
 
 
 #profileDetailsCont .accordion-header {
   margin-top: 0;
 }
 
 .accordion-header span {
   font-size: 22px;
   text-transform: capitalize;
   background-color: transparent;
   position: relative;
   /* top: -15px; */
   left: 10px;
 }
 .dashboard-menu .accordion-header span {
   font-size: 16px;
   text-transform: capitalize;
   background-color: transparent;
   position: relative;
   /* top: -15px; */
   left: 10px;
 }
 
 .accordion-button.collapsed:after {
   background-color: var(--rgba-primary-5);
 }
 
 #classroom .accordion-body {
   padding-top: 0 !important;
 }
 
 .module-title:hover {
   color: #1292f1;
 }
 
 .module-title {
   font-size: 18px;
   font-weight: bold;
   text-transform: capitalize;
   background-color: transparent;
   align-items: start;
   padding: .5rem 0rem;
 }
 
 .module-title span {
   font-size: 14px;
   font-weight: 600;
   text-transform: capitalize;
   background-color: transparent;
   align-items: start;
   /* margin-top: 15px; */
 }
 
 .lesson-table-of-content .accordion-button:not(.collapsed) {
   color: black;
 }
 
 .module-title {
   line-height: 1.3;
 }
 
 .module-title:focus {
   z-index: 3;
   border-color: none;
   outline: 0;
   box-shadow: none;
 }
 
 .module-title.accordion-button:not(.collapsed) {
   font-weight: bold;
   z-index: 3;
   border-color: none;
   outline: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
 .hidden-important {
   display: none !important;
 }
 
 .required-field {
   border: 1px solid red;
   color: red;
 }
 
 .required-field::placeholder {
   color: red;
 }
 
 .action {
   width: 15% !important;
 }
 
 .sort {
   cursor: pointer;
 }
 
 .post-likers {
   padding: 10px;
 }
 
 .post-likers ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 #memberSettingTable td {
   vertical-align: middle;
 }
 
 #memberSettingTable select {
   text-transform: capitalize;
 }
 
 #memberSettingTable svg {
   cursor: pointer;
 }
 
 #memberSettingTable .del {
   border: 0;
   background-color: transparent;
 }
 
 #memberSettingTable .addMember {
   display: flex;
   align-content: center;
   align-items: center;
   margin: 0 0 0 auto;
   gap: 10px;
   /* background-color: transparent; */
   text-transform: uppercase;
   border: 0;
   padding: 8px 15px;
 }
 
 #myForm .select2 {
   width: 100%;
 }
 
 .select2 .selection {
   text-align: left;
 }
 
 .select2-container--open {
   z-index: 999999;
 }
 
 .select2-container--default .select2-selection--single {
   border: 1px solid #ced4da;
   padding: 0.375rem 0.75rem;
   height: calc(1.5em + 0.75rem + 2px);
 }
 
 .select2-container--default
   .select2-selection--single
   .select2-selection__arrow {
   height: calc(1.5em + 0.75rem + 2px);
 }

 .course-list-wrapper .groupLink {
   height: 427px;
 }
 
 .groupLink {
   text-decoration: none;
   color: unset;
 }
 
 .groupLink:hover {
   text-decoration: none;
   color: unset;
 }
 
 .group-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
 }
 
 .groupList .intro-card {
   /* width: 100px;
 height: 100px; */
   /* background-color: lightblue; */
   /* margin: 20px; */
   transition: border 0.3s, transform 0.3s;
   border-radius: 15px;
   /* border: 1px solid; */
 }
 
 .groupList .intro-card:hover {
   /* border: 2px solid navy; */
   transform: scale(1.02);
   /* Enlarge the div by 10% */
   box-shadow: rgba(60, 64, 67, 0.32) 0px 1px 2px,
     rgba(60, 64, 67, 0.15) 0px 2px 6px, rgba(0, 0, 0, 0.1) 0px 1px 8px;
 }
 
 .lesson-table-of-content {
   /* margin-right: 20px; */
   background: #fff;
   /* padding: 20px!important; */
 }
 
 .sidebarRight {
   background: #f4f6fb;
   padding: 20px 30px !important;
 }
 
 .timeline {
   /* border-left: 3px solid #727cf5; */
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;
   background: transparent;
   margin: 0 auto;
   letter-spacing: 0.2px;
   position: relative;
   line-height: 1.4em;
   font-size: 1.03em;
   padding: 10px 20px;
   list-style: none;
   text-align: left;
   padding-left: 0;
 }
 
 .timeline .h2Star {
   position: absolute;
   left: -50px;
 }
 
 @media (max-width: 767px) {
   .timeline {
     max-width: 98%;
     padding: 25px;
   }
 }
 
 .timeline h1 {
   font-weight: 300;
   font-size: 1.4em;
 }
 
 .timeline h2,
 .timeline h3 {
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 10px;
 }
 
 .timeline .event {
   padding-bottom: 25px;
   position: relative;
   cursor: pointer;
   font-size: 15px;
   font-weight: bold;
   border-left: 3px solid #727cf5;
   padding-left: 25px;
 }
 
 .timeline .event.active::after {
   background-color: #727cf5;
 }
 
 .timeline .event p {
   position: relative;
   cursor: pointer;
   font-size: 15px;
   font-weight: 600;
   margin-top: -5px;
 }
 
 .timeline .event p span {
   position: relative;
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
 }
 
 @media (max-width: 767px) {
   .timeline .event {
     padding-top: 30px;
   }
 }
 
 .timeline .event:last-of-type {
   padding-bottom: 0;
   margin-bottom: 0;
   border: none;
   border-left: 3px solid transparent;
 }
 
 .timeline .event:before,
 .timeline .event:after {
   position: absolute;
   display: block;
   top: 0;
 }
 
 .timeline .event:before {
   left: -207px;
   content: attr(data-date);
   text-align: right;
   font-weight: 100;
   font-size: 0.9em;
   min-width: 120px;
 }
 
 @media (max-width: 767px) {
   .timeline .event:before {
     left: 0px;
     text-align: left;
   }
 }
 
 .timeline .event:after {
   -webkit-box-shadow: 0 0 0 3px #727cf5;
   box-shadow: 0 0 0 3px #727cf5;
   left: -5px;
   background: #fff;
   border-radius: 50%;
   height: 9px;
   width: 9px;
   content: "";
   top: 2px;
 }
 
 @media (max-width: 767px) {
   .timeline .event:after {
     left: -31.8px;
   }
 }
 
 .rtl .timeline {
   border-left: 0;
   text-align: right;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
   border-right: 3px solid #727cf5;
 }
 
 .rtl .timeline .event::before {
   left: 0;
   right: -170px;
 }
 
 .rtl .timeline .event::after {
   left: 0;
   right: -55.8px;
 }
 
 .accordion-button:not(.collapsed)::after {
   background-image: var(--bs-accordion-btn-active-icon);
   transform: var(--bs-accordion-btn-icon-transform);
 }
 
 .acc-courses.active {
   background: #cce5ff !important;
   color: #000;
   padding: 10px;
   border-radius: 5px;
 }
 
 .subLesson .h2Item.active {
   /* background: #1292f18a!important;
   background: #1292f18a !important;
   color: #fff;
   border: 2px solid #1292f1; */
   font-size: 14px;
    font-family: "Open Sans", sans-serif;
   font-weight: 700;
   color: var(--bs-accordion-color);
 }
 
 /* .acc-courses.completedLesson {
 background: #67bc8c;
 } */
 
 .acc-courses:hover,
 .subLesson .h2Item:hover {
   /* background: #1292f18a !important; */
   color: #1292f1;
 }
 
 .acc-courses {
   /* background: #f8fafb; */
   padding: 10px 10px 10px 10px;
   /* border-radius: 0.625rem; */
   cursor: pointer;
   /* height: 50px; */
   position: relative;
   /* border-bottom: 2px solid #dbdbdb; */
 }
 
 .accordion-button::after {
   /* flex-shrink: 0;
 width: 20px;
 height: var(--bs-accordion-btn-icon-width);
 margin-left: 10px;
 content: "";
 background-image: var(--bs-accordion-btn-icon);
 background-repeat: no-repeat;
 background-size: var(--bs-accordion-btn-icon-width);
 transition: var(--bs-accordion-btn-icon-transition); */
   background-image: var(--bs-accordion-btn-icon);
   height: 2rem;
   width: 2rem;
   background-color: var(--primary);
   background-position: center;
   border-radius: 50%;
   margin-left: 0.625rem;
   display: block;
   content: none;
 }
 
 .custome-accordion .accordion-header .acc-heading {
   font-size: 1.125rem;
   line-height: 1.5;
   font-weight: 600;
   margin: 0;
   color: #374557;
 }
 
 .title-bar.lessonCompleted > i {
   height: 25px;
   width: 25px;
   display: flex;
   /* align-content: center; */
   justify-content: center;
   align-items: center;
   font-size: 12px;
 }
 .title-bar.bookmarkHeaderWrapper {
   height: 25px;
   width: 25px;
   display: flex;
   /* align-content: center; */
   justify-content: center;
   align-items: center;
   font-size: 16px;
   color: #dc3545;
   cursor: pointer;
 }
 
 .completed-check {
   /*  background-color: rgb(0, 158, 93);*/
   color: #ffffff;
   height: fit-content;
   padding: 5px;
   border-radius: 100%;
   font-size: 8px;
   cursor: pointer;
 }
 
 .not-complete {
   background-color: transparent;
   color: #000;
   height: fit-content;
   padding: 5px;
   border-radius: 100%;
   cursor: pointer;
   border: 1px solid;
 }
 
 .not-complete:hover {
   background-color: rgb(0, 158, 93);
   color: #ffffff;
 }
 
 .completed-edit {
   /* background-color: rgb(0, 158, 93); */
   color: #000;
   height: fit-content;
   padding: 5px;
   border-radius: 100%;
   font-size: 12px;
   margin-left: 5px;
   cursor: pointer;
 }
 
 .note-dropdown-menu.dropdown-style {
   width: max-content;
 }
 
 .note-btn.dropdown-toggle .note-icon-caret {
   margin-left: 15px;
 }
 
 .note-btn.dropdown-toggle::after,
 #groupChatModal .dropdown-toggle::after,
 .friend-list-dropdown .dropdown-toggle::after {
   content: "";
   display: none;
 }
 
 .note-editor.note-airframe.fullscreen,
 .note-editor.note-frame.fullscreen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100% !important;
   z-index: 1050;
   height: 100%;
   background: white;
 }
 
 .note-editor .note-toolbar .note-color-all .note-dropdown-menu,
 .note-popover .popover-content .note-color-all .note-dropdown-menu {
   width: max-content;
 }
 
 .h2Item {
   line-height: 1;
   display: flex;
   background-color: #5faae5 !important;
   color: #fff;
 }
 
 .h2List {
   margin-left: 15px;
   margin-top: -10px;
 }
 
 .fixed-col {
   position: fixed;
   top: 0;
   bottom: 0;
   height: 100vh;
   overflow-y: auto;
 }
 
 #classroom > .titleCont {
   padding: 20px;
   padding-bottom: 10px;
 }
 
 .upcoming-events.scrolled,
 .toc {
   top: 0;
   overflow-y: auto;
   /* padding-top: 20px; */
   max-height: 120vh;
 }
 
 #stuckForm {
   display: none;
 }
 
 .fullscreen {
   /* max-height: 80vh; */
   overflow: auto;
 }
 
 .classroom-setting button:after {
   display: none;
 }
 
 .classroom-setting button {
   position: absolute;
   right: 3px;
   top: 3px;
   padding: 0;
   background-color: transparent;
   border: 0;
   z-index: 999;
 }
 
 .classroom-setting i::before {
   font-size: 20px;
   background: white;
   padding: 0px 10px;
   border-radius: 7px;
 }
 
 #lessonForm .lessonBtn,
 #faqsForm .faqsBtn {
   z-index: 999;
   position: fixed;
   bottom: 2%;
   display: block;
   right: 5%;
   width: 50px;
   height: 50px;
   border-radius: 100%;
 }
 
 #lessonForm .lessonBtn.btn-danger i,
 #lessonForm .lessonBtn i,
 #faqsForm .faqsBtn.btn-danger i,
 #faqsForm .faqsBtn i {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 #lessonForm .lessonBtn.btn-danger,
 #faqsForm .faqsBtn.btn-danger {
   z-index: 999;
   position: fixed;
   bottom: 2%;
   display: block;
   right: 9%;
   width: 50px;
   height: 50px;
   border-radius: 100%;
 }
 
 #lessonForm .note-toolbar {
   top: 0;
   right: auto;
   z-index: 999;
 }
 
 .bookmarkedLesson,
 .removeBookmark {
   color: #cf9d26;
   cursor: pointer;
   font-size: 18px;
 }
 
 .classroom-title i.bi.bi-bookmark-x-fill {
   cursor: pointer;
 }
 
 i.bi.bi-bookmark-star-fill {
   color: #cf9d26;
   font-size: 18px;
 }
 
 .classroom-title i.bi.bi-bookmark-star-fill,
 .classroom-title i.bi.bi-bookmark-x-fill {
   font-size: 30px;
 }
 
 .classroom-title {
   display: flex;
   justify-content: space-between;
 }
 
 .friendListCont #friends-profile-image {
   width: 75%;
   height: auto;
 }
 
 .friendListCont #banner {
   background-image: url("https://mdbootstrap.com/img/Photos/Others/images/76.jpg");
   min-height: 250px;
   z-index: -1;
 }
 .friendListWrapper img.rounded-circle {
   width: 80px;
   height: 80px;
   max-width: 80px;
   min-height: 80px;
 }
 
 .friendListCont .friendRequestList {
   min-height: 80vh;
   overflow: auto;
   align-content: baseline;
   margin-left: auto;
   margin-right: auto;
 }
 .friendListCont
   div#connectionGroupsAccordion
   div.accordion-body
   li.list-group-item {
   border: none;
   align-items: center !important;
   justify-content: space-between !important;
   display: flex !important;
 }
 .friendListCont
   div#connectionGroupsAccordion
   div.accordion-body
   ul.connectionGroupAccordionList
   a:hover:not(:active),
 .friendListCont
   div#connectionGroupsAccordion
   div.accordion-body
   ul.connectionGroupAccordionList
   li:hover:not(:active) {
   background-color: #639ff6;
   color: white !important;
 }
 .friendListCont
   div#connectionGroupsAccordion
   div.accordion-body
   ul.connectionGroupAccordionList
   li {
   margin-left: 2rem;
 }
 .friendListCont div#connectionGroupsAccordion div.accordion-body {
   padding-top: 2px;
 }
 .friendListCont div#connectionGroupsAccordion div.accordion-body a {
   text-decoration: none;
 }
 
 .friendListCont div#connectionGroupsAccordion .accordion-item,
 .friendListCont div#connectionGroupsAccordion .accordion-button:not(.collapsed),
 .friendListCont div#connectionGroupsAccordion .accordion-button,
 .friendListCont
   div#connectionGroupsAccordion
   div.accordion-body
   .list-group-item {
   background-color: transparent;
   border: none;
 }
 
 .friendListCont h2#connectionGroupsHeading button.accordion-button {
   padding: 6px 12px;
 }
 
 #allUsers .dropdown ul.dropdown-menu {
   width: 100%;
   max-width: 350px;
   padding: 10px;
 }
 
 #allUsers .searchCont a {
   text-decoration: none;
   text-align: center;
 }
 
 #allUsers .searchCont {
   margin-bottom: 3rem;
 }
 
 .friendListCont .friendRequestList img.rounded-circle {
   object-fit: cover;
 }
 .friendTabWrappers {
   min-height: 80vh;
 }
 .friendTabWrappers button {
   padding: 12px;
 }
 .friendTabWrappers .friendRequestBtn {
   align-items: center !important;
   justify-content: space-between !important;
   display: flex !important;
 }
 
 i {
   display: inline-flex;
   align-content: center;
   justify-content: center;
 }
 
 .select2-container--default .select2-selection--multiple,
 .select2-container--default .select2-selection--multiple:focus {
   border: 0 !important;
   border-bottom: 1px solid !important;
   border-radius: 0;
 }
 
 .ellipses {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .friendRequestBtn {
   border-radius: 0;
   border-color: transparent;
 }
 .friendRequestBtn.active,
 .friendListCont
   div#connectionGroupsAccordion
   div.accordion-body
   ul.connectionGroupAccordionList
   li.active,
 .friendListCont
   div#connectionGroupsAccordion
   div.accordion-body
   ul.connectionGroupAccordionList
   a.active {
   border-radius: 0;
   background: #0d6efd;
   color: #ffffff !important;
 }
 
 .friendRequestBtn:hover {
   background: #0d6efd9c;
   color: #ffffff;
 }
 
 .image-container {
   position: relative;
   overflow: hidden;
 }
 
 .upload-overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
   border-radius: 100%;
   width: 50px;
   cursor: pointer;
 }
 
 .image-container:hover .upload-overlay {
   opacity: 1;
 }
 
 #image-input {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
 }
 
 .hidden {
   display: none;
 }
 
 .uploader {
   display: block;
   clear: both;
   margin: 0 auto;
   width: 100%;
 }
 
 .uploader label {
   clear: both;
   width: 100%;
   padding: 2rem 1.5rem;
   text-align: center;
   background: #fff;
   border-radius: 7px;
   border: 3px solid #eee;
   transition: all 0.2s ease;
   user-select: none;
 }
 
 .uploader label:hover {
   border-color: #454cad;
 }
 
 .uploader label.hover {
   border: 3px solid #454cad;
   box-shadow: inset 0 0 0 6px #eee;
 }
 
 .uploader label.hover #start i.fa {
   transform: scale(0.8);
   opacity: 0.3;
 }
 
 .uploader #start {
   float: left;
   clear: both;
   width: 100%;
 }
 
 .uploader #start.hidden {
   display: none;
 }
 
 .uploader #start i.fa {
   font-size: 50px;
   margin-bottom: 1rem;
   transition: all 0.2s ease-in-out;
 }
 
 .uploader #response {
   float: left;
   clear: both;
   width: 100%;
 }
 
 .uploader #response.hidden {
   display: none;
 }
 
 .uploader #response #messages {
   margin-bottom: 0.5rem;
 }
 
 .uploader #file-image {
   display: inline;
   margin: 0 auto 0.5rem auto;
   width: auto;
   height: auto;
   max-width: 180px;
 }
 
 .uploader #file-image.hidden {
   display: none;
 }
 
 .uploader #notimage {
   display: block;
   float: left;
   clear: both;
   width: 100%;
 }
 
 .uploader #notimage.hidden {
   display: none;
 }
 
 .uploader .progress,
 .uploader .progress {
   appearance: none;
   display: inline;
   clear: both;
   margin: 0 auto;
   width: 100%;
   max-width: 180px;
   height: 8px;
   border: 0;
   border-radius: 4px;
   background-color: #eee;
   overflow: hidden;
 }
 
 .uploader .progress[value]::-webkit-progress-bar,
 .uploader .progress[value]::-webkit-progress-value,
 .uploader .progress[value]::-moz-progress-bar {
   border-radius: 4px;
 }
 
 .uploader .progress[value]::-webkit-progress-bar,
 .uploader .progress[value]::-moz-progress-bar {
   background: #eee;
 }
 
 .uploader .progress[value]::-webkit-progress-value,
 .uploader .progress[value]::-moz-progress-bar {
   background: linear-gradient(to right, darken(#454cad, 8%) 0%, #454cad 50%);
   border-radius: 4px;
 }
 
 .uploader input[type="file"] {
   display: none;
 }
 
 .uploader div {
   margin: 0 0 0.5rem 0;
   color: #000;
 }
 
 .uploader .btn {
   display: inline-block;
   margin: 0.5rem 0.5rem 1rem 0.5rem;
   clear: both;
   font-family: inherit;
   font-weight: 700;
   font-size: 14px;
   text-decoration: none;
   text-transform: initial;
   border: none;
   border-radius: 0.2rem;
   outline: none;
   padding: 0 1rem;
   height: 36px;
   line-height: 36px;
   color: #fff;
   transition: all 0.2s ease-in-out;
   box-sizing: border-box;
   background: #454cad;
   border-color: #454cad;
   cursor: pointer;
 }
 
 .classroom-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: calc(100% - 28px);
   height: calc(100% - 14px);
   background: rgba(0, 0, 0, 0.5);
   margin-left: 14px;
   margin-top: 14px;
   border-radius: 10px;
 }
 
 .locked-classroom {
   color: #fff;
   font-size: 30px;
 }
 
 .locked-message {
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   margin-bottom: 0;
   letter-spacing: 5px;
 }
 
 #myDropzone,
 #bannerDropzone,
 #myUpdateDropzone,
 #updateBannerDropzone,
 #updateGroupDropzone,
 #groupDropzone,
 #descVideo,
 #communityLogo {
   border-style: dashed;
 }
 
 #sticky-sidebar {
   height: 100vh;
   /* Adjust height as needed */
   min-width: 50px;
   background: #ffff;
   position: absolute;
   right: 0;
   top: 0;
   transition: opacity, width 0.3s ease;
   padding-top: 5px;
   padding-bottom: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 10px 0 0 10px;
   z-index: 999;
 }
 
 #sticky-main-sidebar {
   height: 100vh;
   min-width: 50px;
   background: #ffff;
   position: absolute;
   left: 0;
   top: 0;
   transition: opacity, width 0.3s ease;
   padding-top: 5px;
   padding-bottom: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 10px 0 0 10px;
   z-index: 49;
 }
 #sticky-main-sidebar .sidebar-div div p {
   text-align: end;
 }
 #sticky-main-sidebar.right {
   right: 0;
 }
 
 #sticky-main-sidebar.sticky {
   position: fixed;
   top: 0;
 }
 
 #sticky-sidebar.right {
   right: 0;
 }
 
 #sticky-sidebar.sticky {
   position: fixed;
   top: 0;
 }
 
 .notebook {
   position: fixed;
   right: 100px;
   bottom: 10px;
   z-index: 9999;
   min-height: 400px;
   width: 300px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.2);
   /* background-image: url("/group/classroom/lessons/spiral.png"); */
   padding-top: 20px;
 }
 
 .close-notebook {
   position: absolute;
   top: -10px;
   right: -10px;
   color: red;
   font-size: 20px;
   z-index: 9999;
   cursor: pointer;
 }
 
 .spiral {
   position: absolute;
   width: 100%;
   top: -15px;
 }
 
 .h2Star {
   cursor: pointer;
   color: #b3b3b3;
 }
 
 #lesson-content .h2Star {
   font-size: 25px;
 }
 
 .mighty-menu-star {
   cursor: pointer;
 }
 
 .floating-box {
   position: absolute;
   background-color: #fff;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   width: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   min-height: 50px;
   gap: 10px;
   padding: 20px 15px;
   border-radius: 5px;
   flex-direction: column;
 }
 
 .close-star {
   position: absolute;
   top: 5px;
   right: 5px;
   font-size: 20px;
   color: red;
   cursor: pointer;
 }
 
 .sticky-star {
   cursor: pointer;
   font-size: 20px;
 }
 
 .sidebar-div div i {
   width: 20px;
   height: 20px;
 }
 
 .sidebar-div div {
   align-items: center;
   gap: 10px;
   width: 100%;
   justify-content: center;
 }
 
 .sidebar-div div p {
   margin-bottom: 0;
   width: 75%;
   text-overflow: ellipsis;
   text-wrap: nowrap;
   overflow: hidden;
 }
 
 .notebook-content {
   /* background-image: repeating-linear-gradient(white 0px, white 24px, #000 25px); */
   height: 350px;
   overflow: auto;
   position: relative;
 }
 
 .notebook-content #note-content {
   /* background-image: repeating-linear-gradient(white 0px, white 24px, #000 25px); */
   line-height: 30px;
   height: auto;
   min-height: 70px;
   resize: none;
   width: 100%;
   border: 0;
   outline: 0;
   /* font-family: "Lucida Handwriting", cursive; */
   font-family: "Dancing Script", cursive;
   background: transparent;
   overflow: hidden;
   position: relative;
   z-index: 9999;
   font-weight: bold;
   font-size: 22px;
 }
 
 .notebook-content #note-content:before {
   content: "";
   display: block;
   width: 100%;
   height: 20px;
   /* Adjust the height of the lines */
   position: absolute;
   top: 0;
   left: 0;
 }
 
 .star-list-container i {
   font-size: 50px;
 }
 
 .container-list-note .swal2-popup.swal2-modal.swal2-show {
   width: 60%;
 }
 
 .container-list-note {
   z-index: 9999 !important;
 }
 
 h4.star-title {
   text-transform: capitalize;
   /* margin-top: 15px; */
   font-size: 18px;
   text-align: left;
   line-height: 28px;
 }
 
 h4.star-title:not(:first-child) {
   margin-top: 60px;
 }
 
 .note-container {
   /* padding: 15px 10px;
 border-style: dashed; */
   text-align: left;
   /* border-color: #b3b3b3; */
   /* border-width: 1px; */
   white-space: pre;
   /* margin-bottom: 20px; */
   font-family: "Dancing Script", cursive;
   font-weight: bold;
   font-size: 21px;
   line-height: 27px;
 }
 
 .ticket-preview-text b,
 .ticket-preview-text-description b {
   font-weight: normal;
 }
 
 .ticket-preview-text-description p {
   margin: 0;
 }
 
 .ticket-preview-text p {
   font-size: 14px;
   width: 100%;
   text-overflow: ellipsis;
   white-space: pre;
   overflow: hidden;
   margin-top: 10px;
   margin-bottom: 10px;
   font-weight: normal;
 }
 
 #replyTicket .note-editable {
   border: 2px dashed;
   text-align: left;
 }
 
 #multiFunction .nav-link.active {
   background: transparent !important;
   border-bottom: 2px solid;
   color: #000 !important;
   border-radius: 0;
 }
 
 #multiFunction .nav-link {
   padding: 0;
   margin-right: 15px;
 }
 
 .left-content {
   width: 50%;
   transition: width 0.5s ease;
   height: calc(100vh - 50px);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .content-body {
   height: -webkit-fill-available;
 }
 
 .right-content {
   width: 0;
   overflow: hidden;
   transition: width 0.5s ease;
   overflow-y: auto;
   padding: 10px;
   padding-bottom: 100px;
   background-color: #fff;
 }
 
 .right-content.active {
   width: 25%;
 }
 
 .profile-cover {
   background-color: #ffdee9;
   background-image: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%);
   width: 100%;
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
 
 .profile-pic {
   margin-bottom: -130px;
   width: 100px;
   height: 100px;
 }
 
 .profile-name {
   margin-top: 50px;
   display: flex;
   justify-content: center;
 }
 
 .community {
   border-top: 1px solid dashed;
   min-height: 100px;
   margin-top: 30px;
   padding: 10px;
 }
 
 .text-break {
   white-space: pre-line;
 }
 
 .function-menu {
   /* position: absolute; */
   /* top: 0;
 right: 0; */
   background-color: #609fe0;
   height: 100%;
   width: 50px;
   z-index: 999;
   /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */
   /* background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); */
 }
 
 .searchCont .userContainer {
   min-height: 45vh;
   max-height: 70vh;
   overflow-y: auto;
 }
 
 .userContainer .dropdown-menu li:last-child {
   margin-bottom: 0px;
 }
 
 .userContainer .dropdown-menu p {
   padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
 }
 
 .userContainer .card-title a {
   color: black;
   text-decoration: none;
 }
 
 
 .searchList h5 {
   font-size: 18px;
 }
 .searchCont h5.card-title a,
 .friendRequestList h5.card-title a {
   color: #000;
   text-decoration: none;
 }
 
 .searchList,
 .friendRequest,
 .friendList {
   padding: 0;
   margin: 0;
 }
 
 .searchList button,
 .friendRequest button,
 .friendList button {
   width: 120px !important;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .searchList .col-md-3,
 .friendRequest .col-md-3,
 .friendList .col-md-3 {
   width: 100%;
   display: flex;
   padding: 0 !important;
   margin: 0 !important;
   margin-bottom: 10px !important;
 }
 
 .searchList .col-md-3 > div.rounded,
 .friendRequest .col-md-3 > div.rounded,
 .friendList .col-md-3 > div.rounded {
   display: flex;
   align-items: center;
   padding: 10px;
   gap: 5px;
 }
 
 .searchList img,
 .friendRequest img,
 .friendList img {
   width: 50px !important;
   height: 50px !important;
 }
 
 .ui-autocomplete {
   z-index: 99999999 !important;
 }
 
 .friendList .requestBtn,
 .friendRequest .requestBtn {
   display: flex;
   gap: 5px;
 }
 
 .chat-messages-list,
 .group-chat-list {
   overflow: auto;
   height: 80vh;
 }
 
 .friend-list-dropdown button {
   width: auto !important;
   background-color: transparent;
   color: #000;
   padding: 0;
   display: flex;
   border: 0;
 }
 
 .friend-list-dropdown .dropdown-menu[data-bs-popper] {
   right: 0;
   left: unset;
 }
 
 .w-fit-content {
   width: fit-content;
 }
 
 .user-preview {
   position: relative;
 }
 
 .user-image {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #ccc;
   position: absolute;
   top: 0;
   left: 0;
   border: 2px solid #fff;
   /* Add a border to separate images */
 }
 
 .user-image:nth-child(1) {
   z-index: 1;
 }
 
 .user-image:nth-child(2) {
   z-index: 2;
   left: 20px;
   /* Adjust position for overlap */
   /*     top: 10px; /* Adjust position for overlap */
 }
 
 .user-image:nth-child(3) {
   z-index: 3;
   left: 40px;
   /* Adjust position for overlap */
   /*     top: 20px; /* Adjust position for overlap */
 }
 
 .user-image:nth-child(4) {
   z-index: 4;
   left: 60px;
   /* Adjust position for overlap */
   /*     top: 20px; /* Adjust position for overlap */
 }
 
 .user-image.count {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 45px;
   width: 45px;
   font-weight: bold;
 }
 
 /* Style the emoji picker */
 .emojionearea-picker {
   position: absolute;
   top: -125% !important;
   background-color: #fff;
   border: 1px solid #ccc;
   border-top: none;
   border-radius: 0 0 5px 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   z-index: 1000;
 }
 
 /* Style the emoji picker items */
 .emojionearea-picker .emojionearea-category {
   padding: 10px;
 }
 
 /* Style the emoji preview */
 .emojionearea-picker .emojionearea-preview {
   padding: 10px;
   border-top: 1px solid #ccc;
   background-color: #f9f9f9;
 }
 
 /* Style the emoji preview image */
 .emojionearea-picker .emojionearea-preview img {
   width: 30px;
   height: 30px;
   margin-right: 5px;
 }
 
 .emojionearea .emojionearea-button {
   right: unset !important;
   top: unset !important;
   left: 3px;
   bottom: 3px;
 }
 
 #file-custom-button {
   position: absolute;
   bottom: 3px;
   left: 32px;
   opacity: 0.6;
 }
 
 #image-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
 }
 
 #image-overlay img {
   max-width: 90%;
   max-height: 90%;
 }
 #cropperModal .modal-md {
   --bs-modal-width: 650px;
 }
 #cropperModal .action-buttons button {
   font-size: 14px;
 }
 
 #cropperModal .img-container {
   max-height: 70vh; /* Limit the height to a percentage of the viewport */
   overflow: hidden; /* Hide overflow */
   display: flex;
   justify-content: center; /* Center the image */
 }
 
 #cropperModal #image {
   max-width: 100%; /* Responsive width */
   max-height: 100%; /* Responsive height */
 }
 
 .clickable {
   cursor: pointer;
 }
 
 .function-list.active i {
   color: #6399dd !important;
 }
 
 .function-list.active {
   background-color: #fff;
 }
 
 .attachment-cont p {
   font-size: 14px;
   color: #000;
 }
 
 .attachment-cont {
   display: flex;
   align-content: center;
   align-items: center;
   gap: 15px;
   text-decoration: none;
   padding: 10px 20px;
   background: #0000001f;
   border-radius: 10px;
 }
 
 .tocSelect .pdf-header {
   font-weight: normal !important;
 }
 
 .subLesson .h2Item {
   padding: 7px 10px 4px 50px !important;
   border-radius: 0 !important;
   cursor: pointer !important;
   margin: 0 !important;
   position: relative;
   color: #000;
   font-size: 16px;
 }
 
 .subLesson {
   /* padding-left: 30px; */
   /* border-left: 2px solid #ccc; */
   overflow: hidden;
 }
 
 .subLesson h4 {
   font-size: 14px;
   width: 100%;
   font-weight: 400;
 }
 .subLesson .h2Item.active h4 {
   font-weight: 700;
    font-family: "Open Sans", sans-serif;
 }
 
 .lesson-planner-modal .swal2-popup.swal2-modal.swal2-show .card {
   /* box-shadow: 1rem 1rem 2.5rem 0 rgba(0, 0, 0, 0.05); */
   /* margin-bottom: 2rem!important; */
   /* border-radius: 0.313rem; */
   border-radius: 10px;
   padding: 1rem;
   border: 1.5px solid #b8b8b8;
 }
 
 .lesson-planner-modal .swal2-popup.swal2-modal.swal2-show {
   width: 100%;
   background-color: #f8f9fa;
 }
 
 /* Hide the filled bookmark star when accordion is expanded */
 .module-title.accordion-button:not(.collapsed) .bi-bookmark-star-fill {
   opacity: 0;
   /* Initially hidden */
   visibility: hidden;
   transition: opacity 0.5s ease-out;
   /* Fade out animation */
 }
 
 /* Hide the filled bookmark star when a lesson is active */
 .lesson.active .bi-bookmark-star-fill {
   opacity: 0;
   /* Initially hidden */
   visibility: hidden;
   transition: opacity 0.5s ease-out;
   /* Fade out animation */
 }
 
 /* Define the fade-out animation */
 @keyframes fadeOut {
   from {
     opacity: 1;
     visibility: visible;
   }
 
   to {
     opacity: 0;
     visibility: hidden;
   }
 }
 
 /* Define the fade-in animation */
 @keyframes fadeIn {
   from {
     opacity: 0;
     visibility: hidden;
   }
 
   to {
     opacity: 1;
     visibility: visible;
   }
 }
 
 /* Apply the fade-out animation */
 .module-title.accordion-button:not(.collapsed) .bi-bookmark-star-fill,
 .lesson.active .bi-bookmark-star-fill {
   animation: fadeOut 0.5s ease-out;
 }
 
 /* Apply the fade-in animation when the filled bookmark star is shown */
 .module-title.accordion-button.collapsed .bi-bookmark-star-fill,
 .lesson .bi-bookmark-star-fill {
   animation: fadeIn 0.5s ease-in;
 }
 
 .h2Item.active .bi-bookmark-star-fill {
   border: 1px solid #f8f9fa;
   padding: 5px;
   border-radius: 16px;
   background: #f8f9fa;
 }
 
 .plannerTable td,
 table.summary td {
   font-size: 14px;
   /* width: 400px; */
   overflow: hidden;
   text-overflow: ellipsis;
   /* white-space: nowrap */
 }
 
 /* .plannerTable td.td-title {
 max-width: 400px;
 min-width: 400px;
 } */
 .plannerTable {
   width: 100%;
   /* Ensure the table takes up full width */
   border-collapse: collapse;
 }
 
 .plannerTable th,
 table.summary th {
   font-size: 14px;
   font-weight: 400;
   /* width: 400px; Set maximum width in percentage */
   overflow: hidden;
   /* Hide overflow content */
   /* text-overflow: ellipsis; Show ellipsis for overflow content */
   /* white-space: nowrap;  */
 }
 
 .plannerTable th:first-child,
 table.summary th:first-child,
 .plannerTable td:first-child,
 table.summary td:first-child {
   max-width: 200px;
 }
 
 table.summary .total {
   font-weight: bold;
   /* border-top: 3px solid; */
   background: #4361eeb8;
   color: white;
 }
 
 .week {
   writing-mode: vertical-rl;
   /* Vertical text from right to left */
   transform: rotate(180deg);
 }
 
 h2 .user-preview {
   margin-left: 10px;
   height: 40px !important;
 }
 
 .lines-notes {
   height: 100%;
   width: 100%;
   min-height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   z-index: 0;
 }
 
 .friends-note {
   margin-top: 10px;
 }
 
 .notebook .vertical-tabs {
   position: absolute;
   top: 45px;
   right: -73px;
   z-index: -1;
 }
 
 .notebook .vertical-tabs a {
   width: 72px;
   height: 50px;
   padding: 0px;
   overflow: hidden;
   z-index: 2;
   display: flex;
   justify-content: flex-end;
   border-radius: 0 10px 10px 0;
   align-items: center;
   margin-top: 3px;
 }
 
 .notebook .vertical-tabs img {
   height: 40px;
   width: 40px;
   border: 1px solid #fff;
   border-radius: 100%;
   margin-right: 5px;
 }
 
 .notebook .vertical-tabs a:first-child {
   margin-top: 0;
 }
 
 .notebook .vertical-tabs a.active {
   background: #50b5ff !important;
   z-index: 9999 !important;
 }
 
 .unlocked {
   font-size: 16px;
   font-weight: 600;
   font-family: "Inter";
   /* color: #f25757; */
   color: #29a23a;
 }
 
 .classroomView {
    font-size: 14px;
    font-weight: 600;
    padding: 2px 5px;
    border: 2px solid #29a23a !important;
    color: #fff;
    background: #29a23a;
 }

 .course-free-text {
    display: inline-block;
    padding: 2px 5px;
    background-color: #29a23a;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .classroomView:hover {
   background: #29a23a !important;
   color: #ffffff;
 }
 
 .funnelDate {
   display: block;
   width: 100%;
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border-radius: 0.375rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
 .funnelDate:focus-visible {
   outline: none;
 }
 
 .rollingAverages {
   border-radius: 10px;
   padding: 15px 10px;
   opacity: 1;
   position: absolute;
   width: 300px;
   min-height: 300px;
   background: #fff;
   box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.32),
     0px 2px 6px rgba(60, 64, 67, 0.15), 0px 1px 8px rgba(0, 0, 0, 0.1);
   z-index: 99;
 }
 
 .listType .unlocked {
   font-size: 14px;
 }
 
 .listType h4 {
   font-size: 18px;
 }
 
 .listType .classroom-desc {
   min-height: 50px;
   font-size: 12px;
   margin-bottom: 10px;
 }
 
 .listType .classroom-setting button {
   top: 10px;
   right: 10px;
 }
 
 .listType .locked-message,
 .listType .locked-classroom {
   font-size: 18px;
 }
 
 
 .listType .classroom-overlay {
   width: calc(100% - 14px);
 }
 
 .viewStyle {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
 }
 
 .viewStyle .active {
   color: #0d6efd;
   background: #cbcbcb;
 }
 
 .viewStyle i {
   font-size: 20px;
   padding: 5px;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .card-schedule .side-label {
   height: 100%;
   width: 10px;
   display: block;
   position: absolute;
   border-radius: 0.625rem 0 0 0.625rem;
 }
 
 .card-schedule .up-comming-schedule {
   display: flex;
   align-items: center;
   border-radius: 0 0.625rem 0.625rem 0;
   background: #eaecea;
   padding: 19px 30px;
   margin-left: 12px;
   margin-bottom: 10px;
   justify-content: space-between;
   flex-flow: wrap;
 }
 
 .card-schedule {
   position: relative;
 }
 
 .schedule-event-title {
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   text-transform: capitalize;
 }
 
 .schedule-date {
   font-size: 14px;
 }
 
 .scrollTop {
   position: fixed;
   bottom: 20px;
   right: 70px;
   z-index: 999;
   font-size: 30px;
   cursor: pointer;
 }
 
 .scrollTop:hover {
   color: #0d6efd;
 }
 
 .communityCardWrapper {
   width: 75%;
 }
 
 .mainSidebar {
   min-height: 100vh !important;
 }
 
 /* Mobile L Screen */
 @media screen and (max-width: 768px) {
   .mainSidebar {
     min-height: initial !important;
   }
   .community-navbar ul.navbar-nav {
     display: none;
   }
   .community-navbar {
     height: auto !important;
   }
   .main-content-container {
     margin-top: 5rem;
   }
 }
 
 /* Laptop L Screen */
 @media screen and (max-width: 1440px) {
   .communityCardWrapper {
     width: 75%;
   }
 }
 
 .dashboardIcon {
   text-align: center;
   border-radius: 10px;
   margin-bottom: 10px;
   padding: 10px !important;
   display: flex !important;
 }
 
 .icon-bg {
   position: absolute;
   right: 25px;
   opacity: 0.5;
   font-size: 70px;
   bottom: 25px;
 }
 
 .mainSidebar > .nav-item:hover a:not(.courseClassroomLink),
 .mainSidebar > .nav-item:hover .accordion-header button.main {
   color: #fff !important;
 }
 
 .mainSidebar .nav-item:hover #dropdownMenuLink {
   color: #fff;
 }
 
 .mainSidebar .nav-item:hover {
   background: radial-gradient(circle at 50% -250%, #ffffff, #0074e3);
 
   /* border-radius: 30px; */
   /* box-shadow: 0 5px 15px rgb(0 0 0 / 34%); */
 }
 
 .mainSidebar .nav-item:hover .accordion-body a {
   color: #fff;
 }
 
 .mainSidebar .nav-item .accordion,
 .mainSidebar .nav-item a:not(.courseClassroomLink) {
   padding-left: 35px;
   padding-top: 4px;
   padding-bottom: 4px;
 }

 .mainSidebar .side-label {
   margin-top: .5rem;
   padding-left: 1rem !important;
 }
 .mainSidebar .nav-item.active a {
   color: #fff;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
 .upgrade-vip {
   background: radial-gradient(circle at 50% -250%, #ffffff, #0074e3);
 
   /* border-radius: 30px; */
   /* box-shadow: 0 5px 15px rgb(0 0 0 / 34%)  */
 }
 
 .mainSidebar .nav-item {
   margin-bottom: 5px;
 }
 
 .mainSidebar .nav-item.active {
   background: radial-gradient(circle at 50% -250%, #ffffff, #0074e3);
   border-radius: 5px;
 }
 
 .top-performers-table th {
   font-weight: normal;
 }
 .top-performers h5 {
   margin-bottom: 0px;
   font-size: 16px;
 }

  .top-performers span {
   font-size: 14px;
   }
 
 .circular .progress {
   width: 150px;
   height: 150px;
   line-height: 150px;
   background: none;
   margin: 0 auto;
   box-shadow: none;
   position: relative;
 }
 
 .circular .progress:after {
   content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border: 12px solid #fff;
   position: absolute;
   top: 0;
   left: 0;
 }
 
 .circular .progress > span {
   width: 50%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
   z-index: 1;
 }
 
 .circular .progress .progress-left {
   left: 0;
 }
 
 .circular .progress .progress-bar {
   width: 100%;
   height: 100%;
   background: none;
   border-width: 25px;
   border-style: solid;
   position: absolute;
   top: 0;
 }
 
 .circular .progress .progress-left .progress-bar {
   left: 100%;
   border-top-right-radius: 80px;
   border-bottom-right-radius: 80px;
   border-left: 0;
   -webkit-transform-origin: center left;
   transform-origin: center left;
 }
 
 .circular .progress .progress-right {
   right: 0;
 }
 
 .circular .progress .progress-right .progress-bar {
   left: -100%;
   border-top-left-radius: 80px;
   border-bottom-left-radius: 80px;
   border-right: 0;
   -webkit-transform-origin: center right;
   transform-origin: center right;
   animation: loading-1 1.8s linear forwards;
 }
 
 .circular .progress .progress-value {
   width: 90%;
   height: 90%;
   border-radius: 50%;
   background: #ffffff;
   font-size: 24px;
   color: #36a2eb;
   line-height: 135px;
   text-align: center;
   position: absolute;
   top: 5%;
   left: 5%;
 }
 
 .circular .progress.blue .progress-bar {
   border-color: #36a2eb;
 }
 
 .circular .progress.blue .progress-left .progress-bar {
   animation: loading-2 1.5s linear forwards 1.8s;
 }
 
 .communityProgressBar .progress {
   width: 50px;
   height: 50px;
   line-height: 150px;
   background: none;
   margin: 0 auto;
   box-shadow: none;
   position: relative;
 }
 
 .communityProgressBar .progress:after {
   content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border: 12px solid #fff;
   position: absolute;
   top: 0;
   left: 0;
 }
 
 .communityProgressBar .progress > span {
   width: 50%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
   z-index: 1;
 }
 
 .communityProgressBar .progress .progress-left {
   left: 0;
 }
 
 .communityProgressBar .progress .progress-bar {
   width: 100%;
   height: 100%;
   background: none;
   border-width: 5px;
   border-style: solid;
   position: absolute;
   top: 0;
 }
 
 .communityProgressBar .progress .progress-left .progress-bar {
   left: 100%;
   border-top-right-radius: 80px;
   border-bottom-right-radius: 80px;
   border-left: 0;
   -webkit-transform-origin: center left;
   transform-origin: center left;
 }
 
 .communityProgressBar .progress .progress-right {
   right: 0;
 }
 
 .communityProgressBar .progress .progress-right .progress-bar {
   left: -100%;
   border-top-left-radius: 80px;
   border-bottom-left-radius: 80px;
   border-right: 0;
   -webkit-transform-origin: center right;
   transform-origin: center right;
   animation: loading-1 1.8s linear forwards;
 }
 
 .communityProgressBar .progress .progress-value {
   width: 90%;
   height: 90%;
   border-radius: 50%;
   background: #ffffff;
   font-size: 24px;
   color: #36a2eb;
   line-height: 135px;
   text-align: center;
   position: absolute;
   top: 5%;
   left: 5%;
 }
 
 .communityProgressBar .progress.blue .progress-bar {
   border-color: #36a2eb;
 }
 
 .communityProgressBar .progress.blue .progress-left .progress-bar {
   animation: loading-2 1.5s linear forwards 1.8s;
 }
 
 @keyframes loading-1 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 }
 
 @keyframes loading-2 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -webkit-transform: rotate(144deg);
     transform: rotate(144deg);
   }
 }
 
 @keyframes loading-3 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 }
 
 @keyframes loading-4 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -webkit-transform: rotate(36deg);
     transform: rotate(36deg);
   }
 }
 
 @keyframes loading-5 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -webkit-transform: rotate(126deg);
     transform: rotate(126deg);
   }
 }
 
 @media only screen and (max-width: 990px) {
   .circular .progress {
     margin-bottom: 20px;
   }
 }
 
 .NoFocus:focus {
   box-shadow: unset;
 }
 
 .mainSidebar .accordion .NoFocus {
   padding-top: 8px !important;
   padding-bottom: 8px !important;
 }
 
 .mainSidebar .logout-wrapper {
   padding-left: 20px;
 }
 
 .NoFocus {
   box-shadow: unset !important;
 }
 
 #groupAccordioncourses .accordion-collapse.collapse.show .accordion-item {
   background: red;
 }
 
 .mainSidebar .courseClassroomLink {
   display: block;
   padding: 5px;
   text-decoration: none;
   color: #333;
   transition: background-color 0.3s ease;
 }
 
 .communityList:hover {
   background-color: #f0f0f0;
   color: #000 !important;
 }
 
 .meter {
   border-radius: 10px;
   width: 300px;
   /* Adjust width of the meter */
   height: 300px;
   /* Adjust height of the meter */
   background-color: #fff;
   /* Background color of the meter */
   position: relative;
   /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); Add shadow for depth */
 }
 
 .meter .fill {
   background: linear-gradient(
     to top,
     rgba(100, 0, 0, 0.8),
     /* Dark red */ rgba(255, 0, 0, 1),
     /* Red */ rgba(255, 255, 0, 1),
     /* Yellow */ rgba(0, 128, 0, 1) /* Green */
   );
   border-radius: 10px;
   position: absolute;
   bottom: 0;
   width: 30px;
   height: 100%;
   transition: height 0.5s ease;
   /* Add smooth transition for fill animation */
 }
 
 /* .red {
   background: linear-gradient(
     to right,
     #9e0000,
   );
   bottom: 30px;
   width: 100%;
   height: 30px;
   bottom: 50%;
   position: absolute;
 } */
 
 .orange {
   background: linear-gradient(
     to right,
     #ff5000,
     /* Dark red */ #fff800 /* Red */
   );
   width: 100%;
   height: 30px;
   bottom: 50%;
   position: absolute;
 }
 
 .yellow {
   background: linear-gradient(
     to right,
     #ffe400,
     /* Dark red */ #5faf00 /* Red */
   );
   width: 100%;
   height: 30px;
   bottom: 50%;
   position: absolute;
 }
 
 /* .green {
   background: linear-gradient(
     to right,
     #60a500,
   );
   width: 100%;
   height: 30px;
   bottom: 50%;
   position: absolute;
 } */
 
 .meter-container {
   display: flex;
   justify-content: center;
 }
 
 .horizontal-meter {
   display: flex;
   width: 300px;
   height: 30px;
 }
 
 .horizontal-meter .fill {
   height: 30px;
   width: 100%;
   border-radius: 10px;
   position: absolute;
   transition: height 0.5s ease;
 }
 
 .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
   display: block;
 }
 
 .blinking-points {
   position: relative;
   /* top: 50%; */
   left: 0;
   right: 0;
   /* transform: translateY(-50%); */
   display: flex;
   justify-content: space-between;
   width: 100%;
   height: 100%;
   z-index: 9999;
 }
 
 .point {
   width: 10px;
   height: 10px;
   background-color: #fff;
   border-radius: 50%;
   position: absolute;
   animation: blink-animation 1s infinite alternate;
   /* Blinking animation */
 }
 
 @keyframes blink-animation {
   0% {
     opacity: 0;
     /* Invisible */
   }
 
   100% {
     opacity: 1;
     /* Visible */
   }
 }
 
 .grumphyBanner img {
   height: 120px;
   position: absolute;
   top: -34px;
   left: -35px;
 }
 
 .grumphyBanner {
   height: 75px;
   background: #f37e21ba;
   margin: 30px 0;
   position: relative;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .badgeImg {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 100%;
   width: auto;
 }
 
 .bannerText {
   font-size: 12px;
   /* letter-spacing: 1px; */
   z-index: 999;
   position: relative;
 }
 
 .goalText {
   width: 100px;
   z-index: 99999;
   cursor: pointer;
 }
 
 .horizontal.timeline {
   display: flex;
   position: absolute;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   bottom: 50%;
 }
 
 .horizontal.timeline:before {
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 0.2em;
   background-color: #f2f2f2;
 }
 
 .horizontal.timeline .line {
   display: block;
   position: absolute;
   width: 100%;
   height: 0.2em;
   background-color: #8897ec;
 }
 
 .horizontal.timeline .steps {
   display: flex;
   position: relative;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
 
 .horizontal.timeline .steps .step {
   display: block;
   position: relative;
   bottom: calc(100% + 1em);
   /* padding: 0.33em;
 margin: 0 2em; */
   box-sizing: content-box;
   color: #8897ec;
   background-color: currentColor;
   border: 0.25em solid white;
   border-radius: 50%;
   z-index: 500;
 }
 
 .horizontal.timeline .steps .step:first-child {
   margin-left: 0;
 }
 
 .horizontal.timeline .steps .step:last-child {
   margin-right: 0;
   color: #71cb35;
 }
 
 .horizontal.timeline .steps .step span {
   position: absolute;
   top: calc(100% + 1em);
   left: 50%;
   /* transform: translateX(-50%); */
   white-space: nowrap;
   color: #000;
   /* opacity: 0.7; */
   width: 100px;
   font-size: 13px;
 }
 
 .horizontal.timeline .steps .step:last-child:not(:first-child) span {
   transform: translateX(-75%);
 }
 
 .horizontal.timeline .steps .step:not(:first-child):not(:last-child) span {
   transform: translateX(-50%);
 }
 
 .horizontal.timeline .steps .step.current:before {
   content: "";
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 1em;
   background-color: currentColor;
   border-radius: 50%;
   opacity: 0;
   z-index: -1;
   animation-name: animation-timeline-current;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-out;
 }
 
 .horizontal.timeline .steps .step.current span {
   opacity: 0.8;
 }
 
 @keyframes animation-timeline-current {
   from {
     transform: translate(-50%, -50%) scale(0);
     opacity: 1;
   }
 
   to {
     transform: translate(-50%, -50%) scale(1);
     opacity: 0;
   }
 }
 
 .bunnyRocket {
   width: 89px;
   position: absolute;
   left: -30px;
   bottom: -23px;
   z-index: 99999;
 }
 
 .goalChecker {
   display: none;
   /* Hide all checkboxes initially */
 }
 
 .lessonDetails.active {
   border-bottom: 2px solid #1292f1;
   color: #1292f1;
 }
 
 .lessonDetails {
   font-size: 18px;
   font-weight: 500;
 }
 
 .lessonList {
   padding: 15px 0;
   margin: 0;
 }
 
 .lessonList:not(:last-child) {
   border-bottom: 1px solid #dee2e6;
 }
 
 #accordionExample .accordion-item:not(:first-of-type) {
   border-top: 1px solid #dee2e6;
 }
 
 #accordionExample .accordion-button {
   box-shadow: none;
 }
 
 #lesson-content .pdf-header {
   margin: 20px 0;
 }
 
 .stickyStarName {
   font-size: 15px;
   font-weight: 500;
   margin-left: 10px;
   width: 120px;
 }
 
 .referal {
   font-family: "Oswald", cursive;
   font-weight: 400;
 }
 
 /* .simpleChat>div>div{
 box-shadow: none!important;
 display: flex;
 gap: 8px ;
 align-items: center;
 } */
 .simpleChatCont {
   max-height: 400px;
   height: 400px;
   overflow: hidden;
   overflow-y: auto;
   position: relative;
 }
 
 .message .cont-body {
   height: 400px;
   overflow: hidden;
   overflow-y: auto;
 }
 
 .message {
   max-height: 400px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .simpleChat > div {
   width: 100%;
   background-color: #fff;
   box-shadow: 0 1px 2px rgb(0, 0, 0, 0.2);
 }
 
 .simpleChat .friendSelected {
   display: none;
 }
 
 .simpleChat,
 .message {
   float: left;
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   padding-right: 10px;
   box-sizing: border-box;
   transition: transform 0.4s ease-in-out;
   /* Use CSS transition for smooth sliding */
 }
 
 .simpleChat {
   left: 0;
   /* Initially positioned at the left */
 }
 
 .message {
   /* left: 100%; Initially positioned outside the container on the right */
   transform: translateX(100%);
   /* Start the message offscreen to the right */
 }
 
 .showMessage .simpleChat {
   transform: translateX(-110%);
   /* Slide simpleChat to the left */
 }
 
 .showMessage .message {
   transform: translateX(0);
   /* Slide message into view from the right */
 }
 
 .h100 {
   height: 100px;
 }
 
 .overdue td,
 .overdue th {
   font-size: 13px;
   text-align: left;
   height: 20px;
   padding: 0 10px;
   border-right: 1px solid black;
   border-style: dotted;
 }
 
 .dotted {
   border: 0;
   border-right: 1px solid black;
   border-style: dotted;
 }
 
 .dotted:last-child {
   border: 0;
   border-right: 0;
 }
 
 #myChartPie {
   height: 100% !important;
   width: 100% !important;
   margin: 0 auto;
 }
 
 #lesson-content iframe {
   width: 100% !important;
   height: auto !important;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 15px;
   margin: 0 auto;
   display: block;
   aspect-ratio: 16/9;
 }
 
 .simpleChatMainCont .toName {
   max-width: 100px;
 }
 
 .innerDiv {
   background-color: #fff;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 15px;
   border-radius: 10px !important;
 }
 
 .plannerLesson .nav-link {
   font-size: 13px;
   border: 1px solid #46a5ff;
 }
 
 .plannerLesson {
   margin-bottom: 5px;
 }
 
 .homeworkTodayTable,
 .homeworkOverdueTable {
   text-align: left;
   margin-top: 10px;
 }
 
 .homeworkTodayTable th,
 .homeworkOverdueTable th {
   padding: 5px;
   font-size: 14px;
   border-color: #818181;
 }
 
 .homeworkTodayTable td,
 .homeworkOverdueTable td {
   font-size: 12px;
   padding: 5px;
   border-color: #818181;
 }
 
 .homeworkTodayTable tr,
 .homeworkOverdueTable tr {
   border-color: #818181;
 }
 
 #loading-screen {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #fff;
   z-index: 9999;
 }
 
 .loader {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 8px solid #f3f3f3;
   /* Light grey */
   border-top: 8px solid #3498db;
   /* Blue */
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
 
   100% {
     transform: rotate(360deg);
   }
 }
 
 .dashboardBanner {
   background: radial-gradient(circle at 50% -350%, #ffffff, #0074e3);
 }
 
 .dashboardBannerOrange {
   background: radial-gradient(circle at 50% -350%, #ffffff, #ffa032);
 }
 
 div.group-parent-wrapper .post-likes {
   position: relative;
   display: inline-block;
   cursor: pointer;
 }
 
 div.group-parent-wrapper .post-likes img {
   vertical-align: middle;
 }
 
 div.group-parent-wrapper .post-likes-count {
   color: #4267b2;
   margin-left: 5px;
 }
 .emojiAlias {
   font-weight: bold;
   text-transform: capitalize;
 }
 .emojiAlias hr {
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
 div.group-parent-wrapper .summary-emoji {
   position: relative; /* Ensure the popup is positioned relative to the emoji */
 }
 
 div.group-parent-wrapper .summary-emoji:last-child {
   font-size: 15px;
 }
 
 div.group-parent-wrapper .summaryContainer .summary-emoji span.emoji-icon,
 div.group-parent-wrapper .summary-comment-emoji span.emoji-icon {
   line-height: 1.1;
   vertical-align: bottom;
   font-size: 18px;
 }
 
 div.group-parent-wrapper .summary-comment-emoji:last-child {
   margin-left: .2rem;
 }
 
 
 div.group-parent-wrapper .reaction-popup {
   display: none;
   position: absolute;
   top: 40px; /* Adjust based on your desired distance from the emoji */
   left: 0; /* Align the popup to the left side of the emoji */
   background-color: rgba(0, 0, 0, 0.7); 
   color: #fff;
   padding: 10px;
   border-radius: 5px;
   width: 250px;
   z-index: 1000;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   white-space: nowrap;
 }
 
 div.group-parent-wrapper .reaction-popup::before {
   content: '';
   position: absolute;
   top: -10px;
   left: 10px; /* Adjust the pointer to align with the left side */
   border-width: 0 8px 8px 8px;
   border-style: solid;
   border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
 }
 
 
 div.group-parent-wrapper .post-engagement {
   margin-top: 0.5rem;
 }
 .reactionsList {
   height: 500px;
   overflow-y: auto;
 }
 .reply-engagement .comment-likes {
   position: relative; /* Ensures the popup is positioned relative to the parent */
   display: inline-block;
   cursor: pointer;
 }
 
 .reply-engagement .reaction-popup ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
 .reply-engagement .reaction-popup ul li {
   padding: 5px 10px;
   font-size: 14px;
   color: #000;
 }
 .reaction-popup {
    display: none;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 1000;
    min-width: 250px;
 }
 .reaction-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
 }
 
 .reply-engagement .comment-likes-count {
   margin-left: 5px;
   font-size: 14px;
 }
 
 div.group-parent-wrapper .reply-engagement .reaction-popup {
   display: none;
   position: absolute;
   top: 30px;
   left: 5px;
   background-color: rgba(0, 0, 0, 0.7);
   color: #fff;
   padding: 10px;
   border-radius: 5px;
   width: 250px;
   z-index: 1000;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 #reactionsList li.list-group-item {
   padding: 0px;
 }
 div.group-parent-wrapper .reaction-popup::before {
   content: "";
   position: absolute;
   top: -8px;
   left: 10px;
   border-width: 0 8px 8px 8px;
   border-style: solid;
   border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
 }
 
 div.group-parent-wrapper .reaction-popup ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
 div.group-parent-wrapper .reaction-popup ul li {
   font-size: 13px;
 }
 
 div.group-parent-wrapper .reaction-popup ul li.andMore {
   border-bottom: none;
   font-style: italic;
 }
 
 div.group-parent-wrapper .postlikes {
   background: radial-gradient(circle at 50% -139%, #ffffff, #0074e3);
   /* background-color: #0074e3;
 background-image: -webkit-linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%);
 background-image: -moz-linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%);
 background-image: -o-linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%);
 background-image: linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%); */
 }
 
 .postlikes .inner-circle,
 .totalHomework,
 .homeworkCompleted,
 .postlikes {
   background: radial-gradient(circle at 50% -139%, #ffffff, #0074e3);
   /* background-color: #0074e3;
 background-image: -webkit-linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%);
 background-image: -moz-linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%);
 background-image: -o-linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%);
 background-image: linear-gradient(0deg, #0074e3 0%, #0074e3 70%, #67b4fe 100%); */
 }
 
 .friends,
 .friends .inner-circle,
 .todayHomework {
   background: radial-gradient(circle at 50% -139%, #ffffff, #ffa032);
   /* background-color: #ffa032;
 background-image: -webkit-linear-gradient(0deg, #ffa032 34%, #ffd092 90%);
 background-image: -moz-linear-gradient(0deg, #ffa032 34%, #ffd092 90%);
 background-image: -o-linear-gradient(0deg, #ffa032 34%, #ffd092 90%);
 background-image: linear-gradient(0deg, #ffa032 34%, #ffd092 90%); */
 }
 
 .courses .inner-circle,
 .courses,
 .homeworkOver {
   background: radial-gradient(circle at 50% -139%, #ffffff, #02a48a);
   /* background-color: #02a48a;
 background-image: -webkit-linear-gradient(0deg, #02a48a 6%, #02a48a 64%, #8ad5c8 100%);
 background-image: -moz-linear-gradient(0deg, #02a48a 6%, #02a48a 64%, #8ad5c8 100%);
 background-image: -o-linear-gradient(0deg, #02a48a 6%, #02a48a 64%, #8ad5c8 100%);
 background-image: linear-gradient(0deg, #02a48a 6%, #02a48a 64%, #8ad5c8 100%);   */
 }
 
 .like .inner-circle,
 .like {
   background: radial-gradient(circle at 50% -139%, #ffffff, #ffa032);
   /* background-color: #ffa032;
 background-image: -webkit-linear-gradient(0deg, #ffa032 34%, #ffd092 90%);
 background-image: -moz-linear-gradient(0deg, #ffa032 34%, #ffd092 90%);
 background-image: -o-linear-gradient(0deg, #ffa032 34%, #ffd092 90%);
 background-image: linear-gradient(0deg, #ffa032 34%, #ffd092 90%); */
 }
 
 .referral {
   background-color: #fa709a;
 }
 
 .monthToDate {
   background-color: #9599e2;
 }
 
 .percentage {
   font-size: 12px;
 }
 
 .circular-progress .percentage {
   font-size: 18px;
 }
 
 .circular-progress {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .inner-circle {
   position: absolute;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: lightgrey;
 }
 
 .integralPoints .inner-circle {
   position: absolute;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   background-color: lightgrey;
 }
 
 .communityHomework .inner-circle {
   position: absolute;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: lightgrey;
 }
 
 .integralPoints .circular-progress {
   width: 220px;
   height: 220px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .communityHomework .circular-progress {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .communityHomework .circular-progress .percentage {
   font-size: 14px;
 }
 
 .percentage {
   position: relative;
   /* font-size: var(--font-size); */
   color: rgb(0, 0, 0, 0.8);
 }
 
 :root {
   --progress-bar-width: 100%;
   --progress-bar-height: 100%;
   --font-size: 10px;
 }
 
 @media screen and (max-width: 800px) {
   :root {
     --progress-bar-width: 150px;
     --progress-bar-height: 150px;
     --font-size: 1.3rem;
   }
 }
 
 @media screen and (max-width: 500px) {
   :root {
     --progress-bar-width: 120px;
     --progress-bar-height: 120px;
     --font-size: 1rem;
   }
 }
 
 .plannerNote {
   width: 100%;
   height: 300px;
   border: 0;
 }
 
 .myGrade {
   font-family: "Nanum Brush Script", cursive;
   font-weight: 400;
   font-style: normal;
   font-size: 50px;
 }
 
 .myGrade.passed {
   color: #02a48a;
 }
 
 .acc-courses.lesson.active:before {
   transform: translateY(-50%) rotate(0deg);
   border-color: rgb(255, 255, 255) transparent transparent transparent;
   content: none;
 }
 
 .acc-courses.lesson:before {
   content: none;
   display: inline-block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 5px 5px 0 5px;
   border-color: rgb(0, 0, 0) transparent transparent transparent;
   position: absolute;
   top: 50%;
   left: 10px;
   transform: translateY(-50%) rotate(-90deg);
   transition: transform 0.3s;
 }
 
 .container-list-note .swal2-html-container {
   background-image: repeating-linear-gradient(
     white 0px,
     white 28px,
     steelblue 30px
   );
 }
 
 .container-list-note .swal2-html-container > div:not(:first-child) {
   margin-top: 61px;
 }
 
 .highlightsTop {
   border-top: 3px solid #0f7ce4;
 }
 
 .highlightsTopWhite {
   border-top: 3px solid #fff;
 }
 
 .profileList.active {
   background-color: #70a9fe;
 }
 
 .profileList {
   font-weight: 600;
 }
 
 .profileList:hover {
   background-color: #70a9fe;
   color: #fff;
 }
 
 .profileBanner {
   background-color: #70a9fe;
   color: #fff;
   position: relative;
 }
 
 .grumpy-helper.left {
   left: -20px;
   right: 0;
 }
 
 .grumpy-helper {
   width: 75px;
   height: auto;
   position: absolute;
   bottom: 0;
   right: -35px;
 }
 
 .personalDetail tr {
   margin-bottom: 20px;
 }
 
 .personalDetail td {
   vertical-align: top;
   padding: 5px 0;
 }
 
 .countdown {
   display: flex;
   justify-content: center;
   gap: 20px;
 }
 
 .countdown > div {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 5px;
   padding: 2px;
 }
 
 .number {
   font-weight: 500;
   font-size: 25px;
   color: #fff;
 }
 
 .countdown > div span:last-of-type {
   font-size: 12px;
 }
 
 @media screen and (max-width: 600px) {
   h1 {
     font-size: 40px;
   }
 
   .countdown {
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin-top: 30px;
   }
 
   .countdown > div {
     background-color: #fff;
     width: 250px;
     height: 60px;
     margin: 0;
     flex-direction: row;
     justify-content: space-between;
     padding: 20px;
   }
 
 
   .number {
     font-size: 34px;
   }
 }
 
 #interaction {
   border: 2px solid #3a94e9;
   padding: 7px 5px !important;
 }
 
 .grumpyPointingUp {
   width: 50%;
   margin-top: -86px;
 }
 
 .badgesImg {
   width: 175px;
   height: 175px;
 }
 
 .badgesAchieved {
   text-transform: uppercase;
   font-weight: 600;
 }
 
 .badgesTitle {
   font-size: 18px;
   font-weight: bold;
   color: #d6a877;
 }
 
 .profileMembershipLogo {
   width: 100%;
   aspect-ratio: 16/9;
 }
 
 #profile-image-container {
   position: relative;
   display: inline-block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   top: -30%;
 }
 #profile-image-container img {
   width: 100%;
   height: 100%;
 }
 .headerProfile img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border: 3px solid #70a9fe;
 }
 
 .headerProfile {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 50px;
   overflow: hidden;
 }
 
 #upload-icon i {
   color: #fff;
 }
 
 #upload-icon {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   display: none;
   align-items: center;
   justify-content: center;
   background: #00000059;
   border-radius: 50%;
 }
 
 #profile-image {
   border: 3px solid #fff;
 }
 
 #profile-image-container:hover #upload-icon {
   display: flex;
   flex-direction: column;
   cursor: pointer;
   aspect-ratio: 1/1;
 }
 
 #uploadCover {
   position: absolute;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   margin-top: -25px;
   margin-right: 50px;
 }
 
 .bannerIcon {
   background-color: #fff;
   padding: 10px;
   border-radius: 50%;
   margin: 5px;
   cursor: pointer;
 }
 
 .bannerIcon-danger {
   background-color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;
   color: #fff;
   padding: 10px;
   border-radius: 50%;
   margin: 5px;
   cursor: pointer;
 }
 
 .profileMemberLink {
   text-decoration: none;
   color: #000;
 }
 
 .logo-new {
  width: 122px !important;
 }
 
 .post-media img.img-fluid {
   transition: all 0.2s ease-in-out;
 }
 
 .post-media img.img-fluid:hover {
   cursor: pointer;
   transform: scale(1.02);
 }
 
 .rounded-circle {
   object-fit: cover;
   aspect-ratio: 1/1;
 }
 
 .dropdownImgCommunity {
   width: 78px;
   aspect-ratio: 16/9;
   object-fit: cover;
   border: 1px solid;
 }
 
 .communityJoined {
   position: absolute;
   bottom: 10px;
 }
 
 #profile-image-container .loading {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   top: 0;
   position: absolute;
   background: #000000a3;
   border-radius: 50%;
 }
 
 #profile-image-container .spinner-border {
   width: 50px;
   height: 50px;
   left: 0;
   top: 0;
   color: white;
 }
 
 #uploadCover .loading {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   position: absolute;
   background: #000000a3;
   left: -8px;
   top: 17px;
 }
 
 #uploadCover .spinner-border {
   width: 100px;
   height: 100px;
   left: 0;
   top: 0;
   color: white;
   margin-top: -50px;
 }
 
 .postProfileImgContent{
    position: absolute;
    top: 11px;
    left: 9px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
 .postProfileImg {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 50px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .postProfileImg img,
 .postProfileImgContent img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .comment-member-imgs {
   position: relative;
   display: inline-block;
   width: 30px;
   height: 30px;
   overflow: hidden;
 }
 
 .comment-user-img {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 40px;
   overflow: hidden;
 }
 
 .comment-user-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .comment-member-imgs img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 #multiFunction {
   z-index: 9999999;
 }
 
 .dropdown-post-setting .dropdown-toggle:after {
   content: "";
   display: none;
 }
 
 .dropdown-post-setting .dropdown-toggle {
   padding: 0px 10px;
   display: flex;
 }
 
 .post-name > a,
 .post-name h5.avatar-name a {
   text-decoration: none;
   color: #000;
 }
 
 .post-name > a:hover {
   text-decoration: none;
   color: #0074e3;
 }
 
 .progress-bar-task .step {
   border: 1px solid #b9b9b9;
   background-color: #fff;
 }
 
 .progress-bar-task .step.fill {
   background: transparent;
 }
 
 .checkbox-wrapper-31:hover .check {
   stroke-dashoffset: 0;
 }
 
 .checkbox-wrapper-31 {
   position: relative;
   display: inline-block;
   width: 100px;
   height: 100px;
 }
 
 .checkbox-wrapper-31 .background {
   fill: #ccc;
   transition: ease all 0.6s;
   -webkit-transition: ease all 0.6s;
 }
 
 .checkbox-wrapper-31 .stroke {
   fill: none;
   stroke: #fff;
   stroke-miterlimit: 10;
   stroke-width: 2px;
   stroke-dashoffset: 100;
   stroke-dasharray: 100;
   transition: ease all 0.6s;
   -webkit-transition: ease all 0.6s;
 }
 
 .checkbox-wrapper-31 .check {
   fill: none;
   stroke: #fff;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2px;
   stroke-dashoffset: 22;
   stroke-dasharray: 22;
   transition: ease all 0.6s;
   -webkit-transition: ease all 0.6s;
 }
 
 .checkbox-wrapper-31 input[type="checkbox"] {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   margin: 0;
   opacity: 0;
   -appearance: none;
   -webkit-appearance: none;
 }
 
 .checkbox-wrapper-31 input[type="checkbox"]:hover {
   cursor: pointer;
 }
 
 .checkbox-wrapper-31 input[type="checkbox"]:checked + svg .background {
   fill: #6cbe45;
 }
 
 .checkbox-wrapper-31 input[type="checkbox"]:checked + svg .stroke {
   stroke-dashoffset: 0;
 }
 
 .checkbox-wrapper-31 input[type="checkbox"]:checked + svg .check {
   stroke-dashoffset: 0;
 }
 
 .rounded {
   border-radius: 15px !important;
 }
 
 .rounded10 {
   border-radius: 10px !important;
 }
 
 .getting-started-check {
   width: 5%;
 }
 
 .getting-started-label {
   width: 95%;
 }
 
 .progress-bar-task {
   border-radius: 10px;
   border: 1px solid #000;
   overflow: hidden;
   background: linear-gradient(
     to right,
     rgba(100, 0, 0, 0.8),
     /* Dark red */ rgba(255, 0, 0, 1),
     /* Red */ rgba(255, 255, 0, 1),
     /* Yellow */ rgba(0, 128, 0, 1) /* Green */
   );
 }
 
 .additionalInfo {
   position: sticky;
   top: 0;
   /* Stick to the top of the viewport */
   z-index: 1000;
   overflow: auto;
   height: 100vh;
 }
 
 .groupImgSide {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   margin-bottom: 10px;
 }
 
 .loader_animate,
 #reply-img-spinner {
   width: 50px;
   aspect-ratio: 1;
   border-radius: 50%;
   border: 8px solid #0000;
   border-right-color: #ffa50097;
   position: relative;
   animation: l24 1s infinite linear;
   display: inline-block;
 }
 
 .loader_animate:before,
 .loader_animate:after,
 #reply-img-spinner:before,
 #reply-img-spinner:after {
   content: "";
   position: absolute;
   inset: -8px;
   border-radius: 50%;
   border: inherit;
   animation: inherit;
   animation-duration: 2s;
 }
 
 .loader_animate:after,
 #reply-img-spinner:after {
   animation-duration: 4s;
 }
 
 @keyframes l24 {
   100% {
     transform: rotate(1turn);
   }
 }
 
 .iconText {
   font-size: 12px !important;
 }
 
 .avatar-name {
   font-size: 16px;
   font-weight: bold;
   padding-bottom: 5px;
 }
 
 .user-stats,
 .comment-count-link {
   font-size: 14px;
 }
 
 .w-96 {
   width: 96%;
 }
 
 .post-likes-count,
 .post-comments-count {
   font-size: 14px;
 }
 
 .comment-bg {
   background-color: #f3f3f3;
 }
 
 .comment-l2 {
   margin-left: 30px;
 }
 
 blockquote {
   border-left: 2px solid #ccc;
   padding-left: 10px;
   margin: 10px 0;
   font-style: italic;
 }
 
 .author {
   margin: 0;
   font-weight: 600;
   font-style: italic;
 }
 
 .view-name,
 .view-post-date {
   font-size: 12px;
 }
 
 .view-name a {
   font-weight: 700;
   font-size: 15px;
 }
 
 .dropdown-content {
   position: relative;
   margin-top: 0px;
   background-color: #f9f9f9;
   min-width: 160px;
   overflow: auto;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   line-height: 2rem;
   padding: 10px;
 }
 
 .post-watchers {
   background: #ddd;
   padding: 10px 15px;
   line-height: 1rem;
   font-weight: 700;
   height: 35px;
   border-radius: 5px;
 }
 
 .post-actions-btn {
   cursor: pointer;
   background: #dddddd;
   width: 51px;
   padding: 10px;
   text-align: center;
   vertical-align: middle;
   line-height: 1rem;
   border-radius: 5px;
 }
 
 .post-actions-btn li {
   background: none repeat scroll 0 0 black;
   height: 5px;
   width: 5px;
   line-height: 0;
   list-style: none outside none;
   margin-right: 0px;
   margin-top: 5px;
   vertical-align: top;
   border-radius: 50%;
   pointer-events: none;
   display: inline-block;
   cursor: pointer;
 }
 
 .note-editable {
   border-radius: 15px;
 }
 
 #viewImageModal modal-body img {
   width: 100%;
 }
 
 .comment-wrap {
   font-size: 12px;
 }
 
 .comment-wrap .comment-body {
   font-size: 16px;
 }
 
 .comment-wrap .comment-body p:last-child {
   margin-bottom: 0;
 }
 
 .comment-wrap .comment-bg {
   max-width: 90%;
 }
 
 .comment-wrap .dropdown-toggle {
   background: transparent;
   color: #212529;
   border: 0;
 }
 
 .post-user-actions {
   border-top: 1px solid #d3d3d3 !important;
   border-bottom: 1px solid #d3d3d3 !important;
   font-size: 16px;
 }
 
 .instant-reply-text {
   height: 45px;
 }
 
 .submit-instant-comment {
   border: 0;
   position: absolute;
   right: 20px;
   bottom: 12px;
   font-size: 20px;
   transform: rotateY(0deg) rotate(45deg);
   background: transparent;
 }
 
 .submit-btn-disabled {
   cursor: not-allowed !important;
 }
 
 .instant-comment-container .note-editable {
   background-color: #e4e6eb;
   border-top: 1px solid #d3d3d3 !important;
   border-bottom: 1px solid #d3d3d3 !important;
   min-height: 60px;
   border-radius: 10px;
   max-width: 100%;
   padding-right: 50px !important;
 }
 
 .post-latest-replies .reply-comment,
 .post-latest-replies .comment-date {
   font-size: 16px;
 }
 
 .view-post .comment-wrap .comment-bg {
   max-width: 100%;
 }
 
 .view-post-page .comment-wrap {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
 .view-post-page .comment-wrap .comment-bg {
   max-width: 100%;
 }
 
 .view-post-page .comment-user-img {
   width: 50px;
   height: 50px;
 }
 
 .view-post-page .comment-wrap .comment-body {
   min-height: 50px;
 }
 
 .alert-dismissible .close {
   position: absolute;
   top: 0;
   right: 0;
   padding: 0.75rem 1.25rem;
   color: inherit;
 }
 
 .close:not(:disabled):not(.disabled) {
   cursor: pointer;
 }
 
 button.close {
   padding: 0;
   background-color: transparent;
   border: 0;
   -webkit-appearance: none;
 }
 
 .close {
   float: right;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
   color: #000;
   text-shadow: 0 1px 0 #fff;
   opacity: 0.5;
 }
 
 .announcement-post {
   border-image: linear-gradient(248deg, #ffd700, #ffa500, #a0522d) 1 !important;
 }
 
 .special-pinned-post {
   border-image: linear-gradient(248deg, #ffd700, #ffa500, #a0522d) 1 !important;
 }
 
 .pinned-post {
   border-image: linear-gradient(248deg, #9370db, #9400d3, #800080) 1 !important;
 }
 
 .post-desc p {
   margin-bottom: 5px;
 }
 
 .more-comments {
   font-size: 14px;
 }
 
 .read-more {
   font-size: 14px;
 }
 
 .preview-wrapper h4 {
   font-size: 14px;
 }
 
 #create-classroom .note-editor .note-editing-area .note-editable,
 #edit-classroom .note-editor .note-editing-area .note-editable {
   border: 1px solid #cccccc;
 }
 
 #create-classroom .field-info,
 #edit-classroom .field-info {
   font-size: 13px;
   font-style: italic;
 }
 
 .dropdown-no-arrow::after {
   display: none !important;
 }
 
 button.interact-btn {
   background: unset;
   border: unset;
   font-size: 15px;
 }
 
 .note-editor .note-toolbar {
   width: 100% !important;
 }
 
 .comment-body {
   position: relative;
   overflow: hidden;
 }
 
 .comment-body > img,
 .comment-body > p > img {
   object-fit: contain;
   max-width: 100%;
   width: 100%;
   height: auto;
 }
 
 #lesson-content .pulse-summary a {
   word-wrap: break-word;
 }
 
 .dashboard {
   display: flex;
 }
 
 .sidebar {
   background-color: #fff;
   padding: 20px 10px;
   border: 2px solid #eaebee;
   height: 90vh;
   position: sticky;
   top: 0;
   padding-bottom: 30px;
   box-shadow: none;
 }
 
 .sidebar .profile img {
   border-radius: 50%;
   width: 50px;
   height: 50px;
   display: block;
 }
 
 .sidebar h2,
 .sidebar p {
   margin: 0 0 10px;
 }
 
 .sidebar nav ul {
   list-style: none;
   padding: 0;
   margin: 20px 0;
 }
 
 .sidebar nav ul li {
   margin-bottom: 5px;
 }
 
 .sidebar nav ul li a {
   text-decoration: none;
   color: #333;
   display: block;
   border-radius: 5px;
   transition: background-color 0.3s;
   padding: 5px 10px;
   font-size: 16px;
 }
 
 .sidebar nav ul li a.active {
   color: #fff;
   background-color: color(display-p3 0.5294 0.6902 0.9176);
 }
 
 .sidebar nav ul li a:hover,
 .sidebar nav ul li .accordion:hover {
   color: #000;
   background-color: color(srgb 0.7976 0.8932 0.9985);
 }
 .sidebar nav ul li .accordion {
   padding: 0px 10px;
   border-radius: 5px;
 }
 
 .sidebar .logout {
   background-color: transparent;
   color: #000;
   padding: 10px 30px;
   border: none;
   width: 100%;
   border-radius: 5px;
   cursor: pointer;
   position: absolute;
   bottom: 5%;
   left: 0;
   text-align: left;
 }
 
 .content-main.main {
   background-color: #fff !important;
 }
 .content-main {
   display: flex;
   flex-grow: 1;
   padding: 0 0 20px 50px;
   border-top: 2px solid #eaebee;
   background-color: #f8f9fd !important;
 }
 
 .header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   gap: 20px;
 }
 
 .header h1 {
   margin: 0;
 }
 
 .header .stats,
 #chart-container .stats {
   display: flex;
   gap: 10px;
 }
 main .stats .stat-item h6 {
   border-bottom: 1px solid black;
   padding-bottom: .5rem;
 }
 
 main .stats .stat-item {
   padding: .25rem;
   border-radius: 4px;
 }
 main .stats .stat-item.stat-likes-wrapper {
   background-color: rgba(75, 192, 192, 0.5);
 }
 main .stats .stat-item.stat-post-wrapper {
   background-color: rgba(153, 102, 255, 0.5);
 }
 main .stats .stat-item.stat-comments-wrapper {
   background-color: rgba(255, 159, 64, 0.5);
 }
 
 main .stats .stat-item h6 {
   font-size: 15px;
 }
 
 #chart-container svg {
   width: 25px;
 }
 
 .header .stats div, 
 #chart-container .stats div {
   background-color: #fff;
   padding: 10px;
   border-radius: 5px;
   width: 100%;
 }
 
 .card-detail {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .dashboard.community-navbar .container-fluid {
   background-color: transparent !important;
 }
 
 .header .upgrade {
   background-color: #ff9500;
   color: #fff;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .activity,
 .top-performers,
 .channels {
   margin-bottom: 20px;
 }
 
 .top-performers div.row.p-3.py-5 div.col-3 h4,
 .top-performers div.row.p-3.py-5 div.col-3 p,
 .top-performers div.row.p-3.py-5 div.col-4 h4,
 .top-performers div.row.p-3.py-5 div.col-4 p {
   position: relative;
   z-index: 20;
   padding: .5rem .5rem;
 }
 
 .typing-text {
   display: inline-block;
 }
 
 .top-performers div.row.p-3.py-5 div.col-3 h4,
 .top-performers div.row.p-3.py-5 div.col-4 h4{
   font-size: 1rem;
   font-weight: bold;
 }
 
 section .topImage {
   width: 50px;
   height: 50px;
   object-fit: cover;
 }
 
 #fullStatsTrendingCommunityModal .topImage,
 #fullStatsTrendingPostModal .topImage {
   width: 100px;
   height: 100px;
   object-fit: cover;
 }
 
 #fullStatsTrendingCommunityModal p,
 #fullStatsTrendingPostModal p {
   font-size: 14px;
 }
 
 #fullStatsTrendingCommunityModal div.card div.d-flex p{
   font-size: 13px;
 }
 
 section.top-posts img,
 div#fullStatsTrendingPost-Wrapper img {
   width: 70px;
   height: 70px;
   object-fit: cover;
 }
 section.top-performers a,
 section.top-posts a {
   color: black;
   text-decoration: none;
 }
 
 .chart img {
   width: 100%;
   height: 160px;
   object-fit: cover;
 }
 
 .channel-stats {
   display: flex;
   gap: 20px;
 }
 
 .channel {
   background-color: #fff;
   padding: 15px;
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-align: center;
 }
 
 .dashboard-menu li {
   margin-bottom: 12px;
   text-align: left;
   width: 100%;
 }
 
 .activity .chart {
   min-height: 300px;
 }
 
 .performerProfile {
   width: 40px;
   height: 40px;
   margin-right: 15px;
   border-radius: 50px;
   border: 1px solid;
   max-width: 40px;
   max-height: 40px;
   object-fit: cover;
 }
 
 ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
 ul li {
   margin-bottom: 10px;
 }
 
 .topImage {
   margin-top: -50px;
   margin-bottom: 10px;
   border-radius: 50px;
 }
 
 .topIcon {
   margin-top: -50px;
   margin-bottom: 10px;
   border-radius: 50px;
   padding: 15px;
   background: color(srgb 0.8666 0.8667 0.8668);
   font-size: 20px;
 }
 
 .stat-icon {
   height: 40px;
   width: 40px;
   text-align: center;
   background: #fff;
   color: color(srgb 0.4577 0.6925 0.6764);
   border-radius: 50px;
 }
 
 .performerInfo {
   display: flex;
   align-items: center;
 }
 
 .cursor-pointer {
   cursor: pointer;
 }
 
 .caret-off::after {
   display: none;
 }
 
 .dropdown > #notification-dd {
   min-width: 30rem;
   min-height: 38rem;
   width: 100%;
   height: 100%;
   overflow: auto;
 }
 
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
 
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 .notification-counter {
   font-size: 0.6rem;
   margin-top: 0.25rem;
   margin-left: -0.425rem;
   border-radius: 50%;
   width: 18px;
   height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .notif-icon-type {
   margin-top: -0.25rem;
   margin-left: -0.5rem;
 }
 
 .post-icon {
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0xMDI4LjQpIj4KICA8cGF0aCBkPSJtMiA0djEzLjUzMSAyLjQ2OWMwIDEuMTA1IDAuODk1NCAyIDIgMmg0IDhsNi02di0xMmgtMjB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwMjguNCkiIGZpbGw9IiNmMWM0MGYiLz4KICA8cGF0aCBkPSJtMjIgMTA0NC40LTYgNnYtNGMwLTEuMSAwLjg5NS0yIDItMmg0eiIgZmlsbD0iI2YzOWMxMiIvPgogIDxwYXRoIGQ9Im00IDJjLTEuMTA0NiAwLTIgMC44OTU0LTIgMnYxIDFoMjB2LTEtMWMwLTEuMTA0Ni0wLjg5NS0yLTItMmgtNC04LTR6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwMjguNCkiIGZpbGw9IiNmMWM0MGYiLz4KICA8ZyBmaWxsPSIjZjM5YzEyIj4KICAgPHJlY3QgaGVpZ2h0PSIyIiB3aWR0aD0iMTQiIHk9IjEwMzQuNCIgeD0iNSIvPgogICA8cmVjdCBoZWlnaHQ9IjIiIHdpZHRoPSIxNCIgeT0iMTAzOC40IiB4PSI1Ii8+CiAgIDxyZWN0IGhlaWdodD0iMiIgd2lkdGg9IjkiIHk9IjEwNDIuNCIgeD0iNSIvPgogIDwvZz4KIDwvZz4KPC9zdmc+");
 }
 
 .comment-icon {
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0xMDI4LjQpIj4KICA8cGF0aCBkPSJtNSAxMDMxLjRjLTIuMjA5MSAwLTQgMS44LTQgNHY4YzAgMi4yIDEuNzkwOSA0IDQgNGgwLjE1NjJ2NC44bDUuOTA1OC00LjhoNy45MzhjMi4yMDkgMCA0LTEuOCA0LTR2LThjMC0yLjItMS43OTEtNC00LTRoLTE0eiIgZmlsbD0iIzI3YWU2MCIvPgogIDxwYXRoIGQ9Im00LjkzNzUgMTAzMC40Yy0yLjIwOTEgMC00IDEuOC00IDR2OGMwIDIuMiAxLjc5MDkgNCA0IDRoMC4xNTYzdjQuOGw1LjkwNjItNC44aDcuOTM4YzIuMjA5IDAgNC0xLjggNC00di04YzAtMi4yLTEuNzkxLTQtNC00aC0xNHoiIGZpbGw9IiMyZWNjNzEiLz4KICA8cGF0aCBkPSJtNiAxMDM3LjRjLTEuMTA0NiAwLTIgMC45LTIgMnMwLjg5NTQgMiAyIDIgMi0wLjkgMi0yLTAuODk1NC0yLTItMnptNiAwYy0xLjEwNSAwLTIgMC45LTIgMnMwLjg5NSAyIDIgMiAyLTAuOSAyLTItMC44OTUtMi0yLTJ6bTYgMGMtMS4xMDUgMC0yIDAuOS0yIDJzMC44OTUgMiAyIDIgMi0wLjkgMi0yLTAuODk1LTItMi0yeiIgZmlsbD0iIzI3YWU2MCIvPgogIDxwYXRoIGQ9Im02IDEwMzYuNGMtMS4xMDQ2IDAtMiAwLjktMiAyczAuODk1NCAyIDIgMiAyLTAuOSAyLTItMC44OTU0LTItMi0yem02IDBjLTEuMTA1IDAtMiAwLjktMiAyczAuODk1IDIgMiAyIDItMC45IDItMi0wLjg5NS0yLTItMnptNiAwYy0xLjEwNSAwLTIgMC45LTIgMnMwLjg5NSAyIDIgMiAyLTAuOSAyLTItMC44OTUtMi0yLTJ6IiBmaWxsPSIjZWNmMGYxIi8+CiA8L2c+Cjwvc3ZnPg==");
 }
 
 .reply-icon {
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0xMDI4LjQpIj4KICA8cGF0aCBkPSJtMjIgMTAzMC40YzEuMTA1IDAgMiAwLjkgMiAydjMgMiAzYzAgMS4xLTAuODk1IDItMiAydjRsLTQuODc1LTRoLTIuMTI1LTZjLTEuMTA0NiAwLTItMC45LTItMnYtMy0yLTNjMC0xLjEgMC44OTU0LTIgMi0yaDYgMSA2eiIgZmlsbD0iIzI5ODBiOSIvPgogIDxwYXRoIGQ9Im0yMiAxMDI5LjRjMS4xMDUgMCAyIDAuOSAyIDJ2MyAyIDNjMCAxLjEtMC44OTUgMi0yIDJ2NGwtNC44NzUtNGgtMi4xMjUtNmMtMS4xMDQ2IDAtMi0wLjktMi0ydi0zLTItM2MwLTEuMSAwLjg5NTQtMiAyLTJoNiAxIDZ6IiBmaWxsPSIjMzQ5OGRiIi8+CiAgPHBhdGggZD0ibTIgMTAzNi40Yy0xLjEwNDYgMC0yIDAuOS0yIDJ2MyAyIDNjMCAxLjEgMC44OTU0MyAyIDIgMnY0bDQuODc1LTRoMi4xMjUgNmMxLjEwNSAwIDItMC45IDItMnYtMy0yLTNjMC0xLjEtMC44OTUtMi0yLTJoLTYtMS02eiIgZmlsbD0iIzI3YWU2MCIvPgogIDxwYXRoIGQ9Im0yIDEwMzUuNGMtMS4xMDQ2IDAtMiAwLjktMiAydjMgMiAzYzAgMS4xIDAuODk1NDMgMiAyIDJ2NGw0Ljg3NS00aDIuMTI1IDZjMS4xMDUgMCAyLTAuOSAyLTJ2LTMtMi0zYzAtMS4xLTAuODk1LTItMi0yaC02LTEtNnoiIGZpbGw9IiMyZWNjNzEiLz4KICA8cGF0aCBkPSJtNiAxM2MwIDAuNTUyLTAuNDQ3NyAxLTEgMXMtMS0wLjQ0OC0xLTEgMC40NDc3LTEgMS0xIDEgMC40NDggMSAxeiIgdHJhbnNmb3JtPSJtYXRyaXgoMS41IDAgMCAxLjUgLTMgMTAyMy40KSIgZmlsbD0iIzI3YWU2MCIvPgogIDxwYXRoIGQ9Im02IDEzYzAgMC41NTItMC40NDc3IDEtMSAxcy0xLTAuNDQ4LTEtMSAwLjQ0NzctMSAxLTEgMSAwLjQ0OCAxIDF6IiB0cmFuc2Zvcm09Im1hdHJpeCgxLjUgMCAwIDEuNSAtMyAxMDIyLjQpIiBmaWxsPSIjZWNmMGYxIi8+CiAgPHBhdGggZD0ibTYgMTNjMCAwLjU1Mi0wLjQ0NzcgMS0xIDFzLTEtMC40NDgtMS0xIDAuNDQ3Ny0xIDEtMSAxIDAuNDQ4IDEgMXoiIHRyYW5zZm9ybT0ibWF0cml4KDEuNSAwIDAgMS41IDEgMTAyMy40KSIgZmlsbD0iIzI3YWU2MCIvPgogIDxwYXRoIGQ9Im02IDEzYzAgMC41NTItMC40NDc3IDEtMSAxcy0xLTAuNDQ4LTEtMSAwLjQ0NzctMSAxLTEgMSAwLjQ0OCAxIDF6IiB0cmFuc2Zvcm09Im1hdHJpeCgxLjUgMCAwIDEuNSAxIDEwMjIuNCkiIGZpbGw9IiNlY2YwZjEiLz4KICA8cGF0aCBkPSJtNiAxM2MwIDAuNTUyLTAuNDQ3NyAxLTEgMXMtMS0wLjQ0OC0xLTEgMC40NDc3LTEgMS0xIDEgMC40NDggMSAxeiIgdHJhbnNmb3JtPSJtYXRyaXgoMS41IDAgMCAxLjUgNSAxMDIzLjQpIiBmaWxsPSIjMjdhZTYwIi8+CiAgPHBhdGggZD0ibTYgMTNjMCAwLjU1Mi0wLjQ0NzcgMS0xIDFzLTEtMC40NDgtMS0xIDAuNDQ3Ny0xIDEtMSAxIDAuNDQ4IDEgMXoiIHRyYW5zZm9ybT0ibWF0cml4KDEuNSAwIDAgMS41IDUgMTAyMi40KSIgZmlsbD0iI2VjZjBmMSIvPgogPC9nPgo8L3N2Zz4=");
 }
 
 .tag-icon {
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0xMDI4LjQpIj4KICA8cGF0aCBkPSJtMiAxMDI5LjRjLTEuMTA0NiAwLTIgMC45LTIgMnY3LjEgMC4xYzAuMDE2MzQzIDAuNSAwLjI0NTY2IDEgMC41OTM3NSAxLjRsMTAuOTY4IDEwLjljMC4zNjUgMC40IDAuODcxIDAuNiAxLjQzOCAwLjZzMS4wNzMtMC4yIDEuNDM4LTAuNmw3LjA2Mi03YzAuNDA4LTAuNCAwLjY1Ni0wLjkgMC42NTYtMS41cy0wLjI0OC0xLjItMC42NTYtMS41bC0xMC45MDYtMTAuOWMtMC4zNTUtMC40LTAuODY2OC0wLjYtMS40MDY1LTAuNmgtMC4wMzEzLTcuMTU2MnptMyAzYzEuMTA0NiAwIDIgMC45IDIgMnMtMC44OTU0IDItMiAyLTItMC45LTItMiAwLjg5NTQtMiAyLTJ6IiBmaWxsPSIjMjdhZTYwIi8+CiAgPHBhdGggZD0ibTIgMGMtMS4xMDQ2IDAtMiAwLjg5NTQ0LTIgMnY3LjE1NjIgMC4wNjI2YzAuMDE2MzQzIDAuNTI3MSAwLjI0NTY2IDEuMDI3MiAwLjU5Mzc1IDEuMzc1MmwxMC45NjggMTAuOTY4YzAuMzY1IDAuMzggMC44NzEgMC41OTQgMS40MzggMC41OTRzMS4wNzMtMC4yMTQgMS40MzgtMC41OTRsNy4wNjItNy4wNjJjMC40MDgtMC4zNjYgMC42NTYtMC45MDkgMC42NTYtMS41cy0wLjI0OC0xLjEzNC0wLjY1Ni0xLjVsLTEwLjkwNi0xMC45MDZjLTAuMzU1LTAuMzU1MjYtMC44NjY4LTAuNTg1NjQtMS40MDY1LTAuNTk0aC0wLjAzMTMtNy4xNTYyem0zIDNjMS4xMDQ2IDAgMiAwLjg5NTQgMiAycy0wLjg5NTQgMi0yIDItMi0wLjg5NTQtMi0yIDAuODk1NC0yIDItMnoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMTAyOC40KSIgZmlsbD0iIzJlY2M3MSIvPgogIDxwYXRoIGQ9Im0xMyAxMDQ5LjQgNy03LTgtOC03IDd6IiBmaWxsPSIjMjdhZTYwIi8+CiAgPHBhdGggZD0ibTEzIDIwIDctNy04LTgtNyA3eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxMDI4LjQpIiBmaWxsPSIjZWNmMGYxIi8+CiAgPHBhdGggZmlsbD0iIzdmOGM4ZCIgZD0ibTEyIDEwMzYuNC0zLjUgMy41LTAuNSAwLjUgMC41IDAuNSA0LTQtMC41LTAuNXptMiAyLTMuNSAzLjUtMC41IDAuNSAwLjUgMC41IDQtNC0wLjUtMC41em0yIDItMy41IDMuNS0wLjUgMC41IDAuNSAwLjUgNC00LTAuNS0wLjV6Ii8+CiA8L2c+Cjwvc3ZnPg==");
 }
 
 .notification-body > *:not(:last-child):not(:first-child) {
   border-bottom: 1px solid #dee2e6;
 }
 
 .time-lapsed::before {
   content: "•";
   margin: 0 5px;
 }
 
 a.unread,
 a.read {
   transition: ease all 0.3s;
 }
 
 a.unread .unread-notif {
   background-color: var(--bs-primary);
   border-radius: 50%;
   width: 7px;
   height: 7px;
 }
 
 a.unread:hover,
 a.read:hover {
   background-color: var(--bs-border-color);
 }
 
 .mi-spinner {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTIiIGhlaWdodD0iMTkyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjAiIGZpbGw9ImN1cnJlbnRDb2xvciI+PGFuaW1hdGUgaWQ9InN2Z1NwaW5uZXJzUHVsc2UyMCIgZmlsbD0iZnJlZXplIiBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iMDtzdmdTcGlubmVyc1B1bHNlMjEuYmVnaW4rMC42cyIgY2FsY01vZGU9InNwbGluZSIgZHVyPSIxLjJzIiBrZXlTcGxpbmVzPSIuNTIsLjYsLjI1LC45OSIgdmFsdWVzPSIwOzExIi8+PGFuaW1hdGUgZmlsbD0iZnJlZXplIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBiZWdpbj0iMDtzdmdTcGlubmVyc1B1bHNlMjEuYmVnaW4rMC42cyIgY2FsY01vZGU9InNwbGluZSIgZHVyPSIxLjJzIiBrZXlTcGxpbmVzPSIuNTIsLjYsLjI1LC45OSIgdmFsdWVzPSIxOzAiLz48L2NpcmNsZT48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIwIiBmaWxsPSJjdXJyZW50Q29sb3IiPjxhbmltYXRlIGlkPSJzdmdTcGlubmVyc1B1bHNlMjEiIGZpbGw9ImZyZWV6ZSIgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49InN2Z1NwaW5uZXJzUHVsc2UyMC5iZWdpbiswLjZzIiBjYWxjTW9kZT0ic3BsaW5lIiBkdXI9IjEuMnMiIGtleVNwbGluZXM9Ii41MiwuNiwuMjUsLjk5IiB2YWx1ZXM9IjA7MTEiLz48YW5pbWF0ZSBmaWxsPSJmcmVlemUiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGJlZ2luPSJzdmdTcGlubmVyc1B1bHNlMjAuYmVnaW4rMC42cyIgY2FsY01vZGU9InNwbGluZSIgZHVyPSIxLjJzIiBrZXlTcGxpbmVzPSIuNTIsLjYsLjI1LC45OSIgdmFsdWVzPSIxOzAiLz48L2NpcmNsZT48L3N2Zz4=");
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   width: 12rem;
   height: 12rem;
 }
 
 .mi-loader {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 38rem;
   z-index: 20;
   backdrop-filter: blur(12px);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .empty {
   display: grid;
   place-items: center;
 }
 
 .notification-wrapper {
   display: grid;
   gap: 1rem;
   grid-auto-flow: column;
   grid-template-rows: repeat(10, minmax(0, 1fr));
 }
 
 .postReaction {
   position: relative;
   text-transform: capitalize;
 }
 .postReaction span.active,
 .postReplyReaction span.active {
 color: #FFB02E !important;
 }
 .postReaction .fa-heart {
 color: white;
 background-color: red;
 padding: 5px 4px;
 border-radius: 50%;
 font-size: 12px;
 display: inline-block;
 line-height: 1;
 width: 20px;
 height: 20px;
 }
/*  
 .emoji-container {
   display: none;
   position: absolute;
   bottom: 100%; 
   left: -20px; 
   background-color: white;
   border-radius: 20px;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
   padding: 10px;
   z-index: 1;
   white-space: nowrap;
 } */
 
 .postReplyReaction {
 position: relative;
 }
 
 .emoji, .emojiReply  {
   margin: 0 5px;
   font-size: 16px;
 }
 .emoji-container a {
 text-decoration: none;
 font-size: 30px;
 border-radius: 20px;
 }
 .summary-emoji:not(:last-child) {
 margin-left: -4px;
 font-size: 18px;
 }
 .emoji-container a:hover {
 background-color: #EBEBEB;
 }
 .emoji-container a.active {
 background-color: #EBEBEB;
 }
 .postReplyReaction,
 #reactionsModalLabel {
 text-decoration: none;
 text-transform: capitalize;
 }
 
 .firstPromoterContainer .numberStats {
   font-size: 23px;
 }
 .firstPromoterContainer .mainAmount {
   font-size: 23px;
 }
 .firstPromoterContainer .icon-circle {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 48px;
   width: 48px;
   border-radius: 50%;
   background-color: #e5f7fb;
 }
 .mi-badge {
   min-height: 1rem;
   min-width: 1rem;
   top: 0.1rem;
   right: 0.1rem;
   font-size: 0.625rem;
   line-height: 1rem;
 }
 
 #messages-dd {
   width: 30rem;
   z-index: 1001;
 }
 
 #notification-dd {
   z-index: 1001;
 }
 
 .mi-tabs > a {
   display: inline-flex;
   gap: 0.25rem;
   align-items: start;
   height: 2rem;
   text-decoration: none;
   color: var(--bs-secondary);
 }
 
 .mi-tabs > a.active {
   border-bottom: 4px solid #000;
   color: #000;
 }
 
 #openChat {
   padding: 35px 0 0 0 !important;
 }
 
 #openChat .modal-dialog {
   max-width: none;
   height: 100%;
 }
 
 .rounded-top-16 {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
 }
 
 .dm-modal-sidenav {
   max-width: 320px;
   width: 100%;
   flex-shrink: 0;
 }
 
 .user-group-list > .user-group-item,
 .user-group-list > .group-chat-item {
   padding: 0.75rem 1rem;
   transition: ease all 0.3s;
 }
 
 .user-group-list > .user-group-item:hover,
 .user-group-list > .group-chat-item:hover {
   background-color: var(--bs-border-color);
 }
 
 #dm-sidebar > .dm-side-header {
   height: 6.25rem;
 }
 
 .find-user-dm {
  height: 6.25rem;
   display: grid;
   grid-auto-flow: row;
   grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
 .outline-none {
   outline: none;
 }
 
 .pulse {
   width: 100px;
   height: 100px;
   background-color: #3490dc;
   border-radius: 8px;
   animation: pulse 1.5s infinite;
   margin: 10px;
 }
 
 @keyframes pulse {
   0%,
   100% {
     opacity: 1;
   }
   50% {
     opacity: 0.5;
   }
 }
 
 .w-8 {
   width: 2rem;
 }
 
 .h-8 {
   height: 2rem;
 }
 
 .dot-loader {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMDAgMjAwJz48Y2lyY2xlIGZpbGw9JyMwMDAwMDAnIHN0cm9rZT0nIzAwMDAwMCcgc3Ryb2tlLXdpZHRoPScyJyByPScxNScgY3g9JzQwJyBjeT0nMTAwJz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBjYWxjTW9kZT0nc3BsaW5lJyBkdXI9JzInIHZhbHVlcz0nMTswOzE7JyBrZXlTcGxpbmVzPScuNSAwIC41IDE7LjUgMCAuNSAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScgYmVnaW49Jy0uNCc+PC9hbmltYXRlPjwvY2lyY2xlPjxjaXJjbGUgZmlsbD0nIzAwMDAwMCcgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzInIHI9JzE1JyBjeD0nMTAwJyBjeT0nMTAwJz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBjYWxjTW9kZT0nc3BsaW5lJyBkdXI9JzInIHZhbHVlcz0nMTswOzE7JyBrZXlTcGxpbmVzPScuNSAwIC41IDE7LjUgMCAuNSAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScgYmVnaW49Jy0uMic+PC9hbmltYXRlPjwvY2lyY2xlPjxjaXJjbGUgZmlsbD0nIzAwMDAwMCcgc3Ryb2tlPScjMDAwMDAwJyBzdHJva2Utd2lkdGg9JzInIHI9JzE1JyBjeD0nMTYwJyBjeT0nMTAwJz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBjYWxjTW9kZT0nc3BsaW5lJyBkdXI9JzInIHZhbHVlcz0nMTswOzE7JyBrZXlTcGxpbmVzPScuNSAwIC41IDE7LjUgMCAuNSAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScgYmVnaW49JzAnPjwvYW5pbWF0ZT48L2NpcmNsZT48L3N2Zz4=");
   background-repeat: no-repeat;
   background-position: center;
   width: 5rem;
   height: 3rem;
 }
 
 .user-look {
   min-width: 300px;
   z-index: 50;
 }
 
 .user-look-ups {
   max-height: 21.375rem;
   overflow: auto;
 }
 
 .user-look-ups > .user-lookup-item,
 .user-look-ups > .select2-option {
   transition: ease all 0.3s;
 }
 
 .user-look-ups > .user-lookup-item:hover,
 .user-look-ups > .select2-option:hover {
   background-color: var(--bs-border-color);
 }
 
 #active-dm {
   height: 4.25rem;
   display: flex;
   align-items: center;
   box-shadow: 0px 6px 8px -10px rgba(0, 0, 0, 0.6);
   -webkit-box-shadow: 0px 6px 8px -10px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 0px 6px 8px -10px rgba(0, 0, 0, 0.6);
 }
 
 #myTest {
   height: 180px !important;
   width: 100% !important;
 }
 
 .sidebar {
   transition: width 0.3s ease;
 }
 
 .sidebar.collapsed {
   width: 100px;
 }
 
 .sidebar.collapsed .profile-info {
   display: none;
 }
 
 .sidebar.collapsed .nav-link {
   justify-content: center;
 }
 
 .sidebar.collapsed .nav-link span {
   display: none;
 }
 
 .content-main {
   transition: margin-left 0.3s ease;
 }
 
 #sidebar .accordion-button.hideAfter {
   justify-content: center;
 }
 
 #sidebar .accordion-button.hideAfter::after {
   content: none;
 }
 
 #sidebar .accordion-item {
   border: 0 !important;
 }
 
 .clndr {
   width: 100% !important;
 }
 
 .clndr-table {
   width: 100%;
 }
 
 .clearfix {
   display: inline-block;
 }
 
 .clndr-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 0;
   overflow: hidden;
   background: #ffffff;
   font-size: 14px;
 }
 
 .month {
   font-weight: 600;
   font-size: 16px;
 }
 
 .header-day {
   display: inline-block;
   width: 14.28%;
   padding: 10px 0;
   text-align: center;
   float: left;
   font-size: 14px;
 }
 
 .day {
   height: 30px;
   padding: 4px 14px;
   min-width: 0px;
   overflow: hidden;
 }
 
 .day {
   float: left;
   width: 14.2857%;
   padding: 0px 2px;
   text-align: center;
   border-radius: 5px;
 }
 
 .day:hover {
   background-color: #e5e5e5;
 }
 
 .day.today {
   background-color: #ffc1075e;
 }
 
 .day.event > div.day-number {
   background-color: #81afe9 !important;
   color: #ffffff;
 }
 
 .day.past,
 .day.next-month {
   color: #979797;
 }
 
 .day.adjacent-month {
   background-color: #fbfbfb;
 }
 
 .day-event {
   padding: 14px 4px;
   font-size: 14px;
 }
 
 .day-number {
   font-weight: 600;
   padding: 4px 0px;
   height: 100%;
   font-size: 12px;
 }
 
 .event-a {
   color: #565656;
   text-decoration: none;
 }
 
 .event-a:hover {
   color: #000000;
   text-decoration: none;
 }
 
 .days-of-the-week {
   background-color: #f3f3f3;
 }
 
 .clndr-next-button,
 .clndr-previous-button {
   padding: 0px 30px;
   background-color: #e9e9e9;
   border-radius: 5px;
   font-weight: 400;
   font-size: 20px;
 }
 
 .counter {
   font-size: 2rem;
 }
 
 .bordered {
   border: 2px solid #eaebee;
 }
 
 .welcomeText {
   font-size: 45px;
   font-weight: 400 !important;
 }
 
 .pimpCont .chart {
   max-height: 800px;
   overflow-y: auto;
 }
 
 .comments {
   width: 100%;
   right: -100%; /* Initially hidden off the screen to the left */
   transition: left 0.3s ease;
   background-color: white;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 9999;
   height: calc(100% - 100px) !important;
 }
 
 .comments.visible {
   left: 0; /* Slide in when the class 'visible' is added */
 }
 
 .commentsHide {
   overflow: hidden;
 }
 
 .smallBox {
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 }
 .smallBox h6 {
   font-size: 14px;
 }
 
 #dm-profile {
   max-width: 22.5rem;
   width: 100%;
   flex-shrink: 0;
 }
 
 .profile-header {
   height: 6.25rem;
 }
 
 .text-xl {
   font-size: 20px;
 }
 
 .text-lg {
   font-size: 18px;
 }
 
 .text-2xl {
   font-size: 24px;
 }
 .text-3xl {
   font-size: 30px;
 }
 .action-btns > .btn:hover i {
   color: #fff !important;
 }
 
 .mi-tab-header > .mi-tab-item {
   height: 1.75rem;
   color: var(--bs-gray);
 }
 
 .mi-tab-header > .mi-tab-item.active {
   text-decoration: underline;
   font-weight: 500;
   text-underline-offset: 13px;
   text-decoration-thickness: 4px;
   color: var(--bs-dark);
 }
 
 #actionable-btns > .btn {
   color: var(--bs-gray);
 }
 #actionable-btns > .btn:hover {
   color: var(--bs-white);
 }
 .chat-area {
   width: 100%;
   min-height: 50px;
   max-height: 300px;
   overflow-y: auto;
   resize: none;
   box-sizing: border-box;
   font-size: 16px;
 }

 /* .header-icons-discussions{
    margin-right: -22% !important;
 } */
 
 .header-nav-link .nav-item{
  margin-bottom: 0;
 }
 .btn.send-chat {
   rotate: 45deg;
   width: 2.25rem;
   height: 2.25rem;
 }
 .btn.send-chat > i {
   margin-left: -3px;
 }
 
 .chat-line-item {
   margin-bottom: 1rem;
 }
 
 .chat-line-item .sender-name {
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--bs-gray-900);
 }
 
 .chat-line-item .time-sent {
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1;
   color: var(--bs-gray);
 }
 
 .chat-line-item .chat-message-content p {
   margin-bottom: 0.75rem;
 }
 
 #message-dropdown-container {
   max-block-size: 30rem;
   overflow: auto;
   min-height: 20rem;
 }
 .mi-tab-content:not(.active) {
   display: none !important;
 }
 .chat-image-profile.online {
   position: relative;
 }
 .chat-image-profile.group.is-default img {
   border-radius: 99999px;
   overflow: hidden;
   border: 3px solid #aaaaaa;
 }
 .chat-image-profile.is_group.is-default img {
   overflow: hidden;
   border: 2px solid #aaaaaa;
 }
 .chat-image-profile.online::after {
   content: "";
   display: block;
   position: absolute;
   bottom: -21px;
   right: -19px;
   width: 0.9375rem;
   height: 0.9375rem;
   border-radius: 50%;
   background-color: var(--bs-success);
   border: 2px solid white;
 }
 .unread-counter {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 1rem;
   min-width: 1rem;
   font-size: 0.625rem;
   line-height: 1rem;
   border: 1px solid var(--bs-gray-300);
 }
 .chat-date-header::after,
 .chat-date-header::before {
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background-color: var(--bs-gray-300);
   margin: 0.5rem 0;
 }
 .modal-chat-item.read .unread-indicator,
 .user-group-item.read .unread-indicator,
 .group-chat-item.read .unread-indicator {
   display: none;
 }
 .user-group-item.active,
 .group-chat-item.active {
   background-color: var(--bs-border-color);
 }
 #create-group-chat {
   min-height: 6.25rem;
 }
 
 .select2-item-selected .select2-user-img {
   border-radius: 50%;
   overflow: hidden;
 }
 
 .select2-item-selected .close-wrapper {
   top: 0;
   right: 0;
   background-color: var(--bs-border-color);
   padding: 4px;
 }
 
 .select2-item-selected .close-wrapper .btn-close {
   border-radius: 50%;
   outline: none;
   box-shadow: none;
   width: 0.75rem;
   height: 0.75rem;
   padding: 0;
   border: 0;
   font-size: 24px;
 }
 .select2-item-selected .close-wrapper .btn-close:focus {
   box-shadow: none;
   outline: none;
 }
 .mi-select2selected .btn-close {
   width: 0.875rem;
   height: 0.875rem;
   box-shadow: none;
   outline: none;
 }
 .mi-select2-option.selected-lookup {
   background-color: var(--bs-border-color);
 }
 .avatar-group {
   display: flex;
   flex-wrap: wrap;
   max-inline-size: 16rem;
 }
 .avatar-group-item--tooltip {
   --bs-tooltip-bg: var(--bs-blue);
   --bs-tooltip-color: var(--bs-white);
 }
 .avatar-group-item {
   width: 2rem;
   height: 2rem;
 }
 .avatar-group-item:not(:first-child) {
   margin-left: -0.5rem;
 }
 .avatar-group-item:hover {
   z-index: 10;
 }
 .avatar-group-item img,
 .avatar-group-item .group-members-count {
   border-radius: 9999px;
   box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
     rgb(255, 255, 255) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
   background-color: var(--bs-white);
 }
 .avatar-group-item .group-members-count {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   border: 1px solid var(--bs-gray-300);
   font-size: 14px;
   font-weight: 600;
   color: var(--bs-secondary);
 }
 #gc-profile {
   flex-shrink: 0;
 }
 #gc-profile .gc-profile-content {
   width: 22.5rem;
 }
 .group-profile-photo {
   width: 6rem;
   height: 6rem;
 }
 .group-profile-photo.is-default img {
   border: 2px solid var(--bs-border-color);
 }
 .group-profile-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 9999px;
 }
 .gc-profile-content .nav-link {
   border: 0;
   background-color: transparent;
   color: var(--bs-gray);
 }
 .gc-profile-content .nav-link.active {
   border-bottom: 2px solid var(--bs-primary);
   color: #000;
 }
 
 #modal-rsb-btns .nav-link {
   border: 0;
   background-color: transparent;
   color: var(--bs-gray);
 }
 #modal-rsb-btns .nav-link.active {
   border-bottom: 3px solid var(--bs-black);
   color: #000;
 }
 #modal-rsb-tab-content .tab-pane.active.show {
   display: flex;
   flex-direction: column;
 }
 #modal-rsb-tab-content .tab-pane .group-chat-item,
 #modal-rsb-tab-content .tab-pane .user-group-item {
   padding: 0.75rem 1rem;
   transition: ease all 0.3s;
 }
 #modal-rsb-tab-content .tab-pane .group-chat-item:hover,
 #modal-rsb-tab-content .tab-pane .user-group-item:hover {
   background-color: var(--bs-border-color);
 }
 .z-3 {
   z-index: 30;
 }
 #global-cropper img {
   max-width: 100%;
   display: block;
 }
 .-mx-3 {
   margin-left: -1rem;
   margin-right: -1rem;
 }
 .mounted-member {
   transition: all 0.3s ease;
 }
 .mounted-member:hover {
   --bs-bg-opacity: 0.1;
   background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity));
 }
 .mounted-member .remove-member {
   background-size: 50%;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .mounted-member:hover .remove-member {
   opacity: 1;
   visibility: visible;
 }
 
 .gmm-search-user:focus-within,
 .gmm-search-user:focus-within {
   outline: 0;
   box-shadow: none;
 }
 .mx-h-sm {
   max-block-size: 147px;
 }
 .transition-default {
   transition: ease all 0.3s;
 }
 #search-users-results button:hover {
   background-color: var(--bs-border-color);
 }
 #group-info-toggle:hover {
   color: var(--bs-primary);
 }
 .group-profile-btns button:hover {
   background-color: rgba(var(--bs-primary-rgb), 0.33) !important;
 }
 .animateFadeFromTop {
   animation: fadeEnterFromTop 500ms ease 0s 1 normal both;
 }
 @keyframes fadeEnterFromTop {
   0% {
     opacity: 0;
     transform: translateY(-60px);
   }
 
   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }
 .animateSlideOutLeft {
   animation: slideOutLeft 500ms ease 0s 1 normal forwards;
 }
 @keyframes slideOutLeft {
   0% {
     opacity: 1;
     transform: translateX(0);
   }
 
   100% {
     opacity: 0;
     transform: translateX(-250px);
   }
 }
 .animateSlideInRight {
   animation: slideInRight 500ms ease 0s 1 normal forwards;
 }
 @keyframes slideInRight {
   0% {
     opacity: 0;
     transform: translateX(-250px);
   }
 
   100% {
     opacity: 1;
     transform: translateX(0);
   }
 }
 #modal-body-search-user {
   min-block-size: 16rem;
 }
 .add-img-btn-close {
   top: -0.5rem;
   right: -0.5rem;
   outline: var(--bs-secondary) solid 1px;
 }
 .add-img-btn-close button {
   background-size: 50%;
   width: 0.75rem;
   height: 0.75rem;
 }
 
 .dashboard .rightSidebar p {
   font-size: 14px !important;
 }
 .dashboard p {
   font-size: 16px !important;
 }
 
 .dashboard p {
   font-size: 16px !important;
 }
 .swal2-actions button {
   min-width: 90px;
 }
 .firstPromoterContainer {
   background-color: #f4f8fb;
 }
 .firstPromoterContainer .signup-form {
   height: 80vh;
   padding: 2rem;
 }
 
 /* Loader overlay */
 .loader-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999; /* Ensure it's on top */
   visibility: hidden; /* Initially hidden */
   opacity: 0;
   transition: visibility 0s, opacity 0.3s ease;
 }
 
 /* Loader spinner */
 .spinner-border {
   width: 3rem;
   height: 3rem;
 }
 
 /* Show loader */
 .loader-overlay.show {
   visibility: visible;
   opacity: 1;
 }
 
 /*  large breakpoint      */
 @media (max-width: 992px) {
   .firstPromoterContainer p.fw-bold.text-sm {
     font-size: 0.595rem;
   }
   .firstPromoterContainer .px-4 {
     padding-right: 0px !important;
     padding-left: 0px !important;
   }
   .firstPromoterContainer div.col-10.bg-white {
     width: 100% !important;
   }
   div.group-parent-wrapper #comm-main {
     width: 100%; 
   }
   .canvas-container {
     margin-bottom: 1rem;
   }
 }
 @media (max-width: 600px) {
   .firstPromoterContainer span.text-secondary.text-sm {
     font-size: 0.875rem !important;
   }
   .firstPromoterContainer span {
     font-size: 0.875rem !important;
   }
 }
 @media (min-width: 992px) {
   div.stats .stat-item h6 {
    font-size: 12px;
   }
 }
 @media (max-width: 576px) {
   .firstPromoterContainer div.d-flex.align-items-center.justify-content-center {
     justify-content: flex-start !important;
   }
 }
 .group-uploaded-image img {
   object-fit: cover;
 }
 
 .course-title {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
   margin-bottom: 0px;
 }
 .course-list-wrapper p.classroom-desc {
   margin-bottom: .5rem;
   font-size: 13px;
   font-family: "Open Sans", sans-serif !important;
 }
 .review-summary-section a {
   text-decoration: none;
 }
 .leave-review-wrapper i {
   font-size: 1.2rem;
 }
 #ratingModal .modal-header {
   border-bottom: none;
 }
 #ratingModal .modal-body {
   padding-top: 0px;
 }
 #ratingModal #btnDeleteReview {
   border-radius: 0px;
 }
 
 .modal-header {
     display: flex;
     justify-content: center;
 }
 .modal-title {
     flex-grow: 1;
     text-align: center;
     font-weight: bold;
     font-size: 1.55rem;
 }
 .stars-rating {
   display: flex;
   justify-content: center;
   margin-bottom: 1rem;
 }
 
 .star-rating {
   font-size: 50px;
   color: #ddd;
   cursor: pointer;
   padding: 0 5px;
   line-height: 45px;
 }
 
 .star-rating.selected {
   color: #FFA500;
 }
 .star-rating.star-highlight {
   color: #f4c01e;
 }
 .rating-testimonial {
   width: 100%;
   padding: .5rem;
   border: 1px solid #979899;
   border-radius: .4rem;
 }
 .btn-black, .btn-black:hover, .btn-black:active {
   border-radius: 0px;
   color: #fff;
   background-color: #000;
 }
 div#ratingModal p#review-subtitle {
     font-size: 1.2em; 
     color: #333;
     text-align: center;
     margin-top: 1rem;
     font-weight: bold;
     margin-bottom: 0px;
 }
 
 .badge-custom {
   display: inline-flex;
   align-items: center;
   padding: 0.4rem .75rem;
   font-size: 14px;
   margin: 0.25rem;
   border-radius: 20px;
 }
 .badge-custom svg {
   width: 22px;
   height: 22px;
   margin-right: 0.5rem;
 }
 .notification-wrapper{
     display: grid;
     gap: 1rem;
     grid-auto-flow: column;
     grid-template-rows: repeat(10, minmax(0, 1fr));
 }
 .social-icon-wrapper {
   width: 50px;
   display: inline-block;
 }
 .social-url-wrapper {
   display: inline-block;
 }
 #socialLinksModal .input-group-text {
     width: 250px;
     text-align: left; 
 }
 
 section.pimpCont strong {
   font-weight: 600;
 }
 
 section.pimpCont ul li .bi-check-circle {
     color: green;
 }
 
 section.pimpCont input:checked + .sliderContent:before {
   background-image: url('/includes/infohare-assets/PR-ON.png');
 }
 section.pimpCont .sliderContent:before {
   background-image: url('/includes/infohare-assets/US-ON.png');
 }
 section.pimpCont .lead {
   font-size: 16px !important
 }
 
 div.propertyListing .carousel-item , .carousel-item img{
     height:100%;
 }
 
 div.propertyListing .propert-listing-address {
   font-size: 14px;
 }
 
 div.propertyListing .carousel-item img{
     width: 100%; /* Ensure images fill their containers */
     height: 100%; /* Ensure images fill their containers */
     object-fit: cover; /* Maintain aspect ratio and cover container */
     border-radius: 10px; /* Rounded corners for a softer look */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
 
     /* Apply soft pastel effect with a semi-transparent overlay */
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(255, 255, 255, 0.6); /* Adjust opacity and color for the pastel effect */
     pointer-events: none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 div.propertyListing .carousel-inner{
     height:100%;
      /* max-height:320px; */
 }
 div.propertyListing .property-item{
     height:auto;
     padding: 2px;
 }
 div.propertyListing .bg-pastel-blue {
     background-color: #E0F7FA;
 }
 
 div.propertyListing .bg-pastel-green {
     background-color: #E0F8E0;
 }
 
 div.propertyListing .bg-pastel-yellow {
     background-color: #FFFDE7;
 }
 
 div.propertyListing .bg-pastel-orange {
     background-color: #FFE0B2;
 }
 
 div.propertyListing .text-pastel-dark {
     color: #3C3C3C;
 }
 
 div.propertyListing .img-fluid {
     max-width: 100%;
     height: auto;
 }
 
 div.propertyListing .shadow {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 div.propertyListing .btn-outline-primary {
     border-color: #64B5F6;
     color: #64B5F6;
     background-color: #E3F2FD;
     border-width: 2px;
     font-weight: bold;
 }
 
 div.propertyListing .btn-outline-primary:hover {
     background-color: #64B5F6;
     color: #fff;
 }
 
 div.propertyListing .bg-white {
     background-color: #FFFFFF;
 }
 
 /* Define very soft pastel colors */
 div.propertyListing .badge:nth-of-type(1) {
   background-color: #FCE4EC; /* Soft pink */
   color: #D81B60; /* Darkened text color for contrast */
 }
 div.propertyListing .badge:nth-of-type(2) {
   background-color: #E1F5FE; /* Soft blue */
   color: #0288D1; /* Darkened text color for contrast */
 }
 div.propertyListing .badge:nth-of-type(3) {
   background-color: #FFF3E0; /* Soft yellow */
   color: #FFB74D; /* Darkened text color for contrast */
 }
 div.propertyListing .badge:nth-of-type(4) {
   background-color: #F5F5F5; /* Soft grey */
   color: #616161; /* Darkened text color for contrast */
 }
 div.propertyListing .badge:nth-of-type(5) {
   background-color: #E0F7FA; /* Soft aqua */
   color: #00838F; /* Darkened text color for contrast */
 }
 div.propertyListing .badge:nth-of-type(6) {
   background-color: #EDE7F6; /* Soft lavender */
   color: #7E57C2; /* Darkened text color for contrast */
 }
 div.propertyListing .badge:nth-of-type(7) {
   background-color: #FFE0B2; /* Soft apricot */
   color: #FF8F00; /* Darkened text color for contrast */
 }
 div.propertyListing .badge:nth-of-type(8) {
   background-color: #DCEDC8; /* Soft sage */
   color: #558B2F; /* Darkened text color for contrast */
 }
 
 /* Style for the badges */
 div.propertyListing .badge {
   display: inline-block;
   padding: 8px 12px;
   border-radius: 20px;
   font-weight: bold;
   margin-right: 10px;
   margin-bottom: 10px;
   text-align: center;
   text-transform: uppercase;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease-in-out;
 }
 
 /* Hover effect */
 div.propertyListing .badge:hover {
   transform: translateY(-2px);
 }
 div.propertyListing .gridView .property-item{
     height:auto;
 }
 div.propertyListing .gridView .carousel{
     height:200px!important;
 }
 div.propertyListing .gridViewDetails {
     display:none;
 }
 div.propertyListing .gridView .gridViewDetails {
     display:block;
 }
 div.propertyListing .gridView .listViewDetails {
     display:none!important;
 }
 div.propertyListing .boxes{
     width: 33.33%;
   background: #C6DEF1!important;
   border: 1px solid color(srgb 0.8027 0.8203 0.8357) !important;
   border-radius: 10px;
   font-size: 1rem;
   max-width: 100%;
   word-wrap: break-word;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
   font-weight:600!important;
 }
 div.propertyListing .filter-container {
     width: 100%;
     max-width: 600px;
     margin-bottom: 40px;
     padding: 20px;
     background: #fff;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     margin-top: 55px;
     position: sticky;
     top: 10px;
     overflow-x: auto;
     height: 100vh;
 }
 
 div.propertyListing .slider-container {
     margin-bottom: 20px;
 }
 
 div.propertyListing .filter-container label {
     font-size: 16px;
     font-weight: 600;
     margin-top: 25px;
     display: block;
     // color: #007bff;
 }
 
 div.propertyListing .slider {
     position: relative;
     width: 100%;
     margin: 0;
     margin-top:-10px;
 }
 
 div.propertyListing input[type="range"] {
     -webkit-appearance: none;
     width: 100%;
     height: 5px;
     background: transparent;
     position: relative; /* Changed from absolute to relative */
     pointer-events: none;
 }
 
 div.propertyListing input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 20px;
     height: 20px;
     background: white;
     border: 2px solid color(srgb 0.9543 0.4889 0.136); /* Adjust the border width and color */
     border-radius: 50%;
     cursor: pointer;
     pointer-events: all;
     position: relative; /* Changed from absolute to relative */
     z-index: 1;
     transform: translateX(-50%); /* Added to center the thumb */
     display: flex; /* Use flexbox for centering the dot */
     justify-content: center; /* Center the dot horizontally */
     align-items: center; /* Center the dot vertically */
     background: white radial-gradient(circle at center, color(srgb 0.9543 0.4889 0.136) 3px, transparent 4px);
 }
 
 div.propertyListing input[type="range"].rangeMax::-webkit-slider-thumb {
  transform: translateY(-80%); /* Cehorizontally */
 }
 div.propertyListing input[type="range"].rangeMin::-webkit-slider-thumb {
 transform: translateY(40%); /* Cehorizontally */
 /*   transform: translateX(10%); */
 }
 
 div.propertyListing .slider-track {
     position: absolute;
     width: 100%;
     height: 5px;
     background: #ddd;
     top: 50%;
     transform: translateY(-50%);
     z-index: 0;
     border-radius: 5px;
 }
 
 div.propertyListing .inputs {
     display: flex;
     justify-content: space-between;
     // margin-top: 20px;
 }
 
 div.propertyListing .inputs input {
     width: 20%;
     padding: 5px;
     border: 1px solid #ddd;
     border-radius: 5px;
 }
 
 div.propertyListing .items-container {
   width: 100%;
   max-width: 600px;
 }
 
 div.propertyListing .item {
   width: 100%;
   padding: 20px;
   margin: 10px 0;
   background: #fff;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   text-align: center;
   transition: transform 0.2s;
 }
 
 div.propertyListing .item:hover {
     transform: scale(1.02);
 }
 
 div.propertyListing .gridView .numberOfDays{
   right:0!important;
   left:unset!important;
 }
 
 div.propertyListing .gridView .carousel-item img{
   border-bottom-right-radius: 0;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 0;
 }
 
 div.propertyListing .numberOfDays{
  height: 40px;
  width: auto;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  background: #FFA07A;
  color: #fff;
  font-size: 12px;
 }
 aside.rightSidebar {
   padding-right: 0px;
 }
 
 .affiliate-performance-overview div#chart-container .statistics-item {
     display: flex;
     align-items: center;
     padding: 15px;
     border: 1px solid #f0f0f0;
     border-radius: 8px;
     margin-bottom: 15px;
     flex-direction: column;
     text-align: center;
 }
 .affiliate-performance-overview .statistics-icon {
     width: 30px;
     height: 30px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: #107DE5;
     background-color: #e0f2ff;
     margin-bottom: 10px;
 }
 .affiliate-performance-overview .statistics-details {
     font-size: 14px;
 }
 .affiliate-performance-overview .statistics-value {
     font-weight: bold;
     color: #28a745;
 }
 #pimp-dark-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.20);
     z-index: 10;
     pointer-events: none;
 }
 
 .activity.pimpCont {
     position: relative;
     z-index: 20; 
     background: white; 
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
     padding-left: 0px;
     padding-right: 0px;
 }
 .activity.pimpCont .pimp-wrapper {
   height: 50px;
   /* background: #c5c5c585; */
   background: color(srgb 0.79 0.88 0.98);
 }
 .pimpCont {
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 15px
 }
 div.pimp-helper.popup-actions {
   position: fixed;
   top: 100px;
   left: calc(50% + 200px);
   background: white;
   border: 1px solid #ddd;
   padding: 10px;
   border-radius: 8px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   z-index: 25;
   display: none;
   width: 300px;
 }
 
 div.pimp-helper .popup-title {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
     color: black;
     text-align: center;
     border-bottom: 1px solid #ddd;
     padding-bottom: 5px;
 }
 
 div.pimp-helper .action-btn {
     background-color: #0D6EFD;
     color: white;
     border: none;
     padding: 5px 10px;
     margin: 5px 0;
     border-radius: 4px;
     cursor: pointer;
     width: 100%;
     display: block;
     text-align: center;
 }
 
 div.pimp-helper .skip-btn {
     background-color: #E86642;
     color: white;
     border: none;
     padding: 5px 10px;
     margin: 5px 0;
     border-radius: 4px;
     cursor: pointer;
     width: 100%;
     display: block;
     text-align: center;
 }
 
 .no-scroll {
   overflow: hidden;
 }
 
 div#trending-communities-wrapper a, div#trending-post-wrapper a, div#fullStatsTrendingPost-Wrapper a {
   text-decoration: none;
   color: var(--bs-body-color);
   font-size: 12px;
 }
 
 div#trending-communities-wrapper h6, div#trending-post-wrapper h6 {
   width: 100%;
   /* white-space: nowrap; */
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .trending-score {
   font-size: 18px;
   font-weight: 700;
 }
 
 img.banner {
   max-height: 300px;
   object-fit: cover;
 }
 
 .affiliate-link-section #copy-feedback {
     transition: opacity 1s ease-in-out;
 }
 
 .pimptutorial-filter-bar {
   display: flex;
   gap: 10px;
   padding: 10px;
   background-color: #ffffff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
 }
 
 .pimptutorial-search-input {
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
 }
 
 .pimptutorial-search-input input {
   width: 100%;
   height: 40px;
   padding: 0 12px 0 36px; 
   border: 1px solid #e1e6f2;
   border-radius: 6px;
   font-size: 14px;
   color: #646f90;
   background-color: #fff;
 }
 
 .pimptutorial-search-input i {
   position: absolute;
   left: 12px;
   color: #a0aec0;
   font-size: 16px;
 }
 
 .pimptutorial-filter-dropdown {
   width: 150px;
   font-size: 14px;
 }
 
 .pimptutorial-filter-dropdown .select2-container--default .select2-selection--single {
   height: 40px;
   border: 1px solid #e1e6f2;
   border-radius: 6px;
   padding: 0 12px;
   display: flex;
   align-items: center;
   font-weight: 500;
   color: #646f90;
   background-color: #f4f6fa;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
 .pimptutorial-filter-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered {
   color: #646f90;
 }
 
 .pimptutorial-filter-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
   color: #a0aec0;
 }
 
 
 .pimpCont .slider-large {
     width: 100%;
     height: 16px;
     appearance: none;
     background: rgba(50, 50, 50, 0.8) !important;
     border-radius: 8px; 
     outline: none;
 }
 
 .pimpCont .slider-large::-webkit-slider-thumb {
     appearance: none;
     width: 24px !important;
     height: 24px !important;
     background: #0078ff !important;
     border: 2px solid #ffffff !important;
     border-radius: 50% !important;
     cursor: pointer;
 }
 
 .pimpCont .slider-large::-moz-range-thumb {
     width: 24px;
     height: 24px;
     background: #0078ff; 
     border: 2px solid #000;
     border-radius: 50%;
     cursor: pointer;
 }
 
 .pimpCont .slider-large::-ms-thumb {
     width: 24px;
     height: 24px;
     background: #0078ff;
     border: 2px solid #ffffff;
     border-radius: 50%;
     cursor: pointer;
 }
 .pimpCont .fontTime {
   font-size: 12px;
   color: black;
 }
 
 .pimpCont .CseekBar.slider-large {
     flex-grow: 1;
     height: 20px;
     background: rgba(50, 50, 50, 0.8);
     border-radius: 10px;
     appearance: none;
     outline: none;
     margin: 0;
 }
 
 .pimpCont .CcurrentTime, .pimpCont .Cduration {
     font-size: 14px; 
     color: #333;
     white-space: nowrap;
 }
 
 .pimpCont .d-flex {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
 .container-fluid main {
   padding-left: 2rem;
 }
 .header-menu,
 .community-navbar {
   max-width: 1600px;
   margin-left: auto;
   margin-right: auto;
 }
 .dashboard-container,
 .community-size {
   padding-right: 0px;
 }
 .container-fluid.dashboard-container div.row {
   margin-right: 0px !important;
 }
 
 .counter-wrapper .card h6 {
     text-align: center;
     font-size: 0.9rem;
     margin: 0.5rem 0;
     min-height: 3rem; /* Reserve space for two to three lines */
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 /*Responsive Styles*/
 
 @media only screen and (max-width : 1200px) 
 {
   .top-performers div.col-3 {
     width: 50%;
   }
   .top-performers div.col-9 {
     width: 50%;
     padding-right: calc(var(--bs-gutter-x) * 1) !important;
   }
   .sidebar {
     position: static !important;
   }
   div.group-parent-wrapper .mainsidebarcont {
     width: 100%;
   }
 }
 
 @media only screen and (max-width : 425px) 
 {
   .course-list-wrapper .top-controller {
     padding-left: 0px;
     padding-right: 0px;
   }
   .course-list-wrapper .top-controller .add-classroom a {
     width: 100%;
   }
   .btn-listLesson {
     margin-right: -5px !important;
   }
   .course-list-wrapper .add-classroom a {
     font-size: 14px;
     display: block;
     margin-top: .5rem;
   }
   .course-list-wrapper .add-classroom div.d-flex.justify-content-end.align-items-end {
     align-items: initial!important;
     justify-content: initial!important;
     display: block!important;
   }
 }
 
 /* Smartphones (portrait) ---------------- */
 @media only screen and (max-width : 320px)
 {
   .top-performers div.col-3 {
     width: 100%;
   }
   .top-performers div.col-9 {
     width: 100%;
     padding-right: calc(var(--bs-gutter-x) * 1) !important;
   }
   .p-5 {
     padding: 1rem 1rem !important;
   }
   section.top-performers .row.p-3.py-5 {
     margin-right: 0px !important;
     margin-left: 0px !important;
     padding: 0px !important;
   }
   .top-performers div.row.p-3.py-5 div.col-3 h4, .top-performers div.row.p-3.py-5 div.col-3 p {
     padding: 1rem !important;
   }
   #trending-post-wrapper a {
     width: 100% !important;
   }
 }
 
 /* Smartphones (landscape) ---------------- */
 @media only screen and (min-width : 321px) and (max-device-width : 768px)
 {
   #trending-post-wrapper a,
   #trending-post-wrapper .card.border.align-items-center.justify-content-center {
     width: 20% !important;
   }
 
   .top-performers div.col-3 {
     width: 100%;
   }
   .top-performers div.col-9 {
     margin-top: 2rem;
     width: 100%;
     padding-right: calc(var(--bs-gutter-x) * 1) !important;
   }
 }
 
 /* Old Desktops and laptops ------------------ */
 @media only screen and (min-width : 1025px) 
 {
   section.affiliate-performance-overview #chart-container div.col {
     width: 50%;
     min-width: 50%;
     max-width: 50%;
     flex: 1 0 0%;
   }
 }
 
 @media (min-width: 1200px) {
     .col-xl-7 {
         flex: 0 0 auto;
         width: 63.33333333%;
     }
     .col-xl-3 {
         flex: 0 0 auto;
         width: 20%;
     }
     #sidebar {
       width: 18.666667%;
     }
     .main-content-container {
       width: 61.333333%;
     }
     div.group-parent-wrapper #comm-main,
     .profile-page-content,
     .community-main,
     .friendContentWrappers {
       width: 81.59%;
     }
     .mainsidebarcont,
     .community-sidebar,
     .friendTabWrappers {
       width: 21.5%;
       max-width: 18.41%;
     }
 
     li.nav-item a.nav-link.interact-btn.active{
       color: white;
       background: radial-gradient(circle at 50% -250%, #ffffff, #0074e3);
     }
 
     li.nav-item a.nav-link.interact-btn.active span.interact-btn.active{
       color: white;
     }
 }
 
 
 
 /* Desktops ------------------ */
 @media only screen and (min-width : 1201px) 
 {
   section.affiliate-performance-overview #chart-container div.col {
     width: 50%;
     min-width: 50%;
     max-width: 50%;
     flex: 1 0 0%;
   }
 
   div.stats .stat-item h6 {
    font-size: 14px;
   }
 }
 
 .top-performers div.col-9 .d-flex.flex-wrap.gap-3 {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem; 
 }
 
 .top-performers div.col-9 .d-flex.flex-wrap.gap-3 .card {
     flex: 1 1 calc(20% - 1rem);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     min-width: 100px; 
     max-width: 120px;
     padding: 1rem;
     border: 1px solid #ccc;
     border-radius: 8px;
 }
 
 .top-performers div.col-9 .d-flex.flex-wrap.gap-3 .card img {
     max-width: 100px;
     margin-bottom: 0.5rem;
 }
 
 .top-performers div.col-9 .d-flex.flex-wrap.gap-3 .card h6 {
     margin: 0.5rem 0;
 }
 
 .top-performers div.col-9 .d-flex.flex-wrap.gap-3 .card p {
     margin: 0.5rem 0;
 }
 
 .top-performers div.col-9 .d-flex.flex-wrap.gap-3 .trending-score {
     margin-top: 1rem;
     font-size: 1.5rem;
 }
 
 .top-performers div.col-9 .d-flex.flex-wrap.gap-3 .stats-card {
     flex: 1 1 calc(20% - 1rem);
     background-color: #007bff;
     color: white;
     text-align: center;
     padding: 1rem;
     cursor: pointer;
 }
 #desktop-menu-wrapper div a i {
   font-size: 17.6px;
}
 @media (max-width: 767px) {
   .top-performers div.col-9 .d-flex.flex-wrap.gap-3 .card {
       flex: 1 1 calc(50% - 1rem);
       margin-bottom: 1.5rem;
   }
   .top-performers div.col-9 .d-flex.flex-wrap.gap-3 {
     justify-content: center;
     gap: 0.5rem; 
   }
   #desktop-menu-wrapper {
     display: none !important;
   }
   #mobile-menu-wrapper {
     display: block !important;
   }
   #mobile-menu-wrapper ul li {
     padding-bottom: .5rem;
   }
   .stat-item h6 {
     gap: .2rem!important;
   }
   .nav-search form {
     width: 100% !important;
   }
   .top-performers .desktop-break {
     display: none;
   }
   .course-list-wrapper .viewStyle {
     display: none;
   }
   .course-list-wrapper .gridType {
     display: none!important;
   }
   .course-list-wrapper .listType.d-none {
     display: block!important;
   }
 }
 @media (min-width: 768px) {
   #desktop-menu-wrapper {
     display: flex !important;
   }
   #mobile-menu-wrapper {
     display: none !important;
   }
 }
 
 @media (max-width: 480px) {
     .top-performers div.col-9 .card {
         flex: 1 1 calc(100% - 1rem); 
         margin-top: 1.5rem;
     }
     .top-performers div.col-9 .d-flex.flex-wrap.gap-3 {
         justify-content: center; 
         gap: 0.5rem; 
     }
     section .topImage {
       width: 80px;
       height: 80px;
     }
     .top-performers .py-5 {
       padding: 2rem .5rem !important;
     }
 }
 
 .counter-wrapper {
     flex-wrap: wrap;
     justify-content: center;
 }
 
 /* SmallBox Cards: Flexible and responsive widths */
 .smallBox {
     flex: 1 1 calc(20% - 1rem);
     max-width: calc(20% - 1rem);
     min-width: 90px;
     height: auto;
     text-align: center;
 }
 
 #fullStatsTrendingCommunityModal .smallBox {
     flex: 1 1 calc(23% - 1rem);
     max-width: calc(23% - 1rem);
 }
 
 /* Responsive Adjustments */
 
 /* Medium screens (e.g., tablets) */
 @media only screen and (max-width: 820px) {
     .smallBox {
         flex: 1 1 calc(33.33% - 1rem); /* Fit three cards per row */
         max-width: calc(33.33% - 1rem);
     }
     .post-author-wrapper {
       display: block;
     }
     .post-author-wrapper .post-avatar {
       width: 10%;
       display: inline-block;
     }
     .post-author-wrapper  .post-name {
       width: 41%;
       display: inline-block;
     }
     .post-author-wrapper  #showbadgesForm {
       width: 38%;
       display: inline-block;
     }
     .post-author-wrapper  .post-action {
       width: 7%;
       display: inline-block !important;
     }
 }
 
 @media only screen and (min-width: 820px) {
     .post-author-wrapper .post-action {
       width: 10% !important;
     }
 }
 
 @media only screen and (max-width: 620px) {
     .post-author-wrapper .post-avatar {
       width: 10%;
       display: inline-block;
     }
     .post-author-wrapper  .post-name {
       width: 87%;
       display: inline-block;
     }
     .post-author-wrapper  #showbadgesForm {
       width: 80%;
       display: inline-block;
     }
     .post-author-wrapper  .post-action {
       width: 15%;
       display: inline-block !important;
     }
 }
 
 @media only screen and (max-width: 540px) {
     .post-author-wrapper  .post-name {
       padding-left: 1.5rem !important;
     }
 }
 
 /* Small screens (e.g., mobile) */
 @media only screen and (max-width: 480px) {
     .smallBox {
         flex: 1 1 calc(50% - 1rem);
         max-width: calc(50% - 1rem);
     }
     main div.bg-white.py-4.rounded {
       padding: .5rem !important;
     }
 }
 
 /* Extra-small screens (very narrow devices) */
 @media only screen and (max-width: 360px) {
     .smallBox {
         flex: 1 1 calc(100% - 1rem);
         max-width: calc(100% - 1rem);
     }
     .community-thread-wrapper {
       padding-right: 0px;
       padding-left: 0px;
     }
 }
 .stats {
     display: flex;
     gap: 1rem; 
     justify-content: space-between;
     align-items: flex-start; 
 }
 
 .stat-item {
     flex: 1;
     max-width: 150px;
     text-align: center;
 }
 .canvas-container {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 
 @media only screen and (max-width: 1199px) {
   aside#sidebar {
     display: none;
   }
   .view-post-page {
     width: 100% !important;
   }
   div.group-parent-wrapper #comm-main {
     width: 100%;
     padding-right: 0px;
   }
 }
 
 .bishshlap-button {
   margin-left: 1.4rem;
   text-decoration: none;
   font-size: 25px !important;
   display: inline-block;
   justify-content: center;
   align-items: center;
   transition: transform 0.3s ease;
 }
 
 .bishshlap-button:hover,
 .bishstar-button:hover {
   animation: pulse 0.6s infinite;
   color: #FFC83D;
 }

 .bishstar-button {
      color: #FFC83D;
      text-decoration: none;
      font-size: 25px !important;
      display: inline-block;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease;
 }

 .post-footer a.bishshlap-button {
   margin-left: 0px;
 }
 
 .post-name a {
   color: #000;
   text-decoration: none;
 }
 
 @keyframes pulse {
   0%, 100% {
     transform: scale(1);
   }
   50% {
     transform: scale(1.2);
   }
 }
 
 #enrolled-course-container .community-card,
 #my-communities-container .community-card,
 #other-communities-container .community-card {
   border-radius: 10px;
   text-align: left;
 }
 #enrolled-course-container .community-card img{
   max-width: 70px;
   height: auto;
   margin-bottom: 10px;
   object-fit: cover;
   width: 60px;
   height: 40px;
   border-radius: 5px;
 }
 
 #my-communities-container .community-card img,
 #other-communities-container .community-card img {
   max-width: 70px;
   height: auto;
   /* margin-bottom: 6px; */
   object-fit: cover;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   margin-left: 2%;
   padding: 3px;
   /* width: 60px;
   height: 40px; */
   /* border-radius: 5px; */
 }

.main-menu-container.collapsed #my-communities-container .community-card img,
 .main-menu-container.collapsed #other-communities-container .community-card img {
   margin-left: 11%;
 }
 
 .default-avatar-community-icon {
   width: 32px;         
   height: 32px;        
   background-color: #007bff; 
   color: white;       
   font-size: 17px;        
   font-weight: bold;      
   display: flex;       
   justify-content: center; 
   align-items: center;  
   border-radius: 50%;     
   text-transform: uppercase; 
 }
 
 #enrolled-course-container .community-card,
 #my-communities-container .community-card,
 #other-communities-container .community-card {
     color: black;
     text-decoration: none;
 }
 #enrolled-course-container .community-card h5,
 #my-communities-container .community-card h5,
 #other-communities-container .community-card h5 {
   font-size: 16px;
   font-weight: 400;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
 }
 #enrolled-course-container .see-more-btn,
 #my-communities-container .see-more-btn,
 #other-communities-container .see-more-btn {
     display: inline-flex;
     align-items: center;
     text-decoration: none;
     padding-left: .5rem;
     font-size: 18px;
     transition: color 0.3s ease-in-out;
 }
 
 #enrolled-course-container .see-more-btn:hover,
 #my-communities-container .see-more-btn:hover,
 #other-communities-container .see-more-btn:hover {
     color: #0056b3;
 }
 
 #my-communities-container .see-more-btn .fa-caret-down,
 #other-communities-container .see-more-btn .fa-caret-down {
     font-size: 20px;
     background-color: #DDDDDD;
     color: #999999;
     border-radius: 50%;
     padding: 8px;
     width: 25px;
     height: 25px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 16px;
 }

#enrolled-course-container .see-more-btn .fa-caret-down {
     font-size: 20px;
     background-color: #DDDDDD;
     color: #999999;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 8px;
 }
 
 #enrolled-course-container .see-more-text {
     font-size: 16px;
     margin-left: 20px;
 }
 
 #my-communities-container .see-more-text,
 #other-communities-container .see-more-text {
     font-size: 16px;
     margin-left: 10px;
 }
 
 #enrolled-course-container .see-more-btn .fa-caret-down,
 #my-communities-container .see-more-btn .fa-caret-down,
 #other-communities-container .see-more-btn .fa-caret-down {
     margin-right: 10px;
 }
 
 #my-communities-container .see-more-btn .fa-caret-down,
 #other-communities-container .see-more-btn .fa-caret-down {
   margin-left: 10px !important;
 }
 
 #openChat #copyPopup {
   top: 200px;
 }
 
 #openChat #chat-comment-wrapper,
 #openChat #chat-post-wrapper {
   max-height: 620px;
   overflow-y: scroll;
 }
 
 #openChat .group-chat-member-item,
 #global-members-manager .mounted-member {
   cursor: pointer;
 }
 
 .lesson-table-of-content .accordion-collapse {
   height: auto !important;
 }
 
 
 .footer-top {
   background: #494949;
   min-height: 16px;
 }
 
 .footer-bottom {
   background: #272727;
   min-height: 50px;
 }
 .footer-top h6 {
  font-size: 14px;
  margin-bottom: 1rem;
  color: #99A0A6;
}

.footer-top a {
  font-size: 14px;
}

.footer-top ul {
  padding-left: 0;
}

.footer-top ul li {
  margin-bottom: 0.25rem;
}

.footer-top ul li a:hover {
  text-decoration: underline;
}

.custom-1st-column-width .main-menu-container .retractable-menu:focus {
   color: #fff;
}
.custom-1st-column-width .main-menu-container .retractable-menu:focus {
   color: #fff;
}
.custom-1st-column-width .custom-nav-list-item a{
  padding:11px;
}
.custom-1st-column-width .custom-nav-list-item {
   list-style: none;
   line-height: 1;
   margin: 0;
   height: 37px;
   margin-bottom: 6px;
}
.custom-1st-column-width ul.custom-nav-list-profile.collapsed .custom-nav-list-item{
  justify-content: center;
  display: flex;
}

.custom-1st-column-width ul.custom-nav-list-profile.collapsed .custom-nav-link-community{
  margin-bottom: 0 !important;
}

.custom-1st-column-width ul.custom-nav-list-profile {
    padding-left: 0px !important;
}

.pinned-communities .sidebar {
   position: fixed !important;
   right: 10px;
   top: 25%;
   transform: translateY(-25%);
   padding: 5px;
   border-radius: 10px;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   z-index: 1000;
   width: auto; 
   height: auto !important; 
   min-width: 50px;
   gap: 10px;
 }

 .pinned-communities .sidebar-icon img {
   width: 40px;
   height: 40px;
   object-fit: contain;
   transition: transform 0.3s ease;
   border-radius: 50%;
   object-fit: cover;
 }

 .pinned-communities .sidebar-icon:hover img {
   transform: scale(1.1);
 }

.feed-card.view-post.post-active {
   /* border: 3px solid #74BB67 !important; */
}
/* Container for all notifications */
 #notification-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 10000;
     width: 350px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 /* Base style for an individual notification */
 .notification {
     position: relative;
     display: flex;
     align-items: center;
     padding: 15px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: #fff;
     overflow: hidden; /* Important for the progress bar */
     border-left: 5px solid transparent;
     opacity: 0.95;
     transform: translateX(100%);
     transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
 }

 /* Animation for showing the notification */
 .notification.show {
     transform: translateX(0);
 }
 
 /* Icon styling */
 .notification-icon {
     flex-shrink: 0;
     margin-right: 12px;
     width: 24px;
     height: 24px;
 }

 /* Message text styling */
 .notification-message {
     flex-grow: 1;
     font-size: 15px;
     line-height: 1.4;
 }

 /* Close button styling */
 .notification-close {
     position: absolute;
     top: 8px;
     right: 8px;
     background: none;
     border: none;
     color: inherit;
     font-size: 20px;
     font-weight: bold;
     cursor: pointer;
     opacity: 0.7;
     transition: opacity 0.2s;
 }

 .notification-close:hover {
     opacity: 1;
 }
 
 /* Progress bar that shows time remaining */
 .notification-progress {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 4px;
     width: 100%;
     background-color: rgba(255, 255, 255, 0.3);
 }

 /* Type-specific styles */
 .notification.success {
     background-color: #2d3748; /* Dark Gray-Blue */
     border-left-color: #48bb78; /* Green */
 }

 .notification.error {
     background-color: #2d3748; /* Dark Gray-Blue */
     border-left-color: #f56565; /* Red */
 }

 .notification.info {
     background-color: #2d3748; /* Dark Gray-Blue */
     border-left-color: #4299e1; /* Blue */
 }

#deal-dispoaid-submenu .side-menu-text,
#deal-dispoaid-submenu .submenu-link {
  display: inline-block;
  max-width: 119px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}