/*Main file to write style sheet of yyovvo website*/


/*Added font class to body of the web page why not live*/


body {
    font-family: sans-serif !important;
    /* color: #000000; */
    color: var(--secondary-color);
    overflow-x: hidden;
}

@font-face {
    font-family: 'aachenbtbold';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/aachenbtbold-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/aachenbtbold-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'gill sans mt std medium';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/gillsansmtstdmedium-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/gillsansmtstdmedium-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'c39hrp60dhtt';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/c39hrp60dhtt-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/c39hrp60dhtt-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'americantypewriter medium';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/americantypewritermedium-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/americantypewritermedium-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'futura2 book';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/futura2book-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/futura2book-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'bickleyscriptlet';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/bickleyscriptlet-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/bickleyscriptlet-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'futura2 light';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/futura2light-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/futura2light-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'shelley lt andantescript';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/shelleyltandantescript-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/shelleyltandantescript-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'americantypewriter bold';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/americantypewriterbold-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/americantypewriterbold-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'script bold mt';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/scriptboldmt-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/scriptboldmt-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'schusshanditc tt';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/schusshanditctt-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/schusshanditctt-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'satero serif lt pro';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/sateroserifltpro-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/sateroserifltpro-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'richie';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/richie-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/richie-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'adhoc';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/adhoc-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/adhoc-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'arid itc std';
    font-weight: normal;
    font-style: normal;
    src: url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/WOFF/ariditcstd-webfont.woff') format('woff'), url('https://d1xkhapf8f3lxw.cloudfront.net/cdn/3.0.0.18258/mnpfonts/TTF/ariditcstd-webfont.ttf') format('truetype');
}

a:hover {
    text-decoration: none !important;
}

.input {
    border-radius: 10px;
}

/** For slick slider */

.slider {
    overflow: hidden;
}

.slider {

    display: none;
}

.search-bar .ui-input-text {
    width: 100%;
}


/*Main Header Area CSS*/

.header-display {
    /*position: sticky;
    top: 0px;
    z-index: 5;*/
    background-color: white;
    box-shadow: var(--primary-40) 0px 0px 15px 0px;
    transition: opacity 300ms ease 0s;
}


/*.header-search-input
{
    background-color: white;
    box-shadow: rgb(255 231 117 / 27%) 0px 7px 4px;
    transition: opacity 300ms ease 0s;
     position: sticky;
    top: 0px;
    z-index: 15;

    }*/

.logo-area a {
    font-size: 35px;
    font-weight: bolder;
    color: black;
}

.logo-area a:hover {
    text-decoration: none;
    color: var(--primary-color);
}

.logo-area span {
    padding-right: 10px;
}


/*.search-bar {
    padding-top: 15px;
    }*/

.search-bar>.input-group input {
    border: 2px solid var(--primary-color);
    border-radius: 24px;
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    background-color: var(--primary-10);
    padding: 20px;
}

/* focur ringed search bar input field */
.search-bar>.input-group input:focus {
    box-shadow: 0 0 5px var(--primary-color);
    border: 2px solid var(--primary-color);
    outline: none;
}

.search-bar>.input-group input::placeholder {
    color: var(--primary-color);
    font-size: 18px;
    opacity: 1;
}

#search-icon {
    border: none;
    background-color: transparent;
    color: var(--primary-color);
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 20px;
    z-index: 1111111;
}


/*.header-icons {
    padding-top: 20px;
    }*/

.header-icons a:first-child,
.start-selling-btn {
    color: var(--secondary-color);
    font-size: 14px;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: var(--primary-color);
    display: inline-block;
}

.header-icons a:first-child:hover,
.start-selling-btn:hover {
    background-color: var(--primary-80);
    color: var(--secondary-color);
}

.header-icons a {
    padding: 4px 4px 4px 4px;
    font-size: 20px;
    color: var(--primary-color);
    margin: 0px 2px;
}

.h-timer-timer-wrap
{
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.header-timer p
{
      display: inline-block;
}
.header-icons a:last-child
{
  margin-right: 0;
  padding-right: 0;
}
.header-icons a i
{
    line-height: 0;
}
.header-icons .header-btn
    {
        color: white;
        font-size: 14px;
        text-decoration: none;
        padding: 5px 8px;
        border-radius: 5px;
        display: inline-block;
        background-color: var(--primary-color);
    }

/* .header-icons a:last-child {
    padding: 4px 0px 4px 4px;
}
.startselling a:last-child {
    padding: 4px 0px 4px 4px;
    } */

.header-icons a:hover {
    color: var(--primary-60);
}
.header-social-icons a {
    font-size: 20px;
    padding: 5px;
    color: var(--primary-color);
    position: relative;
}

.header-social-icons a:hover {
    color: var(--primary-60);
}

.counter {
    position: relative;
    top: -18px;
    right: 6px;
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 2px 6px 2px 6px;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    text-align: center;
    font-size: 12px;
    margin-left: -20px;
}

.megamenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.title {
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #00000036;
    padding-bottom: 10px;
    text-transform: capitalize;
}

.col-megamenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
}

.col-megamenu ul li a {
    font-size: 14px;
    display: block;
    color: rgb(0, 32, 77);
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 10px;
    padding-bottom: 3px;
    text-transform: capitalize;
}

.col-megamenu ul li a i {
    font-weight: 700;
    position: absolute;
    right: 10px;
    top: 7px;
}

.col-megamenu ul li {
    position: relative;
}

.col-megamenu ul ul {
    display: none;
    position: absolute;
    left: 145px;
    width: 100%;
    top: 0;
    border-radius: 5px;
    background-color: #fceea9;
    padding: 0;
    list-style-type: none;
    z-index: 1;
}

.col-megamenu ul li:hover ul {
    display: block;
}

.col-megamenu ul ul ul {
    opacity: 0;
    left: 145px;
    z-index: 2;
    background-color: #fff5c2;
}

.col-megamenu ul ul li:hover ul {
    opacity: 1;
    z-index: 3;
}

.col-megamenu ul ul li a {
    padding-left: 10px;
}

.col-megamenu ul ul li a i {
    padding-left: 15px;
    font-weight: 700;
    position: absolute;
    right: 10px;
}

.col-megamenu ul ul li a:hover {
    background-color: var(--primary-70);
    opacity: 1;
}

.col-megamenu ul ul ul ul {
    opacity: 0 !important;
    z-index: 4;
}

.col-megamenu ul ul ul li:hover ul {
    opacity: 1 !important;
}

.col-megamenu ul ul ul ul ul {
    display: none !important;
    z-index: 5 !important;
}

.col-megamenu ul ul ul ul li:hover ul {
    display: block !important;
}

ul.third-child-view-left {
    left: -145px !important;
}

.third-child-view-left ul {
    opacity: 0;
}

.third-child-view-left ul {
    opacity: 0;
}

.third-child-view-left li:hover ul {
    opacity: 1 !important;
}

ul.forth-child-view-left {
    left: -145px !important;
    background-color: #fff5c2 !important;
}

.forth-child-view-left li ul {
    display: none !important;
    z-index: 10;
    left: -145px !important;
}

.forth-child-view-left li:hover ul {
    display: block !important;
}

.dropdown-menu {
    background-color: var(--primary-10) !important;
}


/*Nav bar css*/


/*Latest Updates or Promotion Area*/

.latest-updates {
    background-color: var(--primary-10);
    padding: 15px 0px 15px 10px;
}

.latest-updates a {
    color: black;
}

.latest-updates a span {
    padding-left: 10px;
    font-size: 14px;
}


/*Main Banner and Slick Slider*/

.pop-slider-indicators li {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
}

#carouselExampleControls {
    margin-bottom: 25px;
}


#right-banner {
    height: 85vh;
    max-height: 650px;
   
}
#right-banner img {
    max-width: 100%;
    height: auto;
}
.carousal-background {
    background-color: var(--primary-60) !important;
    /* background-color: var(--primary-60); */
}

.banner-image img {
    display: none;
    max-width: 100%;
}

