/*BASE START*/



body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/*BASE END*/

/*Variables start*/

/*Variables end*/


/*UTILS START*/
.no-padding {
    padding: 0px;
}

.no-margin {
    margin: 0px;
}

a {
    text-decoration: none !important;
}

/*UTILS END*/

.mainMenuNavbar {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 1px 200px 1px grey;
    background-color: #000;
    position: relative;
    padding: 0px 20px;
}

.forMeNavbar {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 1px 200px 1px grey;
    background-color: #262626;
    position: relative;
    padding: 0px 20px;
}

.forMeNavbarWebContent {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(38, 38, 38, 0.7);
    -moz-box-shadow: 1px 1px 5px 0px rgba(38, 38, 38, 0.7);
    box-shadow: 1px 1px 5px 0px rgba(38, 38, 38, 0.7);
    background-color: white;
    position: relative;
    padding: 0px 20px;
}

.forMeNavbarWebContentContainer {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
}

.ForMeNavbarWebEachItem {
    height: 100%;
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background-color: white;
    text-decoration: none;
}

.ForMeNavbarWebEachItemActive {
    height: 100%;
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background-color: white;
    text-decoration: none;
    border-bottom: 2px solid #262626;
}

.ForMeNavbarWebEachItem:hover .ForMeNavbarWebEachItemText {
    color: blue;
}

.ForMeNavbarWebEachItemActive:hover .ForMeNavbarWebEachItemText {
    color: blue;
}

.ForMeNavbarWebEachItemText {
    color: #262626;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    vertical-align: center;
}

.forMeWebContainer {
    width: 100%;
    height: 100%;
}

.logoContainer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.logoIcon {
    display: none;
    color: white;
    font-size: 18px;
}

.mainMenuNavbarButtons {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #262626;
    /* height: 100%; */
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    column-gap: 5px;
    text-decoration: none;
    margin-right: 8px;
}

