@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Work+Sans:ital,wght@0,400;0,700;1,500&display=swap');
:root {
    --primary-color: rgb(255, 144, 53);
    --primary-color-faded: rgba(255, 144, 53, .5);
    --primary-color-dark: #fc6262;
    --secondary-color: #ffd86f;
    --primary-gradient: linear-gradient(40deg, var(--secondary-color), var(--primary-color-dark));
}

* {
    line-height: 1.6;
}
@media only screen and (min-width:1200px){

    .col-xl-2\.5{
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        width: 20%  !important;
    }
}
body {
    /*font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    */
    font-family: 'Work sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #f7f7f7;
    font-weight: 400;
    color: #666;
    transition: all 0.3s ease-in-out;
}

/* footer */

.footer {
    background-color: rgb(87, 27, 0);
    background-image: url(../img/kente_cloth_1024x1024.jpg);
    background-blend-mode: multiply;
    background-size: cover;
}

.footer-text, .fa-mobile {
    color: white;
}

.alert-warning {
    background-color: #be5e35;
    color: white;
}

.alert-info {
    background-color: #ccc;
}

.alert-error {
    background-color: red;
    color: white;
}

.fa-bars {
    color: var(--primary-color);
    font-size: 20px;
}

.fa-gem {
    color: var(--primary-color);
}

.all-prem-busi:hover {
    background-color: rgb(0, 0, 0, 0.2);
}

/* end of homepage */

/* shop profile */

.cover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.shop-banner-section {
    min-height: 60vh;
}

.shop-title {
    font-size: 42px;
}

@media only screen and (max-width: 768px) {
    .shop-banner-section {
        min-height: 40vh;
    }
    .shop-title {
        font-size: 24px;
    }
}

.avatar-1 {
    width: 200px;
    max-width: 200px;
    height: 160px;
    max-height: 160px;
    object-fit: cover;
}

.bg-overlay {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-overlay-dark {
    background-position: center;
    background-color: rgba(0, 0, 0, .3);
    background-size: cover;
}

@media only screen and (max-width: 650px) {
    .cover {
        height: 160px;
        width: 100%;
    }
    .avatar-1 {
        width: 100px;
        height: 100px;
    }
}

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


#color {
    color: rgb(255, 144, 53, 0.9);
}

._profil-nav a {
    padding-right: 40px;
    padding-left: 20px;
}

._profil-nav {
    justify-content: center;
}

@media screen and (max-width: 600px) {
    ._profil-nav {
        justify-content: left;
    }
    ._profil-nav a {
        padding-right: 0;
        padding-left: 0;
        width: 50%;
    }
}

/* end of shop profile */

#summary {
    background-color: white;
    padding: 20px;
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    #summary {
        display: none;
    }
    #about-us {
        display: none;
    }
    #alternative-link {
        display: none;
    }
}

@media only screen and (max-width: 1000px) {
    #cat-list {
        display: none;
    }
}

.list ul li {
    text-decoration: none;
    list-style-type: none;
    font-size: 0.8rem;
}

.list ul li:hover {
    color: white;
    background-color: rgb(228, 228, 228);
}

.summary ul li {
    font-size: 0.8rem;
    text-decoration: none;
    list-style-type: none;
}

.white-bg {
    background-color: white;
    padding: 5px
}

.card-white-bg {
    background-color: white;
    padding: 20px;
}

.category-name a {
    margin: 0;
    font: inherit;
    vertical-align: baseline;
    color: black;
    text-decoration: none;
}

.category-list-item-link:nth-child(even) .category-list-item {
    background: rgba(0, 0, 0, .02);
}

.category-list-item {
    padding: 7px;
}

.category-list-item-link:hover .category-list-item {
    padding: 10px 10px;
    background: var(--primary-gradient);
}

.category-name {
    padding: 3px;
    font: 0.1rem;
}

.category-name a:hover {
    color: orange;
    padding: 3px;
}

#font {
    font-size: 0.75rem;
}

