.storewrapper, .productWrapper {
    width: 95%;
    margin: 5px auto;
    text-align:center;
}
.storeContainer, .productContainer {
    display:block;
    /*text-align:left;*/
}
.storeObject, productObject {
    display:block;
    height:90px;
    width:80%;
    /*background-color:#c8c8c8;*/
    margin: 5px auto;
    

}

.effect
{
  position: relative;
}
.effect:before, .effect:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 95%;
  top: 90%;
  
  /*max-width:300px;*/
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.locationObject td, .imgClass, .qtyDesc {
    background-color: #c8c8c8;
}
.storeTable, .productTable {
    border: 1px solid #ebebeb;
    width: 95%;
    height: 90px;
}
    .storeTable td, .productTable td, locationObject td {

    }
    .storeObject, .productObject, locationObject {
        display:inline;
    }
    .storeObject input, .productTable input, .locationObject input{
        text-align: right;
        float:right;
        
    }

.stImage {
    width: 150px;
   

}
    .storeTable .delref {
        text-align:left;
        padding: 15px;
        font-size:1.3em;
        font-weight:bold;
        width: 15%;
        
    }
.storeTable .header {
    background-color: var(--dark);
    color:#fff;
}
    .storeTable .info {
        text-align:right;
        padding: 15px;
        font-size:0.9em;
        width: 15%;
        height: 10px;
        
    }
.productTable .imgClass {
        text-align:center;
        padding: 5px;
        font-size:1.5em;
        font-weight:bold;
        width: 15%;
}

    .storeTable .company{
        text-align:left;
        padding: 15px;
        font-size: 1.4em;
        width: 65%;
        
    }
    .storeTable .details{
        text-align:left;
        padding: 15px;
        font-size: 0.9em;
        font-weight:bold;
        width: 65%;
        height: 10px;
        
    }
.storeTable .row {
    height: 40px;
}
.productTable .prodDesc {
        text-align:left;
        padding: 15px;
        width: 65%;
}
.qty-display {
    text-align: left;
    font-size: 1.2em;
}
.storeTable .action {
    width: 20%;
}
    .storeTable .address {
        clear:both;
        
        
    }
.search-form {
    display:inline;
}
#store-filter {
    display:inline;
    width:45%;
}

.fh-footer
{
    display:block;
    position:fixed;
    height:50px;
    text-align:center;
    width:100%;
    bottom:0px;
    border: 1px solid var(--dark);
    background-color:#fff;

        
}

input[type="text"],
input[type="tel"],
input[type="password"],
select,
textarea {
    border:1px solid #333333;
	border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
	-webkit-border-radius:3px;
	-ms-border-radius:3px;
    text-decoration:none;
    overflow: auto;
}
.category-link{
	color:#7ac0da;
	display:inline-block;
	padding:0.1em 0.5em;
	border:1px solid #333333;
	border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
	-webkit-border-radius:3px;
	-ms-border-radius:3px;
    text-decoration:none;
}
.category-link:hover{
	background:#333333;
    border:1px solid #333333;
	color:#333333;
	text-decoration:none;
    
}
.honme-wrap .new-order {
    color:#008000;
    background-color:#fff;
    
    border:2px solid #008000;
    
}
.honme-wrap .new-order:hover {
    
    background-color:#008000;
    color:#fff;

}
.honme-wrap .order-history {
    color:#333333;
    background-color:#fff;
    
    border:2px solid #333333;
    box-shadow:inset -1px 3px 5px #fff;
    -moz-box-shadow:inset -1px 3px 5px #fff;
}
.honme-wrap .order-history:hover {
    
    background-color:#333333;
    color:#fff;

}
.shadow-no-padding {
        -moz-box-shadow: 2px 2px 3px #333333;
	    -webkit-box-shadow: 2px 2px 3px #333333;
	    box-shadow: 2px 2px 3px #333333;
	    /* For IE 8 */
	    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
	    /* For IE 5.5 - 7 */
	    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
            /*text-align:center;*/
}
.center-align {
    text-align:center;
}
.left-shadow
{
    padding:15px;
    background-color: #fff;
	-moz-box-shadow: -5px 5px 6px 0 #333333;
	-webkit-box-shadow: -5px 5px 6px #333333;
	box-shadow: -5px 5px 6px #333333;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#333333')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#333333');
}

.shadow {
    padding:15px;
    background-color: #fff;
	-moz-box-shadow: 5px 5px 6px #333333;
	-webkit-box-shadow: 5px 5px 6px #333333;
	box-shadow: 5px 5px 6px #333333;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
    /*border:1px solid #3333;*/
	border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
	-ms-border-radius:10px;
    text-decoration:none;

    transition:all 0.3s linear;
	-z-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;

}
.loading-wrap {
    display:block;
    width:200px;
    height:500px;
}
.loading {
    
    display:block;
    margin: 0 auto;
    text-align:center;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0;
}
.head-content
{
    padding-top:20px;
    margin: 0 auto;
    max-width: 960px;
}