.banner-text {
    margin: auto;
    text-align: center;
}

.banner-text p {
    margin-bottom: 25px;
    margin-top: 25px;
}

.banner-text a {
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

.slick-next:before,
.slick-prev:before {
    color: black !important;
}

.slick-initialized .slick-slide {
    /* display: block; */
    margin-right: 5px;
}


/*.slick-slide img {
  width: 100%;
  max-height: 370px;
  min-height: 370px;
  object-fit: cover;
  }*/

.thumb img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}


/*Birthday Cards Categories Slider*/

.category-card {
    border: 2px solid #012e6c;
    border-radius: 5px;
    text-align: center;
    justify-content: center;
    height: 100px;
    display: inline-flex !important;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
}

.category-card a {
    color: black;
    padding: 5px;
}

.category-card a:hover {
    text-decoration: none;
}

.categories-tags {
    padding: 0px 0px 10px 0px;
}

.slide.category-card {
    box-shadow: 4px 2px 3px 0px #00000045;
}

.slide.category-card:hover {
    box-shadow: rgba(0, 32, 77, 0.15) 0px 8px 18px 0px;
    transform: translateX(-2px);
    transition: all 200ms ease-in-out 0s;
}


/*Featured Items Slider and all slider having a grid layout on main page */


/*.featured-details {
  padding-bottom: 35px;
}

.featured-details h2 {
  padding-top: 15px;
  padding: 20px 0px 20px 15px;
  font-size: 26px;
  font-weight: 700;
  }*/

.categories-heading h2 {
    font-size: 26px;
    font-weight: 700;
}

.categories-heading p {
    padding-top: 10px;
    padding-bottom: 15px;
}


/*div.categeory-thumbnail {
  transform: translateY(0px);
  transition: all 200ms ease-in-out 0s;
}

div.categeory-thumbnail:hover {
  box-shadow: rgba(0, 32, 77, 0.15) 0px 11px 22px 0px;
  transform: translateY(-2px);
}
*/

.categories-grid {
    background-color: var(--primary-10);
    padding-top: 50px;
    padding-bottom: 50px;
}

.view-all-link {
    margin-top: 20px;
}

.view-all-link a {
    padding: 14px 50px 14px 50px;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    color: var(--primary-color);
    font-weight: bold;
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    box-shadow: rgba(0, 32, 77, 0.15) 0px 3px 8px 0px;
    display: inline-block;
}

.view-all-link a:hover {
    text-decoration: none;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 32, 77, 0.15) 0px 8px 18px 0px;
}


/*Information Card */

.info-cards {
    padding: 50px 0px 50px 0px;
}

.cards-feature {
    background-color: #e6eefa;
    margin: 0px 60px 0px 60px;
    padding: 15px 0px 1px 75px;
    border-radius: 5px;
}

.cards-feature img {
    float: left;
    width: 50px;
    margin-right: 15px;
}

.cards-feature h2 {
    font-size: 18px;
    font-weight: bold;
}


/*Reminder Section*/

.reminder-section {
    background-color: var(--primary-80);
    padding: 15px;
}

.reminder-card {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
}

.reminder-card p {
    margin: 0px;
    font-size: 18px;
    font-weight: 700;
}

.reminder-card>p>img {
    padding-right: 15px;
}

.reminder-card>p>a {
    padding-left: 15px;
    color: black;
}

.reminder-card>p>a>i {
    padding-left: 10px;
}

.footer-description {
    padding-bottom: 25px;
    padding-top: 25px;
    background-color: #f8f8f9;
}


/*Footer Description Area*/

.description h2 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

.description h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.description p {
    font-weight: 300;
}

.forum-d-wrpper,.forum-d-wrpper2 {
    background-color: #fffefa;
    padding: 25px;
}

/* .forum-d-wrpper2 {
    background-color: #fffef8;
    padding: 30px;
} */

.join-forum {
    color: var(--secondary-color);
    background-color: var(--primary-color);
    padding: 6px 10px;
    font-weight: 500;
    box-shadow: 2px 1px 8px #00000008;
}


/*Footer Section Links*/

.footer-section {
    background-color: #f0f1f3;
    padding-top: 32px;
    padding-bottom: 32px;
}

.footer-info h2 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

ul.footer-links {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
}

.footer-links li a {
    display: block;
    color: rgb(0, 32, 77);
    padding-top: 8px;
    padding-bottom: 8px;
}

.footer-links li a:hover {
    color: var(--primary-80);
}


/*Footer Bottom  and Keep in touch Area*/

.footer-bottom {
    background-color: #f8f8f9;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer-bottom h2 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    padding-bottom: 15px;
}

ul.apps-link {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
}

.apps-link li {
    display: inline-block;
}

ul.payment-link {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
}

.payment-link li {
    display: inline-block;
    padding: 5px 5px 5px 5px;
}

ul.location-link {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
}

.location-link li {
    display: inline-block;
    padding: 5px 10px 5px 10px;
}

.location-link li a {
    color: black;
    font-size: 18px;
    font-weight: 700;
}

.keep-in-touch h2 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

.keep-in-touch p {
    margin: 0px;
}

ul.social-icons {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
    padding-bottom: 30px;
}

.social-icons li {
    display: inline-block;
    padding: 0px 15px 15px 15px;
    font-size: 28px;
}

.social-icons li a {
    color: black;
}

.social-icons li a:hover {
    color: var(--primary-80);
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    outline: none !important;
}


/*Card page css*/

.categories-breadcrumb {
    margin: 20px 0px 15px 0px;
    background-color: var(--primary-color) !important;
}

.categories-breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-flex;
}

.categories-breadcrumb span {
    color: var(--secondary-color);
}

.categories-breadcrumb ul li {
    padding-right: 15px;
    padding-left: 15px;
}

.categories-breadcrumb ul li a {
    color: var(--secondary-color);
    font-size: 14px;
}

.current-category-name h2 {
    font-size: 26px;
    font-weight: 600;
}

.current-category-name {
    margin-left: 35px;
    margin-top: 10px;
}

.sort-by-dropdown {
    width: 25%;
    float: right;
}

.sort-by-dropdown form select {
    border-radius: 25px;
    border-color: #012e6c;
    margin-bottom: 25px;
}


/*Filter Left sidebar css*/

.filter-sidebar {
    padding-top: 15px;
    padding-left: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    background-color: var(--primary-10);
    width: 100%;
    position: sticky;
    top: 0;
}

.filter-categories ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.filter-categories ul li {
    font-size: 14px;
}

.filter-categories ul li a {
    color: black;
}

.filter-categories ul li a span {
    font-size: 18px;
    font-weight: 800;
    padding-right: 5px;
}

.active-category {
    padding-left: 30px;
    font-weight: 600;
}

.filter-deliveryto,
.filter-order-options,
.filter-item-type,
.filter-location,
.filter-color-options,
.filter-price,
.filter-dispatch-options,
.filter-offers {
    margin-top: 20px;
    margin-bottom: 20px;
}

.filter-deliveryto h2,
.filter-order-options h2,
.filter-item-type h2,
.filter-location h2,
.filter-color-options h2,
.filter-price h2,
.filter-dispatch-options h2,
.filter-offers h2 {
    font-size: 15px;
    font-weight: 600;
}

.filter-sidebar label {
    font-size: 14px;
}

#custom-price-field {
    width: 90%;
    margin-left: 20px;
    margin-top: 10px;
}

#low-price-option {
    margin-right: 10px;
    border-radius: 10px;
}

#high-price-option {
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
}

#custom-price-field button {
    border: none;
    padding: 0px 15px 0px 15px;
    border-radius: 10px;
    font-weight: bolder;
}

#custom-price-field input {
    border-radius: 10px;
    margin-right: 10px;
}

.filter-deliveryto select {
    width: 90%;
    border-radius: 10px;
    margin-left: 20px;
}


/*Cards grid css*/