.container-category {
    width: 100%;
    height: 70px;
    float: left;
    margin-bottom: 15px;
}

.container-category-icon {
    height: 50px;
    width: 50px;
}

@media screen and (min-width: 600px) {
    #cat-list-icon {
        display: none;
    }
}

/* hot deals */

.scrollmenu {
    overflow: auto;
    white-space: nowrap;
}

.scrollmenu .prod-items {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
}

.hot-dis {
    background-color: rgb(255, 35, 35);
    padding: 2px;
    font-size: 0.6rem;
    color: white;
}

#hot-deal {
    width: 90px;
}

#requested_product {
    width: 140px;
}

#hot-deal-img {
    width: 100%;
    height: 80px;
    object-fit: contain;
}

#deal-text {
    font-size: 0.75rem;
    color: white;
    width: 5px;
}

@media screen and (min-width: 600px) {
    #hot-deal {
        display: inline-flex;
        width: 200px;
        height: 210px;
        max-width: 200px;
        max-height: 210px;
        padding: 5px;
        margin-bottom: 10px;
        margin-right: 10px;
        margin-left: 20px;
    }
    #hot-deal-img {
        width: 100%;
        height: 145px;
    }
    #deal-text {
        font-size: 0.9rem;
    }
}

@media screen and (min-width: 599px) and (max-width: 700px) {
    #hot-deal {
        display: inline-block;
        width: 130px;
        height: 160px;
        justify-content: center;
        padding: 5px;
    }
    #hot-deal-img {
        width: 100%;
        height: 100px;
    }
}

.shop-avtr img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-right: 0;
    padding-right: 0;
}

.shop-avtr p {
    padding-top: 28px;
    text-transform: uppercase;
}

.hotdeal-price {
    color: red;
    bottom: 0;
    background-color: rgb(255, 144, 53);
}

.hotdeal-price p {
    color: white;
    margin-bottom: 0;
}

.tag {
    color: white;
    line-height: 1.6px;
}

.tag .discnt {
    background-color: red;
    padding: 3px;
}

.btn-shadow-none {
    box-shadow: none !important;
}

.prod {
    border-radius: 8px;
}

.date {
    background-color: red;
    width: 35px;
    border-radius: 5px;
}

#days {
    font-size: 15px;
}

/*  all shops */

.card-shop img {
    width: 150px;
    height: 100px;
}

.card-shop span {
    color: #4F4F4F;
    float: right;
}

#cat-dropdown a {
    font-size: 0.75rem;
}

#cat-dropdown a:hover {
    color: white;
    background-color: rgb(0, 0, 0, 0.4);
}

/* ======= product detail ======== */

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */

.mySlides {
    display: none;
}

/* Next & previous buttons */

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(170, 167, 167, 0.5);
}

/* Position the "next button" to the right */

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

button.hidden {
    width: 0;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}

/* Number text (1/3 etc) */

.numbertext {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, .4);
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.prod-price {
    color: red;
    bottom: 0;
    position: absolute;
    background-color: rgb(255, 144, 53);
}

.prod-price p {
    color: white;
    margin-bottom: 0;
    padding: 5px;
    padding-top: 4px;
}

#img {
    height: 300px;
    max-height: 300px;
    object-fit: contain;
    background-color: white;
}

@media only screen and (max-width: 979px) {
    .slideshow-container .mySlides img {
        height: 224px;
        max-height: 224px;
        object-fit: contain;
        background-color: ffffff;
    }
}

/* shop info */

.cover-photo img {
    width: 100%;
    position: relative;
}

.avatar img {
    width: 100px;
    max-width: 100px;
    height: 100px;
    max-height: 100px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    object-fit: contain;
}

.shop-info ul li {
    text-decoration: none;
    list-style: none;
    padding: 5px;
}

.prod-description .description-text {
    padding-left: 25px;
}
.prod-description h1,
.prod-description h2,
.prod-description h3,
.prod-description h4,
.prod-description h5,
.prod-description h6,
.description-text h1,
.description-text h2,
.description-text h3,
.description-text h4,
.description-text h5,
.description-text h6{
    font-size: 18px;
    font-weight: bold;
}