.review-details {
    margin:10px auto;
    text-align:center;
    -moz-box-shadow: 5px 5px 6px #333333;
	-webkit-box-shadow: 5px 5px 6px #333333;
	box-shadow: 5px 5px 6px #333333;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
    
}

.orderrow td {
    text-align:center;
    font-weight:bold;
}
.review-details input[type="button"] {
   
    width:40%;
    height:35px;
    font-size:0.8em;
    border: 0 none;
    color:white;
    background: url("../Images/button_red_zeus_orders.jpg") repeat-x;
}
    .review-details input[type="button"]:hover {
         background: url("../Images/button_red_zeus_orders_hover.jpg") repeat-x;
    }
    .review-details th {
        text-align:center;
        padding:5px 5px 20px 5px;
        background-color:#7ac0da;
    }
    .review-details  th.right {
        text-align:right;
        width:50%;
        padding:5px 5px 5px 5px;
        background-color:#7ac0da;
    }
    .review-details  th.left {
        text-align:left;
        padding:5px 5px 5px 5px;
        background-color:#7ac0da;
    }
    .review-details  td.right {
        text-align:right;
        width:50%;
        padding:5px 5px 5px 5px;
    }
    .review-details  td.right-small {
        text-align:right;
        width:40%;
        padding:5px 5px 5px 5px;
    }
    .review-details  td.left {
        text-align:left;
        padding:5px 5px 5px 5px;
    }
.review-history th, .review-history td {
    text-align:center;
    background-color:#fff;
    border-radius:10px;
	    -moz-border-radius:10px;
	    -o-border-radius:10px;
	    -webkit-border-radius:10px;
	    -ms-border-radius:10px;
}   

.or-link input[type="button"]{
   background-color:green;
   background: url("../Images/button_green_orders.jpg") no-repeat;
   /*color:white;*/
   height:55px; 
   width:155px; 
   margin: 0 auto;
   font-size:1.5em;
   text-decoration:none;
}
.or-link input[type="button"]:hover {
         background: url("../Images/button_green_orders_hover.jpg") no-repeat;
    }
.buttons-bar .submit-btn {
    border:2px solid #008000;
    background-color: #008000;
    color:#fff;
    /*background: url("../Images/button_green_orders.jpg") no-repeat;*/
    height: 55px;
    
}
.buttons-bar .clear-order {
    background: url("../Images/button_red_zeus_orders.jpg")
}
.buttons-bar .submit-btn:hover {
    background-color: #008000;
    color:#fff;
         /*background: url("../Images/button_green_orders_hover.jpg") no-repeat;*/
    }
.buttons-bar .clear-order:hover {
         background: url("../Images/button_red_zeus_orders_hover.jpg") no-repeat;
    }
.review-approved td{
    background-color:#a4ff6c;
    color:#000;
    text-decoration:none;
	transition:all 0.3s linear;
	-z-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
}
.review-approved:hover td{
    background-color:#0aff00;
    cursor:pointer;
    color:#000;
    text-decoration:none;
	transition:all 0s linear;
	-z-transition:all 0s linear;
	-o-transition:all 0s linear;
	-webkit-transition:all 0s linear;
	-ms-transition:all 0s linear;

}
.review-rejected td{
    background-color:#ff7373;
    color:#000;
    text-decoration:none;
	transition:all 0.3s linear;
	-z-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
}
.review-rejected:hover td{
    background-color:#ff3131;
    cursor:pointer;
    color:#fff;
    text-decoration:none;
	transition:all 0s linear;
	-z-transition:all 0s linear;
	-o-transition:all 0s linear;
	-webkit-transition:all 0s linear;
	-ms-transition:all 0s linear;
}
.review-pending td{
    background-color:#ffc050;
    color:#000;
    text-decoration:none;
	transition:all 0.3s linear;
	-z-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
}
.review-pending:hover td{
    background-color:#fffa0d;
    cursor:pointer;
    color:#000;
    text-decoration:none;
	transition:all 0s linear;
	-z-transition:all 0s linear;
	-o-transition:all 0s linear;
	-webkit-transition:all 0s linear;
	-ms-transition:all 0s linear;
}
.transition {
    text-decoration:none;
	transition:all 0.3s linear;
	-z-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;

}
.review-foot td {
    padding-top: 10px;
    background-color:#fff;
    font-weight:bold;

        border-radius:10px;
	    -moz-border-radius:10px;
	    -o-border-radius:10px;
	    -webkit-border-radius:10px;
	    -ms-border-radius:10px;

}
.review-foot .order-price{
    font-size:1.5em;
    padding: 0 0 15px 0;
}
.review-foot .submit-price{
    font-size:1.5em;
    text-align:right;
}
.review-foot .submit-text{
    font-size:1.5em;
    text-align:right;
}

