.ui-show {
    display: block !important;
}

.ui-error, .ui-message {
    margin-bottom: 20px;
    padding: 10px 10px 10px 35px;
    color: #c33;
    border: 1px solid #c33;
    background-color: #F7E6E6;
    position: relative;
}
.ui-error i, .ui-message i {
    color: #c33;
    margin-right: 5px;
}
.ui-error::before, .ui-message::before {
    content: "\f06a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 11px;
}
.ui-message::before {
    content: "\f058";
}
.ui-message {
    border: 1px solid #060;
    background-color: #E8F7E8;
    color: #060;
}
.ui-message i {
    color: #060;
}

.ui-hidden {
    display: none !important;
}

.ui-paymethods {
    display: flex;
    justify-content: space-evenly;
}
.ui-paymethod {
    color: #444 !important;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 0 15px 15px;
}
.ui-paymethod-selected, .ui-paymethod:hover {
    border-color: var(--colour-primary);
}

.ui-carousel {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    scroll-behavior: smooth;
    overflow-y: hidden;
    scrollbar-width: none;
}
.ui-carousel::-webkit-scrollbar {
    display: none;
}
.ui-carousel > * {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.ui-carousel-dots {
    background-color: #eee;
    padding: 15px 0;
    text-align: center;
}
.ui-carousel-dots a {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 7px;
    cursor: pointer;
}
.ui-carousel-dots a:before {
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #bbb;
    transition: color .3s;
}
.ui-carousel-dots a.active:before {
    color: var(--colour-primary);
}

.ui-tab-content {
    display: none;
}

body.ui-slidenav-open, body.ui-slidefilters-open
{
	overflow:hidden
}

.ui-slidenav
{
	position:fixed;
	left:-100%;
	top:0;
	opacity:0;
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,.7);
	z-index:1000
}

body.ui-slidenav-open .ui-slidenav, body.ui-slidefilters-open .ui-slidenav
{
	opacity:1;
	left:0
}

.ui-slidenav>a
{
	position:absolute;
	top:3px;
	left:325px;
	color:#ddd;
	font-size:40px;
	cursor:pointer
}

.ui-slidenav>a:hover
{
	color:#fff
}

.ui-slidenav-container
{
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:315px;
	background-color:#f6f6f6;
	z-index:1001;
	transform:translateX(-100%);
	transition:transform .3s ease-in-out;
	overflow:hidden
}

body.ui-slidenav-open #slide-nav
{
	transform:translateX(0)
}
body.ui-slidefilters-open #slide-filters
{
	transform:translateX(0)
}

.ui-slidenav-header
{
	background-color:var(--colour-complement);
	height:60px
}

.ui-slidenav-header h2
{
	color:#fff;
	text-transform:none!important;
	margin:0;
	font-size:18px;
	height:60px;
	line-height:60px;
	padding:0 20px
}

.ui-slidenav-header h2 i
{
	margin-right:8px
}

.ui-slidenav-panes
{
	height:calc(100vh - 60px);
	position:relative
}

.ui-slidenav-pane
{
	height:calc(100vh - 60px);
	width:315px;
	overflow-y:auto;
	left:0;
	top:0;
	position:absolute;
	transition:transform .2s ease-in-out
}
#slide-filters .ui-slidenav-panes, #slide-filters .ui-slidenav-pane {
	height:calc(100vh - 120px);
}
#slide-filters .btns {
    padding: 10px 15px;
}

.ui-slidenav-pane::-webkit-scrollbar
{
	background-color:#ddd;
	width:8px
}

.ui-slidenav-pane::-webkit-scrollbar-thumb
{
	background-color: #aaa;
}

.ui-slidenav-pane-right
{
	transform:translateX(100%)
}

.ui-slidenav-pane-left
{
	transform:translateX(-100%)
}

.ui-slidenav-section
{
	border-bottom:1px solid #ccc;
	padding-bottom:20px
}

.ui-slidenav-section:last-child
{
	padding-bottom:0;
	border-bottom:none
}
.ui-slidenav-search {
    padding-bottom: 0;
    border-bottom: none;
}
.ui-slidenav-search input {
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding: 20px;
}
.ui-slidenav-search input:focus {
    outline: none;
}

.ui-slidenav-section h3
{
	padding:20px;
	padding-bottom:10px;
	margin:0;
	color:#444
}

.ui-slidenav-section ul
{
	padding:0;
	margin:0;
	list-style-type:none
}

.ui-slidenav-section a
{
	display:block;
	color:#777;
	padding:13px 20px;
	font-size:14px;
	position:relative
}

.ui-slidenav-section a:hover
{
	background-color:#eee
}

.ui-slidenav-parent a::after
{
	content:"\f054";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	position:absolute;
	right:20px;
	top:13px;
	font-size:16px;
	color:#ccc
}

.ui-slidenav-parent a:hover::after
{
	color:#888
}

.ui-slidenav-back
{
	font-size:16px;
	display:block;
	padding:20px;
	border-bottom:1px solid #ccc;
	color:#666;
	text-transform:uppercase;
	font-size:14px
}

.ui-slidenav-back:hover
{
	background-color:#eee
}

.ui-slidenav-back i
{
	margin-right:8px
}

.ui-qty-controls {
    height: 45px;
    margin: 15px auto;
    font-size: 0;
    text-align: center;
}
.ui-qty-controls i,
.ui-qty-controls input {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #ddd;
    height: 45px;
    width: 45px;
    text-align: center;
    overflow: hidden;
    line-height: 45px;
    padding: 0;
}
.ui-qty-controls input {
    border-width: 1px 0;
}
.ui-qty-controls i {
    color: #999;
    font-size: 14px;
    cursor: pointer;
}
.ui-qty-controls i:hover {
    color: var(--colour-primary);
}
.ui-qty-sm {
    height: 35px;
}
.ui-qty-sm i,
.ui-qty-sm input {
    height: 35px;
    width: 35px;
    line-height: 35px;
    font-size: 12px;
}

@supports (-webkit-overflow-scrolling: touch) {
    #slide-filters .ui-slidenav-panes, #slide-filters .ui-slidenav-pane {
        height:calc(100vh - 220px);
    }
}