/* all busniess category */

.category-icon {
    height: 100px;
    width: 100px;
}

.dropdownn-items {
    display: none;
}

/* new navbar */

.nav-bg {
    background-color: white;
}

a, a:hover, a:focus {
    color: black;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    z-index: 999;
    background: url('../img/kente_cloth_1024x1024.jpg');
    background-color: rgba(32, 19, 0);
    background-size: cover;
    background-blend-mode: multiply;
    color: #fff;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
    left: 0;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.overlay.active {
    display: block;
    opacity: 1;
}

#sidebar ul li a {
    /*padding: 10px;
     font-size: 1.1em; */
    color: rgb(233, 233, 233);
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    font-size: 14px;
}

#sidebar ul li a:hover {
    /*
    color: black;
    background: rgb(207, 206, 206); */
    color: var(--primary-color);
    padding-left: 1.5em;
    padding-top: 15px;
    padding-bottom: 15px;
    background: rgba(0, 0, 0, .01);
}

/*-------------------------------------
    FILTER OPTIONS
---------------------------------------

Details elements for sidebar
 includes category options and regions options */

.filter-options ul {
    list-style: none;
}

.filter-options .collapse.show {
    background: white;
    box-shadow: 0 0 4px rgba(0, 0, 0, .05);
    margin-bottom: 20px;
    padding: 20px 5px;
    transition: none;
}

.filter-options summary.active, .filter-options ul li:hover, .filter-options ul li.active {
    color: var(--primary-color)
}

.filter-options details {
    padding: 5px 10px;
    font-size: 16px;
}

.filter-options summary {
    outline: none;
}

.filter-options li {
    transition: all 0.5s ease-in-out;
    padding: 5px;
}

.filter-city-item:hover, .filter-category-item:hover {
    background: rgba(0, 0, 0, .05);
    padding: 5px 15px;
}

.filter-region-item, .filter-city-item, .filter-category-item {
    cursor: pointer;
}

/* IMAGES */