.card-grid-section {
    margin: 0px 0px 0px 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.grip-bottom-space {
    margin-bottom: 40px;
}

.grid-card {
    width: auto;
    margin-bottom: 30px;
}

.grid-card a img {
    width: 100%;
    /*max-height: 400px;
    min-height: 400px;*/
    object-fit: cover;
    box-shadow: rgb(0 32 77 / 15%) 0px 3px 8px 0px;
    transition: all 200ms ease-in-out 0s;
    border-radius: 5px;
}

.grid-card a img:hover {
    box-shadow: rgba(0, 32, 77, 0.15) 0px 11px 22px 0px;
    transform: translateX(2px);
}

.grid-card h2 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-card p {
    font-size: 12px;
    margin-top: -5px;
    margin-bottom: 0px;
}

.grid-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0px;
}

.grid-card h3 span {
    padding-right: 10px;
}

button.best-seller {
    background-color: #fff4be;
    border: none;
    font-size: 12px;
    border-radius: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 0px;
}

button.best-seller img {
    width: 16px;
    height: 16px;
    margin-right: 2px;
}

.page-sizes-list ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
    display: block;
}

.review-stars span {
    color: #e8e4f6;
}

.shop-review {
    position: relative;
    left: 60px;
    top: -20px;
}

span.review-count {
    color: black;
}

.checked {
    border-width: 2px !important;
    border-color: rgb(206, 51, 86) !important;
}

.page-sizes-list ul li {
    font-weight: bold;
    border: 1px solid;
    padding: 15px 15px 0px 15px;
    cursor: pointer;
    margin-bottom: 15px;
}

.page-sizes-list ul li>span {
    float: right;
}

.page-sizes-list ul li>p {
    font-weight: normal;
}

.page-sizes-list ul li:hover {
    box-shadow: rgba(0, 32, 77, 0.15) 0px 1px 4px 0px;
}

.selective-page-list {
    display: block;
}

.selective-page-list ul li input {
    display: none;
}

.customised-page-section {
    padding: 25px 0px 25px 0px !important;
    margin-bottom: 25px;
    border-bottom: 2px solid;
}

.customised-page-section h2 {
    font-size: 24px;
    line-height: 40px;
    font-weight: bold;
    padding-right: 30px;
}

img#image-slider-shadow {
    box-shadow: #0e0e0e3d 0px 0px 4px 4px;
    margin-bottom: 15px;
}

.slider-left-text {
    width: 330px;
    height: 472px;
    padding: 10px;
    text-align: initial;
    position: absolute;
    top: 60px;
    left: 105px;
    border: 3px dotted #57e99a;
    transition: all .2s;
}

.slider-left-text:hover,
.slider-right-text-block-3:hover,
.slider-right-text-block-2:hover,
.slider-right-text-block-1:hover,
.slider-backside-text-block-2:hover,
.slider-backside-text-block-1:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border: 3px solid #57e99a;
}

.slider-right-text-block-1 {
    width: 330px;
    height: 150px;
    padding: 10px;
    text-align: initial;
    position: absolute;
    top: 60px;
    left: 105px;
    transition: all .2s;
}

.slider-right-text-block-2 {
    width: 330px;
    height: 150px;
    padding: 10px;
    text-align: initial;
    position: absolute;
    top: 220px;
    left: 105px;
    transition: all .2s;
}

.slider-right-text-block-3 {
    width: 330px;
    height: 150px;
    padding: 10px;
    text-align: initial;
    position: absolute;
    top: 380px;
    left: 105px;
    transition: all .2s;
}

.text-customise-icon {
    background-color: #57e99a;
    box-sizing: content-box;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    height: 32px;
    width: 32px;
    text-align: center;
    border-radius: 50%;
    line-height: 28px;
    margin-bottom: 6px;
    margin-right: 10px;
    margin-right: 10px;
    position: absolute;
    left: -12px;
    top: -15px;
}

.text-customise-icon:before {
    content: 'T';
}

.slider-backside-text-block-1 {
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    height: 170px;
    text-align: center;
    position: absolute;
    top: 105px;
    left: 190px;
    transition: all .2s;
}

.slider-backside-text-block-2 {
    width: 330px;
    height: 125px;
    padding: 10px;
    text-align: center;
    position: absolute;
    top: 290px;
    left: 105px;
    transition: all .2s;
}

.app-button.text-center {
    bottom: 0px;
    position: absolute;
}

.app-button button {
    padding: 10px;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    margin-left: 15px;
    background-color: white;
    color: var(--primary-color);
    font-weight: bold;
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    box-shadow: rgba(0, 32, 77, 0.15) 0px 3px 8px 0px;
}

.edit-options {
    text-align: center;
}

.edit-options h2 {
    text-align: left;
}

.edit-options ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
}

.edit-options ul li {
    border: 1px solid #f3f4f4;
    margin-bottom: 10px;
    cursor: pointer;
}

.edit-options ul li span {
    float: left;
    padding: 36px 15px;
}

.edit-options ul li img {
    max-height: 96px;
    width: auto;
    border: solid 1px #f3f4f4;
}

.edit-options ul li a {
    float: right;
    padding: 36px 15px;
    color: #57e99a;
    font-weight: 700;
}

.edit-options ul li h2 {
    text-align: center;
    font-size: 20px;
    font-style: italic;
    padding: 36px 15px;
    display: inline-block;
}

.image-preview {
    text-align: center;
    padding: 15px;
    background-color: #f7f7f775;
    margin-bottom: 15px;
}

.image-preview img {
    max-height: 250px;
    width: auto;
    outline: 3px solid var(--primary-60);
}

.customised-tabs {
    margin-bottom: 50px;
}

.nav-tabs {
    border-bottom: 1px solid var(--primary-60);
}

.nav-tabs .nav-link.active {
    color: var(--secondary-color);
    font-weight: bold;
    background-color: var(--primary-color);
    border-color: var(--primary-90);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--primary-60);
}

.tab-content {
    text-align: center;
    padding: 20px 10px 20px 10px;
}

.choose-photo-option ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-flex;
}

.choose-photo-option ul li {
    padding: 0px 20px 0px 20px;
}

.choose-photo-option ul li a {
    font-size: 30px;
    color: #fdd100;
}

.choose-photo-option ul li a:hover {
    color: black;
}

.positioning-arrows button {
    border: none;
    background-color: transparent;
}

.positioning-arrows button i {
    color: #fdd100;
    font-size: 20px;
}

.photo-position-option ul li a {
    font-size: 30px;
    color: #fdd100;
    padding: 5px 10px 5px 10px;
    border: 3px solid;
}

.photo-effect ul {
    display: inline-flex;
}

.photo-effect ul li {
    padding: 10px 10px;
}

.photo-effect ul li button {
    padding: 10px 10px;
    border: 2px solid #000000;
    background-color: white;
    border-radius: 5px;
}

.photo-effect ul li button:hover {
    border: 2px solid var(--primary-60);
    color: var(--primary-60);
}

.app-button button:hover {
    text-decoration: none;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 32, 77, 0.15) 0px 8px 18px 0px;
}

.carousal-item-container {
    width: 100%;
    max-width: 350px;
}


/*Product listing styles*/

.product-slider img {
    width: 100%;
    height: 100%;
    max-width: 380px;
    max-height: 520px;
    border: 2px solid grey;
}

.product-name h2 {
    font-size: 24px;
    font-weight: 600;
}

.product-price {
    display: flow-root;
    padding-bottom: 10px;
}

.product-price p {
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 0px;
    float: left;
}

.total-sales p {
    background-color: var(--primary-10);
    padding: 5px 7px;
    font-size: 12px;
    border-radius: 10px;
    display: inline-block;
    color: var(--primary-color);
}

.stock-status p {
    background-color: var(--primary-10);
    padding: 5px 7px;
    font-size: 12px;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    color: var(--primary-color);
}

p.actual-price {
    font-size: 18px;
    font-weight: 400;
    padding: 5px;
    margin-left: 15px;
    text-decoration: line-through;
}

p.saved-money {
    clear: both;
    font-size: 16px;
    font-weight: 600;
}

