:root{
    --lightgrey: #e6ecf0;
    --spacing:15px;
    --spacing-small:3px;
    --spacing-medium:7px;
    --spacing-large:12px;
    --theme-blue:#064bb1;
    --grey-text:rgb(101,119,134);
    --grey-ButtonText:rgb(0,0,0,0.34);
    --small-icont-text-size: 12px;
    --red:rgb(226,34,94);
    --red-background:rgb(226,34,94,0.1);
    --green-background:rgb(23,191,99,0.1);
}
html,body{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    height: 81vh;
    /* background-color: orange; */
}
.text-blue{
    color: var(--theme-blue);
}
button{
    background-color: transparent;
    border: none;
    color: var(--grey-ButtonText);
}
a{
    text-decoration: none;
}
*{
    outline-color: var(--mo-dark);
}
.wrapper{
    /* display: flex; */
    /* flex-direction: column; */
    height: 100%;
  /* background:green; */
}
.row{
    height: 100%;
  /* background: red; */
}
nav .nav-icon{
    color: #000;    
}
.h-one{
    font-size: 19px !important;
    font-weight: 800;
    margin: 0;
}
nav .navLinks{
    position: fixed;
}
/* correct nav spacing on smaller screens */
@media (max-width: 440px) {
    .navLinks{
        left: 0;
        z-index: 0;
    }
}
@media (max-width: 320px) {
    .navLinks{
        left: -5px;
        z-index: 0;
    }
}
@media (max-width: 250px) {
    .navLinks{
        left: -10px;
        z-index: 0;
    }
}
/* end correct nav spacing on smaller screens */

nav a{
    display: flex;
    padding: 10px 0px 10px 8px;
    font-size: 20px;
    /* width: 35px; */
    /* height: 35px; */
    align-items: center;
    justify-content: start;
    text-decoration: none;
}
nav a.logo-icon{
    font-size: 30px;
}
nav a .nav-icons{
    width: 25px;
}
nav a .nav-icon-label{
    margin-left: 10px;
    font-size: medium;
    color: #000;
}

nav a .Kornekt-communities{
    font-size: 18px;
    /* color: #10caf078; */
    color: var(--mo-gray-400);
    transform: rotate(-15deg)

}
nav a .Kornekt-communities:hover{
    font-size: 18px;
    /* color: #10caf078; */
    color: var(--mo-gray-100);
    transform: rotate(-45deg)

}
nav a .Kornekt-communities-k{
    font-size: 18px;
    margin-left: -11px;
    /* transform: rotate(45deg) */
}
nav a .Kornekt-communities-n{
    font-size: 17px;
}
/* nav a span{
    border:1px solid red;
} */
a:hover{
    background: var(--mo-primary);
    border-radius: 10px;
    color: #000 !important;
}
.mainSectionContainer{
    padding: 0;
    border-left: 1px solid var(--lightgrey);
    border-right: 1px solid var(--lightgrey);
    display: flex;
    flex-direction: column;
    max-width: 600px;
    min-height: 100vh;
  /* height:100%; */
}
.titleContainer{
    height: 53px;
    padding: 0 var(--spacing);
    display: flex;
    align-items: center;
    border-bottom:1px solid var(--lightgrey);
    flex-shrink: 0;
}
.titleContainer h1{
    flex: 1;
}

.post{
    display: flex;
    flex-direction: column;
    padding: var(--spacing-large) var(--spacing);
    cursor: pointer;
    border-bottom: 1px solid var(--lightgrey);
    flex-shrink: 0;
}

