BODY {
 background-color: #333333;
 margin: 0;
 font-family: Montserrat, sans-serif;
 color: #eeeeee;
 padding: 0;
}

BODY, DIV, TABLE, A, IFRAME, H1, H2 {
 box-sizing: border-box;
}

INPUT {
 padding: 10px 15px;
 background-color: #555555;
 font-family: Montserrat, sans-serif;
 color: #eeeeee;
 border: 0;
}

TABLE {
 width: 100%;
 margin: 0;
}

#header {
 background-color: #000000;
 padding: 1px;
}

#header H1 {
 color: #ffd77e;
 font-size: 1.4em;
 margin: 0;
}

H2 {
 color: #ffd77e;
 font-size: 1.4em;
 margin: 10px 0;
 width: 100%;
 text-align: center;
}

#addrDisp {
 background-color: #ffd77e;
 color: #222222;
 text-align: center;
 font-size: 1.4em;
 margin: 0;
 padding: 5px 0;
}

.navigBar {
 background-color: #222222;
 color: #ffd77e;
 font-size: 1.2em;
 margin: 0;
 padding: 7px 9px; 
}

.errorMsg {
 background-color: #cc0000;
 padding: 6px 7px;
}

.successMsg {
 background-color: #008704;
 padding: 6px 7px;
}

.warningMsg {
 background-color: #f08e00;
 padding: 6px 7px;
}

P, H3 {
 margin: 10px;
 padding: 5px 7px;
 text-align: center;
}

.catContainer {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 padding: 5px 3px;
}

.icon {
 flex: 45%;
 border-radius: 10px;
 margin: 5px;
 aspect-ratio: 1;
 background-size: cover;
 display: flex;
 align-items: flex-end;
}

.iconLabel {
 text-align: center;
 padding: 5px 0;
 width: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-bottom: 10px;
}

.productVign {
 width: 50px;
 aspect-ratio: 1;
 border-radius: 8px;
 vertical-align:middle;
}

.rightLink {
 float: right;
 font-size: 2em;
 position: relative;
 top: -20px;
}

.number {
 text-align: right;
}

#productsList {
 margin-bottom: 150px;
}

#productsList TABLE {
 padding: 0 10px;
}

#productsList TD {
 padding: 5px;
}

#basket TABLE {
 padding: 0 10px;
}

#basket TD {
 padding: 5px;
}

#basket {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 150px;
 border-top: 2px solid #ffd77e;
 background-color: rgba(0,0,0,0.9);
 background-image: url("../img/basket.svg");
 background-repeat: no-repeat;
 background-position: right bottom;
 background-size: 50%;
 padding: 10px 0;
}

FORM {
 display: inline;
 margin: 0;
 padding: 0;
}

.butt {
 background-color: #ffd77e;
 color: #111111;
 border-radius: 2px;
 padding: 10px 20px;
 font-variant: small-caps;
 font-size: 1.2em;
 font-weight: normal;
 border: 0;
}

.roundButt {
 background-color: #ffd77e;
 color: #111111;
 font-size: 1.5em;
 border-radius: 15px;
 padding: 0 7px;
}

.cartOverview {
 width: 100%;
 padding: 0 10px;
}

.cartOverview TD {
 padding: 5px;
}

#payIframe {
 width: 100%;
 height: 600px;
 margin: 0;
 border: 0;
}

.barContainer {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 padding: 0;
 height: calc(100vh - 33px);
}

.barFrame {
 flex: 50%;
}

.barFrame IFRAME {
 width: 100%;
 height: calc(100vh - 33px);
 margin: 0;
 border: 0;
}

#topRightMenu {
 position: absolute;
 top: 0;
 right: 0;
 padding: 7px;
}

A, A.visited, A.active {
 background-color: #ffd77e;
 color: #111111;
 border-radius: 2px;
 padding: 3px 10px;
 font-variant: small-caps;
 font-size: 1em;
 text-decoration: none;
}

.dot {
 margin: 0 7px;
 padding: 0 3px;
 border-radius: 15px;
 font-size: 0.7em;
}

.ordersList {
 border-spacing: 0 10px;
}
.ordersList TD {
 padding: 10px 5px;
 background-color: #222222;
 font-size: 0.8em;
}

TD.paid {
 color: #008704;
}
INPUT.paid {
 background-color: #008704;
 color: #eeeeee;
}
TD.due {
 color: #f08e00;
}
INPUT.due {
 background-color: #f08e00;
}
INPUT.cancel {
 background-color: #cc0000;
 color: #eeeeee;
}

.pending {
 background-color: #da7700;
}
.delivered {
 background-color: #000fc3; 
}
.cancelled, .cancelledRefunded {
 background-color: #cc0000; 
}

.tag {
 border-radius: 3px;
 padding: 2px 5px;
}

.orderDisplay {
 margin: 15px auto;
 background: rgba(255,255,255,0.7);
 color: #111111;
}
.orderDisplay TD {
 padding: 10px;
}

TR.cancelled TD, SPAN.spCancelled, TR.cancelledRefunded {
 color: #cc0000;
 text-decoration: line-through;
}

.small {
 font-weight: normal;
 font-size: 11px;
}

.checkbox {
 transform: scale(2);
}

TABLE.list {
 margin: auto;
 width: auto;
}
TABLE.list TH,
TABLE.list TD {
 padding: 5px 10px;
}
TABLE.list TH {
 vertical-align: top;
}

.available {
 text-align: center;
 font-size: 2em;
}

.flag {
 padding: 5px 7px;
 border-radius: 2px;
 background-color: #2a00ff;
}

DIV.popup {
 display: none;
 border: 10px solid #111111;
 border-radius: 2px;
 text-align: center;
 position: fixed;
 top: 50%;
 left: 50%;
 height: 300px;
 width: 500px;
 margin-top: -150px;
 margin-left: -250px;
 background: rgba(0, 0, 0, 0.9);
 box-shadow: 0 0 50px 50px #111111;
}
DIV.popup A.close {
 text-decoration: none;
 color: #111111;
 position: absolute;
 top: -17px;
 right: -17px;
}
#adminPopupIframe {
 border: 0;
 width: 100%;
 height: 100%;
}

LABEL {
 padding-left: 7px;
}

.sorting {
 border: 1px solid #ffd77e;
}
.active {
 background: transparent !important;
 color: #ffd77e !important;
}