p.saved-money span {
    background: var(--primary-70);
    padding: 5px 5px;
    font-size: 15px;
    border-radius: 10px;
    font-weight: 400;
}

.primary-colors {
    margin-top: 15px;
}

.secondary-colors {
    margin-bottom: 25px;
}

.secondary-color,
.primary-colors select {
    border-radius: 10px;
}

span.rating-sumup {
    position: absolute;
    left: 45%;
    margin-top: 6px;
}

span.shop-currency {
    margin-right: -5px;
}

.brand-name a {
    color: black;
    text-decoration: underline;
}

.rating {
    border: none;
    float: left;
}

.rating>input {
    display: none;
}

.rating>label:before {
    margin: 5px;
    font-size: 1.8em;
    font-family: "Material Icons";
    display: inline-block;
    content: "\e3e3";
}

.rating>.half:before {
    content: "\f089";
    position: absolute;
}

.rating>label {
    color: #ddd;
    float: right;
}


/***** CSS Magic to Highlight Stars on Hover *****/

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
    color: #FFD700;
    cursor: pointer;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
    color: #FFED85;
}

.product-add-to-cart button {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    min-height: 48px;
    cursor: pointer;
    text-align: center;
    padding: 8px 20px;
    margin-left: 5px;
    border: none;
    border-radius: 8px;
    color: var(--secondary-color);
    background-color: var(--primary-color);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.product-add-to-cart button:not(:disabled):hover,
.product-add-to-cart button:not(:disabled):focus {
    text-decoration: none;
    background-color: var(--secondary-color);
    box-shadow: rgb(0 32 77 / 15%) 0px 8px 18px 0px;
    color: var(--primary-color);
    border: 2px solid;
}

.product-add-to-cart button img {
    width: 80px;
    margin-left: 10px;
}

.buy-now button {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-height: 48px;
    cursor: pointer;
    text-align: center;
    padding: 8px 16px;
    width: 100%;
    border: none;
    border-radius: 8px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: 2px solid;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.buy-now button,
.product-add-to-cart {
    margin-top: 10px;
}

.buy-now button:not(:disabled):hover,
.product-add-to-cart button:not(:disabled):focus {
    text-decoration: none;
    background-color: var(--primary-color);
    box-shadow: rgb(0 32 77 / 15%) 0px 8px 18px 0px;
    color: var(--secondary-color);
}

.details-tab {
    padding: 20px 20px 20px 20px !important;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.review-star {
    float: left;
    padding-right: 10px;
}

.review-conatiner p span {
    font-weight: 700;
    padding-right: 10px;
}

.recommended-product p {
    padding-right: 10px;
    margin-top: -3px;
    margin-bottom: 0px;
}

.review-container {
    border: 2px solid #f7f6f0;
    padding: 10px 10px 15px 10px;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.progress-bar {
    background-color: var(--primary-70) !important;
}

.rating-block p {
    float: left;
    padding-right: 25px;
}

.rating-stars>.fa {
    font-size: 25px;
}

.checked {
    color: var(--primary-70) !important;
}


/* Three column layout */

.side {
    float: left;
    width: 15%;
    margin-top: 10px;
}

.middle {
    margin-top: 10px;
    float: left;
    width: 70%;
}


/* The bar container */

.bar-container {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    color: white;
    border-radius: 10px;
}


/* Individual bars */

.bar-5 {
    width: 60%;
    height: 15px;
    background-color: var(--primary-70);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.bar-4 {
    width: 30%;
    height: 15px;
    background-color: var(--primary-70);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.bar-3 {
    width: 10%;
    height: 15px;
    background-color: var(--primary-70);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.bar-2 {
    width: 4%;
    height: 15px;
    background-color: var(--primary-70);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.bar-1 {
    width: 15%;
    height: 15px;
    background-color: var(--primary-70);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.quality-product {
    width: 25%;
    float: right;
}

.viewed-product-thumbnail a img {
    max-width: 250px;
    margin: auto;
    border: 2px solid var(--primary-70);
    border-radius: 10px;
    min-height: 200px;
    max-height: 200px;
    object-fit: cover;
}

.viewed-product-price p {
    font-size: 20px;
    font-weight: 600;
    color: black;
    text-align: center;
    margin-bottom: 0;
    padding: 5px 0;
}

.viewed-product-name h2 {
    font-size: 16px;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 8px;
}

.viewed-product-thumbnail a:hover {
    text-decoration: none;
}

.terms-articles ol li a:hover {
    color: var(--primary-70);
}

.terms-articles ol li a {
    color: black;
    text-decoration: underline;
}

.terms-articles ol li {
    padding: 5px 0;
}

.term-content::before {
    content: '';
    display: block;
    height: 200px;
    margin-top: -200px;
    visibility: hidden;
    transition: all 0.2s linear;
}

.terms-articles ol {
    padding-left: 15px;
}


/*Progress bar step*/

.progressbarsteps {
    counter-reset: step;
}

ul.progressbarsteps {
    padding-left: 0;
}

.progressbarsteps li {
    font-size: 18px;
    list-style: none;
    display: inline-block;
    width: 32%;
    position: relative;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
}

.progressbarsteps li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    background-color: #fff;
}

.progressbarsteps li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 20px;
    left: -50%;
    z-index: -1;
}

.progressbarsteps li:first-child:after {
    content: none;
}

.progressbarsteps li.active:before {
    background-color: var(--primary-70);
    color: black;
}

.progressbarsteps li.active+li:after {
    background-color: var(--primary-70);
}

.add-to-cart-product img {
    background-color: var(--primary-10);
    max-width: 200px;
    max-height: 90px;
    border-radius: 10px;
}

.basket-section-right {
    background-color: var(--primary-10);
    padding: 15px 10px 15px 10px;
    border-radius: 10px;
    /* display: inline-table;*/
}

span.basket-items {
    font-size: 22px;
    margin-left: 10px;
}

.basket-summery ul li {
    padding-bottom: 15px;
}

.basket-summery ul li span {
    position: absolute;
    right: 15px;
}

.basket-summery ul {
    padding-left: 5px;
    list-style: none;
}

.basket-total ul {
    padding-left: 5px;
    list-style: none;
}

.basket-total ul li span {
    position: absolute;
    right: 6%;
}

.basket-total ul li {
    font-weight: 700;
}

.basket-section-left {
    background-color: var(--primary-10);
    border-radius: 10px;
    padding: 15px 5px;
    margin-bottom: 20px;
    margin-right: 0px !important;
}

.close-basket {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5
}

#showemptybasket {
    margin-top: 30px;
    margin-bottom: 30px;
    display: none;
}

.write-note {
    padding-left: 30px;
}

.write-note a {
    color: var(--primary-70);
    font-size: 22px;
    font-weight: 600;
    text-decoration: underline;
}

.write-note h2 {
    font-size: 20px;
    font-weight: 600;
}

.write-note a:hover {
    color: #000000;
}

.write-note p {
    margin-bottom: 0px;
}

.write-note textarea {
    border-color: var(--primary-70);
}

.write-note button {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    padding: 6px 20px;
    margin-bottom: 16px;
    border: none;
    border-radius: 8px;
    color: black;
    background-color: #ffffff;
    border: 2px solid;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.write-note button:not(:disabled):hover,
.product-add-to-cart button:not(:disabled):focus {
    text-decoration: none;
    background-color: var(--primary-50);
    box-shadow: rgb(0 32 77 / 15%) 0px 8px 18px 0px;
}

.postage-section {
    background-color: var(--primary-10);
    border-radius: 10px;
    padding: 15px 5px;
    margin-bottom: 20px;
}

.postage-section .coupon-text {
    color: var(--primary-color);
}

.postage-all-list ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
    display: block;
}

.postage-lists {
    display: block;
}

.postage-all-list ul li {
    font-weight: bold;
    border: 1px solid;
    padding: 15px 15px 15px 15px;
    cursor: pointer;
    margin-bottom: 25px;
    border-radius: 10px;
}

.postage-all-list ul li>span {
    float: right;
}

.postage-all-list ul li>input {
    margin-right: 15px;
}

.postage-all-list ul li>p {
    font-weight: normal;
    padding-left: 30px;
}

.postage-all-list ul li.checked {
    color: black;
    border-color: rgb(255 220 0) !important;
}

.postage-all-list ul li input[type='radio']:after {
    width: 20px;
    height: 20px;
    border-radius: 15px;
    top: -4px;
    left: -4px;
    position: relative;
    background-color: #ffffff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid black;
}

.postage-all-list ul li input[type='radio']:checked:after {
    width: 20px;
    height: 20px;
    border-radius: 15px;
    top: -4px;
    left: -4px;
    position: relative;
    background-color: var(--primary-70);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid black;
}

.voucher {
    width: 35%;
}

.back-to a {
    color: #000000;
    font-size: 18px;
    text-decoration: underline;
}

.back-to a:hover {
    color: var(--primary-70);
}

.card-details label {
    font-weight: 700;
}

.text-editor-section form label span {
    font-size: 24px;
    font-weight: 600;
    position: absolute;
    top: auto;
    left: 50px;
}

.text-editor-section form textarea {
    border-color: #57e99a;
    border-width: 2px;
}

.text-format-options ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-flex;
}

.text-format-options ul li {
    border: 2px solid;
    padding: 15px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: 700;
}

#tab-1 ul {
    display: block;
    border: 2px solid whitesmoke;
    padding: 5px;
    background-color: white;
}

#tab-1 ul li {
    text-align: left;
    border: 1px solid #f3f4f4;
    margin: 0px 0px 5px 0px;
}

#tab-1 ul li.selected {
    font-weight: 700;
    background: #fff;
    border-color: #fff;
    outline: 2px solid #ffd300;
}

div#tab-2 ul {
    display: inline-block;
    border: 2px solid whitesmoke;
    padding: 5px;
    background-color: white;
}

div#tab-2 ul li {
    float: left;
    margin: 0px 5px 5px 5px;
}