.post .mainContentContainer{
    flex: 1;
    display: flex;
}
.post .postContentContainer{
    padding-left: var(--spacing);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.post .postContentContainer .pinnedPostLabel{
    font-size: small;
    color: var(--grey-text);
}

.post .postHeader .displayName{
    font-weight: 600;
    font-size: 15.5px;
}
.post .postHeader a:hover{
    text-decoration: underline;
}
.post>.postHeader> a, .post>.postHeader> span{
    padding-right:5px;
}
.post .postHeader .username,.post .postHeader .date{
    color: var(--grey-text);
    font-size: smaller;
}
.post .postBody .postContent{
    font-size: smaller;
}
.post .postFooter{
    display: flex;
    align-items: center;
}
.post .postFooter .postButtonContainer{
    flex: 1;
    display: flex;
}
.post .postFooter .postButtonContainer button{
    padding: 0 5px;
}
.post .postFooter .postButtonContainer .commentButton:hover{
    background-color: #d4edff;
    /* color: var(--mo-primary); */
    padding: 2px;
    border-radius: 20%;
}
.post .postFooter .postButtonContainer .likeButton .likeColor:hover{
    background-color: var(--red-background);
    background-color: var(--mo-danger-border-subtle);
    /* color: var(--mo-primary); */
    padding: 2px;
    border-radius: 20%;
}
.post .postFooter .postButtonContainer .repostButton .repostColor:hover{
    background-color: var(--green-background);
    background-color: var(--mo-success-border-subtle);
    /* color: var(--mo-primary); */
    padding: 2px;
    border-radius: 20%;
}

.fa-heart.liked {
    color: var(--mo-danger);
}
.numberofLikes{
    margin-left: var(--spacing-small);
    font-size: var(--small-icont-text-size);
}
.numberofReposts{
    margin-left: var(--spacing-small);
    font-size: var(--small-icont-text-size);
}

.repostedBy{
    margin-bottom: 13px;
}
.repostedBy a{
    color: var(--grey-text);
    padding: 1px 6px; 
    font-size: small;
}
.repostedBy .repostIcon{
    font-size: 12px;
}
.replyFlag{
    margin-bottom: 5px;
    margin-top: -3px;
    font-size: 12.5px;
    color: var(--grey-text);
    background: #aaaba20d;
    width: fit-content;
    border: 1px solid #6168050d;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.replyFlag a{
    color: var(--grey-text);
    padding: 1px 4px; 
}
.replyFlag a.l3{
    color: var(--mo-info);
}
.replyFlag a.l2{
    /* color: var(--theme-blue); */
}
.replyFlag a.l1{
    color: var(--mo-purple);

}
/* for post page */
.post.largeFont .postBody, .post.largeFont .postFooter{
    font-size: 18px;
}

/*post options*/

.postOptions .dropdown-item{
    padding: var(--spacing-medium) var(--spacing);
    font-size: small;
}
.postOptions .dropdown-item span{
    margin-left: var(--spacing);
}

/* delete modal*/ /*AND*/ /*pin post modal*/
#deleteModal, #pinPostModal,#unpinPostModal{
    margin-top: 150px;
}
#deleteModal .modal-content, #pinPostModal .modal-content, #unpinPostModal .modal-content{
    width: 300px;
    margin:0 auto;
    padding: var(--spacing);
}
#deleteModal .modal-content .modal-header, #pinPostModal .modal-content .modal-header,  #unpinPostModal .modal-content .modal-header{
    border-bottom: none;
    padding-bottom: 0;
}
#deleteModal .modal-content .modal-body, #pinPostModal .modal-content .modal-body, #unpinPostModal .modal-content .modal-body{
    padding-top: 0;
    font-size: small;
}
#deleteModal .modal-content .modal-body .actionContainer, #pinPostModal .modal-content .modal-body .actionContainer, #unpinPostModal .modal-content .modal-body .actionContainer{
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}
#deleteModal .modal-content .modal-body .actionContainer button, #pinPostModal .modal-content .modal-body .actionContainer button, #unpinPostModal .modal-content .modal-body .actionContainer button{
    margin-bottom: var(--spacing-small);
}


/*alert toast*/
#toast-container
{
  position: fixed;
  bottom: 0;
  z-index: 999;
  overflow: visible !important;
}
.toast-container
{
  position: fixed;
  bottom: 0;
  z-index: 999;
  overflow: visible !important;
}

.alert-link{
    color:blue;
    font-size: small;
}
.alert-link:hover{
    color:#000
}
/* profile not found */
.notFound{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: stretch;
    margin: 0 auto;
    padding: var(--spacing);

}
.notFound a{
    margin-top: var(--spacing-medium);
}
/* profile page */

