.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.font-24-line-24 {
    font-size: 24px;
    line-height: 24px;
}

.color-orange {
    color: var(--orange-color) !important;
}

.font_size-24 {
    font-size: 24px;
    line-height: 24px;
}

.orange-hr {
    margin-top: 0.7rem;
    border-top: 1px solid #f68e1f;
}

.bg-gray {
    background-color: rgba(255, 255, 255, 1) !important;
}

.icon-setting {
    background: #192c55;
    color: white;
    opacity: 1;
    padding: 10px;
}

.featured-products .left-icon {
    left: 30px !important;
}

.left-icon {
    width: 1% !important;
    left: -15px;
    opacity: 1;
}

.featured-products .right-icon {
    right: 30px !important;
}

.right-icon {
    width: 1% !important;
    right: -15px;
    opacity: 1;
}

.px-60 {
    padding-left: 60px;
    padding-right: 60px;
}

/* Manufacturer Profile Box */

.company-profile .card-body {
    padding: 0;
}

.company-profile .banner {
    height: 250px;
}

.company-profile .banner img {
    height: 250px;
    width: 100%;
}

.company-profile .brand-logo {
    height: 120px;
    width: 120px;
    border: 1px solid #ddd;
    left: 40px;
    top: 158px;
    display: flex !important;
    align-items: center !important;
    background-color: var(--white-color);
}

.company-profile .details {
    padding: 2.5rem;
}

.company-profile .details .followers {
    font-size: 0.9rem;
}

.btn-blue {
    color: var(--white-color);
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

.btn-blue:hover {
    color: var(--white-color) !important;
    background-color: var(--orange-color);
    border-color: var(--orange-color);
}

.company-profile .rating-block {
    background-color: #fafafa;
    border: 1px solid #efefef;
    padding: 15px 15px 20px 15px;
    border-radius: 3px;
}

.company-profile .rating-block h2 {
    margin-top: 10px;
}

.company-profile .reviews {
    color: #666;
    font-size: 16px;
}

.company-profile .reviews i {
    font-size: 8px;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: -2px;
}

.company-profile .rating-block .rate-btn,
.rating-block-2 .rate-btn {
    color: #999;
    background-color: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 1px solid #999;
    padding: 5px 10px;
    border-radius: 2px;
}

/* Manufacturer featured products */

#featured-products .card {
    border-radius: 1rem;
    box-shadow: 0px 5px 10px 0px #0000004d;
}

#featured-products .image {
    display: flex !important;
    align-items: center !important;
    width: 120px;
    height: 120px;
}

#featured-products .image img {
    max-width: 120px;
    max-height: 120px;
}

#featured-products .name {
    color: var(--light-orange-color);
    margin-bottom: 1.18rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#featured-products .name a {
    color: var(--light-orange-color);
    font-weight: 700;
    font-size: 1em;
}

#featured-products .desc {
    font-size: 0.8em;
    /* text-align: justify; */
    height: 50px;
    min-height: 41px;
    max-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#featured-products .slick-track {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.featured-products .left-icon {
    left: 30px !important;
}

.featured-products .right-icon {
    right: 30px !important;
}

.prev,
.next {
    display: flex !important;
}

.manufacturer-desc {
    color: #7f7f7f;
}

.manufacturer-info,
.manufacturer-rating {
    font-size: 0.9em;
}

/* Manufacturer Popular categories for brand */

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

#popular-categories .card {
    border-radius: 1rem;
    /* height: 300px; */
}

#popular-categories .popular-image {
    height: 150px;
}

.popular-image img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

#popular-categories .popular-title {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1em;
    height: 48px;
}

#popular-categories .popular-title .name a {
    color: #192c54;
}

#popular-categories .popular-title .quantity {
    color: var(--light-orange-color);
}