div#tab-3 ul {
    display: inline-block;
    border: 2px solid whitesmoke;
    padding: 5px;
    background-color: white;
}

div#tab-3 ul li {
    float: left;
    margin: 0px 5px 5px 5px;
    padding: 5px;
}

div#tab-3 ul li button {
    width: 30px;
    height: 30px;
}

.text-alignement {
    border: 2px solid whitesmoke;
    padding: 5px;
    background-color: white;
}

.horizontal-alignments h2 {
    text-align: left;
}

.horizontal-alignments ul li {
    padding: 5px;
    margin-right: 5px;
    border: none;
    border-radius: 5px;
}

.horizontal-alignments ul li button {
    width: 45px;
    height: 45px;
    background-color: transparent;
}

.horizontal-alignments ul li button:hover {
    border-color: #ffd300;
    color: #ffd300;
    box-shadow: none;
}

.horizontal-alignments ul li button i {
    font-size: 20px;
}

.vertical-alignments h2 {
    text-align: left;
}

.vertical-alignments ul li {
    padding: 5px;
    margin-right: 5px;
    border: none;
    border-radius: 5px;
}

.vertical-alignments ul li button {
    width: 45px;
    height: 45px;
    background-color: transparent;
}

.vertical-alignments ul li button:hover {
    border-color: #ffd300;
    color: #ffd300;
    box-shadow: none;
}


/*Cards Page CSS*/

.category-banner-section {
    padding-left: 0px;
    padding-right: 0px;
}

.main-category {
    font-size: 26px;
    font-weight: bold;
    padding-bottom: 20px;
}

.promotional-text {
    background-color: var(--primary-10);
    padding: 50px 35px 50px 35px;
    margin-top: 20px;
    margin-right: -115px;
    z-index: 1;
}

.promotional-text p,
.promotional-text h2 {
    padding-bottom: 25px;
}

.promotional-text a {
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

.promo-banner {
    background-color: var(--primary-80);
    z-index: -1;
}

.subcategories-section {
    padding-left: 0px;
    padding-right: 0px;
}

.subcategories-section {
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
}

.subcategory {
    text-align: center;
    display: inline-flex;
}

.subcategory a {
    padding: 15px;
    border: 2px solid #012e6c;
    border-radius: 5px;
    color: #012e6c;
    font-size: 16px;
    font-weight: bold;
    background-color: var(--primary-10);
    text-align: center;
    justify-content: center;
    height: 85px;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
}

.shipping-notification {
    background-color: #ffe97f;
    display: inline-block;
    padding: 15px 65px 15px 65px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 25px;
}

.cards-heading h2 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 15px;
}

.card-image a img {
    width: 100%;
}

.card-image a img {
    width: 100%;
    max-width: 350px;
}

.card-image a p {
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin-top: 15px;
}

.card-image a p i {
    font-size: 18px;
    font-weight: bold;
    color: black;
    padding-left: 5px;
}

.carousal-item-image img {
    max-width: 350px;
    max-height: 350px;
    margin-left: 50px;
    margin-right: auto;
    border: 2px solid lightgray;
}

.memorable-section {
    text-align: center;
    background-color: #f8f8f9;
    padding-top: 30px;
    padding-bottom: 30px;
}

.memorable-section h2 {
    font-size: 26px;
    font-weight: 700;
}

.memorable-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 15px;
}

.discover-text {
    background-color: white;
    padding: 15px 30px 15px 15px;
    border: 1px solid #80808033;
}

.discover-text h2 {
    color: black;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.discover-text p {
    margin-bottom: 0px;
}

.terms-conditions {
    width: 600px;
    margin: auto;
    text-align: justify;
    margin-bottom: 40px;
    line-height: 2;
}

.privacy-policy {
    width: 600px;
    margin: auto;
    text-align: justify;
    margin-bottom: 40px;
    line-height: 2;
}

.privacy-policy h2 {
    font-size: 24px;
    font-weight: 600;
}

#info+.readmore-js-toggle {
    padding-bottom: 1.5em;
    border-bottom: 1px solid #999;
    font-weight: bold;
}

#show-more-content {
    padding: 0 0%;
}

#show-more-content a {
    background-color: var(--primary-70);
    display: inline;
    padding: 5px 10px;
    color: black;
    border-radius: 10px;
    font-size: 13px;
}

.load-more__btn {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-height: 48px;
    cursor: pointer;
    padding: 8px 16px;
    margin-bottom: 16px;
    border: none;
    border-radius: 8px;
    color: black;
    background-color: var(--primary-70);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.panel.panel-default {
    margin-bottom: 18px;
}

.panel-title {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 12px 8px;
    border-radius: 8px;
    line-height: 1.5;
    letter-spacing: 1px;
    cursor: pointer;
}

.panel-title::after {
    content: "\f107";
    color: #333;
    right: 5px;
    position: absolute;
    font-family: "FontAwesome"
}

.panel-title[aria-expanded="true"]::after {
    content: "\f106";
}

.panel-heading-full.panel-heading {
    padding: 0;
}

.panel-heading-full .panel-title {
    padding: 10px 15px;
}

.panel-heading-full .panel-title::after {
    top: 10px;
    right: 15px;
}

.dispatch p {
    font-size: 14px;
    margin-bottom: 0px;
}

.seller-profile-details {
    display: flex;
    margin-bottom: 15px;
}

.seller-profile-details img {
    width: 85px;
}

.seller-profile-details h2 {
    font-size: 20px;
    margin-bottom: 0;
}

.seller-profile-details>div {
    margin: auto 0;
    padding-left: 15px;
}

ul.review-tabs {
    border-bottom: 2px solid black;
}

.review-box {
    display: inline-block !important;
}

.sendernamepopup span {
    margin-left: 20px;
    text-decoration: underline;
}

.review-tabs li a .nav-link.active {
    border: 2px solid black;
    border-bottom: 0px;
    font-weight: normal;
    background-color: var(--primary-60);
}


/*product view slider*/

#myCarousel img {
    max-height: 600px;
    height: 600px;
}

.carousel-item img {
    object-fit: cover;
}

