/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

 /* Custom styles for the chat container */
 .minuesmt10{
    margin-top: -20px !important;
 }
 #chatContainerBox{
    height: 300px !important;
    overflow: scroll;
 }
 .chat-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
    border-radius: 10px;

}

/* Style for individual messages */
.message {
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

/* Style for user's message */
.user-message {
    display : block;
    margin : 10px 30px 0 0;
    overflow : hidden;

}

/* Style for receiver's message */
.receiver-message {
    display : block;
    margin : 10px 30px 0 0;
    overflow : hidden;

}
.user-message .message-content{
    float : right;
    padding : 0.7rem 1rem;
    margin : 0 1rem 10px 0;
    clear : both;
    color : #FFFFFF;
    background-image : -webkit-linear-gradient(10deg, #1B5E20, #45954c);
    background-image :         linear-gradient(80deg, #1B5E20, #45954c);
    background-repeat : repeat-x;
    border-radius : 0.357rem;
    box-shadow : 0 4px 8px 0 rgba(34, 41, 47, 0.12);


}
.user-message .message-content .message-timestamp{
    color: white !important;
}
.receiver-message .message-content{
    float : left;
    padding : 0.7rem 1rem;
    margin : 0 1rem 10px 0;
    clear : both;
    color : black ;
    background-image : gray ;
    background-repeat : repeat-x;
    border-radius : 0.357rem;
    box-shadow : 0 4px 8px 0 rgba(34, 41, 47, 0.12);


}
.receiver-image .message-content .message-timestamp{
    color: black !important;
}

/* Style for message timestamps */
.message-timestamp {
    font-size: 12px;
    color: #888;
}

/* Style for chat input box */
.chat-input {
    width: 100%;
}

/* Style for chat room navbar */
.chat-room-navbar {
    background-color: lightgreen; /* Change navbar background color to light green */
    color: #fff; /* Change navbar text color to white */
    height: 60px ;
}

/* Style for receiver's image */
.receiver-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

/* Style for last seen status */
.last-seen {
    font-size: 12px;
    color: #888;
}

/* Style for contact list */
.contact-list {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Style for each contact */
.contact {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}

/* Style for active contact */
.active-contact {
    background-color: #007bff;
    color: #fff;
}
.chatBoxContent {
    height: 300px !important;
    overflow: scroll;
    outline-color: none !important;
    border: none !important;
    display: block !important;
}
.chatWidt {
    width: 80%;
    max-width: 80%;
    max-width: max-content;
}
.dirrtl {
    float: right;
    text-align: right;
    align-items: baseline;
    margin-top: 15px;
    background: #1b5e20;
    color: #fff;
    padding-right: 20px;
    border-radius: 10px;

    width: 80%;
    padding: 8px;
    margin: 2px;


}
.dirltr {
    float: left;
    text-align: left;

    margin-top: 15px;
    padding-left: 20px;
    background: #87fc8f;
    color: #fff;
    width: 80%;


    border-radius: 10px;
}

.textRed {
    background-color: red;
}
.hover:hover {
    cursor: pointer;
}
.coverPhoto {
    height: 300px !important;
}
.textGreen {
    background-color: #1b5e20;
}
.v100 {
    min-height: 100vh !important;
    /* margin-top: 450px !important; */
}
.profile-likes {
    fill: #ea5455 !important;
    stroke: #ea5455 !important;
}
.removeActiveBg {
    background: gray !important;
}
.whiteColor {
    color: #ffffff !important;
}
#nav-tabContent > .active {
    background: none !important;
}
#registerForm > .active {
    background: none !important;
}
.notificationUserImage {
    height: 50px;
    width: 50px;
    border-radius: 100%;
}
.filterHeader {
    display: none;
}
@media (min-width: 768px) and (max-width: 1024px) {
    #dskfjsd {
        margin-top: 50px !important;
    }
    .filterHeader {
        display: block;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    #dskfjsd {
        margin-top: 50px !important;
    }
    .filterHeader {
        display: block;
    }
}
.content-detached {
    min-height: 100vh;
}
.addToBoy{
background-color: none !important;
}
.searchParamsSearchInput {
    background: none !important;
    outline: none !important;
    border: 0 !important;
}
.searchParamsSearchInput:active {
    background: none !important;
}
.filterBtnCloseStick{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 15px;
    z-index: 1500;
}
.webkit-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 150px;
    z-index: 1500;
    bottom: 150px;
    margin-top: 20px !important;
}
.fa-heart {
    fill: none !important;
}
.btn-group-toggle > .active {
    color: #ffffff !important;
}
.height200 {
    height: 200px !important;
}
.textBlack {
    color: #000 !important;
}
.hfull {
    height: 100% !important;
    width: 100% !important;
}
.wfull {
    width: 100% !important;
    height: 300px;
}
.rounded100 {
    border-radius: 100%;
    /* padding:10px; */
    width: 40px;
    height: 40px;
    padding-top: 8px;
    text-align: center;
    /* box-sizing: border-box; */
}
.producthover:hover {
    box-shadow: 1px 1px 1px 1px rgba(12, 42, 52, 0.2);
    cursor: pointer;
}

.postDeleteBtn {
    border: none;
    background: none;
    outline: none;
    padding: 0 !important;
}
.userImage {
    margin-bottom: 5px;
    border-radius: 10px;
    width: 100px;
    height: 100px;
}

.postDeleteBtn:focus {
    background-color: gray;
    color: white;
    outline: none;
}
.producthover {
    border-radius: 10px !important;
}
.productImageIconic {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    margin: 0px;
}
.productImageIconic:hover {
    cursor: pointer;
}

.productImageIconic:hover {
    background-color: #edf1ec;
}

.active {
    background: #1b5e20 !important;
    color: #ffffff;
    font-weight: 400;
    border-radius: 4px;
}
a {
    box-shadow: none !important;
}
.btn-primary {
    background-color: #1b5e20 !important;
    color: #ffffff;
}
.hiehgth100 {
    height: 110px !important;
}
.deleteBtn:focus {
    background-color: red !important;
}