.show-more-btn .btn {
    border-radius: 2rem;
    background-color: var(--light-orange-color);
    color: var(--white-color);
    font-size: 0.7em;
    font-weight: 600;
    padding-left: 1rem;
    padding-right: 1rem;
}

.show-more-btn .btn:hover {
    color: var(--white-color) !important;
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

/* Categories for brand */

#categories .card {
    border-radius: 1rem;
    height: 480px;
}

#categories .category-image {
    height: 150px;
    width: 150px;
}

#categories .category-image img {
    height: 100px;
    width: 100px;
}

#categories .category-title {
    margin-bottom: 15px;
}

#categories .category-name {
    font-weight: 700;
    font-size: 1.2em;
    color: #192c54;
}

#categories .category-quantity {
    color: var(--light-orange-color);
}

#categories ul.sub-categories {
    padding-left: 0;
    /* height: 144px; */
}

#categories ul.sub-categories li {
    list-style-type: none;
}

#categories ul.sub-categories li a {
    font-size: 0.9em;
    color: var(--blue-2-color);
    font-weight: 500;
}

/* #categories ul.sub-categories li a .sub-category-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 75%;
} */

#categories ul.sub-categories li a:hover {
    color: #192c54 !important;
}

.related-links {
    /* color: #000; */
}

/* .related-links strong {
    font-size: 0.9em;
}

.related-links a {
    font-size: 0.85em;
} */
.related-links a:hover {
    color: var(--orange-color);
}

.related-links a:not(:last-child)::after {
    content: "";
    border: 1px solid #858383;
    border-width: 1px 1px 0 0;
    position: relative;
    right: -3px;
    top: 0;
    height: 80%;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

/* Comments */

#comments {
    font-size: 0.9em;
}

.nav-tabs .nav-link {
    color: #495057;
    font-size: 0.9em !important;
    color: #22345b;
    font-size: 0.9em !important;
    background: #e3e3e3;
    border: 1px solid white;
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    font-weight: bold;
    color: #ffffff;
    background: #f28e00;
    border: 1px solid white;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    background: #22345b;
    color: white;
}

.comments .author,
.comments .rating,
.comments .message {
    font-size: 0.9em;
}

.comments .author {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--orange-color);
}

.comments .reply-links,
.comments .comment-date {
    font-size: 0.8em;
}

/* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */

.rating-group {
    display: inline-flex;
}

/* make hover effect work properly in IE */

.rating__icon {
    pointer-events: none;
}

/* hide radio inputs */

.rating__input {
    position: absolute !important;
    left: -9999px !important;
}

/* hide 'none' input from screenreaders */

.rating__input--none {
    display: none;
}

/* set icon padding and size */

.rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 1.7rem;
}

/* set default star color */

.rating__icon--star {
    color: orange;
}

/* if any input is checked, make its following siblings grey */

.rating__input:checked~.rating__label .rating__icon--star {
    color: #ddd;
}

/* make all stars orange on rating group hover */

.rating-group:hover .rating__label .rating__icon--star {
    color: orange;
}

/* make hovered input's following siblings grey on hover */

.rating__input:hover~.rating__label .rating__icon--star {
    color: #ddd;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.px-60 {
    padding-left: 60px;
    padding-right: 60px;
}

.form-control:focus {
    border-color: #ff8702;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%),
        0 0 8px rgb(193 193 193 / 35%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(193 193 193 / 35%);
}

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

svg.loader {
    width: 30px;
}

.slick-arrow.slick-hidden {
    display: none !important;
}

@media only screen and (min-width: 1500px) {
    .container {
        max-width: 1420px;
    }
}

#cart .table {
    font-size: 14px;
}

@media (min-width: 1024px) and (max-width: 1100px) {
    #featured-products .image img {
        max-width: 110px;
        max-height: 110px;
    }
}

@media only screen and (max-width: 991px) {
    .company-profile .banner img {
        height: 250px;
        width: 100%;
        object-fit: cover !important;
        object-position: left !important;
    }
}