#carousel-thumbs {
    background: rgba(255, 255, 255, .3);
    bottom: 0;
    left: 0;
    padding: 0 15px;
    right: 0;
}

#carousel-thumbs img {
    border: 5px solid transparent;
    cursor: pointer;
}

#carousel-thumbs img:hover {
    border-color: rgba(255, 255, 255, .3);
}

#carousel-thumbs .selected img {
    border-color: #fff;
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
}

#carousel-thumbs>.carousel-control-prev {
    left: -6%;
}

#carousel-thumbs>.carousel-control-next {
    right: -6%;
}

.clear-both {
    clear: both;
}

.messsageToOwner label,
.sendernamepopup label {
    float: left;
}

.contact-owner button {
    border: 1px solid;
    color: var(--secondary-color);
    font-size: 14px;
    padding: 6px 7px;
    border-radius: 15px;
    background-color: var(--primary-color);
}

.contact-owner button:hover,
.contact-owner button:active,
.contact-owner button:focus {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
}


/*Notifications page css*/

.notifications-section {
    background-color: #fffadf;
    padding: 5px 5px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.notifications-section a {
    color: black;
    display: contents;
}

.ticket-section a {
    color: black;
}

.notifications-section a:hover {
    text-decoration: none;
    color: grey;
}

.ticket-section a:hover {
    text-decoration: none;
    color: grey;
}

.notification-image {
    text-align: center;
}

.notification-image i {
    font-size: 50px;
}

.msg-subject p {
    width: 50ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}

.msg-subject h5 span {
    font-size: 14px;
    position: absolute;
    right: 25px;
}

.notification-link {
    text-align: center;
}

.notification-link a {
    font-size: 34px;
    color: black;
}

.notification-close button {
    background: transparent;
    border: none;
    padding: 16px 25px;
}

.notification-close {
    background-color: var(--primary-70);
    width: 100%;
    border-radius: 5px;
    text-align: center;
    justify-content: center;
    height: 55px;
    display: inline-flex !important;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
}

.active-ticket-system {
    background-color: #e9ecef80;
    padding: 10px 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 25px;
    border-radius: 10px;
}

.ticket-status {
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 10px 10px;
}

.ticket-status h5 {
    background-color: #fffadf;
    text-align: center;
    padding: 5px 2px;
    border-radius: 5px;
}

.ticket-status ul li span {
    position: absolute;
    right: 35px;
}

.ticket-status ul li {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
    padding-top: 10px;
}

.ticket-status ul {
    list-style-type: none;
    padding-left: 0;
}

.user-information p {
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
}

.user-information img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    float: left;
    border-radius: 50%;
}

.user-details-message p {
    background-color: #f8f9fa;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: solid 1px #DADFE3;
    padding: 10px 16px;
    margin-top: 15px;
}

.support-message p {
    background-color: #f8f9fa;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: solid 1px #DADFE3;
    padding: 10px 16px;
    margin-top: 15px;
}

.support-message,
.support-section {
    margin-left: 10%;
}

.user-information button {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    padding: 5px 15px;
    margin-bottom: 16px;
    border: none;
    border-radius: 8px;
    color: black;
    background-color: #ffffff;
    border: 2px solid;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.4px;
    position: absolute;
    right: 16px
}

.select option {
    border-radius: 10px;
}

.list button {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    width: auto;
    border: 1px solid var(--primary-30);
    font-weight: normal;
    margin-top: 5px;
    font-size: 12px;
    background-color: var(--primary-20);
    min-height: auto;
    color: var(--primary-color);
    padding: 2px 4px;
}

.view-button button {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    cursor: pointer;
    text-align: center;
    padding: 6px 12px;
    margin-bottom: 16px;
    border: none;
    border-radius: 8px;
    color: black;
    background-color: #ffffff;
    border: 1px solid;
    font-size: 1rem;
}

.view-button button:hover {
    text-decoration: none;
    background-color: var(--primary-50);
    box-shadow: rgb(0 32 77 / 15%) 0px 8px 18px 0px;
}

.ticket-breadcrumb h4 span {
    font-size: 15px;
}

.ticket-breadcrumb h4 {
    margin-bottom: 0;
}

.ticket-breadcrumb {
    border: 1px solid black;
    border-radius: 5px;
    background-color: #fffadf;
    padding: 5px;
    margin-bottom: 15px;
}

.ticket-system-status {
    background-color: #fffadf;
    border: 1px solid;
    border-radius: 5px;
    display: inline-table;
    padding-bottom: 15px;
}

.ticket-agent {
    padding: 15px 15px 30px 10px;
    border-bottom: 1px solid;
}

.ticket-assignedto h6,
.ticket-agent h6 {
    padding: 10px 0;
    font-weight: 600;
}

.ticket-assignedto ul {
    padding-left: 0;
    list-style-type: none;
}

.ticket-assignedto ul li span {
    position: absolute;
    right: 15px;
}

.new-ticket {
    display: block !important;
    text-align: center;
    border-radius: 10px;
    padding: 10px 1px;
    margin-bottom: 15px;
}

.new-ticket button {
    transition: background-color 150ms linear 0s, box-shadow 150ms linear 0s;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    padding: 8px 16px;
    margin-bottom: 10px;
    border: none;
    border-radius: 8px;
    color: black;
    background-color: #ffffff;
    border: 2px solid;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.new-ticket button:hover {
    text-decoration: none;
    background-color: var(--primary-50);
    box-shadow: rgb(0 32 77 / 15%) 0px 8px 18px 0px;
}

::-webkit-scrollbar {
    width: 15px;
}


/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;;
    border-radius: 5px;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-60);
}


/*Specific Category Page Style*/

#sub-categories-slider {
    margin-left: 35px;
    margin-right: 43px;
    margin-bottom: 25px;
}


/*media queries*/


/* .slide.categeory-thumbnail {
    width: inherit !important;
    } */

.dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    left: -1000% !important;
    -webkit-transition: all 0ms ease 300ms, opacity 300ms ease 0ms;
    -moz-transition: all 0ms ease 300ms, opacity 300ms ease 0ms;
    -ms-transition: all 0ms ease 300ms, opacity 300ms ease 0ms;
    -o-transition: all 0ms ease 300ms, opacity 300ms ease 0ms;
    transition: all 0ms ease 300ms, opacity 300ms ease 0ms;
}

.cardOverflow {
    overflow-x: scroll;
    white-space: nowrap;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transition-delay: 0ms;
    left: 0px !important;
    transition: all 0ms ease 0ms, opacity 300ms ease 0ms;
}

.banners-caption h2 {
    color: var(--primary-color);
}

.banners-caption p {
    color: var(--secondary-color);
}

@media all and (min-width: 992px) {
    .navbar {
        padding-top: 0;
        padding-bottom: 0;
    }

    .navbar .has-megamenu {
        position: static !important;
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
        padding: 20px;
    }

    .navbar .nav-link {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        cursor: pointer;
    }

    li.nav-item {
        display: inline-block;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        height: 450px;
        overflow-y: auto;
    }

    ul.dropdown-menu {
        display: contents;
    }
}

@media only screen and (max-width: 1200px) {

    #first {
        order: 1;
    }

    #second {
        order: 3;
    }

    #third {
        order: 2;
    }

}