.img-default {
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.img-thumbnail.rounded-circle {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
}

.img-secondary {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* =============
    SHOP CARD
=============== */

@media only screen and (max-width: 600px) {
    /* .col-6:nth-child(even), .col-12:nth-child(even), .col-md-12:nth-child(even), .col-md-6:nth-child(even) {

        padding-right: 7px;
    }
    .col-6:nth-child(odd), .col-12:nth-child(odd), .col-md-12:nth-child(odd), .col-md-6:nth-child(odd) {
        padding-left: 7px;
    } */
    .col-6:nth-child(odd) {
        /* padding-left: 0; */
        /* padding-left: 7px;*/
        padding-right: 7px !important;
    }
    .col-6:nth-child(even) {
        /* padding-right: 0; */
        /* padding-left: 7px;*/
        padding-left: 7px !important;
    }
}

/* -----------------------------
    CUSTOM FORM
-------------------------------- */

.my-form p a {
    color: var(--primary-color-dark) !important;
}

.border-right-2 {
    border-right: 2px solid rgba(0, 0, 0, .1)
}

@media only screen and (min-width:768px) {
    .border-right-md-2 {
        border-right: 2px solid rgba(0, 0, 0, .1)
    }
}

textarea {
    height: 100px;
}

form textarea.form-control {
    height: 100px;
}

.custom-form input[type="text"], .custom-form textarea, .custom-form select, .custom-form input[type="number"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 5px;
    margin: 0 0 25px 0;
}

@media only screen and (max-width: 687px) {
    .custom-form input[type="text"], .custom-form textarea, .custom-form select, .custom-form input[type="number"] {
        margin: 0 0 5px 0;
    }
}

.custom-form input {
    padding: 10px 15px;
    border: none;
    width: 100%;
}

/* FILTER SEARCH FORM */

.filter-search-input {
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    border-right: none;
    border-left: none;
    background: transparent;
    transition: all 0.6s ease;
    padding: 10px 15px;
}

.filter-search-form button:hover {
    transform: scale(1.1, 1.1);
}

@media only screen and (min-width: 687px) {
    .filter-search-input {
        padding: 10px 5px;
    }
}

.filter-sear:hover, .filter-search-input:focus, .filter-search-input:active {
    border-top: none;
    border-right: none;
    outline: none;
    border-left: none;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
    font-weight: 450;
}

.filter-search-input.animate:hover, .filter-search-input.animate:focus, .filter-search-input.animate:active {
    padding: 10px 30px;
}

button.no-style {
    border: none;
    outline: none;
    background: none;
    background-color: none;
}

.img-display {
    height: 250px;
    clear: both;
    width: 100%;
    background: url('../img/prod_img_replacement.jpg');
    background-size: 100% 250px;
    background-repeat: no-repeat;
    /* background: rgba(0, 0, 0, .05); */
}

.shop-card-title {
    font-weight: 600;
    font-size: 24px;
    margin: 0;
    color: #666;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: "Work sans", sans-serif;
}

.shop-card-img {
    height: 150px;
}

@media only screen and (max-width: 768px) {
    .shop-card-img {
        height: 150px;
    }
}

.text-light-1 {
    color: #aaa;
}

.bg-color-primary {
    background-color: var(--primary-color);
}

.bg-light-1 {
    background-color: rgba(0, 0, 0, .03);
}

.bg-gradient-primary {
    background: var(--primary-gradient);
}

.shop-card-description-text {
    color: #777;
    font-weight: 500;
    font-size: 16px;
    font-family: "Work sans", sans-serif;
}

.h-250 {
    height: 250px;
}

.h-150 {
    height: 150px;
}

.h-100px {
    height: 100px;
}

.h-min-100px {
    height: unset;
    min-height: 100px;
    max-height: 150px;
}

.h-95vh {
    height: 95vh;
}

.h-min-100 {
    min-height: 100%;
}

.h-80vh {
    height: 80vh;
}

@media only screen and (max-width: 2568px) {
    .h-sm-100 {
        height: unset !important;
        min-height: 100px;
    }
}

@media only screen and (min-width: 576px) {
    ul.large-spacing li {
        margin: 10px 0;
    }
    .shop-card-description-text li {
        margin: 7px 0;
    }
    .shop-card-description-text svg {
        margin-right: 10px;
    }
}

/* TYPOGRAPHY */

.text-bolder {
    font-weight: bolder;
}

.text-bold {
    font-weight: bold;
}

.color-primary {
    color: var(--primary-color);
}

.table .no-border, .table .no-border td, .table .no-border tr {
    border: none;
}

.h-60vh {
    height: 60vh;
}

.h-min-100vh {
    min-height: 100vh;
}

.text-white {
    color: white;
}

.text-white>* {
    color: white;
}

.text-black{
    color:rgb(0, 0, 0);
}

h1 {
    font-size: 42px;
    font-weight: bold;
}

.font-xsmall, .font-xsmall-fixed {
    font-size: 12px;
}

.font-small, .font-small-fixed {
    font-size: 14px;
}

.font-medium, .font-medium-fixed {
    font-size: 16px;
}

.font-large, .font-large-fixed {
    font-size: 18px;
}

.font-xlarge, .font-xlarge-fixed {
    font-size: 22px;
}

.font-xxlarge, .font-xlarge-fixed {
    font-size: 32px;
}

@media only screen and (max-width:768px) {
    h1 {
        font-size: 32px;
    }
    .font-xsmall {
        font-size: 10px;
    }
    .font-small {
        font-size: 12px;
    }
    .font-large {
        font-size: 16px;
    }
    .font-medium {
        font-size: 14px;
    }
    .font-xlarge {
        font-size: 18px;
    }
    .d-xs-block {
        display: block !important;
    }
}

@media (max-width: 576px) {
    .font-xsmall {
        font-size: 8px;
    }
    .font-small {
        font-size: 10px;
    }
    .font-large {
        font-size: 14px;
    }
    .font-medium {
        font-size: 12px;
    }
    .font-xlarge {
        font-size: 16px;
    }
    .product-content .container {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* BORDERS */

.bt-gray {
    border-top: 1px solid rgba(0, 0, 0, .2);
}

.bb-gray {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.b-gray {
    border: 1px solid rgba(0, 0, 0, .2);
}

.fancy-underline {
    padding-bottom: 25px;
    position: relative;
}

.fancy-underline::before {
    display: block;
    content: "";
    width: calc(60% + 30px);
    position: absolute;
    bottom: 0;
    height: 15px;
    background: var(--primary-color-faded);
    z-index: 1;
}

.fancy-underline::after {
    display: block;
    content: "";
    width: 60%;
    position: absolute;
    bottom: 0;
    height: 15px;
    background: var(--primary-color);
    z-index: 2;
}

.custom-round-btn-large {
    border-radius: 80px;
    padding: 20px 70px;
    background: var(--primary-gradient);
    color: white;
    font-size: 20px;
}

.custom-round-btn-large:hover {
    background: var(--primary-color);
}

@media screen and (max-width: 600px) {
    .hotdeal-prices {
        font-size: 0.75rem;
    }
    .carousel-header {
        font-size: 30px;
    }
    .font-xlarge {
        font-size: 0.75rem;
    }
}

/* OWL CAROUSEL */

body .owl-carousel .owl-nav button.owl-next, body .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    top: calc(50% - 10px);
    background: rgba(0, 0, 0, .6) !important;
    color: white !important;
    border-radius: 50%;
    font-size: 20px !important;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}

body .owl-carousel .owl-nav button.owl-next span, body .owl-carousel .owl-nav button.owl-prev span {
    color: white !important;
}

.owl-prev {
    left: 0px;
}

.owl-next {
    right: 0px;
}

/* category filter */

.filter {
    background-color: white;
    margin-left: 20px;
    width: 100%;
    margin-right: 20px;
}

.filter-ico {
    background-color: var(--primary-color);
    padding: 10px;
}

/* dashboard */

.head-txt {
    color: rgb(97, 97, 97, 0.5);
}

.card-txt {
    color: rgb(97, 97, 97, 0.5);
    font-size: 40px;
}

.card.d-flex.flex-column.flex-sm-row .card-img {
    width: 100%;
    height: 10%;
    min-height: 100px;
    max-height: 150px;
    padding: 0;
    margin: 0;
}

.card.d-flex.flex-column.flex-sm-row .card-img img {
    width: 100%;
    max-width: 100%;
    height: 150px;
}

@media only screen and (min-width: 576px) {
    .card.d-flex.flex-column.flex-sm-row .card-img {
        width: 10%;
        min-width: 200px;
        height: 100%;
        max-height: unset;
        flex-shrink: unset !important;
    }
    .card.d-flex.flex-column.flex-sm-row .card-img img.img-default {
        height: 100%;
    }
}

/* notifications */

.notif-dropdown {
    width: 270px;
    font-size: 0.75rem;
    line-height: none;
    display: block;
    padding: 0;
}

.notif-dropdown .text {
    font-size: 13px;
    padding: 0;
    line-height: 1.1875;
    display: block;
}

.notif-dropdown .text h6 span {
    font-size: 14px;
}

/* NEW------------------------------------ */

/* Form for login */

.user-search {
    width: 100%;
}

.my-form-control {
    background: #ccc;
    color: #888;
    border: none;
    padding: 1.2rem;
    font-size: 1.2rem;
}

.relative .img-section {
    position: relative;
}

.relative .img-section img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 768px) {
    .relative {
        position: relative;
    }
    .relative .content {
        position: relative;
        opacity: 1;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    }
    .relative .img-section {
        position: absolute;
        z-index: -10;
        width: 50%;
        height: 100%;
    }
}

@media only screen and (min-width: 75px) {
    .relative .img-section img.h-100 {
        height: unset !important;
    }
}

.my-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.my-form input, .my-form select {
    padding: 15px 20px;
    border: none;
    background: white;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, .3);
    border-radius: 5px;
    width: 100%;
    color: #999;
    font-size: 0.9rem;
    margin: 0px 0;
}

.my-form input[type=checkbox] {
    width: unset;
    pointer-events: all !important;
    position: relative !important;
    opacity: 1 !important;
    border: 2px solid black;
}

.my-form input:focus, .my-form select:focus {
    background: white;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .1);
}

/* floating button */

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 15px;
    background-color: rgb(255, 144, 53);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}

