.bg-dark-blue
{
	background: #1F1B2D;
}

.nav-link, .navbar-brand
{
	color: #ffff !important;
}

.navbar-toggler
{
	background-color: #b3b3b399 !important;
}

.bg-position-top-center
{
	margin-top: -10px;
}

@media (min-width:320px)  { 

    /* smartphones, iPhone, portrait 480x320 phones */ 
    .card-header
    {
        background:#F3F3F3 !important;
        height: auto !important;
    }

    .image-banner
    {
        margin-top:-150px !important;
    }

    .ipw-image-fit
    {
        height: 180px !important;
    }

}

@media (min-width:1370px)  { 

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    .card-header
    {
        background:#F3F3F3 !important;
        height: 200px !important;
    }

    .image-banner
    {
        margin-top:-210px !important;
    }



}

@media (min-width:1240)  
{

    .ipw-image-fit
    {
        height: 155px !important;
    }

}

@media (min-width:641px)  { 

    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 

  /*  .card-header
    {
        background:#F3F3F3 !important;
        height: 200px !important;
    }*/

    .image-banner
    {
        margin-top:-220px !important;
    }
}

@media (min-width:961px)  { 

    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    .image-banner
    {
        margin-top:-240px !important;
    }

}

@media (min-width:1025px) { 

    /* big landscape tablets, laptops, and desktops */ 
    .image-banner
    {
        margin-top:-240px !important;
    }

}

@media (min-width:1281px) { 
    
    /* hi-res laptops and desktops */ 
    .image-banner
    {
        margin-top:-240px !important;
    }

}


@media (min-width: 768px){
	.py-md-1 {
	    padding-top: 0.25rem !important;
	    padding-bottom: 0.25rem !important;
	}

    .item-images
    {
        max-width: 100% !important;
        max-height: 100% !important;
        height: 180px !important;
        object-fit: bottom !important;
        object-position: bottom !important;
    }

}

@media (min-width: 1200px)
{
	.pe-xl-4 {
    	padding-right: 1.5rem !important;
	}

    .item-images
    {
        max-width: 100% !important;
        max-height: 100% !important;
        height: 180px !important;
        object-fit: bottom !important;
        object-position: bottom !important;
    }
}

.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
    --fi-offcanvas-zindex: 1080;
    --fi-offcanvas-width: 21rem;
    --fi-offcanvas-height: 30vh;
    --fi-offcanvas-padding-x: 1.5rem;
    --fi-offcanvas-padding-y: 1.25rem;
    --fi-offcanvas-color: ;
    --fi-offcanvas-bg: #fff;
    --fi-offcanvas-border-width: 0;
    --fi-offcanvas-border-color: transparent;
    --fi-offcanvas-box-shadow: 0 0.25rem 0.75rem -0.375rem rgba(31, 27, 45, 0.2), 0 0.5rem 1rem rgba(31, 27, 45, 0.16);
}

@media (min-width: 992px)
{
	.offcanvas-lg {
		--fi-offcanvas-height: auto;
    	--fi-offcanvas-border-width: 0;
    	background-color: rgba(0,0,0,0) !important;
	}

    .item-images
    {
        max-width: 100% !important;
        max-height: 100% !important;
        height: 180px !important;
        object-fit: bottom !important;
        object-position: bottom !important;
    }
}

.btn-ligh-blue
{
	background-color: #282435;
	color:#fff;
	border: 1px solid rgba(255,255,255,.12);
}

.btn-ligh-darkblue
{
    background-color: #282435;
    color:#fff;
    border: 1px solid rgba(255,255,255,.12);
}


.btn-ligh-blue:hover
{
	background-color: #1F1B2D !important;
	color:#fff !important;
	border: 1px solid rgba(255,255,255,.12) !important;	
}

.ipw-active
{
    background-color: #1F1B2D !important;
    color:#fff !important;
    border: 2px solid #282435 !important;
}

@media (min-width: 500px)
{
	.card-horizontal {
   	 	flex-direction: row;
	}

}

.ipw-card-hover {
    transition: border-color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out !important;
}