@media only screen and (max-width: 992px) {
   
    .logo-area span a img {
        width: 50px;
    }

    .header-icons {
        padding-top: 0px;
    }

    .header-icons a {
        padding: 2px;
    }

    

    .logo-area {
        text-align: center;
    }

    .header-icons a:first-child {
        float: inherit;
    }

    .header-display {
        position: inherit;
        box-shadow: none;
    }

    /* span.navbar-toggler-icon {
        position: absolute;
        left: 10px;
        top: -95px;
        }*/
    .cards-feature {
        margin: 0px;
        padding: 15px 0px 15px 0px;
        text-align: center;
    }

    .cards-feature img {
        float: inherit;
    }

    .apps {
        margin-bottom: 25px;
    }

    div#right-banner {
        display: none;
    }

    .banner-image img {
        display: block;
    }

    .banners-caption {
        position: absolute;
        top: 0px;
        background-color: #fef9facf;
        padding: 25px;
    }

    .banners-caption {
        position: absolute;
        top: 25%;
        left: 11%;
        background-color: #ffffffc4;
        padding: 45px;
        border-radius: 5px;
    }

    .promotional-text {
        padding: 15px 35px 25px 35px;
    }

    /*.discover-text {
        width: 55%;
        }*/
    .promo-banner img {
        width: 100%;
    }

    .col-megamenu {
        display: block;
        padding-left: 10px;
        padding-right: 10px;
    }

    .col-megamenu ul {
        display: none;
        position: inherit;
        padding-left: 5px;
        padding-right: 5px;
        width: 100%;
        opacity: 1;
    }

    .col-megamenu li {
        position: inherit;
    }

    .dropdown-toggle::after {
        position: absolute;
        right: 10px;
        top: 18px;
    }

    .col-megamenu:after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
        position: absolute;
        top: 5px;
        right: 24px;
    }

    .col-megamenu ul li a i {
        transform: rotate(90deg);
    }

    .col-megamenu ul ul ul li a i {
        padding-left: 15px;
    }

    .col-megamenu ul ul {
        display: block;
        position: relative;
        left: 0;
        padding-left: 5px;
        padding-right: 5px;
    }

    .col-megamenu ul ul ul {
        opacity: 1 !important;
        left: 0px;
    }

    .col-megamenu ul ul ul ul {
        opacity: 1 !important;
        display: block !important;
        left: 0px !important;
        background-color: #fff7d1;
        padding-left: 15px;
    }

    .col-megamenu ul ul li a::before {
        content: '-';
    }

    .col-megamenu ul ul ul li a::before {
        content: '--';
        padding-left: 10px;
    }

    .col-megamenu ul ul ul ul li a::before {
        content: '---';
    }

    .col-megamenu ul ul ul ul ul li a::before {
        content: '----';
    }

    .col-megamenu ul ul ul ul ul {
        opacity: 1 !important;
        left: 0px;
        display: block !important;
    }

    ul.third-child-view-left {
        left: 0px !important;
    }

    ul.forth-child-view-left {
        left: 0px !important;
    }

    #sub-categories-slider {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media only screen and (max-width: 767px) {
    .cards-feature {
        margin-bottom: 15px;
    }

    .slick-dots li button:before {
        font-family: slick;
        font-size: 12px !important;
    }

    .slick-next:before,
    .slick-prev:before {
        display: none;
    }

    .banners-caption {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px 15px 30px 20px;
        width: 80%;
        border-radius: 5px;
    }

    .subcategory {
        margin-bottom: 15px;
    }

    .promotional-text.text-center {
        margin: 25px;
        position: absolute;
        background-color: var(--primary-10)c2;
    }

    /*.discover-image {
        margin-bottom: 15px;
        }*/
    .card-grid-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .sort-by-dropdown {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .shipping-notification {
        padding: 15px 15px 15px 15px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .grid-card {
        margin-bottom: 100px;
    }

    .terms-conditions {
        width: 100%;
    }

    .privacy-policy {
        width: 100%;
    }

    .product-slider img {
        max-width: 225px;
    }

    .product-listing-details {
        margin-top: 30px;
    }

    .quality-product {
        width: 75%;
        margin: 10px 0;
    }

    span.rating-sumup {
        left: 30%;
    }

    .write-note {
        padding-left: 0px;
    }

    .voucher {
        width: auto;
    }

    .progressbarsteps li {
        font-size: 15px
    }

    .carousel-container #carousel-thumbs img {
        border-width: 3px;
    }

    #myCarousel img {
        max-height: 400px;
        height: 400px;
    }
}

@media only screen and (max-width: 425px) {
    .dropdown-toggle::after {
        display: inline-block !important;
    }

    .banners-caption {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px 15px 30px 20px;
        width: 80%;
    }

    .categories-breadcrumb ul li {
        padding-right: 8px;
        padding-left: 8px;
    }

    .fa {
        font-size: 16px !important;
    }

    .profile {
        min-width: 30px;
        max-width: 30px;
        height: 30px;
    }

    .p-card-icons {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .logo-area a {
        font-size: 22px;
    }

    input,
    ::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-size: 13px !important;
    }

    :-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        font-size: 13px !important;
    }

    ::-ms-input-placeholder {
        /* Microsoft Edge */
        font-size: 13px !important;
    }

    .banner-text h2 {
        font-size: 24px;
        font-weight: 700;
    }

    .logo-area span a img {
        width: 40px;
    }

    .banner-text p {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .banner-text a {
        padding: 10px;
        font-size: 14px;
    }

    .discover-image img {
        width: 100%;
    }

    .promotional-text h2 {
        padding-bottom: 0px;
        font-size: 18px;
        font-weight: 700;
    }

    .promotional-text p,
    .promotional-text h2 {
        padding-bottom: 0px;
    }

    .promo-banner img {
        width: 100%;
    }

    .grid-card {
        margin-bottom: 20px;
    }

    .slick-next {
        right: 0px !important;
    }

    .slick-prev {
        left: 0px !important;
    }

    .side,
    .middle {
        width: 100%;
    }

    .right {
        display: none;
    }

    span.rating-sumup {
        left: 50%;
    }

    .categories-breadcrumb ul li a {
        font-size: 12px;
    }

    .progressbarsteps li {
        font-size: 12px;
    }

    .view-all-link a {
        padding: 10px 50px 10px 50px;
    }
}

@media only screen and (max-width: 325px) {
    ul.apps-link li a img {
        width: 46%;
    }

    .apps-link li {
        display: contents;
    }

    .payment-link li {
        padding: 5px 2px 5px 2px;
    }

    .banners-caption {
        padding: 10px 15px 10px 15px;
        margin: 8px;
    }

    .banner-text h2 {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .banner-text p {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .banner-text a {
        padding: 6px;
        font-size: 14px;
    }

    .categories-breadcrumb ul li a {
        font-size: 10px;
    }

    .progressbarsteps li {
        width: 23%;
        font-size: 9px;
    }
}

@media all and (min-width: 576px) {
    .carousel-container #carousel-thumbs {
        position: absolute;
    }

    .carousel-container #carousel-thumbs {
        background: #ccccce;
    }
}

.chat-active-side {
    display: block !important;
    border-radius: 5px;
    max-height: 600px;
    overflow-x: hidden;
}

.chat-active-side a:hover {
    text-decoration: none;
    color: inherit;
}

.chat-active-right-side {
    background-color: var(--primary-color) !important;
    border-radius: 5px;
}

.sell-on-app a {
    border: 1px solid;
    color: var(--secondary-color);
    font-size: 14px;
    padding: 16px 35px;
    border-radius: 15px;
    background-color: var(--primary-color);
}

.sell-on-app a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.chat {
    margin-top: auto;
    margin-bottom: auto;
}

.contacts_body {
    padding: 0.75rem 0 !important;
    overflow-y: auto;
    white-space: nowrap;
}