.profileHeaderContainer .coverPhotoContainer{
    height: 180px;
    background-color: var(--mo-primary-bg-subtle);
    position: relative;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.profileHeaderContainer .coverPhotoContainer .coverPhotoImageContainer{
    flex: 1;
    /* background-color: rgb(23,191,99,0.5); */
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.profileHeaderContainer .coverPhotoContainer .coverPhotoImageContainer img {
    flex: 1;
    /* object-fit: contain;the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box */
    object-fit: cover; /*ensures the image covers the entire container*/
    /* object-position: center; /*centers the image horizontally and vertically */
    width: 100%; /*scales the image to the width of the container */
    /* height: 100%; scales the image to the height of the container */
    max-height: 180px
  }
.profileHeaderContainer .coverPhotoContainer .coverPhotoImageContainer .changeCoverPhotoContainer{
    /* background: green; */
    position: absolute;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.profileHeaderContainer .coverPhotoContainer .coverPhotoImageContainer .changeCoverPhotoContainer .coverPhotoButton{
    /* position: absolute; */
    font-size: 50px;
    top: 45px;
    left: 40%;
    /* color: rgba(0, 0, 0, 0.5); */
    /* margin: 0 auto; */
    display: none;
}
.profileHeaderContainer .coverPhotoContainer .coverPhotoImageContainer:hover .coverPhotoButton{
    display: inline-block;
}

.profileHeaderContainer .userImageContainer{
    height: 132px;
    width: 132px;
    margin-left: var(--spacing);
    background-color: var(--mo-primary-bg-subtle);
    position: absolute;
    bottom: -66px;
    border-radius: 10px;
    border: 1px solid silver;

    display: flex;
    align-items: center;
}
.profileHeaderContainer .userImageContainer img{
    border: 4px solid #fff;
}
.profileHeaderContainer .userImageContainer .changeProfilePicContainer{
    /* background: green; */
    position: absolute;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.profileHeaderContainer .userImageContainer .changeProfilePicContainer .profilePictureButton{
    /* position: absolute; */
    font-size: 50px;
    color: rgba(0, 0, 0, 0.5);
    left:0;
    display: none;
}
.profileHeaderContainer .userImageContainer:hover .profilePictureButton{
    display: block;
}
.profileHeaderContainer .profileButtonsContainer{
    display: flex;
    justify-content: end;
}

.profileHeaderContainer .profileButtonsContainer .profileButton, .profileButton.followButton{
    margin: var(--spacing-medium);
    border: 1px solid silver;
    padding: 0 var(--spacing-medium);
    border-radius: 10px;
}
@media screen and (max-width: 768px) {
    .profileHeaderContainer .profileButtonsContainer .profileButton, .profileButton.followButton{
        margin: var(--spacing-small);
    }
}

.profileHeaderContainer .profileButtonsContainer .profileButton .profileOptions .dropdown-item{
    padding: var(--spacing-medium) var(--spacing);
    font-size: small;
}
.profileHeaderContainer .profileButtonsContainer .profileButton .profileOptions .dropdown-item span{
    margin-left: var(--spacing-medium);
    /* border: 1px solid red; */

}
.profileHeaderContainer .profileButtonsContainer .profileButton .profileOptions .dropdown-item .profileOptionsIcon{
    /* border: 1px solid red; */
    width: 20px;
}

.profileHeaderContainer .profileButtonsContainer .profileButton.followButton, .profileButton.followButton{
   /* background: var(--mo-dark); */
   font-size: 14px;
   font-weight: 600;
   padding: 4px 16px 0 16px;
   display: flex;
   justify-content: center;
   min-height: 32px;
   cursor: pointer;
   
}
.profileHeaderContainer .profileButtonsContainer .profileButton.followButton.notFollowing, 
.profileButton.followButton.notFollowing, 
.notInCommunity{
    background: var(--mo-dark);
    color: white;
}
.profileHeaderContainer .profileButtonsContainer .profileButton.followButton.following, 
.profileButton.followButton.following,
.inCommunity{
    background: var(--mo-light);
    color: var(--mo-dark);
}
.profileHeaderContainer .profileButtonsContainer .profileButton.followButton:hover,.profileButton.followButton:hover{
    background: var(--mo-primary);
    color: black;
 }

.userDetailsContainer{
    display: flex;
    flex-direction: column;
    padding: var(--spacing);
    margin-top: var(--spacing);

}
.userDetailsContainer .displayName{
    font-size: medium;
    font-weight: 800;
}
.userDetailsContainer .displayUsername{
    font-size: smaller;
    color: var(--grey-text);

}
.userDetailsContainer .displayDescription{
    margin-top: var(--spacing-medium);
    font-size: smaller;
}
.userDetailsContainer .followersContainer{
    font-size: small;
}
.userDetailsContainer .followersContainer a:hover{
    background: none;
    border-bottom: 1px solid black;
}
.userDetailsContainer .followersContainer span:not(.value){
    margin-right: 15px;
    color: var(--grey-text);
}
.userDetailsContainer .followersContainer .value{
    font-weight: 600;
    margin-right: 2px;
}

.tabsContainer{
    display: flex;
    border-bottom: 1px solid var(--lightgrey);
    /* justify-content: space-evenly; */
    /* padding: 0 var(--spacing) var(--spacing-large) var(--spacing); */
}
.tabsContainer .tab{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey-text);
    font-size: smaller;
    font-weight: 600;
    padding: var(--spacing-medium);

}
.tabsContainer .tab:hover{
    border-radius: 0;
}
.tabsContainer .tab.active{
    color: #000;
    border-bottom: 4px solid var(--mo-primary);
}
.tabContentContainer{
    /* width: 100%; */
    /* background: blue; */
    position: relative;
}
.tabContentContainer .postsContainer,
.tabContentContainer .repliesContainer,
.tabContentContainer .mediaContainer,
.tabContentContainer .likesContainer{
    width: 100%;
    position: absolute;
    /* top: 0; */
    left: 0;

}
.tabContentContainer .postsContainer{
    /* background-color: grey; */
}

.tabContentContainer .repliesContainer{
    /* background-color: green; */
}


.tabContentContainer .mediaContainer{
    /* background-color: var(--mo-primary); */
}

.tabContentContainer .likesContainer{
    /* background-color: yellow; */
}

.tabContentContainer .pinnedContainer{
    /* background-color: var(--mo-primary) */
    /* border-bottom: 2px solid var(--mo-primary-bg-subtle); */
}







/* extra */
/* ////////options button */
.optionsButton{
    /* background-color: var(--mo-btn-bg); */
    padding: 1px 5px;
    border: var(--mo-btn-border-width) solid var(--mo-btn-border-color);
    box-shadow:none;
    color: var(--grey-text);
    /* transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
}


.userWidgetContainer{
    display: flex;
    padding: var(--spacing);
    align-items: center;
}
.userWidgetContainer .widgetProfile .displayName{
    flex: 1;
}
.userWidgetContainer .widgetProfileContainer{
    flex: 1;
    color: #000;
    padding-left: var(--spacing);
}
.userWidgetContainer .widgetProfileContainer:hover{
    text-decoration: none;
    background-color: transparent;
}
.userWidgetContainer .widgetProfileContainer .displayName{
    font-weight: 600;
    font-size: 15.5px;
    min-width: 100px !important;
}
.userWidgetContainer .widgetProfileContainer .username{
    color: var(--grey-text);
}
.userWidgetContainer .widgetButtonContainer{
    display: block;
   width: 100px !important;
}

.imagePreviewContainer{
    /* max-width: 300px; */
    /* max-height: 300px; */
}
.imagePreviewContainer .imagePreview{
    /* this style is important */
    display: block;
    width:100%;
    height: auto;
    max-width:100%;

    /* object-fit: cover; */
}


/*search bar / *v//*  */

.searchBarContainer{
    position: relative;
    color: var(--grey-text);
    padding: 10px var(--spacing);
}

.searchBarContainer .searchIcon{
    position: absolute;
    top: 16px;
    left: 20px;
}

.searchBarContainer #searchBox, .searchBox{
    height: 36px;
    width: 100%;
    padding: 5px 15px 5px 35px;
    border-radius: 10px;
    background-color: var(--lightgrey);
    border: none;
    color: var(--grey-text);
}

.plus{
    font-size: 11px;
    margin:0 0 5px 0;
}

/* chat page */
.newMessage .chatPageContainer{
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.newMessage .chatPageContainer .chatTitleBar{
    border-bottom: 1px solid var(--lightgrey);
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: var(--spacing);
}
.newMessage .chatPageContainer .chatTitleBar label{
    margin-right: 5px;
}
.newMessage .chatPageContainer .chatTitleBar #userSearchTextBox{
    border: none;
    flex: 1;
    font-weight: 400;
    min-width: 350px;
    margin-left: 5px;
}
.newMessage .chatPageContainer .chatTitleBar #userSearchTextBox:focus{
   /* outline: 2px solid var(--lightgrey) */
   outline: none;
}

.newMessage .chatPageContainer .chatTitleBar #selectedUsers{
   
}
.newMessage .chatPageContainer .chatTitleBar #selectedUsers .selectedUser{
   font-weight: 300;
   background-color: var(--mo-primary-border-subtle);
   padding:3px 5px;
   margin-left: 4px;
   border-radius: 4px;
}