.mainMenuNavbarButtons h5 {
    color: white;
    transition: color 0.4s ease-in-out;
    font-size: 17px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.mainMenuNavbarButtons i {
    color: white;
    transition: color 0.4s ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;

}

.mainMenuNavbarButtons:hover {
    background-color: white;

}

.mainMenuNavbarButtons:hover.mainMenuNavbarButtons h5 {
    color: #262626;
}

.mainMenuNavbarButtons:hover.mainMenuNavbarButtons i {
    color: #262626;
}

.mainContainer {
    flex-grow: 1;
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.mainContainerAdverts {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mobileHidden {
    display: none;
}

.webHidden {
    display: block;
}

.mainContainerForMe {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;


}

.mainContainerChat {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
}

.mainContainerchooseCategory {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
}

.loginSignupMainContainer {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
    background-position: center;
    padding: 10px;
}

.loginFormContainer {
    max-width: 600px;
    /* Set a max-width for the form container */
    width: 100%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 30px;
    row-gap: 15px;
}

.signupFormContainer {
    max-width: 600px;
    height: 600px;
    /* Set a max-width for the form container */
    width: 100%;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.confirmEmailFormContainer {
    max-width: 600px;
    height: 450px;
    /* Set a max-width for the form container */
    width: 100%;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.mainContainerCreateAdvert {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
}

.createAdvertLabel {
    color: white;
}

.editAdvertLabel {
    color: black;
    font-weight: 600;
}

.card-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.myCard {
    background-color: #f0f0f0;
    opacity: 0;
    height: 500px;
    /* Initial state for animation */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.myCard:hover .cardImage {
    opacity: 0.8;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    transform: scale(1.2);
}

.myCard:hover .cardBottomContainer {
    display: flex;
    animation: cardButtonShowUp 1s ease-in-out;
}

.cardImage {
    height: 100%;
    width: 100%;
    position: relative;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.cardBottomContainer {
    height: 10%;
    background-color: black;
    padding: 15px 60px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 45%;
    border-radius: 10px;
}

.cardBottomContainerText {
    color: white;
    margin: 0px;
    font-size: 1.2rem;
}

.indexBannerButtonText {
    color: black;
    text-align: center;
    margin: 0px;
    padding: 5px 10px;
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes cardButtonShowUp {
    0% {
        background-color: #262626;
    }

    100% {
        background-color: black;
    }
}


@keyframes cardButtonShowUpGrey {
    0% {
        background-color: #333333;
    }

    100% {
        background-color: #262626;
    }
}

.slideBanner {
    animation: slide-in-top 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card1 {
    animation: slide-in-left 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card2 {
    animation: slide-in-right 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card3 {
    animation: slide-in-left 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card4 {
    animation: slide-in-right 0.8s ease-out forwards;
    animation-delay: 0.2s;
}


.footer {
    width: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}


.your-slider {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    width: 80%;
}

.your-slider a {
    height: 160px;
    width: 100px;
}

.slickImages {
    height: 100%;
    width: 100%;
    position: relative;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.slickImagesContainer {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slickImagesContainer:hover .slickImages {
    opacity: 0.8;
    transform: scale(1.2);
}

.slickImagesContainer:hover .slickButtonContainer {
    display: flex;
    animation: cardButtonShowUpGrey 1s ease-in-out;
}

.slickButtonContainer {
    height: 10%;
    background-color: #262626;
    padding: 17px 40px;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 40%;
    border-radius: 5px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

.slickButtonContainerText {
    color: white;
    margin: 0px;
    font-size: 1rem;
    text-align: center;
}

.footerHeaderSlickContainer {
    width: 100%;
    padding: 10px 0px 0px;
    row-gap: 10px;
}



.homepageBanner {
    width: 100%;
    height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bannerImage {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.homepageBannerTextBox {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #00000088;
    display: flex;
    align-items: center;
    justify-content: center;

}

.homepageBannerTextBoxInner {
    height: 100%;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px 30px;
    row-gap: 20px;
}

.InnerBoxButton {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
}



.form-control:focus {
    border-color: #00000077;
    box-shadow: 0 0 0 0.2rem #00000077;
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 5px 0.5px #262626;
}


.btn-toggle::before {
    display: inline-block;
    /* Ensure it behaves like an inline-block element */
    width: 1.25em;
    height: 1.25em;
    /* Add height to ensure it's square */
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform 0.35s ease;
    /* Ensure transition is applied to transform */
    transform-origin: center;
    /* Correct transform-origin to center */
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
    /* Rotate 90 degrees when expanded */
}


.advertSidebar {
    width: 15%;
    height: 100vh;
    display: flex;
    background-color: whitesmoke;
}

.tableWeb {
    display: flex;
}

.tableMobile {
    display: none;
}



/* .advertSidebar::-webkit-scrollbar {
    display: none;
} */

.collapse ul li {
    width: 100%;
    padding: 5px;
    display: flex;
    margin-top: 5px;
}

.collapse ul li a {
    text-decoration: none;
}




.btn-toggle::before {
    content: url("data: image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6' /%3e%3c/svg%3e");
}




.navItem {
    background-color: #262626;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    padding: 20px 5px;
}

.navItem:hover {
    background-color: white;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

.navItem:hover .navItemText {
    color: black;
    transition: color 0.4s ease-in-out;
}

.navItemText {
    margin: 0px;
    color: white;
    text-align: center;
    font-size: 15px;
}

.sideBarAndContentMainContainer {
    width: 100%;
    display: flex;

}

.form-check-input:checked {
    background-color: black;
    border-color: black;
}

/* .tableImageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
} */

.tableImage {
    width: 150px;
    object-fit: cover;
}

.tableData {
    text-align: center;
}

.forMeHeaderContainer {
    width: 100%;
    height: 60px;
    background-color: #ececec;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;

}

.forMeMobileContent {
    width: 100%;
    height: 60px;
    background-color: white;
    padding: 20px;
}

.forMeHeaderText {
    margin: 0px;
    color: #262626dd;
    font-size: 16px;
    font-weight: 600;
}

.forMeItemContainer {
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid lightgrey;
    text-decoration: none;
    color: #262626;
}

.forMeItemText {
    color: #262626cc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}

.forMeItemChevron {
    color: #262626cc;
}

.forMeWebMainContainer {
    width: 100%;
    height: 100vh;
    display: flex;
}

.forMeWebContentMainContainer {
    width: 100%;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advertWebContentMainContainer {
    width: 100%;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.advertWebContentMainContainerDescription {
    width: 100%;
    min-height: 50vh;
    padding: 0px;
    display: flex;
    justify-content: center;
}

.forMeWebContentRowContainer {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: space-between;

}

.AdvertPageWebContentRowContainer {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.AdvertPageForMeWebContentCols {
    background-color: white;
    overflow: hidden;
}

.forMeWebContentCols {
    background-color: white;
    overflow: scroll;
}

.accordionContainer {
    height: 100%;
    overflow: hidden;
}

.accordionContainer::-webkit-scrollbar {
    display: none;
}

.forMeWebContentCols::-webkit-scrollbar {
    display: none;
}

.accordionItem {
    background-color: white !important;
}

.accordion-button:not(.collapsed) {
    background-color: white;
}

.accordion-button:focus {
    box-shadow: 0px 0px 5px 0.1px #262626;
}

#advertsTableBody td {
    text-align: center;
    /* Centers text horizontally */
    vertical-align: middle;
    /* Centers content vertically */
}

#advertsTableBodyStolen td {
    text-align: center;
    /* Centers text horizontally */
    vertical-align: middle;
    /* Centers content vertically */
}

.thead-dark tr th {
    text-align: center;
    /* Centers text horizontally */
    vertical-align: middle;
    /* Centers content vertically */
}

.carousel-item {
    max-height: 350px;
}

.carouselImage {
    object-fit: contain;

}

.carousel-item.active {
    object-fit: contain;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-color: #262626;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-size: 75% 65%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    background-color: #262626;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-size: 75% 65%;
}

.small-image-container {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.small-image {
    height: 100%;
    width: 100%;
}

.smallImageRow {
    row-gap: 10px;
    overflow-y: scroll;
    max-height: 300px;
    padding: 0px;
    overflow-x: hidden;

}

.row {
    --bs-gutter-x: 0px
}

.smallImageRow::-webkit-scrollbar {
    display: none !important;
}

.advertTitle {
    font-size: 21px;
    font-weight: 700;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.advertInfoList li {
    color: black;
    margin: 12px 0px;
    font-size: 14px;
    border-bottom: 1px solid lightgrey;
    padding: 2px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    word-break: break-all;
    column-gap: 5px;
    padding-bottom: 5px;
}

.advertInfoList li span {
    font-weight: 600;
}

.advertInfoList {
    padding: 0px;
}

.advertInfos {
    flex: 1;
    text-align: right;
    font-weight: 400 !important;

}

.advertInfoOwnerContainer {
    background-color: #f4f4f4;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0px;

}

.advertOwnerPhoneContainer {
    width: 90%;
    border: 1px solid lightgrey;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    align-self: center;
    min-height: 50px;
    border-radius: 5px;
}

.advertInfoSendMessageContainer {
    width: 100%;
    padding: 0px 20px;
    column-gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.advertAccordionInnerContainer {
    padding: 10px;
    width: 100%;
    text-align: left;

}

.AdvertProductFeaturesLabelContainer {
    width: 100%;
    display: flex;
    align-items: center;
}

.AdvertProductFeaturesContainer {
    padding: 10px 20px;
    background-color: #26262611;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.AdvertProductAccessoriesContainer {
    padding: 10px 20px;
    background-color: #26262611;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.AdvertProductFeature {
    width: 20%;
    display: flex;
    align-items: center;
    column-gap: 5px;

}

.AdvertProductFeatureCheckContainer {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkPassive {
    display: none !important;
}

.accordion-content {
    visibility: hidden;
    transition: visibility 0s 0.3s, opacity 0.3s linear;
    opacity: 0;
}

.accordion-content.show {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.messageBoxesContainer {
    width: 100%;
    height: 70%;
    padding: 0px 20px;
}

.messageBox {
    width: 100%;
    height: 100px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #3d3d3d11;
    column-gap: 15px;

}

.avatarImageContainer {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatarImage {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    object-fit: contain;
}

.messageBoxNameContainer {
    height: 100%;
    display: flex;
    padding: 5px;
    flex-direction: column;
    justify-content: space-around;
}

.single-line-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}








.--dark-theme {
    --chat-background: rgba(10, 14, 14, 0.95);
    --chat-panel-background: #131719;
    --chat-bubble-background: #14181a;
    --chat-add-button-background: #212324;
    --chat-send-button-background: #8147fc;
    --chat-text-color: #a3a3a3;
    --chat-options-svg: #a3a3a3;
}

/* body {
    background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
    background-size: cover;
  } */

#chat {
    background: var(--chat-background);
    width: 70%;
    margin: 25px auto;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    height: 100vh;
}

/* #chat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) fixed;
    z-index: -1;
  } */
#chat .btn-icon {
    position: relative;
    cursor: pointer;
}

#chat .btn-icon svg {
    stroke: #FFF;
    fill: #FFF;
    width: 50%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#chat .chat__conversation-board {
    padding: 1em 0 2em;
    height: 91.5%;
    overflow: auto;
}

#chat .chat__conversation-board__message-container.reversed {
    flex-direction: row-reverse;
}

#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble {
    position: relative;
}

#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble span:not(:last-child) {
    margin: 0 0 2em 0;
}

#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__person {
    margin: 0 0 0 1.2em;
}

#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__options {
    align-self: center;
    position: absolute;
    left: 0;
    display: none;
}

#chat .chat__conversation-board__message-container {
    position: relative;
    display: flex;
    flex-direction: row;
}

#chat .chat__conversation-board__message-container:hover .chat__conversation-board__message__options {
    display: flex;
    align-items: center;
}

#chat .chat__conversation-board__message-container:hover .option-item:not(:last-child) {
    margin: 0 0.5em 0 0;
}

#chat .chat__conversation-board__message-container:not(:last-child) {
    margin: 0 0 2em 0;
}

#chat .chat__conversation-board__message__person {
    text-align: center;
    margin: 0 1.2em 0 0;
    display: flex;
    align-items: center;
    row-gap: 5px;
    flex-direction: column;
}

#chat .chat__conversation-board__message__person__avatar {
    height: 35px;
    width: 35px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

#chat .chat__conversation-board__message__person__avatar::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
}

#chat .chat__conversation-board__message__person__avatar img {
    height: 100%;
    width: auto;
}

#chat .chat__conversation-board__message__person__nickname {
    font-size: 9px;
    color: #484848;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
}

#chat .chat__conversation-board__message__context {
    max-width: 55%;
    align-self: flex-end;
}

#chat .chat__conversation-board__message__options {
    align-self: center;
    position: absolute;
    right: 0;
    display: none;
}

#chat .chat__conversation-board__message__options .option-item {
    border: 0;
    background: 0;
    padding: 0;
    margin: 0;
    height: 16px;
    width: 16px;
    outline: none;
}

#chat .chat__conversation-board__message__options .emoji-button svg {
    stroke: var(--chat-options-svg);
    fill: transparent;
    width: 100%;
}

#chat .chat__conversation-board__message__options .more-button svg {
    stroke: var(--chat-options-svg);
    fill: transparent;
    width: 100%;
}

#chat .chat__conversation-board__message__bubble span {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: inline-table;
    word-wrap: break-word;
    background: var(--chat-bubble-background);
    font-size: 13px;
    color: var(--chat-text-color);
    padding: 0.5em 0.8em;
    line-height: 1.5;
    border-radius: 6px;
    font-family: "Lato", sans-serif;
}

#chat .chat__conversation-board__message__bubble:not(:last-child) {
    margin: 0 0 0.3em;
}

#chat .chat__conversation-board__message__bubble:active {
    background: var(--chat-bubble-active-background);
}

#chat .chat__conversation-panel {
    background: var(--chat-panel-background);
    border-radius: 12px;
    padding: 0 1em;
    height: 55px;
    margin: 0.5em 0 0;
}

