body {
    background-color: #f6f6f6;
    font-weight: 500;
    font-family: 'Mulish', sans-serif;
}

@media (min-width: 1200px) {

    .container{
        max-width: 1200px;
    }

}

a {
    color: currentColor;
    text-decoration: none;
}

a:hover {
    color: #ff64b7;
    text-decoration: underline;
}

h2 {
    font-size: 1.7rem;
    font-weight: bold;
}

h3 {
    font-size: 1.1rem;
}

.btn {
    font-weight: bold;
}

.top-bar {
    background-color: #FBFBFD;
}

.text-pink {
    color: #ff64b7;
}

.bg-pink {
    background-color: #ff64b7;
}


/* Button */

.btn-pink {
    background-color: #ff64b7;
    color: white;
    border: #ff64b7;
}

.btn-pink:hover {
    background-color: #fa128e;
    color: white;
    border: #fa128e;
    text-decoration: none;
}

.btn-outline-pink {
    background-color: white;
    color: #ff64b7;
    border: #ff64b7 1.5px solid;
}

.btn-outline-pink:hover {
    background-color: white;
    color: #ff0088;
    border: #ff0088 1.5px solid;
    text-decoration: none;
}

.fixed-menu {
    position: fixed;
    top: 25%;
    right: 15px;
}

.fixed-menu .item {
    display: block;
    padding: 8px;
    margin-bottom: 6px;
    background: white;
    border-radius: 8px;
}

.fixed-menu .item img {
    height: 30px;
}

.title-image {
    display: flex;
    margin-bottom: 1.25rem;
}

.title-image img {
    height: 30px;
    margin-right: 0.75rem;
}

.title-image .title {
    margin: 0;
    font-weight: bold;
    align-self: end;
    font-size: 1.5rem;
}

.discount {
    font-size: 1rem; 
    font-weight: bold;
    color: white;
    padding: 2px; 
    border-radius: 4px; 
    top: 10px; 
    right: 10px; 
    background-color: red;
    z-index: 2
}

.cursor-pointer {
    cursor: pointer;
}

.card-link {
    text-decoration: none;
    color: currentColor;
    cursor: pointer;
}

.card-link:hover, .card-link:active {
    text-decoration: none;
    color: #ff64b7;
    cursor: pointer;
}

.link {
    text-decoration: none;
    color: currentColor;
}

.link:hover, .link:active {
    color: #ff64b7;
}


footer ul  {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Form */

.form-label.required::after {
    content: ' *';
    color: red;
}

.form-label {
    margin-bottom: 0.25rem;
}

form .error {
    color: red;
}


/* Avatar */

.avatar:hover {
    border: #ff64b7 4px solid;
    cursor: pointer;
}

.avatar-selected {
    border: #ff64b7 4px solid;
}


.splide__list a:hover {
    text-decoration: none;
}


.shop-acc a:hover {
    text-decoration: none;
}

.fixed-footer{
    position:fixed;
    bottom:0;
    padding:0;
    margin:0
}

#offcanvasMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#offcanvasMenu ul li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}



.chat-log {
    margin-bottom: 0.5rem;
}

.chat-log .content .chat{
    max-width: 250px;
    padding: 10px;
    line-height: 1.25;
    font-size: 0.85rem;
    border-radius: 5px;
    margin-bottom: 0.25rem;
    overflow-wrap: break-word;
}

.chat-log .content .date {
    color: rgb(148, 148, 148);
    font-size: 0.75rem;
}

.chat-log.sender .content .chat{
    background: #ff70bcd6;
    color: white;
}

.chat-log.sender {
    display: flex;
    justify-content: flex-end;
}


.chat-log.receiver .content .chat{
    background: #ebebebd6;
    color: rgb(34, 34, 34);
}

.chat-log.receiver {
    display: flex;
    justify-content: flex-start;
}