.rev-wrap {
    width: 83dvw;
    height:100%;
    text-align:center;
    margin-top: 10%;
    font-size: 1.5rem;
}
.products-bar .rev-wrap, .products-bar .loading {
    text-align: left;
    max-width: 100%;
    width: 100%;
}
@media (max-width: 600px) {
    .rev-wrap { max-width: 100%; }
}
.honme-wrap {
    width:100%;
    height:100%;
    margin:auto;
    text-align:center;
}
.site-name {
    margin: 0 auto;
    text-align:center;
    font-size: 3.5em;
    color: #c8c8c8;
}

.static-header
{
    z-index:999;
    position:fixed;
    /*border-top: solid 10px #000;*/
    width:100%;
    top:0;
    height:100px;
    display:block;
    background-color:#fff;
   
}
.left-panel
{
    display:block;
    width:60%;
    float:left;
    height:100%;

}
    .left-panel td input[type="text"]
    {
        width:30px;
        text-align:center;
    }


.status-panel
{
    float:left;
    top:120px;
    display:block;
    width:100%;
    height:100px;
    margin:0, auto;
}
.headsign {
    margin:0 auto;
}
.search-bar
{
    display:block;
    float:left;
    top:auto;
    width:100%;
    height:145px;
    margin:0, auto;
    color:#333333;
}
.order-total-div {
    display:block;
    float:left;
    top:auto;
    width:100%;
    height:100px;
    margin:0, auto;
    margin-top:40px;
}    
.static-right
{
    position:fixed;
    float:left;
    margin-top:20px;
    max-width:100%;
    width: 550px;
    min-width:300px;
    height:300px;
    min-height:300px;
    margin: 0, auto;
}
.static-bot
{
    /*z-index:1000;*/
    position:fixed;
    /*float:left;*/
    min-width:290px;
    margin-left:-9px;
    width:100%;
    height:60px;
    min-height:60px;
    bottom: 50px;
}
.static-top
{
    /*z-index:1000;*/
    position:fixed;
    /*float:left;*/
    min-width:290px;
    margin-left:-9px;
    width:100%;
    height:60px;
    min-height:60px;
    top: 100px;
}
.shadow-white {
    padding:5px;
    background-color: #fff;
	-moz-box-shadow: 2px -2px 3px #333333;
	    -webkit-box-shadow: 2px -2px 3px #333333;
	    box-shadow: 2px -2px 3px #333333;
	    /* For IE 8 */
	    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#333333')";
	    /* For IE 5.5 - 7 */
	    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#333333');
            /*text-align:center;*/
}
.buttons-bar
{
    display:block;
    float:left;
    width:100%;
    top:5px;
    margin: 10px auto;
}

.right-div
{
    float:left;
    display:block;
    height:150px;
    top:auto;
    width:40%;
}

.static-footer
{
    display:block;
    position:fixed;
    height:50px;
    text-align:center;
    width:100%;
    bottom:0px;
    background-color:#fff;

        -moz-box-shadow: 2px -2px 3px #333333;
	    -webkit-box-shadow: 2px -2px 3px #333333;
	    box-shadow: 2px -2px 3px #333333;
	    /* For IE 8 */
	    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#333333')";
	    /* For IE 5.5 - 7 */
	    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-135, Color='#333333');
            /*text-align:center;*/
}

/*-------------------Product Table--------------------*/

/* Autocomplete */
div.list_item_container {
    height: 90px;
    padding: 5px;
}
div.image {
    width: 90px;
    height: 80px;
    float: left;
}
div.description {
    font-style: italic;
    font-size: 0.8em;
    color: gray;
}

/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    margin: auto;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }

    #loginForm input {
        width: 250px;
    }

    #loginForm input[type="checkbox"],
    #loginForm input[type="submit"],
    #loginForm input[type="button"],
    #loginForm button {
        width: auto;
    }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom:  5px;
    }

#socialLoginList button {
    margin-bottom: 12px;
}
.password-form
{
    display:block;
    width:60%;
    height:350px;
    margin: 0 auto;
    margin-bottom:150px;
    padding: 10px;
}
#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

label.checkbox {
    display: inline;
}
.manage-cat {

    margin-top:10px;
}
select, option {
    color:#333333;
    font-size: 1em;
    margin: 2px 0 6px 0;
    padding: 2px;
    width: 200px;
    -moz-border-radius:10px;
	    -o-border-radius:10px;
	    -webkit-border-radius:10px;
	    -ms-border-radius:10px;
}

.red {
    color:#333333;
    font-size: 1em;
    margin: 2px 0 6px 0;
    padding: 2px;
    width: 150px;
    border: 1px solid red;
    -moz-border-radius:10px;
	    -o-border-radius:10px;
	    -webkit-border-radius:10px;
	    -ms-border-radius:10px;
}
/*END OF PROGRESS BAR*/
/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}