.ipw-card {
    background: #282435 !important;
    border: none !important;
    --fi-card-spacer-y: 1.25rem;
    --fi-card-spacer-x: 1.25rem;
    --fi-card-title-spacer-y: 0.5rem;
    --fi-card-border-width: 1px;
    --fi-card-border-color: #efecf3;
    --fi-card-border-radius: 0.75rem;
    --fi-card-box-shadow: ;
    --fi-card-inner-border-radius: calc(0.75rem - 1px);
    --fi-card-cap-padding-y: 1rem;
    --fi-card-cap-padding-x: 1.25rem;
    --fi-card-cap-bg: transparent;
    --fi-card-cap-color: ;
    --fi-card-height: ;
    --fi-card-color: ;
    --fi-card-bg: #fff;
    --fi-card-img-overlay-padding: 1rem;
    --fi-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--fi-card-height);
    word-wrap: break-word;
    background-color: var(--fi-card-bg);
    background-clip: border-box;
    border: var(--fi-card-border-width) solid var(--fi-card-border-color);
    border-radius: var(--fi-card-border-radius);
    box-shadow: var(--fi-card-box-shadow);
}

@media (min-width: 500px)
{
    .card-horizontal .card-img-top {
        border-radius: 0;
        border-top-left-radius: calc(0.75rem - 1px);
        border-bottom-left-radius: calc(0.75rem - 1px);
    }

    .card-horizontal .card-img-top, .card-horizontal .card-img-bottom {
        max-width: 39%;
        min-width: 39%;
    }

    .card-horizontal .card-body {
        padding: 1.25rem 1.5625rem;
    }

    .card-horizontal .card-img-top {
        border-radius: 0;
        border-top-left-radius: calc(0.75rem - 1px);
        border-bottom-left-radius: calc(0.75rem - 1px);
    }

    .card-horizontal .card-img-top, .card-horizontal .card-img-bottom {
        max-width: 39%;
        min-width: 39%;
    }

   

    
   /* .ipw-image-fit
    {
        padding: 0px !important;
        border: none !important;
        border-radius: 0px !important;
        background:#F3F3F3 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        background-size: cover !important;
    }*/


  
}

/*@media (max-width: 500px)
{
    .card-header
    {
        height: 10px !important;
    }
}*/

.card{

    background-color: #F3F3F3;
    border:none !important;
}

/*.card-header
{
    background:#F3F3F3 !important;
    height: 200px;
}*/

.card-body{
    background: #302D3D !important;
    border:1px solid #302D3D !important;
    color:#fff;
/*    z-index: 2 !important;*/
}

.card-footer
{
    border-top:1px solid #6c757d !important;
    background-color: #302D3D !important;
}

.btn-outline-secondary
{
    border:none !important;
    background: #1F1B2D !important;
    border-radius: 2px !important;
}

.btn-outline-secondary:hover{
    background:#FD390E !important;
}

.h7
{
    color:#fffffffc !important;
    font-size: 0.9rem !important;
}

.h8
{
    color:#fffffffc !important;
    font-size: 0.8rem !important;
}

.h9
{
    color:#fffffffc !important;
    font-size: 0.7rem !important;
}


.h10
{
    color:#fffffffc !important;
    font-size: 0.6rem !important;
}

.img{
    border: none !important;
    background-color: #1F1B2D;
}

.ipw-card-light {
    border-color: rgba(0,0,0,0);
    background-color: rgba(255,255,255,.04);
    color: #fff;
}

.ipw-card-light .active{

    border-color: rgba(0,0,0,0);
    background-color: #1F1B2D !important;
    color: #fff;
}