#chat .chat__conversation-panel__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    border-width: 1px;
    border-color: #3d3d3d55;
}

#chat .chat__conversation-panel__container .panel-item:not(:last-child) {
    margin: 0 1em 0 0;
}

#chat .chat__conversation-panel__button {
    background: grey;
    height: 20px;
    width: 30px;
    border: 0;
    padding: 0;
    outline: none;
    cursor: pointer;
}

#chat .chat__conversation-panel .add-file-button {
    height: 23px;
    min-width: 23px;
    width: 23px;
    background: var(--chat-add-button-background);
    border-radius: 50%;
}

#chat .chat__conversation-panel .add-file-button svg {
    width: 70%;
    stroke: #54575c;
}

#chat .chat__conversation-panel .emoji-button {
    min-width: 23px;
    width: 23px;
    height: 23px;
    background: transparent;
    border-radius: 50%;
}

#chat .chat__conversation-panel .emoji-button svg {
    width: 100%;
    fill: transparent;
    stroke: #54575c;
}

#chat .chat__conversation-panel .send-message-button {
    background: var(--chat-send-button-background);
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    transition: 0.3s ease;
}

#chat .chat__conversation-panel .send-message-button:active {
    transform: scale(0.97);
}

#chat .chat__conversation-panel .send-message-button svg {
    margin: 1px -1px;
}