/* tables
----------------------------------------------------------*/
table {
    border-spacing: 0;
    margin-top: 0.75em;
    background-color:#fff;

    text-decoration:none;
	transition:all 0.3s linear;
	-z-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
    /*display:block;*/
    
    /*background-color: #d9d9d9;*/
	color:#333333;
    border:1px solid #333333;
	border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
	-ms-border-radius:10px;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

/*****************
 *  Stock view   *   
******************/
* {
  box-sizing: border-box;
}

#filterInput {
  background-image: url('../images/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#storesUL {
  list-style-type: none;
  overflow:hidden; 
  overflow-y:scroll;
  height: 250px;
  padding: 0;
  margin: 0;
}

#storesUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#storesUL li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#storesUL li a:hover:not(.header) {
  background-color: #eee;
}

/*************************/


@media only screen and (max-height: 590px) {
    .status-panel {
        display:none;
        visibility:hidden;
    }
}

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width:1024px) {
    body {
        font-size:0.8em;
    }
    .center-align {
    text-align:left;
}
    .order-total {
        margin-left:0px;
        width:75%;
    }
    .code {
        text-align:center;
        margin-left:auto;
        margin-right:auto;

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

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right, .static-header {
        height:60px;
        /*float: none;*/
    }

    

    .center-align {
    text-align:left;
}
    /* logo */
    header .site-title {
       
        margin: 15px;
        float: left;
    }
    .status-panel {
        display:none;
        visibility:hidden;
    }

    /* login */
    #login {
        font-size: .85em;
        margin-top: 10px;
        margin-right: 15px;
        float:right;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

        #login a:hover {
            color: #333333;
        }

    /* menu */
    /*nav {
        margin-bottom: 5px;
    }*/

    /* menu
----------------------------------------------------------*/
div.float-right span#mobile-navigation {
		background: transparent url(../images/mobile-menu.png) no-repeat;
		display: block;
		height: 50px;
		margin: 0;
		padding: 0 0 0 0;
		position: absolute;
		right: 2%;
		top: 10px;
		width: 50px;
		z-index: 999;
	}
	div.float-right > ul#menu {
		background: transparent url(../images/mobile-menu.png) no-repeat;
		/*background: rgba(98, 0, 49, 0.91);*/
        background: #333333;
		border: 1px solid #f1f2f2;
		border-radius: 10px;
		display: none;
		float: none;
		height: auto;
		padding: 0;
		position: absolute;
		right: 3%;
		top: 90px;
		width: 92%;
		z-index: 1000;
	}
	div.float-right > ul#menu > li {
		border-left: 0;
		border-top: 1px solid #f1f2f2;
		margin: 0;
		height: auto;
		padding: 0;
		position: relative;
		text-align: left;
		width: 100%;
	}
	div.float-right > ul#menu > li:first-child {
		border-top: 0;
	}
	div.float-right > ul#menu > li:hover {
		background-color: transparent;
	}
	div.float-right ul#menu li a {
		border: none;
		color: #eeeced;
		display: block;
		font-family: Arial;
		font-size: 1.125em;
		font-weight: normal;
		height: 3em;
		line-height: 3.125em;
		min-height: 54px;
		padding: 0 10px;
		text-align: left;
		text-decoration: none;
		text-shadow: none;
		width: auto;
	}
	div.float-right .mobile-submenu {
		background: var(--dark) url(../images/mobile-expand.png) no-repeat center;
		border-left: 1px solid #f1f2f2;
		display: inline-block;
		height: 3.4em;
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		z-index: 0;
	}
	div.float-right ul#menu li ul {
		background: none;
		border-top: 1px solid #f1f2f2;
		padding: 0;
		position: static;
		right: 0;
		text-align: left;
		width: 100%;
		z-index: 999;
	}
	div.float-right ul#menu li ul, #header div ul#menu li:hover ul {
		display: none;
	}
	div.float-right ul#menu li {
		height: auto;
		width: 100%;
		z-index: 40;
	}
	div.float-right ul#menu li ul li {
		background: var(--dark);
		border-top: 1px solid #f1f2f2;
		display: block;
		height: auto;
		margin: 0;
		padding: 0;
		text-align: left;
		width: 100%;
	}
	div.float-right ul#menu li ul li:first-child {
		border: none;
	}
	div.float-right ul#menu li ul li a {
		background: var(--dark);
		color: #eeeced;
		padding-left: 20px;
		text-align: left;
		text-decoration: none;
		width: auto;
	}
	div.float-right ul#menu li:hover a, #header div ul#menu li.selected a, #header div ul#menu li:hover ul li a, #header div ul#menu li:hover ul li a:hover, #header div ul#menu li ul li.selected a {
		display: block;
	}
	div.float-right ul#menu li.selected > a {
		background: rgba(0, 0, 0, 0.91);
		color: #eeeced;
		text-decoration: none;
	}
	div.float-right ul li.selected a, #header div ul li.selected a:hover, #header div ul li.menu ul#selected li.selected a {
		color: #eeeced;
		text-decoration: none;
	}


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }
    .static-footer {
        
        display:none;
    }

        footer p {
            margin: 0;
        }
    .left-panel {
        width:100%;
    }
    .static-right {
        bottom:0;
        width:95%;
        margin-bottom:0px;
        height:180px;
        min-height:10px;
    }
    .order-total-div {
        display:none;
    }
    .search-bar {
        bottom:0;
        margin-bottom:0;
    }
    .buttons-bar {
        display:none;
    }
    .mobile {
        float:right;
        display:inline;
    }
        .mobile .submit-btn {
            background-color: #008000;
            border: 1px solid #008000;
        }
    .moblie button.clear-order {
        background-color: #810000;
        border: 1px solid #810000;
    }
    .desktop {
        display:none;
    }
    .honme-wrap {
        text-align:center;
    }
    .or-create {
        margin-left:5px;
    }
    .or-history {
        margin-top:10px;
        margin-left:-5px;
    }
    .new-order {
        margin-bottom:10px;
    }
    .order-history {
        margin-top:20px;
    }
}