.my-float {
    margin-top: 14px;
}

/* photogallery */

.full-screen {
    min-height: 100vh !important;
}

.myoverlay {
    position: fixed;
    display: none;
    transition: display 0.5s;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 20;
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.myoverlay.show {
    display: flex;
    animation: 1s ease-in-out show;
}

.navbar .nav-item {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

@media only screen and (max-width: 687px) {
    .navbar .nav-item {
        padding-left: 5px !important;
        padding-right: 5px !important;
        position: relative;
    }
    .navbar .nav-item .nav-link span.badge {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.myclose {
    position: absolute;
    top: 60px;
    right: 5%;
    color: white;
}

/* ad */

.blink {
    animation: blinker 0.6s linear infinite;
    color: red;
    font-weight: bolder;
    text-shadow: 1px solid green;
}

@keyframes blinker {
    50% {
        opacity: 30%;
        color: red;
    }
    70% {
        opacity: 50%;
        color: blue;
    }
}

#slider {
    width: 100%;
    height: 230px;
    margin: 0 auto;
    border: 10px solid transparent;
    padding: 0px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

#slider .card-image {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: 15px;
    font-size: initial;
    line-height: normal;
    transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
    /* Slide css animation */
    background-size: cover;
    vertical-align: top;
    box-sizing: border-box;
    white-space: normal;
}

.b-radious {
    border-radius: 10px;
}

.glyphicon {
    margin-bottom: 10px;
    margin-right: 10px;
}

small {
    display: block;
    line-height: 1.428571429;
    color: #999;
}

/* all followers */

.follower img {
    border-radius: 100%;
}

.follower-img {
    height: 150px;
    width: 150px;
}

/* new carousel */
#caroimg{
    object-fit: fill;
    width: 100%;
    max-height: 60vh;
}

/* .carousel {
    background: #007aeb;
} */

.carousel-item .img-fluid {
    width: 100%;
}

.img-fluid-1{
    width: 100%;
    height: 150px;
    object-fit: cover;
    
}

@media only screen and (max-width: 600px) {
    .img-fluid {
        height: 200px;
    }
    .img-fluid-1{
        height: 150px;
        object-fit: cover;
    }
    #caroimg{
        height: 200px;
        max-height: 60vh;
    }
}

@media only screen and (min-width: 599px) {
    .img-fluid {
        height: 300px;
    }
    .img-fluid-1{
        height: 150px;
    }
    #caroimg{
        height: 300px;
        max-height: 60vh;
    }
}