.msg_card_body {
    max-height: 360px;
    overflow: auto;
    background-image: url(../images/bg_messages.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.search {
    border-radius: 15px 0 0 15px !important;
    border: 0 !important;
}

.search:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.type_msg {
    border: 0 !important;
    overflow-y: auto;
}

.chat-header {
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.type_msg:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.attach_btn {
    border-radius: 15px 0 0 15px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 0 !important;
    color: white !important;
    cursor: pointer;
}

.send_btn {
    border-radius: 0 15px 15px 0 !important;
    background-color: var(--primary-color) !important;
    border: 0 !important;
    color: var(--secondary-color) !important;
    cursor: pointer;
}

.search_btn {
    border-radius: 0 15px 15px 0 !important;
    background-color: rgb(33 36 41) !important;
    border: 0 !important;
    color: white !important;
    cursor: pointer;
}

.contacts {
    list-style: none;
    padding: 0;
}

.contacts li {
    width: 100% !important;
    padding: 5px 10px;
    background-color: var(--primary-70)4f;
    border-radius: 10px;
    margin-bottom: 5px;
}

.user_img {
    height: 70px;
    width: 70px;
    border: 1.5px solid #f5f6fa;
}

.user_img_msg {
    height: 40px;
    width: 40px;
    border: 1.5px solid #f5f6fa;
}

.img_cont {
    position: relative;
    height: 70px;
    width: 70px;
}

.img_cont_msg {
    height: 40px;
    width: 40px;
}

.online_icon {
    position: absolute;
    height: 15px;
    width: 15px;
    background-color: #4cd137;
    border-radius: 50%;
    bottom: 0.2em;
    right: 0.4em;
    border: 1.5px solid white;
}

.offline {
    background-color: #c23616 !important;
}

.user_info {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 15px;
}

.user_info button {
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
}

.user_info button:hover,
.user_info button:active,
.user_info button:focus {
    background-color: var(--primary-color);
}

.user_info ul {
    padding-left: 0px;
    list-style-type: none;
}

.user_info ul li a {
    color: #31353d;
    font-size: 16px;
}

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

.user_info p {
    font-size: 10px;
    color: black;
    margin-bottom: 5px;
}

.video_cam {
    margin-left: 50px;
    margin-top: 5px;
}

.video_cam span {
    color: white;
    font-size: 20px;
    cursor: pointer;
    margin-right: 20px;
}

.msg_cotainer {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
    border-radius: 25px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 10px;
    position: relative;
}

.msg_container_send {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    border-radius: 25px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 10px;
    position: relative;
}

.msg_time {
    background-color: var(--primary-10);
    border-radius: 25px;
    position: absolute;
    left: 0;
    padding: 2px 4px;
    bottom: -15px;
    color: var(--primary-color);
    font-size: 10px;
}

.msg_time_send {
    background-color: var(--primary-10);
    border-radius: 25px;
    position: absolute;
    right: 0;
    padding: 2px 4px;
    bottom: -15px;
    color: var(--primary-color);
    font-size: 10px;
}

.msg_head {
    position: relative;
}

#action_menu_btn {
    position: absolute;
    right: 10px;
    top: 10px;
    color: white;
    cursor: pointer;
    font-size: 20px;
}

.action_menu {
    z-index: 1;
    position: absolute;
    padding: 15px 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 15px;
    top: 30px;
    right: 15px;
    display: none;
}

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

.action_menu ul li {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 5px;
}

.action_menu ul li i {
    padding-right: 10px;
}

.chat-file-upload input[type="file"] {
    display: none;
}

.chat-file-upload label {
    padding: 20px 12px 10px 12px;
    cursor: pointer;
    background-color: var(--primary-color);
    margin-bottom: 0px;
    color: var(--secondary-color);
    border-radius-top: 19px;
    border-radius: 10px 0px 0px 10px;
}

.product-img {
    height: 300px;
}

@media(max-width: 576px) {
    .dropdown-menu {
        width: 100%;
    }

    .contacts_card {
        margin-bottom: 15px !important;
    }

    .product-img {
        height: 200px;
    }
}

#loading {
    text-align: center;
    background: url('/public/images/loader.gif') no-repeat center;
}

.fa-star {
    color: #cac9c7;
}

.msg_card_body {
    height: 500px;
    max-height: unset;
}

.community-links {
    text-align: center;
    padding: 8px 0;
}

.community-links ul li {
    display: inline;
    color: black;
    padding: 0 20px;
}

.community-links ul li a {
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
}

.community-links ul li a:hover {
    color: var(--primary-70);
}

.community-links h2 {
    color: var(--primary-color);
}

.community-links {
    background-color: var(--primary-30);
}

.file-preview-frame:first-of-type {
    background: #fdf3b6;
}

.error {
    color: red;
    margin-top: 2px;
    font-size: 1.2em;
}

.error-holder {
    width: 100%;
}

input.error {
    border: 1px solid red;
}

.news-feed {
    padding: 7px 1rem;
    background: #e9ecef;
}

body {
    margin-top: 20px;
}

body {
    color: #6c7293;
}

.profile-navbar .nav-item .nav-link {
    color: var(--secondary-color);
}

.profile-navbar .nav-item .nav-link.active {
    color: #464dee;
}

.profile-navbar .nav-item .nav-link i {
    font-size: 1.25rem;
}

.profile-feed-item {
    padding: 0.6rem 0 0 0;
    border-bottom: 1px solid #e9e9e9;
}

.img-sm {
    width: 43px;
    height: 43px;
}

.custom-file-upload-profile {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #fff6cc;
    border-radius: 15px;
}

.custom-file-upload-profile>input {
    display: none;
}

.custom-file-upload-profile:hover {
    color: white;
    background-color: black;
}


/** Comments css **/

.comments-details button.btn.dropdown-toggle,
.comments-details .total-comments {
    font-size: 18px;
    font-weight: 500;
    color: #5e5e5e;
}

.comments-details {
    padding: 15px 15px;
}

.comments .comments .dropdown,
.comments .dropup {
    position: relative;
}

.comments button {
    background-color: transparent;
    border: none;
}

.comments .comment-box {
    width: 100%;
    float: left;
    height: 100%;
    background-color: #FAFAFA;
    padding: 10px 10px 10px;
    margin-bottom: 3px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.comments .add-comment {
    background-color: transparent;
    border: none;
    position: relative;
    margin-bottom: 2px;
}

.comments .commenter-pic {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 100%;
    border: 2px solid #fff;
    overflow: hidden;
    background-color: #fff;
}

.comments .add-comment .commenter-name {
    width: 100%;
    padding-left: 75px;
    position: absolute;
    top: 20px;
    left: 0px;
}

.comments .add-comment input {
    border-top: 0px;
    border-bottom: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
    outline: 0px;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    padding: 0;
    font-weight: normal;
    background-color: transparent;
}

.comment-box.add-comment {
    margin-bottom: 20px;
}

.comments .add-comment input:focus {
    border-color: #03a9f4;
    border-width: 2px;
}

.comments .add-comment button[type=submit] {
    background-color: #03a9f4;
    color: #fff;
    margin-right: 0px;
}

.comments .add-comment button {
    background-color: #f5f5f5;
    margin: 10px 5px;
    font-size: 14px;
    text-transform: uppercase;
    float: right;
}

.comments .commenter-name .comment-time {
    font-weight: normal;
    margin-left: 8px;
    font-size: 15px;
}

.comments p.comment-txt {
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    padding: 0px 0px 15px;
}

.comments .commenter-name {
    display: inline-block;
    position: relative;
    top: -20px;
    left: 10px;
    font-size: 16px;
    font-weight: bold;
}

.comments .comment-meta {
    font-size: 14px;
    color: #333;
    padding: 2px 5px 0px;
    line-height: 20px;
    float: right;
}

.comments .reply-box {
    display: none;
}

.comments .replied {
    background-color: #fafafa;
    width: 95%;
    float: right;
    margin-top: 3px;
}

.feedbox-design {
    margin-bottom: 20px;
    box-shadow: 2px 1px 4px #00000003;
    border-bottom: 4px solid #fff;
}


/*======Responsive CSS=======*/

@media (max-width: 767px) {
    .comments .commenter-name {
        font-size: 13px;
        top: -5px;
    }

    .comments .commenter-pic {
        width: 40px;
        height: 40px;
    }

    .comments .commenter-name a {
        display: block;
    }

    .comments .commenter-name .comment-time {
        display: block;
        margin-left: 0px;
    }

    .community-links ul li {
        padding: 0 10px;
    }
}


/*.flaunt
{

background-image: url('/images/home/banner1.png');
background-size: cover;
}
*/

.dropdown-menu {
    border: none !important
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
}

.dropdown-toggle::after {
    display: none !important;
}

#loadOverlay {
    display: none;
}
.loader-container2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loader2 {
    width: 100%;
    height: 100%;
    background: url('/images/loading.gif') no-repeat center center;
    background-size: contain;
}