.card-horizontal .card-img-top, .card-horizontal .card-img-bottom {
    min-height: 12rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ipw-card-body {
    flex: 1 1 auto;
    padding: var(--fi-card-spacer-y) var(--fi-card-spacer-x);
    color: var(--fi-card-color);
}

.card-horizontal .card-img-top, .card-horizontal .card-img-bottom {
    min-height: 12rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tns-carousel-wrapper {
    position: relative;
}

.card-img-hover {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.card-img, .card-img-top {
    border-top-left-radius: var(--fi-card-inner-border-radius);
    border-top-right-radius: var(--fi-card-inner-border-radius);
}

.card-img, .card-img-top, .card-img-bottom {
    width: 100%;
}


.page-pagination {
    --fi-pagination-padding-x: 0.475rem;
    --fi-pagination-padding-y: 0;
    --fi-pagination-font-size: 1rem;
    --fi-pagination-color: #454056;
    --fi-pagination-bg: transparent;
    --fi-pagination-border-width: 1px;
    --fi-pagination-border-color: transparent;
    --fi-pagination-border-radius: 0.5rem;
    --fi-pagination-hover-color: #fd5631;
    --fi-pagination-hover-bg: transparent;
    --fi-pagination-hover-border-color: transparent;
    --fi-pagination-focus-color: var(--fi-link-hover-color);
    --fi-pagination-focus-bg: transparent;
    --fi-pagination-focus-box-shadow: none;
    --fi-pagination-active-color: #fff;
    --fi-pagination-active-bg: #fd5631;
    --fi-pagination-active-border-color: transparent;
    --fi-pagination-disabled-color: rgba(69, 64, 86, 0.4);
    --fi-pagination-disabled-bg: transparent;
    --fi-pagination-disabled-border-color: transparent;
    display: flex;
    padding-left: 0;
    list-style: none;
}

/*.tns-outer {
    padding: 0 !important;
}*/

.tns-horizontal.tns-subpixel>.tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

.tns-carousel-wrapper .tns-carousel-inner>* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.tns-slider>.tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tns-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


.bg-position-center {
    background-position: center !important;
}

.bg-size-cover {
    background-size: cover !important;
}

.ipw-h-100 {
    height: 150px !important;
}

.ipw-w-100 {
/*    width: 100% !important;*/
}

.pagination-light .page-item.active .page-link {
    background-color: #fff !important;
    color: #fd5631; 
    border-color: rgba(0,0,0,0); 
}

.footer-child
{
    background: #282435 !important;
    border: none !important;
    color:#fff;
}

.nav-link-light
{
    text-decoration: none !important;
}

#login-page{
        
    height: 75vh !important;
}

.btn-link
{
    text-decoration: none !important;
}

.ipw-form-group-light{
    border-color: rgba(255,255,255,.15);
    background-color: rgba(255,255,255,.04);
}

.ipw-form-group {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #efecf3;
    border-color: rgba(255,255,255,.15);
    border-radius: 0.5rem;
    background-color:  rgba(255,255,255,.04);
    box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31,27,45,.08), 0 0.25rem 0.75rem rgba(31,27,45,.08);
}

.ipw-d-block {
    display: block!important;
}


.ipw-hr-light {
    color: rgba(255,255,255,.15);
}

.card-darkblue
{
    background:#282435 !important;
}

.bg-darkblue
{
    background: #302D3D !important;
}

.card-white
{
    background: #ffff !important;
}


.color-icon
{
    color: #1F1B2D !important;
    font-size: 40px !important;
}


.dropdown-toggle {
    white-space: nowrap;
}

.btn-link {
    color: #666276 !important;
    border: 0;
    font-weight: bold;
    text-decoration: none;
}

.btn-dark-blue
{
    background: #1F1B2D !important;
    color: #ffff !important;
    border:1px solid #eee;

}

.active-sidebar
{
    background: #282435 !important;
}

.text-orange
{
    color:#FD390E;
}

.btn-orange
{
    background-color: #FD390E !important;
    color: #fff !important;
    
}

.btn-orange:hover{
    background-color: #fd2f01 !important;
    color: #fff !important;
}

.bg-orange
{
    background: #1F1B2D !important;
    cursor: pointer !important;
    color:#fd5631 !important;
}

.bg-orange:hover{
    color:#fff !important;

}

.ipw-btn
{
    background: #1F1B2D !important;
    text-decoration: none !important;
    cursor: pointer !important;
    color:#c1c1c1;
    padding: 10px 22px 10px 22px;
    border-radius: 2px;
    text-align: center !important;
    display: inline-flex !important;
}

.ipw-btn:hover
{
    background: #fd5631 !important;
    color: #fff !important;
} 

.ipw-div-btn-type
{
   background-color: #1F1B2D !important;
   cursor: pointer !important;

}

.ipw-div-btn-type:hover{
    cursor: pointer !important;
    color: white !important;
    background:#fd5631 !important;
}

table{
    border-radius: 10px !important;
}

.alert-darkblue
{
    background: #282435 !important;
    color: #FD390E !important;
    cursor: pointer;
}

[data-pagination],
[data-pagination] *,
[data-pagination] *:before,
[data-pagination] *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
font-kerning: auto !important;
}
[data-pagination] {
font-size: 8pt !important;
line-height: 1 !important;
font-weight: 400 !important;
font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
-webkit-text-size-adjust: 100% !important;
margin: 1em auto !important;
text-align: center !important;
transition: font-size .2s ease-in-out !important;
}
[data-pagination] ul {
list-style-type: none !important;
display: inline !important;
font-size: 100% !important;
margin: 0 !important;
padding: .5em !important;
}
[data-pagination] ul li {
display: inline-block !important;
font-size: 100% !important;
width: auto !important;
border-radius: 3px !important;
}
[data-pagination] > a {
font-size: 140% !important;
}
[data-pagination] a {
color: #777 !important;
font-size: 100% !important;
padding: .5em !important;
}
[data-pagination] a:focus,
[data-pagination] a:hover {
color: #f60 !important;
}
[data-pagination] li.current {
background: rgba(0,0,0,.1) !important;
}
/* Disabled & Hidden Styles */
[data-pagination] .disabled,
[data-pagination] [hidden],
[data-pagination] [disabled] {
opacity: .5 !important;
pointer-events: none !important;
}
@media (min-width: 350px) {
[data-pagination] {
    font-size: 10pt !important;
}
}
@media (min-width: 500px) {
[data-pagination] {
    font-size: 12pt !important;
}
}
@media (min-width: 700px) {
[data-pagination] {
    font-size: 14pt !important;
}
}
@media (min-width: 900px) {
[data-pagination] {
    font-size: 16pt !important;
}
}