.carousel-item a {
    display: block;
    width: 100%;
}

.carousel-text {
    bottom: 0;
    position: absolute;
}

/* free product listing === list veiw == */

/* product list CSS here */

.container-prodlisting {
    display: flex;
    height: 100%;
}

#prodprice {
    color: orange;
}

#searchinput {
    width: 40%;
}

#searchinput[type=text] {
    color: black;
    padding: 7px;
}

.container-box {
    background-color: white;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

.container-box:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#prod-text {
    margin-left: 20px;
}

.contents {
    padding-left: 10px;
    float: left;
    text-decoration: none;
    color: black;
}

.image-product {
    height: 10px;
    width: 10px;
}

.contents:hover {
    text-decoration-style: none;
    color: rgba(0, 0, 0, 0.5);
}

a, a * {
    text-decoration: none !important;
}

#catlist {
    padding: 5px;
    list-style: none;
}

/* index various items list */
.hotdeal_back {
    border-radius: 6px;
    /* background: url('https://miro.medium.com/max/2560/0*SFruZlLdiXcMeklA.jpg'); */
    background-color: #ffffff;
    background-size: cover;
    background-blend-mode: multiply;
    background-position-x: 100%;
    background-position-y: center;
    background-repeat: no-repeat;
}

.title-row{
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    padding: 2px;
    background-color: rgb(255, 144, 53);
    color: white;
}