.newMessage .resultsContainer{

}
.newMessage #createChatButton, #createCommunityButton, #createPetButton{
    display: block;
    background-color: var(--mo-primary);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 5px 15px;
    margin: 10px auto;
    
}
.newMessage #createChatButton:disabled, #createCommunityButton:disabled, #createPetButton:disabled{
    background-color: var(--mo-primary-border-subtle);
    color: var(--mo-gray-500);
}

/* .profileButton.followButton{
    margin: var(--spacing-medium);
    border: 1px solid silver;
    padding: 0 var(--spacing-medium);
    border-radius: 10px;
} */
/* .profileButton.followButton.chatUserButton.add{
    background: var(--mo-success);
    color: white;
}
.profileButton.followButton.chatUserButton.remove{
    background: var(--mo-danger);
    color: var(--mo-light);
}
.profileButton.followButton.chatUserButton.remove:hover{
    background: var(--mo-primary);
    color: black;
 } */


 /* chat list */

 .chatListItem{
    padding: var(--spacing-medium) var(--spacing);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--lightgrey);
    color: #000;
    /* font-weight: 300; */
 }

 .chatListItem:hover{
    background-color: var(--mo-primary-bg-subtle);
 }

 .chatListItem .chatDetailsContainer{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 10px;
 }

 .chatListItem .chatDetailsContainer .chatHeading{
    font-weight: 500;
    display: flex;
 }
 
 .chatListItem .chatDetailsContainer .chatHeading .chatNameUsername{
    max-width: 30px;
    overflow: hidden;
    margin-top: -10px;
 }
 .chatListItem .chatDetailsContainer .chatHeading .chatNameUsername:hover{
    overflow:unset;
    z-index: 999;
 }
 .chatListItem .chatDetailsContainer .chatHeading .chatNameUsername small{
    background-color: var(--lightgrey);
    color: var(--grey-text);
    padding: 0 3px 0 1px;
    border-radius: 5px;

 }
 .chatListItem .chatListImageContainer{
    width: 40px;
    height: 40px;
    position: relative;
    margin-right: 10px;
    display: flex;
    align-items: center;
    padding: 3px;
 }
 .chatListItem img{
    height: 100%;
    width: 100%;
    border-radius: 40%;
    border: 2px solid white;
 }
 .chatListItem .otherImagesCount{
    width: 65%;
    height: 65%;
    background-color: var(--lightgrey);
    border-radius: 40%;
    border: 2px solid white;
    position: absolute;
    margin: 0;
    bottom: 0;
    padding: 2px 2px 2px 5px;
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-text);
 }
 .chatListItem .chatListImageContainer.groupChatImage img{
    height: 60%;
    width: 60%;
    position: absolute;
    margin: 0;
    bottom: 0;
    z-index: 3;
 }
 .chatListItem .chatListImageContainer.groupChatImage img:first-of-type{
    top: 8px;
    right: 5px;
    border-radius: 50%;
 }
 .chatListItem .chatListImageContainer.groupChatImage img:nth-of-type(3){
    top:0;
    right: 0;
    z-index: 2;
    border-radius: 50%;
 }

 .chatListItem .chatListImageContainer.groupChatImage .otherImagesCount{
    left: 24px;
    bottom: 0;
    z-index: 1;
 }


 .chatListItem .chatDetailsContainer .latestMessage{
    color:var(--grey-text);
    font-size: 12px;
    padding-left: 2px;

 }