#chat .chat__conversation-panel__input {
    width: 100%;
    height: 100%;
    outline: none;
    position: relative;
    color: var(--chat-text-color);
    font-size: 13px;
    background: transparent;
    border: 0;
    font-family: "Lato", sans-serif;
    resize: none;
}


.chooseCategoryInnerContainer {
    height: 100vh;

    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.chooseCategoryTextContainer {
    width: 80%;
}

.categoryContainer {
    width: 80%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.createAdvertContainer {
    width: 80%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.editAdvertPhotoContainer {
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.photoUploadContainer {
    width: 50px;
    height: 50px;
    border: 1px solid lightgrey;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.eachCategory {
    height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.4s ease-in-out;
    background: rgb(23, 23, 24);
    background: linear-gradient(180deg, rgba(23, 23, 24, 1) 0%, rgba(46, 46, 50, 1) 100%);
    margin: 5px 0px;
}

.eachCategory:hover {
    transition: transform 0.4s ease-in-out;
    transform: scale(1.1);
}

#pageTitleContainer {
    width: 80%;
}

.pageTitleNav {
    padding: 15px;
    background: rgb(23, 23, 24);
    background: linear-gradient(180deg, rgba(23, 23, 24, 1) 0%, rgba(46, 46, 50, 1) 100%);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#goBackButton {
    background: rgb(23, 23, 24);
    background: linear-gradient(180deg, rgba(23, 23, 24, 1) 0%, rgba(46, 46, 50, 1) 100%);
}

.photoPlaceholder {
    width: 100%;
    height: 100%;
    padding: 10px 15px;
}

#advertContentSection {
    padding: 0px 15px;
}

#stolenAdvertContentSection {
    width: 45%;
}

.ForMe3Cols {
    display: flex;

    flex-direction: column;
    height: 175px;
    border-radius: 5px;
    padding: 10px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
}

.ForMeCreateAdvertCol {
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
}

.personalInfoContainers {
    border-bottom: 1px solid #3d3d3d55;
    padding: 10px;
    display: flex;

}

.addPhotoContainer {
    display: inline-block;
    border: 1px solid #d8d8d8;
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom, #ffffff 60%, #f5f5f5);
    box-shadow: inset 0 0 0 1px #fff, 0 0 2px 1px #e7e7e7;
    text-align: center;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.input-container input {
    width: 100%;
    padding-right: 30px;
    padding-left: 10px;
}

.icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.icon-eye {
    font-size: 18px;
}

/* Example icon styles (you might use a font icon like FontAwesome) */
.icon-eye::before {
    content: '\f06e';
    /* FontAwesome eye icon */
    font-family: FontAwesome;
}

.icon-eye.slash::before {
    content: '\f070';
    /* FontAwesome eye-slash icon */
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.btn-dark {
    background-color: #000;
    color: #fff;
    border: none;
}

.btn-sm {
    font-size: 14px;
}

.favoriteListEach {
    height: 175px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    background-color: #405D72;
    color: white;
    font-size: 20px;
    font-weight: bold;

}

.favoriteListNew {
    height: 175px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    border: 1px solid #405D72;
    background-color: white;
    color: #405D72;
    font-size: 20px;
    font-weight: bold;
}

.favoriteListContainer {
    height: 125px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    display: flex;
    align-items: center;
}

.favoriteListCols {
    display: flex;

}

.favoriteListImage {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    object-fit: contain;
}

.tableAllAdverts {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    flex: 1;
}

.table.table-striped.table-bordered {
    flex: 1;
}

.table.table-striped.table-bordered td {
    text-align: center;
    vertical-align: middle;
}

.tableAllAdverts::-webkit-scrollbar {
    display: none;
}


.forgotPasswordGoBackContainer {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    text-decoration: none;
    color: white;
}

.newUsedButtons {
    background-color: white;
    color: #262626;
    border: 1px solid #262626;
    padding: 10px;
    transition: background-color 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
}

.newUsedButtons:hover {
    background-color: #262626;
    transform: scale(1.05);
    color: white;

}

.newUsedButtons.active {
    background-color: #262626;
    /* Change to your desired active color */
    color: white;
}

.newUsedButtons::before {
    display: none;
}

.slick-prev,
.slick-next {
    top: 40% !important;
}

.footer-links {
    row-gap: 2rem;
    padding: 10px 25px;
}

.doping-row {
    background-color: #DAA520;
    --bs-table-bg: #DAA520;
    color: white;
}

.doping-row td {
    color: white;
}

#searchQuery {
    font-size: 15px !important;
    padding: 10px !important;
    width: 30% !important;
}


.about-us-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-us-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.about-us-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #ffffff;
}

.about-us-content {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
}

.team-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.about-us-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

h2 {
    color: #ffffff;
    margin-top: 0;
}

p {
    line-height: 1.6;
}

.values-list {
    list-style-type: none;
    padding: 0;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.values-list li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
    text-align: center;
}


.team-section {
    text-align: center;
}

.team-members {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.team-member {
    background-color: #333333;
    border-radius: 8px;
    padding: 1.5rem;
    width: 250px;
    text-align: center;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.team-member h3 {
    margin: 0;
    color: #ffffff;
}

.team-member p {
    margin: 0.5rem 0 0;
    color: #cccccc;
    font-size: 0.9rem;
}

.aboutUsContainer {
    background-color: #262626;
    color: #ffffff;
    font-family: Arial, sans-serif;
    padding: 2rem;
}

.privacyPolicyContainer {
    width: 100%;
}

.accordion_headerSSS {
    background-color: #262626 !important;
    color: white !important;
}

.accordion_bodySSS {
    background-color: white !important;
    color: #262626 !important;
}

.contactFormGroup {
    margin-top: 20px;
}

.contactFormGroup label {
    margin-bottom: 10px;
}

.hoverable {
    position: relative;
    margin-right: 10px;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #262626;
    color: white;
    border-radius: 5px;
    padding: 10px;
    z-index: 1000;
    width: 250px;
    right: 0px;
    top: 60px;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

.hoverable:hover .dropdown-menu {
    display: block;
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.dropdown-item {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.dropdown-item:hover {
    background-color: #444;
    color: white;
}

.footer-separator {
    height: 1px;
    background-color: #ffffff33;
    margin: 1rem 0;
    width: 100%;
}

.footer-column a {
    text-decoration: none;
    color: white;
    font-size: 17px;
}

.footer-bottom-container {
    background-color: #565656;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-container span {
    font-size: 14px;
}

.dopingTableParent {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.dopingTableStar {
    color: white;
    padding: 5px;
}

.dopingTableText {
    color: white;
    font-weight: 500;
}

.dropdown-item i {
    margin-right: 10px;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

swiper-container {
    width: 100%;
    height: 100%;
}

swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mySwiper swiper-slide img {
    cursor: zoom-in;
}

swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper {
    height: 70%;
    width: 100%;
}

.mySwiper2 {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper2 swiper-slide {
    width: 25%;
    height: 85%;
    opacity: 0.4;
}

.mySwiper2 .swiper-slide-thumb-active {
    opacity: 1;
}

swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advertImageModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.AdvertImageModalContent {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.AdvertImageModalClose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.AdvertImageModalClose:hover,
.AdvertImageModalClose:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}



/* MEDIA START */

/*#region MEDIA START */


/* For screens larger than 1025px */
@media screen and (min-width: 1025px) {
    .advertsMainContentNavBar {
        width: 100%;
        background-color: #262626;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        column-gap: 30px;
        padding: 0px 20px;
    }

    .logoContainerMenuButton {
        display: none;
    }

    .logoContainerAdvertLogo {
        display: flex;
    }

    .contactUsForm {
        width: 50%;
    }

    .SSSAccordion {
        min-width: 50%;
    }

    .faq-section {
        width: 65%;
    }

    .tableContainer {
        display: flex;
    }


}

@media screen and (max-width: 1024px) {
    .mainContainerAdverts {
        flex-grow: 1;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .sideBarShownMobile {
        display: none;
    }

    .advertSidebar {
        display: flex;
        width: 100%;
    }

    .tableContainer {
        display: none;
    }

    .advertsMainContentNavBar {
        width: 100%;
        background-color: #262626;
        align-items: center;
        justify-content: space-around;
        padding: 0px 20px;
        display: none;
    }

    .tableWeb {
        display: none;
    }

    .tableMobile {
        display: flex;
    }

    .logoContainerMenuButton {
        display: flex;
    }

    /*   .logoContainerAdvertLogo {
        display: none;
    } */

    #chat {
        width: 100%;
    }

    .mobileHidden {
        display: block;
    }

    .webHidden {
        display: none;
    }

    .homepageBannerTextBoxInner {
        width: 90%;

        margin: 0px;
    }

    #stolenAdvertContentSection {
        width: 65%;
    }

    .contactUsForm {
        width: 65%;
    }

    .SSSAccordion {
        min-width: 65%;
    }

    .faq-section {
        width: 85%;
    }

    .mainNavbarLogo {
        display: none;
    }

}

@media screen and (max-width: 768px) {
    #stolenAdvertContentSection {
        width: 80%;
    }

    .contactUsForm {
        width: 90%;
    }

    .faq-section {
        width: 100%;
    }

    .SSSAccordion {
        min-width: 90%;
    }



}

@media only screen and (max-width: 600px) {
    #chat {
        margin: 0;
        border-radius: 0;
    }

    #chat .chat__conversation-board {
        height: 91.5%;
    }

    #chat .chat__conversation-board__message__options {
        display: none;
    }
}

/*#endregion MEDIA END */

#paymentForm {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#paymentForm .form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#paymentForm .form-row label {
    width: 100%;
}

#paymentForm .form-row .form-group {
    flex: 1;
}

#paymentForm .form-row .form-group input {
    width: 100%;
}

#paymentForm .form-group label {
    margin-bottom: 0.5rem;
}

/* Auctions Page Styles */
.auctions-container {
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
}

.auctions-header {
    color: white;
    margin-bottom: 2rem;
    text-align: center;
}

.auctions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem;
}