/* *********************NEW STYLES****************************** */
body.u-light-bg {
    background: var(--light);
}

/* HEADER */
.c-site-header {
    display: flex;
    align-items: center;
    position: fixed; 
    z-index: 9999;
    height: 66px;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #fff;
    background: var(--primary-colour);
}
.logo {
    display: block;
}
.logo--zeus {
    width: 140px;
}

/* FOOTER */
.c-site-footer {
    padding: 1.4rem 0;
    font-size: 14px;
    border-top: 1px solid #fff;
    background: var(--primary-colour);
}

/* SITE NAV */
.c-site-nav__item {
   display: inline-block;
}
.c-site-nav__item a {
    display: block;
    padding: 1.5rem 1.2rem; 
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px; 
}
.c-site-nav__item a:hover {
    color: var(--secondary-colour);
}
.c-site-nav__item .loginLink {
    position: relative;
    padding-left: 2.8rem;
}
.c-site-nav__item .loginLink:before {
    content: '\f023';
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
} 

/* PAGE */
#body, .page-wrap {
    position: relative;
    min-height: calc(100dvh - 132px);
}
.page-wrap:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 30%;
    background: var(--dark);
}
.page-wrap__inner {
    position: relative;
    padding: 3rem;
    border-radius: 10px;
    background: #fff;
}
.c-page-title {
    font-size: 2.1rem;
}

/* HOME PAGE */
.or-history {
    display: block;
    padding-top: 1rem;
    text-align: center;
}
.or-history input {
    background: none;
    color: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(13px, 1vw, 18px);
    text-decoration: underline;
    letter-spacing: 2px;
}

/* MANAGE ACCOUNT */
.manage-account {
    background-position: bottom right;
    background-repeat: no-repeat;
}
.manage-account--password {
    background-image: url("../Images/acc-pass.png");
}
.manage-account--email {
    background-image: url("../Images/acc-email.png");
}

/* FORMS */
button, input[type=button], input[type=submit] {
    border: 2px solid transparent;
}
input[type=date], input[type=email], input[type=file], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=checkbox], select, textarea {
    border: 2px solid #bbbbbb;
    border-radius: 3px;
}
.login-form form {
    padding: 2rem;
    background: #fff;
    border-radius: 10px;
    border: none;
}
.login-form.manage-account-form form {
    padding: 2rem;
    width: 400px;
    max-width: 100%;
}
.login-form fieldset {
    border: none;
    padding: 0;
}
.login-form fieldset ol li {
    padding-bottom: 1rem;
}
label {
    font-size: 15px;
    margin-bottom: 5px;
}
.asterisk {
    color: red;
    font-weight: 700;
}
.forgotten-password {
    line-height: 1.5;
}

.account-nav {
    display: flex;
    padding-bottom: 3rem; 
}
.account-nav input[type="button"] {
    background: none;
    padding: 0 3rem 0 0;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: var(--dark);
}
.account-nav input[type="button"]:hover, .account-nav input[type="button"].current {
    color: var(--primary-colour);
}


/* PRODUCTS */
.products-bar {
    position: relative;
}
.products-bar.fixed {
    position: fixed;
    z-index: 9;
    top: 66px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--light);
}
.products-bar__inner {
    border-radius: 10px;
    background: #fff;
    padding: 0.8rem;
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}
.products-bar__right {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}

.products-bar__item {
    /*flex: 0 0 auto;
    flex-grow: 1;*/
    position: relative;
}