.swapitem_backg {
    /* background: url('https://thumbs.dreamstime.com/b/white-wood-wall-texture-background-panels-graphic-resources-149622903.jpg'); */
    background-color: #ffffff;
    background-blend-mode: overlay;
    border-radius: 6px;
}

.requested_prod {
    border-radius: 6px;
   /*  background: url('https://img.freepik.com/free-photo/electronic-gadgets-black-concrete-background-concept-accessories-successful-business-flat-lay_76255-466.jpg?size=626&ext=jpg'); */
    background-color: rgb(255, 255, 255);
    background-size: cover;
    background-blend-mode: multiply;
    background-position-x: 100%;
    background-position-y: center;
    background-repeat: no-repeat;
}

.free_prod {
    border-radius: 6px;
    /* background: url('https://media.istockphoto.com/photos/charging-cables-for-smartphone-and-tablet-picture-id1034427464?k=6&m=1034427464&s=612x612&w=0&h=pxaC3_NwwZWFonQD7HRrV8vBmkMu0UD6WeNaEniu8WI='); */
    background-color: #ffffff;
    /* background-color: rgb(253, 207, 249); */
    background-size: cover;
    background-blend-mode: multiply;
    background-position-x: 100%;
    background-position-y: center;
    background-repeat: no-repeat;
}

.fa-arrow-alt-circle-right {
    font-size: 20px;
    /* color: white */
}

.cla {
    font-size: 20px;
    color: black;
}

.fa-fire-alt, .fa-award {
    color: rgb(0, 0, 0)
}

/* swap_offer card image preview */

#myImg {
    cursor: pointer;
    transition: 0.3s;
    width: 90px;
    height: 90px;
    object-fit: cover;
}

/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (Image) */

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

/* Caption of Modal Image (Image Text) - Same Width as the Image */

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */

.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

/* The Close Button */

.close {
    top: 15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    margin-right: 25px;
    background-color: red;
    padding: 5px;
}

.close:hover, .close:focus {
    color: rgb(255, 255, 255);
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* Forum */
.forum-100-fixed{
    overflow-y: auto;
    max-height: 100%;
}
@media only screen and (min-width: 576px) {
    .forum-sm-100-fixed {
        overflow-y: auto;
        max-height: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .forum-md-100-fixed {
        overflow-y: auto;
        max-height: 100%;
    }
    .forum-md-100-overflow-hidden{
        overflow: hidden;
        height: 100%;
    }
}

@media only screen and (min-width: 992px) {
    .forum-lg-100-fixed {
        overflow-y: auto;
        max-height: 100%;
    }
    .forum-lg-100-overflow-hidden{
        overflow: hidden;
        height: 100%;
    }
}

/* forum sub post */
#post-content{
    max-width: 280px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}

.post-list{
    background:linear-gradient(0deg, rgba(237,235,235,1) 9%, rgba(255,255,255,1) 100%);
}

.post-list:hover{
    background: rgb(237,235,235);
}


/* SCROLL */


.overflow-x-auto {
    overflow-x: auto;
  }
  
  body * {
    scrollbar-width: thin;
  }
  
  body *::-webkit-scrollbar {
    height: 5px;
  }
  
  body *::-webkit-scrollbar-track {
    background: transparent;
  }
  
  overflow-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  body *::-webkit-scrollbar-thumb {
    background: #ccc;
  }
  
  .overflow-x-auto::-webkit-scrollbar {
    height: 5px;
  }
  
  /* Track */
  
  .overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  
  .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #ccc;
  }