.auction-card {
    background: #333;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.auction-card:hover {
    transform: translateY(-5px);
}

.auction-image {
    width: 100%;
    aspect-ratio: 1;
    max-height: 250px;
    object-fit: cover;
}

.auction-content {
    padding: 1rem;
    color: white;
}

.auction-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.auction-info {
    font-size: 0.9rem;
    color: #ccc;
}

.auction-info-inner {
    color: #333;
}

@media (min-width: 769px) {
    .auction-info-inner {
        grid-column: span 2;
    }
}

.auction-info-inner p {
    color: #333;
}

/* Auction Details Page Styles */
.auction-details-container {
    background-color: #262626;
    padding: 2rem;
    min-height: 100vh;
}

.auction-details-content {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.auction-image-carousel {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.auction-title-inner {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.auction-details p {
    margin-bottom: 0.5rem;
}

.auction-date-time {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.join-auction-btn {
    margin-top: 2rem;
    padding: 1rem 2rem;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
}

.join-auction-btn:hover {
    background: #45a049;
}

/* Auction Livestream Page Styles */
.auction-livestream-container {
    background: #000;
    min-height: 100vh;
    padding: 1rem;
}

.livestream-content {
    max-width: 1200px;
    margin: 0 auto;
}

.livestream-video {
    width: 100%;
    height: 70vh;
    background: #111;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.livestream-video img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.auction-controls {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem 2rem;
    border-radius: 12px;
    color: white;
}

.current-price {
    text-align: center;
    margin-bottom: 2rem;
    word-break: break-all;
}

.current-price h3 {
    font-size: 2rem;
    color: #4CAF50;
}

.bidding-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bid-input-container {
    display: flex;
    gap: 1rem;
}

.bid-input {
    flex: 1;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #444;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.bid-button,
.quick-bid-button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bid-button {
    background: #2196F3;
    color: white;
}

.quick-bid-button {
    background: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.livestream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    border-radius: 8px;
}

.viewer-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: white;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    color: #4CAF50;
}

#viewerCount {
    color: #4CAF50;
    font-weight: 400;
}

.share-button {
    background: #25D366;
    /* WhatsApp green */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.share-button:hover {
    background: #128C7E;
}

/* Modal Styles */
.modal-content {
    background-color: #262626;
    color: white;
}

.modal-header {
    border-bottom: 1px solid #444;
}

.modal-footer {
    border-top: 1px solid #444;
}

.btn-close {
    background-color: white;
}

.contractTitle {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
}

.contractContainer {
    border: 1px solid white;
    padding: 0px 20px;
    border-radius: 10px;
}

.contractText {
    text-align: justify;
    line-height: 2;
    font-size: 1rem;
    margin-top: 30px;
    font-weight: 300
}


@media (max-width: 768px) {
    .auction-details-content {
        grid-template-columns: 1fr;
    }

    .bid-input-container {
        flex-direction: column;
    }
}