.ellipsis{
    white-space: nowrap;
    /* width: 100%; */
    overflow: hidden;
    text-overflow: ellipsis;
}
 .chatMessage{
    height: 100%;
   /* background:blue; */
}
.chatMessage .mainContentContainer{
    height: calc(100% - 90px);
    overflow: hidden;
  /* background:black; */
}
.chatMessage .mainContentContainer .chatContainer{
     flex: 1;
     display: flex;
     flex-flow: column wrap;
     justify-content: space-between;
     overflow-y: auto;
     height: calc(100%);
}
.chatMessage .mainContentContainer .chatContainer .chatMessages{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--spacing) var(--spacing);
    font-size: 14px;
}
.chatMessage .mainContentContainer .chatContainer .chatMessages .single-message{
    display: flex;
    width: 100%;
}
.chatMessage .mainContentContainer .chatContainer .chatMessages .my-text-container{
    flex:1;
    display: flex;
    justify-content: end;

}
.chatMessage .mainContentContainer .chatContainer .chatMessages .other-text-container{
    flex:1;
    display: flex;
    justify-content: start;
}
.chatMessage .mainContentContainer .chatContainer .chatMessages .my-text-container .my-text{
    border-radius: 10px 0 10px 10px;
    max-width: 55%;

}
.chatMessage .mainContentContainer .chatContainer .chatMessages .other-text-container .other-text{
    border-radius: 0 10px 10px 10px;
    max-width: 55%;
    min-width: 14%;
    position: relative;
    /* padding-top: var(--spacing)!important; */

}

.chatMessage .mainContentContainer .chatContainer .footer{
    display: flex;
    padding: var(--spacing-small);
    flex-shrink: 0;
    background-color: #fff;
    /* background-color: var(--mo-primary-border-subtle); */
    /* border: 2px solid red; */
    position: fixed;
    bottom: 0vh;
    max-width: 570px
}
.chatContainer .footer textarea{
    flex: 1;
    resize: none;
    /* resize: vertical; */
    /* background-color: rgba(0, 0, 0, 0.05); */
    background-color: var(--mo-gray-300);
    
    border-radius: 10px;
    padding: var(--spacing-medium) var(--spacing-large);
    height: 40px;
    /* background-color: var(--mo-primary-border-subtle); */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7.3px);