.spinner-sm
{
    font-size:10px !important;
}

.ipw-stock-filters::placeholder{

color: #fff !important;

}

.form-control:focus {
    border-color: inherit !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.ipw-stock-filters
{
    background:#1F1B2D !important;
    border:none !important;
    color:#fff  !important;
    font-weight: bold;
    position: relative !important;
    width: 100% !important;
    height: 60px !important;
    z-index: 1 !important;
}

.select2-selection__choice{
    background-color: var(--bs-gray-200);
    border: none !important;
    font-size: 12px;
    font-size: 0.85rem !important;
}
.bootstrap-select .dropdown-toggle .filter-option
{
    position: absolute;
    top: 0;
    left: 0;
    padding-top: inherit !important;
    padding-right: inherit;
    padding-bottom: inherit;
    padding-left: inherit;
    height: 100%;
    width: 100%;
    text-align: left;
}

.bootstrap-select > .dropdown-toggle {
    position: relative;
    width: 100%;
    z-index: 1;
    text-align: right;
    white-space: nowrap;
    height: 40px !important;
    background:#302D3D !important;
    border:none !important;
    color:#dee2e6  !important;
    font-weight: bold;
}


.quantity
    {
        border-radius: 0px !important;
    }
    #quantity
    {
        width:60px !important;
        text-align: center !important;
    }


    .autosize
    {
        max-width: 100% !important;
        height: 173px !important;
        object-fit: cover !important;
        object-position: bottom !important;
        background-size: cover;
    }
    .items
    {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: bottom !important;
        object-position: bottom !important;
    }
    .h7
    {
        font-size: 0.9rem !important;
    }
    .h8
    {
        font-size: 0.8rem !important;
    }

    .dark-light
    {
        background-color: #282435 !important;
        padding: 10px 10px 1px 10px;
        cursor: pointer !important;
    }

    .item-p
    {
        background-color: #1F1B2D !important;
        height: 55px !important;
        font-size: 0.9rem !important;
/*        margin-top: 25px !important;*/
        border-radius: 5px;
    }

    .item-heading
    {
        font-size: 0.7rem !important;
        font-weight: bold;
    }

    .item-active
    {
        border:1px solid #FD390E !important;
        background-color: #FD390E !important;
    }

    .item-image
    {
        padding-left: 10px !important;
        padding-right: 0px !important;
/*        cursor: pointer !important;*/
    }

    /* .items{
        padding-left: 10px !important;
        padding-right: 10px !important;
    } */

    .item-detail-logo
    {
        display: block;
        position: absolute;
        margin-top: -70px;
        margin-left: 10px;
        z-index: 1;
        background: #282435;
        border-radius: 5px;
    }

    .item-container
    {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .item-container::-webkit-scrollbar {
      width: 0.2em;
    }
     
    .item-container::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    .item-container::-webkit-scrollbar-thumb {
      background-color: #FD390E;
      outline: 1px solid #1F1B2D;
    }

    .click-item
    {
        text-decoration: none !important;
    }

    #quantity
    {
        border: 1px solid #FD390E !important;
    }


    .item-images
    {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        object-fit: bottom;
        object-position: bottom;
    }

    .item-quantity
    {
        font-size: 12px;
        margin-top: 10px;
    }

    .img-thumbnail
    {
/*        position: absolute !important;*/
        padding: 0px !important;
        border:none !important;
        border-radius: 0px !important;
        background: #F3F3F3 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        background-size: cover !important;
    }

    .loadIcon{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 50% !important;
        top:50% !important;
        text-align: center;
        opacity: .5;
        transition: opacity .15s ease;
        text-decoration: none;
        color: #fd5631 !important;
        background: #F3F3F3 !important;
    }