.product-short {
     border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
     margin-bottom: 10px
 }

 .product-short ul li a {
     color: #000 !important
 }

 .tile {
     width: 100%;
     margin: 0 auto;
     display: flex;
     justify-content: space-between
 }

 #tile-1 .tab-pane {
     padding: 15px;
     height: 80px
 }

 #tile-1 .nav-tabs {
     position: relative;
     border: none !important;
     border-radius: 6px;
     border: 1px solid transparent;
 }

 #tile-1 .nav-tabs li {
     margin: 0 4px 4px 0 !important;
 }

 .breadcrumb-item {
     font-size: 10px;
 }

 #tile-1 .nav-tabs li a {
     position: relative;
     font-size: 13px;
     border: 1px solid transparent !important;
     font-family: 'Poppins', sans-serif !important;
     font-weight: 400;
     color: #686b78 !important;
     margin-left: 2px;
     will-change: opacity;
     padding: 6px 10px;
     background: #f5f5f5;
     border-radius: 5px;
 }

 #tile-1 .nav-tabs a:hover {
     border: 1px solid #686b78cc !important;
 }

 #tile-1 .nav-tabs .active {
     border: 1px solid #686b78cc !important;
     /* background: #ccc; */
     color: #686b78 !important;
 }

 span.short-by-text {
     display: inline-block;
     margin-top: 5px;
     font-size: 22px;
     padding-right: 20px;
     font-weight: 600;
     color: #363636;
     font-family: 'Poppins', sans-serif !important
 }

 .tab-content {
     border-top: 1px solid rgba(0, 0, 0, .125);
     padding-top: 20px
 }

 .product-short h5 {
     margin-top: 5px;
     font-size: 10px;
     vertical-align: top;
     line-height: 12px
 }

 .collection-filter.col-lg-3.main-fillter {
     padding-top: 0 !important
 }

 .listing-categories ul li {
     margin: 0 0 5px !important;
     padding: 0 0 5px !important;
     display: block;
     font-size: 13px !important;
     border-bottom: 1px solid rgb(0 0 0 / 12%)
 }

 .listing-categories ul li a {
     font-size: 13px !important
 }

 li.d-inline-block.mr-3 .custom-control-label::before {
     background: none;
     border: 0 !important
 }

 li.d-inline-block.mr-3 .custom-control-label {
     position: unset
 }

 li.d-inline-block.mr-3 .custom-control-input:checked~.custom-control-label::before {
     opacity: 0 !important;
     background: transparent !important
 }

 li.d-inline-block.mr-3 .custom-control-label::after {
     opacity: 0 !important;
     background: transparent !important
 }

 li.d-inline-block.mr-3 .custom-control-input:not(:disabled):active~.custom-control-label::before {
     background-color: transparent !important
 }

 li.d-inline-block.mr-3 .custom-control-input:focus~.custom-control-label::before {
     box-shadow: none !important
 }

 .card .filter-content.collapse.show {
     border-bottom: 1px solid rgba(0, 0, 0, .1)
 }

 .card {
     border-bottom: 0
 }

 ::-webkit-scrollbar {
     width: 8px
 }

 ::-webkit-scrollbar-track {
     background: #f1f1f1
 }

 ::-webkit-scrollbar-thumb {
     background: #888
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #555
 }

 .box-label .btn {
     background-color: #fff;
     padding: 0;
     font-size: .8rem
 }

 #pro {
     border: none;
     color: #333;
     font-weight: 700;
     padding-left: 0;
     width: initial
 }

 #filterbar {
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 5px;
     width: 100%
 }

 label {
     cursor: pointer
 }

 .my-1:last-child {
     border-bottom: 0 !important
 }

 .my-1 {
     display: block;
     position: relative;
     padding-left: 0;
     cursor: pointer;
     font-size: 12px;
     border-bottom: 1px solid #dee2e6 !important
 }

 .tick {
     display: block;
     position: relative;
     padding-left: 23px;
     cursor: pointer;
     font-size: 12px;
     margin: 0 0 10px
 }

 .tick input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0
 }

 .check {
     position: absolute;
     top: 1px;
     left: 0;
     height: 18px;
     width: 18px;
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 3px
 }

 .tick:hover input~.check {
     background-color: #f3f3f3
 }

 .tick input:checked~.check {
     background-color: #ffffff
 }

 .check:after {
     content: "";
     position: absolute;
     display: none
 }

 .tick input:checked~.check:after {
     display: block;
     transform: rotate(45deg) scale(1)
 }

 .tick .check:after {
     left: 6px;
     top: 2px;
     width: 5px;
     height: 10px;
     border: solid rgb(0, 0, 0);
     border-width: 0 3px 3px 0;
     transform: rotate(45deg) scale(2)
 }

 .box {
     padding: 10px
 }

 .box-label {
     color: #11698e;
     font-size: .9rem;
     font-weight: 800
 }

 #inner-box::-webkit-scrollbar,
 #inner-box2::-webkit-scrollbar {
     width: 6px
 }

 #inner-box::-webkit-scrollbar-track,
 #inner-box2::-webkit-scrollbar-track {
     background-color: #ddd;
     border-radius: 2px
 }

 #inner-box::-webkit-scrollbar-thumb,
 #inner-box2::-webkit-scrollbar-thumb {
     background-color: #333;
     border-radius: 2px
 }

 #price {
     height: 80px
 }

 #size input[type="checkbox"] {
     visibility: hidden
 }

 #size input[type='checkbox']:checked {
     background-color: #16c79a;
     border: none
 }

 #size .btn.btn-success {
     background-color: #ddd;
     color: #333;
     border: none;
     width: 40px;
     font-size: .8rem;
     border-radius: 0
 }

 #size .btn.btn-success:hover {
     background-color: #aff1e1;
     color: #444
 }

 #size .btn-success:not(:disabled):not(.disabled).active,
 #size .btn-success:not(:disabled):not(.disabled):active {
     background-color: #16c79a;
     color: #fff
 }

 #size label {
     margin: 10px;
     margin-left: 0
 }

 .card {
     padding: 10px;
     cursor: pointer;
     transition: .3s all ease-in-out;
     height: 350px
 }

 .card:hover {
     box-shadow: 2px 2px 15px #fd9a6ce5;
     transform: scale(1.02)
 }

 .card .product-name {
     font-weight: 600
 }

 .card-body {
     padding-bottom: 0
 }

 .card .text-muted {
     font-size: .82rem
 }

 .card-img img {
     padding-top: 10px;
     width: inherit;
     height: 180px;
     object-fit: contain;
     display: block
 }

 .card-body .btn-group .btn {
     padding: 0;
     width: 20px;
     height: 20px;
     margin-right: 5px;
     border-radius: 50%;
     position: relative
 }

 .card-body .btn-group>.btn-group:not(:last-child)>.btn,
 .card-body .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
     border-radius: 50%;
     transition: ease-in all .4s
 }

 .card-body input[type="radio"] {
     visibility: hidden
 }

 .card-body .btn:not(:disabled):not(.disabled).active::after,
 .card-body .btn:not(:disabled):not(.disabled):active::after {
     content: "";
     width: 10px;
     height: 10px;
     border-radius: 50%;
     top: 4px;
     left: 4.2px;
     background-color: #fff;
     position: absolute;
     transition: ease-in all .4s
 }

 .card-body .btn.btn-light:not(:disabled):not(.disabled).active::after,
 .card-body .btn.btn-light:not(:disabled):not(.disabled):active::after {
     background-color: #000
 }

 #avail-size input[type="checkbox"] {
     visibility: hidden
 }

 #avail-size input[type='checkbox']:checked {
     background-color: #16c79a;
     border: none
 }

 #avail-size .btn.btn-success {
     background-color: #ddd;
     color: #333;
     border: none;
     width: 20px;
     font-size: .7rem;
     border-radius: 0;
     padding: 0
 }

 #avail-size .btn.btn-success:hover {
     background-color: #aff1e1;
     color: #444
 }

 #avail-size .btn-success:not(:disabled):not(.disabled).active,
 #avail-size .btn-success:not(:disabled):not(.disabled):active {
     background-color: #16c79a;
     color: #fff
 }

 #avail-size label {
     margin: 10px;
     margin-left: 0
 }

 #shirt {
     height: 170px
 }

 .middle {
     position: relative;
     width: 100%;
     margin-top: 25px
 }

 .slider {
     position: relative;
     z-index: 1;
     height: 5px;
     margin: 0 15px
 }

 .slider>.track {
     position: absolute;
     z-index: 1;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     border-radius: 5px;
     background-color: #ddd
 }

 .slider>.range {
     position: absolute;
     z-index: 2;
     left: 25%;
     right: 25%;
     top: 0;
     bottom: 0;
     border-radius: 5px;
     background-color: var(--theme-deafult) !important
 }

 .slider>.thumb {
     position: absolute;
     top: 5px;
     z-index: 3;
     width: 10px;
     height: 10px;
     background-color: var(--theme-deafult) !important;
     border-radius: 50%;
     box-shadow: 0 0 0 0 rgba(0, 0, 0, .705);
     transition: box-shadow .3s ease-in-out
 }

 .slider>.thumb::after {
     position: absolute;
     width: 7px;
     height: 7px;
     left: 14%;
     top: 14%;
     border-radius: 50%;
     content: '';
     background-color: #fff
 }

 .slider>.thumb.left {
     left: 25%;
     transform: translate(-6px, -8px)
 }

 .slider>.thumb.right {
     right: 25%;
     transform: translate(6px, -8px)
 }

 .slider>.thumb.hover {
     box-shadow: 0 0 0 10px rgba(0, 0, 0, .507)
 }

 .slider>.thumb.active {
     box-shadow: 0 0 0 10px rgba(0, 0, 0, .623)
 }

 input[type=range] {
     position: absolute;
     pointer-events: none;
     -webkit-appearance: none;
     z-index: 2;
     height: 10px;
     width: 100%;
     opacity: 0
 }

 input[type=range]::-webkit-slider-thumb {
     pointer-events: all;
     width: 30px;
     height: 30px;
     border-radius: 0;
     border: 0 none;
     background-color: red;
     -webkit-appearance: none
 }

 .del {
     text-decoration: line-through;
     color: red
 }

 .box-label.text-uppercase h6 {
     color: #000 !important;
     font-size: 14px;
     font-weight: 400;
     position: relative;
     margin: 0
 }

 .box-label.text-uppercase a h6:after {
     color: var(--theme-deafult);
     position: absolute;
     display: block;
     top: 0;
     right: -3px;
     content: "\f107";
     font-family: FontAwesome;
     transform: rotate(0deg);
     transition: .1s
 }

 .box-label.text-uppercase a[aria-expanded="true"] h6::after {
     transform: rotate(-180deg)
 }

 .fa-angle-down:before[aria-expanded="true"] {
     transform: rotate(-180deg)
 }

 button.btn.btn-apply {
     border-radius: 5px;
     background: var(--theme-deafult) !important;
     font-size: 12px;
     color: #fff;
     font-weight: 400;
     width: auto;
     margin: 0px auto;
     display: table;
     padding: 3px 10px;
 }

 .collapsing {
     transition: height .4s ease
 }

 .dark label.tick {
     color: #000
 }

 .dark #tile-1 .nav-tabs .active {
     background-color: transparent !important;
     border-bottom: 1px solid #fff !important;
     color: #fff !important
 }

 .dark .product-short ul li a {
     color: #fff !important
 }

 .small_label {
     color: #000;
     font-size: 14px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 24px;
     margin-right: 6px
 }

 .chiller_cb {
     position: relative;
     height: 2rem;
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .chiller_cb input {
     display: none
 }

 .chiller_cb label {
     width: 25px;
     height: 25px;
     position: relative;
     z-index: 2;
     cursor: pointer;
     margin-bottom: 0
 }

 .chiller_cb input:checked~.check_icon {
     background: #000;
     border-color: #000
 }

 .chiller_cb .check_icon {
     display: inline-block;
     width: 30px;
     height: 30px;
     border: 1px solid #000;
     position: absolute;
     left: 0;
     top: 0;
     transition: all .2s;
     z-index: 1;
     box-sizing: content-box;
     border-radius: 50px
 }

 .chiller_cb input:checked~.check_icon:before {
     width: 15px;
     height: 4px;
     transition: width .1s;
     transition-delay: .3s
 }

 .check_icon.white_check::before,
 .check_icon.white_check::after {
     background: #000
 }

 .chiller_cb .check_icon:before {
     transform: rotate(-55deg);
     top: 20px;
     left: 12px
 }

 .chiller_cb .check_icon:before,
 .chiller_cb .check_icon:after {
     content: "";
     display: inline-block;
     background: #fff;
     width: 0;
     height: .2rem;
     position: absolute;
     transform-origin: 0 0
 }

 .chiller_cb input:checked~.check_icon:after {
     width: 8px;
     height: 4px;
     transition: width .1s;
     transition-delay: .2s
 }

 .chiller_cb .check_icon:after {
     transform: rotate(35deg);
     bottom: 12px;
     left: 9px
 }

 .chiller_cb .check_icon:before,
 .chiller_cb .check_icon:after {
     content: "";
     display: inline-block;
     background: #fff;
     width: 0;
     height: .2rem;
     position: absolute;
     transform-origin: 0 0
 }

 span.check_icon.white_check::before,
 span.check_icon.white_check::after {
     background: #000
 }

 .filter-main-btn {
     display: none;
     margin-bottom: 20px;
     cursor: pointer
 }

 .breadcrumb-section .breadcrumb,
 .breadcrumb-section .breadcrumb a {
     font-size: 10px !important
 }

 .breadcrumb-section .breadcrumb {
     justify-content: flex-start
 }

 .breadcrumb-section .breadcrumb,
 .breadcrumb-section .breadcrumb a {
     color: #555;
     font-weight: 400;
     font-size: 12px;
     text-transform: capitalize
 }

 .breadcrumb-section .breadcrumb {
     background-color: transparent
 }

 .breadcrumb {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     padding: .75rem 1rem;
     margin-bottom: 1rem;
     list-style: none;
     border-radius: .25rem
 }

 .breadcrumb-section .breadcrumb,
 .breadcrumb-section .breadcrumb a {
     color: #555;
     font-weight: 400;
     font-size: 12px;
     text-transform: capitalize
 }

 .mobile-product-short {
     display: none
 }

 @media(max-width:1199.5px) {
     .card {
         height: 350px
     }

     .price {
         font-size: .9rem
     }

     .product-name {
         font-size: .8rem
     }
 }

 @media(max-width:991.5px) {
     #sort {
         background-color: inherit;
         color: #fff;
         margin: 0;
         margin-bottom: 20px;
         width: 100%
     }

     #sort option,
     #pro option {
         color: #000
     }

     #pro,
     #select2,
     .result {
         background-color: inherit;
         color: #fff
     }

     .price {
         font-size: .85rem
     }
 }

 @media(max-width:767px) {
     span.short-by-text {
         font-size: 18px;
         line-height: 24px;
         margin: 0 0 5px !important;
     }

     .mobile-product-short {
         display: block
     }

     .product-short.desktop-product-short {
         display: none
     }

     .mobile-product-short .product-short .tile {
         display: block
     }

     .mobile-product-short .product-short span.short-by-text {
         display: block !important;
         width: 100%;
         font-size: 12px;
         background: var(--theme-deafult);
         color: #fff;
         padding: 6px 10px;
         font-weight: 500;
         margin-bottom: 5px;
         border-radius: 5px;
     }

     .mobile-product-short .product-short ul {
         display: block
     }

     .mobile-product-short .product-short ul li {
         display: block
     }

     .mobile-product-short .product-short ul li a {
         text-align: left;
         margin: 0 !important;
         padding: 10px !important;
         font-size: 12px !important
     }

     .mobile-product-short button {
         background: var(--theme-deafult) !important;
         border: 0;
         font-weight: 500;
         text-transform: capitalize;
         border-radius: 5px;
     }

     .mobile-product-short button.close {
         background: transparent !important
     }

     .mobile-product-short button span {
         font-size: 18px
     }

     .mobile-product-short button i {
         padding-right: 5px
     }

     .mobile-product-short .product-short {
         border: 0 !important;
         margin: 0 !important
     }

     .mobile-product-short {
         display: block;
         padding-left: 0;
         margin: 10px 0
     }

     .modal-header button.close {
         position: absolute;
         right: 10px;
         font-weight: 400;
         color: #fff !important;
         font-size: 18px;
         padding: 0;
         margin: 0;
         top: 10px;
         background: var(--theme-deafult) !important;
         width: 24px;
         height: 24px;
         box-shadow: 0 0 10px 0 #a9a9a95e;
         opacity: 1;
         border-radius: 100%;
         text-align: center;
         line-height: 26px;
         z-index: 9999;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .product-addon-modal .modal-header button span {
         color: #fff;
     }
 }

 @media(max-width:525.5px) {
     #filterbar {
         float: none;
         width: 100%;
         margin-bottom: 0;
         border-radius: 5px
     }

     #content.my-5 {
         margin-top: 20px !important;
         margin-bottom: 20px !important
     }
 }