-webkit-backdrop-filter: blur(7.3px);
border: 1px solid rgba(255, 219, 153, 0.6);
    /* border: none; */
}

.chatContainer .footer button{
    /* flex: 0.5; */
    /* background-color: transparent; */
    color: var(--mo-primary);
    font-size: 24px;
    background: radial-gradient(#00346b10, transparent);
}

/* edit cchatname modal */

#changeChatNameTextarea{
    width: 100%;
    margin-bottom: var(--spacing);
}

.sendMessageButton .fa-paper-plane{
    color: var(--mo-dark);
    background-color: var(--mo-primary);
    padding: 7px;
    border-radius: 10px;
    /* font-size: 1.5em; */
  }

  .sendMessageButton:disabled .fa-paper-plane{
    color: var(--mo-gray-500);
    background-color: transparent;

    /* font-size: 1.5em; */
  }

  /* messaging */

  .my-text{
    
  }
  .sender-image{
    width: 30px;
  }
  .sender-image img{
    width: 100%;
    border-radius: 10px;
  }
  .sender-name{
    font-size: small;
    position: absolute;
    left: 0;
    top: -18px;
    color: var(--grey-text);
    font-weight: 400;
    /* background-color: #00000045; */
    /* padding: 0 3px 0 3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px; */
    
  }

  .loadingSpinnerContainer,.loadingSpinnerContainer.active{
    position: relative;
    z-index: 999;
  }
  .loadingSpinnerContainer.not-active{
    display: none;
  }
  .spinnerBg{
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .spinner {
    position: absolute;
    top: 24vh;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    box-shadow: 20px 0px 0 0 rgba(138,199,5,0.2), 16.2px 11.8px 0 0 rgba(138,199,5,0.4), 6.2px 19px 0 0 rgba(138,199,5,0.6), -6.2px 19px 0 0 rgba(138,199,5,0.8), -16.2px 11.8px 0 0 #8ac705;
    animation: spinner-b87k6z 1s infinite linear;
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  @keyframes spinner-b87k6z {
     to {
        transform: rotate(360deg);
     }
  }

  /* .dots {
    width: 9.6px;
    height: 9.6px;
    background: #88cc00;
    color: #88cc00;
    border-radius: 50%;
    box-shadow: 16px 0,-16px 0;
    animation: dots-u8fzftsm 1.2s infinite linear alternate;
 }
 
 @keyframes dots-u8fzftsm {
    0% {
       box-shadow: 16px 0,-16px 0;
       /* background: ; */
   /* }
 
    33% {
       box-shadow: 16px 0,-16px 0 rgba(136,204,0,0.13);
       background: rgba(136,204,0,0.13);
    }
 
    66% {
       box-shadow: 16px 0 rgba(136,204,0,0.13),-16px 0;
       background: rgba(136,204,0,0.13);
    }
 } */
 .dots {
    width: 4.6px;
    height: 4.6px;
    background: #bdff30;
    color: #bdff30;
    border-radius: 50%;
    box-shadow: 16px 0,-16px 0;
    animation: dots-u8fzftsm 1.2s infinite linear alternate;
 }
 
 @keyframes dots-u8fzftsm {
    0% {
       box-shadow: 16px 0,-16px 0;
       /* background: ; */
    }
 
    33% {
       box-shadow: 16px 0,-16px 0 rgba(189,255,48,0.13);
       background: rgba(189,255,48,0.13);
    }
 
    66% {
       box-shadow: 16px 0 rgba(189,255,48,0.13),-16px 0;
       background: rgba(189,255,48,0.13);
    }
 }
 .other-text.typing{
    min-width: 75px!important;
    height: 0px!important;
    border-radius: 5px!important;
    /* background-color: #0000009c!important; */

 }
 .other-text.typing .dots{
   margin-left: 27px;
   margin-top: -3px;
 }
/* Notification list using or extends chatList */
.notification.seen{
 background-color: inherit;
}
.notification.not-seen{
    background-color: var(--lightgrey);
}
.markAllAsSeen {
    background-color: var(--mo-primary-bg-subtle)!important;
    font-weight: 300;
    cursor: pointer;
}
.markAllAsSeen:hover{
    background-color: var(--mo-primary)!important;
}
/* badges */
.notifications-badge, .messages-badge{
    font-weight: 400;
    font-size: 10px;
    position: absolute;
}
/* for some reason this one is just messed up a bit */
.notifications-badge{
    padding-bottom: 4px;
}

.hidden{
    display: none;
}
/* unread messages in chatlist/inbox */
.unreadMessages{
    font-weight: 300;
    font-size: 11px;
}






/* ///displaying post media */

.post .postMediaContainer{
    width: 100%;
    /* height: 100px; */
}
.oneImage{
    max-width: 100%;
    border-radius: 10px;
    margin-top: 1px;
    margin-bottom: 1px;
}
.post .postMediaContainer.twoContainer{
    display: flex;
}
.post .postMediaContainer.threeContainer{
    display: flex;
    flex-direction: column;
    position: relative;
}
.post .postMediaContainer.fourContainer{
    display: flex;
    flex-direction: column;
    position: relative;
}
.post .postMediaContainer.threeContainer .twoContainer{
    display: flex;
}
.post .postMediaContainer.fourContainer .twoContainer{
    display: flex;
    position: relative;
}
.singleImageContainer{
    width: 50%;
    border-radius: 10px;
    margin-top: 1px;
    margin-bottom: 1px;
    max-height: 140px;
    overflow: hidden;
    display: flex;
    position: relative;
}
.singleImageContainer img,.singleImageContainer video{
    width: 100%;
    height: auto; /* Optional: maintain aspect ratio */
    object-fit: cover; /* Adjust as needed */
    border-radius: 10px;
}
.post .postMediaContainer.fourContainer .twoContainer .twoImage{
    border-radius: 0;
    border-right: 1px solid white;
}
.post .postMediaContainer.fourContainer .twoContainer .twoImage.img-one{
    border-top-left-radius: 10px;
}
.post .postMediaContainer.fourContainer .twoContainer .twoImage.img-two{
    border-top-right-radius: 10px;
}
.post .postMediaContainer.fourContainer .twoContainer .twoImage.img-three{
    border-bottom-left-radius: 10px;
    border-right: 1px solid white;
}
.post .postMediaContainer.fourContainer .twoContainer .twoImage.img-four{
    border-bottom-right-radius: 10px;
}

.extraOne{
    /* width: 50%; */
    background: gray;
    color: white;
    font-size: large;
    font-weight: 500;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* margin-top: -20px; */
    text-align: center;
    align-items: center;
    opacity: 0.7;
    height: 100%;
    width: 25%;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.extraOne:hover{
    background-color: var(--mo-dark);
}
.random-extraOne{
    /* width: 50%; */
    background: gray;
    color: white;
    font-size: large;
    font-weight: 500;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* margin-top: -20px; */
    text-align: center;
    align-items: center;
    opacity: 0.9;
    height: 100%;
    width: 25%;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 2px solid;
}
.random-extraOne.extra-3{
    left: 0;
}
.random-extraOne:hover{
    background-color: var(--mo-dark);
}




/* CUSTOM CHECKBOX */
.checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
}

.checkbox-container label {
    cursor: pointer;
    display: flex;
    margin-left: 10px;
}

.checkbox-container input[type='checkbox'] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
}

.checkbox-container label::before {
    content: '';
    height: 25px;
    width: 25px;
    border-radius: .15em;
    margin-right: .5em;
    border: 2px solid var(--mo-gray-500);
    border-radius: 7px;
    background-color: white;
    position: absolute;
    left: 0;
    top: 1px;
}

.checkbox-container label:hover::before,
.checkbox-container input[type='checkbox']:hover + label::before {
    background-color: var(--mo-primary-border-subtle);
}

.checkbox-container input[type='checkbox']:focus + label::before {
    box-shadow: 0 0 10px var(--mo-primary);
}

.checkbox-container input[type='checkbox']:disabled + label,
.checkbox-container input[type='checkbox']:disabled {
    color: #aaa;
    cursor: default;
}

.checkbox-container input[type='checkbox']:checked + label::before {
    content: '\002714';
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.checkbox-container input[type='checkbox']:disabled + label::before {
    background-color: #ccc;
    border-color: #999;
}
/* /////////////////////////// */




.communityImagePreview{
    display: none;
}
/* community list */
.communityListItem{
    display: flex;
    padding: var(--spacing);
    margin-top: 10px;
    font-size: small;
    font-weight: 400;
}
.communityListItem :hover{
}
.communityListImageContainer{
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.communityListImageContainer img{
    flex: 1;
    width: 100%;
    height: auto; /* Optional: maintain aspect ratio */
    object-fit: cover; /* Adjust as needed */
    border-radius: 10px;
}
.communityDetailsContainer{
    display: flex;
    flex-direction: column;
    color: #000;
}
.communityDetailsContainer .description{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--grey-text);
}

/* community page */

.communityPageNameContainer .displayName{
    font-weight: 700;
    padding: var(--spacing-small) var(--spacing);

}
.communityPageDetailsContainer{
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-small) var(--spacing);
}
.communityPageDetailsContainer .followersContainer .followersLink .followersValue,.followersPlural {
    font-size: small;
    font-weight: 600;
    color: #000;
    margin-right: 3px;
}
.followersPlural{
    color: var(--grey-text);
}
.dropdown-item{
    cursor: pointer;
}

/* update community */
textarea.communityNameInput{
    flex: 1;
    resize: none;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: var(--spacing-medium) var(--spacing-large);
    height: 40px;
}

/* HTML: <div class="loader"></div> */
/* <div class="loading-container"><span class="media-loader"></span></div> */
.loading-container{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.media-loader {
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 0 0 #0004;
    animation: l2 1.5s infinite linear;
    position: relative;
  }
  .media-loader:before,
  .media-loader:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 #0004;
    animation: inherit;
    animation-delay: -0.5s;
  }
  .media-loader:after {
    animation-delay: -1s;
  }
  @keyframes l2 {
      100% {box-shadow: 0 0 0 40px #0000}
  }


  /* animal details card */

  .animal-card{
    margin-top: 3px;
    cursor: pointer;
    background-color: var(--mo-primary-bg-subtle);
  }
  .animal-card:hover{
    background-color: black;
    color: #fff;
  }

  /* image loader */
.image-loader{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* <div class="lds-ring"><div></div><div></div><div></div><div></div></div> */
.lds-ring,
.lds-ring div {
  box-sizing: border-box;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* HTML: <div class="loader"></div> */
.simple-loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid lightblue;
    border-right-color: orange;
    animation: l2 1s infinite linear;
  }
  @keyframes l2 {to{transform: rotate(1turn)}}


  /* Petfolio page and discover pets */

  /* community list */
.petListItem{
    display: flex;
    flex-direction: column;
    padding: var(--spacing-medium) 1px;
    margin-top: 10px;
    font-size: small;
    font-weight: 400;
}
.petListItem :hover{
}
.petListImageContainer{
    width: 100%;
    max-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.petListImageContainer img{
    flex: 1;
    width: 100%;
    height: auto; /* Optional: maintain aspect ratio */
    object-fit: cover; /* Adjust as needed */
    border-radius: 10px 10px 0 0;
}
.petDetailsContainer{
    display: flex;
    flex-direction: column;
    color: #000;
}
.petDetailsContainer .description{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--grey-text);
}
.petDetailsContainer .petLikes{
    color: var(--mo-purple);
}
/* pet page */
.petPageNameContainer{
    display: flex;
}
.petPageNameContainer .displayName{
    padding: var(--spacing-small) 0 var(--spacing-small) var(--spacing);
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.petPageNameContainer .animalDataName{
    padding: var(--spacing-small) var(--spacing-small) var(--spacing)  var(--spacing-small);
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.petDataItem{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: var(--spacing-medium) var(--spacing-medium);
    border-radius: 10px;
}
.petDataTitle{
    font-size: 8px;
    font-weight:200;
}
.petDataValue{
    font-size: 10px;
    font-weight:500;
}
.petDataGender{
    background-color: var(--mo-indigo);
}
.petDataAge{
    background-color: var(--mo-cyan);
}
.petDataSize{
    background-color: var(--mo-primary);
}
.ownerImageContainer{
    width: 35px;
    height: 35px;
    display: flex;
    margin-left: -8.5px;
}
.ownerImageContainer img{
    width: 100%;
    border-radius: 10px;
}
.ownerName{
    font-size: 10px;
    font-weight: 500;
    padding-left: var(--spacing-small);
}



/* pet advanced search page */
.filter-option{
    cursor: progress;
}
.filter-option:hover{
    border: 1px solid var(--mo-dark)!important;
}
.filter-option.selected{
    background: var(--mo-secondary-bg-subtle);
    color: var(--mo-dark)!important;
}
.filter-option.selected:hover{
    /* border: none!important; */
    border: 1px solid var(--mo-secondary-bg-subtle)!important;
}
#selectedBreedsList .selectedBreedsList, #selectedTypesList .selectedTypesList{
    font-weight: 300;
    background-color: var(--mo-primary-border-subtle);
    padding:4px 10px 4px 3px;
    /* margin-left: 12px; */
    margin-right: 20px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 2;
    position: relative;
 }
#selectedBreedsList .selectedBreedsList i, #selectedTypesList .selectedTypesList i{
   font-style: normal;
   font-size: 14px;
   position: absolute;
   bottom:0;
   
}
#selectedBreedsList .selectedBreedsList i::after, #selectedTypesList .selectedTypesList i::after {
    content: " x ";
  }
#selectedBreedsList .selectedBreedsList:hover i{
    background: var(--mo-danger)!important;
}
/* #selectedBreedsList .selectedBreedsList i:hover, #selectedTypesList .selectedTypesList i:hover{
    background: red!important;
    
 } */