.products-bar__item--all-products {
    min-width: 320px;
}
.products-bar .headsign {
    font-size: 15px;
    font-weight: 900;
}
.products-bar #sap {
    font-size: 13px;
}
@media (max-width: 1500px) {
    .products-bar__item--search {
        max-width: 200px;
    }
}
.products-bar__item--search i {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
}
input.products-search, input.products-search:focus {
    position: relative;
    z-index: 2;
    padding: 0.4rem 1rem;
    height: auto;
    background: none;
}
.products-search::placeholder {
    font-weight: 500;
    color: #bbb;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}
.products-bar__item--categories {
    
}
.products-bar__item--filter-products {
    max-width: 160px;
    border-left: 2px solid #bbb;
}

.products-bar__item--categories .browse-categories {
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.products-bar__item--categories .cat-list {
    position: absolute;
    left: 0;
    top: 2rem;
    background: #fff;
    width: 200px;
    padding: 1.5rem;
    box-shadow: 0 0 10px 0 rgba(187, 187, 187, 0.9);
    border-radius: 10px;
    
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: all 0.3s;
}
.products-bar__item--categories .cat-list.shown {
    z-index: 99;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.products-bar__item--categories .cat-list label {
    cursor: pointer;
}
.products-bar__item--categories .cat-list input {
    margin-right: 5px;
} 

.products-bar__item--filter-products:after {
    content: '\f0dc';
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
}
select.browse-categories, select.browse-categories:focus, select.filter-products, select.filter-products:focus {
    position: relative;
    z-index: 2;
    border: none;
    background: none;
    padding: 0.4rem 1rem 0.4rem 0;
    height: auto;
    width: 100%;
    font-weight: 700;
    color: var(--dark);
    font-size: 14px;
    margin: 0;
    cursor: pointer;
}
select.filter-products, select.filter-products:focus {
    padding-left: 1.7rem;
    padding-right: 0;
}
select.filter-products option {
    padding: 0 !important;
}
.products-bar__item--view-cart {
    max-width: 180px;
}
.view-cart {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: #fff;
    padding: 0.45rem 1.2rem;
}
.products-bar__item--product-view {
    text-align: center;
}
.product-view {
    color: var(--dark);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}

/* Order basket */
.order-cart {
    position: absolute;
    right: 0;
    top: calc(100% + 2.5rem);
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 0 10px 0 rgba(187, 187, 187, 0.9);
    border-radius: 10px;
    
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transform: scale(0.95);
    transform-origin: top center;
    transition: all 0.3s;
}
.order-cart.shown {
    top: calc(100% + 1rem);
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 9;
}
.order-cart .order-total {
    width: 100%
}
.order-total {
    border: none;
    margin: 0;
}

.order-cart .submit-btn {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    border: 2px solid transparent;
    border-radius: 5px;
    font-family: Segoe UI,Arial,Helvetica,sans-Serif;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    background: var(--primary-colour);
    width: 100%;
    margin: 1rem 0
}
.order-cart .submit-btn:hover {
    background: var(--dark);
}
.order-cart .clear-order {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    font-family: Segoe UI,Arial,Helvetica,sans-Serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    color: red;
}

/* Product table */
.product-tables {
    margin-top: 1.5rem;
}
.product-table {
    position: relative;
    padding: 0;
    width:100%;
    border: none;
    margin-bottom: 1.5rem;
    color: var(--dark);

}
.product-table td {
    padding: 1.5rem;
}
.product-table .descr {
    font-weight: 700;
    text-transform: uppercase;
}
.list-view .product-table .descr {
    width: 30%;
}
.list-view .pic {
    width: 15%;
}
.pic {
    font-size: 14px !important
}
.pic img {
    width: 100% !important;
    height: auto !important;
}
.pic-holder {
    position: relative;
}
.details .quantity {
    padding: 0.2rem 0.5rem;
    height: auto;
    width: 50px;
    font-size: 14px;
}
.price-details {
    font-weight: 700;
}
.details .submit-product {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    border: 2px solid transparent;
    border-radius: 5px;
    font-family: Segoe UI,Arial,Helvetica,sans-Serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    background: var(--primary-colour)
}
.details .submit-product:hover {
    background: var(--dark);
}

/* Grid view */
.product-tables.grid-view {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 1.5rem;
}
.grid-view .product-table {
    margin: 0;
    display: block;
    padding-bottom: 3rem;
}
.grid-view .product-table.cat-table {
    grid-column: 1/-1;
    padding: 0;
}
.grid-view .product-table.cat-table td {
    padding: 1.5rem;
}
.grid-view .product-table td {
    width: 100%;
    display: block;
}
.grid-view .pic-holder {
    height: 180px;
    display: flex;
}
.grid-view .pic img {
    margin: auto;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 180px;
}
.grid-view .descr, .grid-view .details {
    padding-top: 0;
}
.grid-view .unit-details, .grid-view .quantity-details {
    padding-bottom: 5px;
}
.grid-view .details .submit-product {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    width: calc(100% - 3rem);
}
/*Order total */
.order-total {
    margin-top: 2rem;
}
.order-total th {
    text-transform: uppercase;
    font-size: 11px;
}
.order-total th, .order-total td {
    padding: 5px 10px;
    border-bottom: 2px solid #ebebeb;
}

/* Order history */
.review-total {
    width: 100%;
    border: none;
    margin: 0;
    border-bottom: 1px solid var(--light);
    color: var(--dark);
}
.review-total--filter {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.review-total--orders {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.review-total--orders tr {
    background: #fff;
}
.review-total tr.review-odd {
    background: #f3f5f8;
}
.review-total tr.review-even {
    background: #fff;
}
.review-total th, .review-total td {
    padding: 0.5rem 1.5rem;
}
.review-total th, .review-total td {
    padding: 1rem 1.5rem;
}
.review-total th {
    font-size: 15px;
    color: #333;
}
.review-total h3 {
    font-size: 16px;
    color: var(--dark);
}
.review-total input.quantity {
    padding: 0.2rem 0.5rem;
    height: auto;
    width: 50px;
    font-size: 14px; 
}
.review-total--orders .review-foot td {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: right;
}
.order-search {
    position: relative;
}
.order-search:after {
    content: '\f002';
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
}
input.order-search-input, input.order-search-input:focus {
    position: relative;
    z-index: 2;
    padding: 0.4rem 1rem;
    height: auto;
    background: none;
    font-size: 14px;
}
.order-search-input::placeholder {
    font-weight: 500;
    color: #bbb;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}
.sel-page {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    margin-right: 0.8rem;
}
#sel-page {
    width: 55px;
    padding: 0.42rem 1rem;
    font-size: 14px;
    height: auto
}
input[type="submit"].filter-orders {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    padding: 0.45rem 1.2rem;
    border: 2px solid var(--dark)
}
.view-button, .reuse-button {
    padding: 0.42rem 1rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 500;
}
.reuse-button:hover {
    background: none;
    color: var(--dark);
}
.u-button.del-link {
    border: 2px solid red;
    color: red;
    background: none;
}
.u-button.del-link:hover {
    border-color: red;
    color: #fff; 
    background: red;
}
/*Order PROGRESS BAR*/
ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ol.progtrckr li {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    line-height: 4em;
    font-size: 14px; 
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
}
/*ol.progtrckr li:after {
    content: "\00a0\00a0" ;
    z-index:-1;
}*/
ol.progtrckr li:before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
ol.progtrckr li.progtrckr-done:before {
    background: var(--primary-colour)
}
ol.progtrckr li.progtrckr-todo:before {
    background: #fff;
}
ol.progtrckr li.progtrckr-curr:before {
    background: #fff;
    border: 4px solid var(--dark);
}
ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {
    color: var(--primary-colour);
    border-bottom: 4px solid var(--primary-colour);
}
ol.progtrckr li.progtrckr-todo {
    color: #aaa; 
    border-bottom: 4px solid #fff;
}
ol.progtrckr li.progtrckr-curr {
    font-weight: 500;
    font-size: 17px;
    color: var(--dark);
    border-bottom: 4px solid var(--dark);
}

/*Submit order */
.review-total--submit th, review-total--submit td {
    
}

/*Order thank you*/
.order-thank-you {
    border-radius: 10px;
}
.order-thank-you__content {
    padding: 3rem;
    max-width: 480px;
    margin: 0 auto;
}

/* MISC */
.fh-img {
    width: 100%;
    height: calc(100dvh - 332px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px;
    background-color: #111;
}
.fh-frame {
    position: relative;
    width: 100%;
    height: calc(100dvh - 332px);
    border-radius: 10px;
    background-color: #111;
    overflow: hidden;
}
.fh-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.fh {
    width: 100%;
    min-height: calc(100dvh - 332px);
}
.u-button--smaller {
    font-size: 12px;
    padding: 8px 15px;
}

.nav-trigger {
    display: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}
.nav-trigger .fa-circle-xmark {
    display: none;
}
.order-buttons {
    text-align: center;
    padding-bottom: 3rem;
}
.order-buttons .u-button {
    margin: 0.1rem;
}
.table-scrolling-message {
    display: none;
}

.added-success {
    display: none;
    position: absolute;
    bottom: 4.5rem;
    width: calc(100% - 3rem);
    text-align: center;
    color: green;
    font-weight: bold;
}
.added-success.shown {
    display: block;
}
.submit-product.green, .submit-product.green:hover {
    background: green
}
.view-cart.shake {
    animation: shake 0.25s infinite;
}

td.product-star-holder {
    padding: 0;
}
.product-star {
    font-size: 24px;
    position: absolute;
    z-index: 5;
    right: 1rem;
    top: 0.5rem;
    cursor: pointer;
    color: #ccc;
    transition: all 0.3s;
}
.product-star.selected {
    color: var(--dark);
    animation: shakeV 0.25s 1;
}
body {
    background: red;s
}
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, 3px) rotate(3deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-3px, 5px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.error-anim {
    animation: error-anim 0.25s infinite;
}
input.quantity.error-anim {
    border-color: red;
}
@keyframes error-anim {
 0% { transform: translateX(0) }
 25% { transform: translateX(3px) }
 50% { transform: translateX(-3px) }
 75% { transform: translateX(3px) }
 100% { transform: translateX(0) }
}

@keyframes shakeV {
    0% { transform: translateY(0) }
    25% { transform: translateY(3px) }
    50% { transform: translateY(-3px) }
    75% { transform: translateY(3px) }
    100% { transform: translateY(0) }
   }

@media (max-width: 1280px) {
    .nav-trigger {
        display: block;
    }
    .c-site-nav ul {
        display: none;
    }
    .c-site-nav.shown ul {
        display: block;
    }
    .c-site-nav.shown .nav-trigger .fa-circle-xmark {
        display: block;
    }
    .c-site-nav.shown .nav-trigger .fa-bars {
        display: none;
    }
    
    .c-site-nav ul {
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        background: var(--dark);
        height: calc(100dvh - 65px);
        overflow-y: auto;
        overflow-scrolling: touch;
        -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        padding-bottom: 150px;
    }
    .c-site-nav ul li {
        display: block;
        text-align: left;
        border-bottom: 1px solid #fff;
    }

    .products-bar, .products-bar.fixed {
        position: fixed !important;
        z-index: 99;
        top: 65px !important;
        background: #222;
        width: 100%;
    }
    .products-bar__inner {
        background: #222;
        color: #fff;
        gap: 1rem;
        justify-content: space-between;
    }
    .products-bar__inner {
        padding: 0.8rem 0;
    }
    .products-bar__item {
        font-size: 10px !important;
    }
    .products-bar__item--all-products {
        /*display: none; */
    }
    .products-bar__item--search i {
        position: static;
        transform: none;
        cursor: pointer;
    }
    .products-search-wrap {
        position: absolute;
        left: 0;
        top: 2rem;
        background: #fff;
        width: 250px;
        padding: 1.5rem;
        box-shadow: 0 0 10px 0 rgba(187, 187, 187, 0.9);
        border-radius: 10px;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
        transform: translateY(1rem);
        transition: all 0.3s;
    }
    .products-bar__item--search.expanded .products-search-wrap { 
        opacity: 1;
        visibility: visible;
        z-index: 99;
        transform: translateY(0);
    }
    .product-view {
        color: #fff;
    }
    .products-bar__item--categories .cat-list {
        /*top: auto;
        bottom: 105%;*/
    }
    .products-bar__item--categories .cat-list label {
        color: #222;
    }
    .product-tables.grid-view {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 1rem;
    }
    .table-scrolling-message {
        display: block;
        padding-bottom: 1rem;
        text-align: center;
    }
    .table-scroll {
        overflow-x: scroll;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 1022px) {
    .page-wrap:before {
        right: 0;
    }
    .page-wrap__inner {
        padding: 0;
        background-size: 100% auto;
    }
    .homepage-content .c-page-title, .homepage-content p {
        text-align: center;
    }
    .manage-account-form {
        margin: 0 auto;
        width: 400px;
        max-width: 100%;
    }
    .product-tables.grid-view {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 1rem;
    }

    .products-bar__item .item-label {
        display: none;
    }
}
@media screen and (max-width:900px) {
    .product-tables.list-view {
        max-width: 100%;
        width: 100%;
        overflow-x: scroll
    }
    .product-tables.list-view table {
        width: 800px;
    }
}
@media screen and (max-width:61.25em) {
    .all-products-wrap  {
        padding-top: 5rem
    }
}
@media (max-width: 760px) {
    .all-products-wrap {
        padding-top: 9.5rem;
    }
    .products-bar__inner {
        display: block;
    }
    .products-bar__right {
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding-top: 0.8rem;
        margin-top: 0.8rem;
    }
    .products-bar__item--all-products {
        text-align: center;
        min-width: 0;
    }
    .products-bar .products-bar__item--all-products .rev-wrap, .products-bar .products-bar__item--all-products .loading {
        text-align: center;
    }
    ol.progtrckr li.progtrckr-todo, ol.progtrckr li.progtrckr-done, ol.progtrckr li.progtrckr-curr {
        font-size: 9px;
        line-height: 1.3;
        padding-bottom: 1rem;
    }
    ol.progtrckr li.progtrckr-curr {
        font-size: 12px; 
    }
} 

@media (max-width: 600px) {
    .products-bar__inner {
        gap: 0;
    }
    .products-bar__item--product-view {
        display: none; 
    }
    .product-tables {
        max-width: 350px;
        margin: 0 auto;
    }
    .product-tables.grid-view {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-gap: 1rem;
    }
}
@media (max-width: 480px) {
    .account-nav {
        flex-wrap: wrap;
    }
    .account-nav input[type="button"] {
        width: 100%;
    }
    .account-nav input[name="changePassword"] {
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #ebebeb;
    }
    .account-nav input[name="changeEmail"] {
        padding-right: 0;
    }
    
    .order-cart { 
        width: 100%;
    }
    .order-cart .submit-btn, .order-cart .clear-order {
        font-size: 12px
    }
    .order-total th, .order-total td {
        padding: 5px;
    }
    .order-total th {
        font-size: 10px;
    }
    .order-cart .orderrow .u-button {
        display: none;
        font-size: 10px;
        padding: 8px;
    }
    .view-cart {
        padding: 0.35rem 0.5rem;
        border-color: var(--primary-colour);
    }
    
    .order-buttons .u-button {
        width: 90%;
    }
}