@font-face {
     font-family: "DancingScript";
     src: url('http://testing.archvm.inplico.uk/fonts/Dancing_Script/DancingScript-VariableFont_wght.woff2') format('woff2');
 }

 @font-face {
     font-family: "frijole";
     src: url('http://testing.archvm.inplico.uk/fonts/Frijole/Frijole-Regular.woff2') format('woff2');
 }

 :root {
     --main-theme-color: #00001a;
     --theme-text: #80d4ff;
     --min-width-for-desktop: 993;
     --label-background: #1a1a1a;
     --label-text: grey;
     --field-text: #fff;
     --table-border: #404040;
     --background: black;
     --sidebar-background: #00001a;
     --sidebar-label-text: #80d4ff;
     --hover-background: #80d4ff;
     --hover-foreground: black;
     --button-text: #80d4ff;
     --radio-selected: #2196F3;
     --sliderImageWidth: 170;
     --sliderImageHeight: 240;
     --carouselRadius: 300;
     --animationTime: 500;
     --tileWidth: 400;
     --tileHeight: 470;
     --tileGap: 20;
 }

 /******************************************************************************/
 /*  COMMON                                                                    */
 /******************************************************************************/
 * {
     margin: 0;
     padding: 0;
 }

 html,
 body {
     touch-action: none;
     height: 100%;
     margin: 0;
     padding: 0;
     font-family: "DancingScript";
     background: var(--background);
     color: var(--label-text);
     font-variation-settings: 'wght' 900;
     position: fixed;
     overflow: hidden;
 }

 .container {
     display: grid;
     margin: 0;
     grid-template-rows: 60px 1fr 70px 40px;
     grid-template-columns: 200px 1fr;
     grid-template-areas:
         "header   header"
         "content  content"
         "progbar  progbar"
         "footer   footer";
     height: 100vh;
     width: 100vw;
 }

 content {
     grid-area: content;
     display: flex;
 }

 p {
     margin-top: 25px;
     margin-bottom: 25px;
 }

 /******************************************************************************/
 /*  HEADING                                                                   */
 /******************************************************************************/
 header {
     grid-area: header;
     display: -webkit-box;
     display: -ms-felxbox;
     display: flex;
     width: 100%;
     height: 100%;
     background-color: var(--main-theme-color);
     justify-content: space-between;
 }

 header img {
     padding: 0;
     margin-left: 8px;
     margin-right: 8px;
     height: 60px;
 }

 heading {
     display: flex;
     height: 100%;
     align-items: center;
     font-size: 32px;
     padding-left: 16px;
     color: var(--theme-text);
 }

 /******************************************************************************/
 /*  SIDEBAR                                                                   */
 /******************************************************************************/
 button[menu-button] {
     font-size: 40px;
     height: 60px;
     margin: 0;
     padding: 0;
     font-weight: normal;
     float: left;
     width: 60px;
     border: none;
     display: block;
     color: var(--button-text);
     background-color: var(--main-theme-color);
     outline: 0;
     transition: background-color calc(var(--animationTime) *1ms);
     -webkit-transition: background-color calc(var(--animationTime) *1ms);
 }

 .cart-button {
     fill: var(--button-text);
     height: 60px;
     display: flex;
     background-color: var(--main-theme-color);
     padding: 0px 8px 0px 8px;
     transition: background-color calc(var(--animationTime) *1ms);
     -webkit-transition: background-color calc(var(--animationTime) *1ms);
 }

 .cart-button:hover {
     background-color: var(--button-text);
     fill: var(--main-theme-color);
 }

 #cart {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 #qty-in-cart {
     margin: 0px 8px 0px 4px;
     display: flex;
     width: 30px;
     height: 30px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     font-family: Verdana;
     font-size: 16px;
     justify-content: center;
     align-items: center;
     color: var(--main-theme-color);
     background: var(--button-text);
 }

 nav[left] {
     position: relative;
     gap: 5px;
     display: block;
     display: list-item;
     width: 200px;
     height: 100%;
     background-color: var(--sidebar-background);
     opacity: .9;
     position: fixed !important;
     z-index: 1;
     overflow: auto;
     animation: animateleft .4s;
     border-right: 1px solid var(--theme-text);
 }

 nav.animateleft {
     animation: animateleft calc(var(--animationTime) * 1ms);
 }

 nav.animateright {
     animation: animateright calc(var(--animationTime) * 1ms);
 }

 @keyframes animateleft {
     from {
         left: -200px;
         opacity: 0;
     }

     to {
         left: 0px;
         opacity: 1;
     }
 }

 @keyframes animateright {
     from {
         left: 0px;
         opacity: 1;
     }

     to {
         left: -200px;
         opacity: 0;
     }
 }

 button {
     color: var(--button-text);
     background-color: var(--main-theme-color);
     border: none;
     margin-top: 16px;
     margin-bottom: 16px;
     font-weight: bold;
     cursor: pointer;
 }

 button[sidebar] {
     margin-top: 0px;
     margin-bottom: 0px;
     width: 100%;
     display: block;
     padding: 8px 16px;
     text-align: left !important;
     border: none;
     white-space: normal;
     float: none;
     outline: 0;
     background-color: var(--sidebar-background);
     font-weight: normal;
     font-size: 16px;
     color: var(--sidebar-label-text);
     transition: background-color calc(var(--animationTime) *1ms);
     -webkit-transition: background-color calc(var(--animationTime) *1ms);
 }

 button[sidebar]:last-of-type {
     position: absolute;
     margin-bottom: 60px;
     bottom: 60px;
 }

 /******************************************************************************/
 /*  BUTTONS                                                                   */
 /******************************************************************************/
 @media (hover: hover) {
     button:hover {
         background-color: var(--hover-background) !important;
         color: var(--hover-foreground) !important;
     }

     table:hover[is-button] {
         background-color: var(--hover-background);
         color: var(--hover-foreground) !important;
         cursor: pointer;
         opacity: 0.5;

         td.field {
             color: inherit !important;
         }

         td.sublabel {
             background: inherit;
         }
     }

     tr:hover[row-button] {
         background-color: var(--hover-background);
         color: var(--hover-foreground) !important;
         cursor: pointer;
         opacity: 0.5;

         td {
             color: inherit;
         }
     }

     radiobutton.hover:hover {
         background-color: var(--hover-background);
         color: var(--hover-foreground) !important;
     }
 }

 /******************************************************************************/
 /*  CONTEXT HELP AND OVERLAYS                                                 */
 /******************************************************************************/
 .selectedoverlay {
     display: block;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #31C21D;
     z-index: 2;
     cursor: pointer;
 }

 .overlay,
 #instruction {
     position: fixed;
     display: none;
     opacity: 0;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 2;
     cursor: pointer;
 }

 @keyframes reveal {
     from {
         opacity: 0;
         display: none;
     }

     to {
         opacity: 1;
         display: block;
     }
 }

 @keyframes hide {
     from {
         opacity: 1;
         display: block;
     }

     to {
         opacity: 0;
         display: none;
     }
 }

 .main-content {
     overflow: hidden;
     display: -webkit-box;
     display: -ms-felxbox;
     display: flex;
     width: 100%;
     height: 100%;
     /* background-image: url("../../images/logo.avif"); */
     -webkit-perspective: 1000px;
     perspective: 1000px;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     padding-left: 216px;
     padding-right: 16px;
     transition: padding-left calc(var(--animationTime) *1ms);
     overflow-y: auto;
 }

 /******************************************************************************/
 /*  PRODUCT LIST                                                              */
 /******************************************************************************/
 .test-img-content {
     max-height: calc(100vh - 200px);
     /* padding-bottom: 200px; */
 }

 .product-frame {
     display: flex;
     flex-direction: row;
 }

 /* img.preview-test {
     padding: 8px;
     display: flex;
     flex-direction: row;
     width: 100%;
     object-fit: contain;
     align-items: center;
 } */
 .single-product-frame {
     margin: 10px;
     padding: 10px;
     /* width: 85%; */
     max-height: calc(100vh - 120px);
     border: thin solid var(--theme-text);
     box-shadow: 0px 0px 14px var(--theme-text);
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 img.single-product {
     max-width: 100%;
     max-height: calc(100vh - 400px);
     display: flex;
     flex-direction: column;
     width: auto;
     object-fit: contain;
     align-items: center;
 }

 .single-product-price {
     font-family: Verdana;
     color: var(--theme-text);
     font-size: 2em;
     font-weight: bold;
     padding-left: 16px;
 }

 .single-product-overlay {
     background-color: rgba(0, 0, 0, 0.9) !important;
 }

 /******************************************************************************/
 /*  CHECKOUT                                                                  */
 /******************************************************************************/
 .defunct-checkout-frame {
     margin: 10px;
     padding: 10px;
     width: 650px;
     height: 900px;
     justify-content: space-around;
     width: 85%;
     max-height: calc(100vh - 120px);
     border: thin solid var(--theme-text);
     box-shadow: 0px 0px 14px var(--theme-text);
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 defunct-table.checkout {
     table-layout: fixed;
     letter-spacing: .25px;
     border-collapse: collapse;
     width: 100%;
     font-family: Verdana;
     color: var(--theme-text);
 }

 defunct-.checkout th {
     border-bottom: 4px solid var(--theme-text);
     border: thin solid;
     padding: 8px;
     margin-left: 8px;
     text-align: left;
 }

 defunct-.checkout td {
     border: thin solid;
 }

 defunct-td.center {
     display: flex;
     text-align: center;
     justify-content: center;
     align-items: center;
 }

 defunct-table.checkout .right {
     text-align: right;
     padding-right: 8px;
 }

 .checkout-frame {
     display: grid;
     position: relative;
     margin: 0;
     /* grid-template-rows: 30px 4px;
grid-row-auto-rows: 60px;
grid-template-rows: 30px 4px 60px 100px; */
     grid-template-rows: 40px 4px 1fr 100px;
     grid-template-columns: 40px 1fr 130px 90px 90px;
     grid-template-areas:
         "product-header    product-header      quantity-header     price-header    total-header"
         "separator         separator           separator           separator       separator"
         "product-list      product-list        product-list        product-list    product-list "
         "cart-summary      cart-summary        cart-summary        cart-summary    cart-summary";
     /* margin: 10px; */
     /* padding: 10px; */
     width: 85%;
     height: 85%;
     justify-content: space-around;
     max-height: calc(100vh - 120px);
     border: thin solid var(--theme-text);
     box-shadow: 0px 0px 14px var(--theme-text);
     /* position: absolute; */
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: Verdana;
background: black;
 }

 .checkout-frame .center {
     display: flex;
     text-align: center;
     /* border: solid thin yellow; */
     justify-content: center;
     align-items: center;
 }

 .checkout-frame .left {
     padding-left: 8px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     text-align: left;
     /* border: solid thin yellow; */
 }

 .checkout-frame .right {
     display: flex;
     width: calc(100% - 8px);
     padding-right: 8px;
     margin-left: auto;
     justify-content: flex-end;
     align-items: center;
     text-align: right;
     /* border: solid thin yellow; */
 }

 .product-list {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     /* border: thin solid red; */
 }

 .product-row {
     display: grid;
     margin: 0;
     width: 100%;
     grid-template-columns: 40px 1fr 130px 90px 90px;
     grid-template-areas:
         "remove-product    product-detail      quantity     price    total";
     /* border: solid thin yellow; */
     /* max-height: 60px; */
     border-bottom: thin solid var(--theme-text);
 }

 .checkout-separator {
     grid-area: separator;
     border-bottom: 4px solid var(--theme-text);
 }

 .product-count {
     font-family: Verdana;
     font-weight: bolder;
     font-size: 25px;
     padding-left: 4px;
     padding-right: 4px;
 }

 /******************************************************************************/
 /*  NUMBER SPINNER                                                            */
 /******************************************************************************/
 .spinner {
     /* margin: 0px 8px 0px 4px; */
     display: flex;
     width: 85px;
     height: 40px;
     justify-content: center;
     align-items: center;
 }

 .spinnerbtn {
     width: 30px;
     height: 30px;
     background: var(--theme-text);
     font-weight: bold;
     font-size: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: black;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
 }

 .increment {
     border: none;
 }

 .increment:hover {
     border: none;
 }

 .disabled {
     border: none;
     color: grey !important;
     background: lightgrey;
 }

 .spinval {
     max-width: 60px;
     width: 50px;
     height: 40px;
     font-weight: bold;
     font-size: 30px;
 }

 .spinval:disabled {
     color: black;
 }

 @media screen and (orientation:landscape) {
     /* Needs a lanscape mode setting up */
 }

 /******************************************************************************/
 /*  OVERRIDES FOR MOBILES AND TABLETS                                         */
 /******************************************************************************/
 @media (max-width: 992px) {
     nav[left] {
         display: none;
     }

     .single-product-frame {
         max-height: calc(100vh - 120px);
         display: flex;
         flex-direction: column;
         width: auto;
     }

     /* img.single-product {
max-height: calc(100vh - 200px);
display: flex;
flex-direction: column;
width: auto;
object-fit: contain;
align-items: center;
} */
     .product-frame {
         padding: 20px;
     }

     .product-frame img {
         width: 80%;
         padding: 1px;
         margin-left: auto;
         margin-right: auto;
         border-radius: 5px;
         box-shadow: 0px 0px 14px var(--theme-text);
         border: thin solid var(--theme-text);
     }

     heading {
         font-size: 24px !important;
         padding-right: 16px;
     }

     .submit-area {
         margin-left: 10px;
     }

     .submit-area-nosidebar button {
         height: 40px;
         font-size: 18px;
         margin-right: 10px;
         margin-left: 10px;
     }

     #overlay-content {
         position: absolute;
         top: 10%;
         left: 5%;
         right: 5%;
         font-family: sans-serif;
         font-size: 22px;
         color: white;
     }

     .context-help {
         position: absolute;
         top: 10%;
         left: 5%;
         right: 5%;
         font-size: 22px !important;
         color: white;
     }

     .main-content {
         padding-left: 8px !important;
         padding-right: 8px !important;
     }

     .single-product-frame {
         width: 85%;
         margin: 0px;
     }
 }

 /******************************************************************************/
 /*  OVERRIDES FOR DESKTOP                                                     */
 /******************************************************************************/
 /* if width is changed here it should be matched in closeSidebar() function */
 @media (min-width: 993px) {
     .submit-area {
         margin-left: 210px;
     }

     button[menu-button] {
         display: none !important;
     }

     nav[left] {
         display: block !important;
     }

     progbar {
         margin-left: 200px;
     }

     #overlay-content,
     #instruction {
         position: absolute;
         top: 50%;
         left: 50%;
         font-size: 30px;
         font-family: sans-serif;
         color: white;
         transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         z-index: 999:
     }

     .context-help {
         position: absolute;
         top: 50%;
         left: 50%;
         font-family: sans-serif;
         font-size: 30px !important;
         color: white;
         transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         z-index: 999:
     }

     .test-img-content {
         display: flex;
         flex-wrap: wrap;
         /* margin: 20px 0px 20px 0px; */
         justify-content: center;
         gap: calc(var(--tileGap)*1px);
     }

     .product-frame {
         display: flex;
         justify-content: center;
         align-items: center;
         box-sizing: border-box;
         opacity: 0;
         transition: opacity calc(var(--animationTime) * 1ms) ease;
         -webkit-animation: opacity calc(var(--animationTime) * 2ms) ease;
         border-radius: 5px;
         /* margin-top: 20px; */
         box-shadow: 0px 0px 14px var(--theme-text);
         border: thin solid var(--theme-text);
         padding: 8px 8px 8px 8px;
         height: calc(var(--tileHeight)*1px);
         width: calc(var(--tileWidth)*1px);
     }

     .product-frame img {
         max-width: 100%;
         max-height: 100%;
         margin: auto;
         object-fit: contain;
         /* maintains aspect ratio */
     }

     .product-frame.visible {
         opacity: 1;
     }

     img.preview-test {
         transition: reveal 2s ease;
         -webkit-animation: reveal 2s ease;
     }
 }

 footer {
     grid-area: footer;
     display: flex;
     height: 100%;
     align-items: center;
     bottom: 0;
     background-color: var(--main-theme-color);
     z-index: 1;
     padding-left: 16px;
     color: var(--theme-text);
     font-size: 25px;
     font-family: "DancingScript";
 }

 #drag-container,
 #spin-container {
     position: relative;
     display: -webkit-box;
     display: -ms-felxbox;
     display: flex;
     margin: auto;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-transform: rotateX(-10deg);
     transform: rotateX(-10deg);
 }

 #drag-container slide,
 #drag-container img[fill] {
     /* #drag-container video { */
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     margin: auto;
     align-items: center;
     line-height: 100px;
     font-size: 40px;
     text-align: center;
     -webkit-box-shadow: 0 0 8px #fff;
     box-shadow: 0 0 8px #fff;
     -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
     object-fit: cover;
     border-radius: 5px;
 }

 /* #drag-container text {
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   color: var(--theme-text);
   line-height: 100px;
   font-size: 40px;
   text-align: center;
   -webkit-box-shadow: 0 0 8px #fff;
   box-shadow: 0 0 8px #fff;
   -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
   object-fit: cover;
   border-radius: 5px;
 } */
 #drag-container slide:hover {
     /* #drag-container img:hover, */
     /* #drag-container video:hover, */
     /* #drag-container text:hover { */
     -webkit-box-shadow: 0 0 15px #fffd;
     box-shadow: 0 0 15px #fffd;
     width: 105%;
     height: 105%;
     -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
 }

 #drag-container p {
     font-family: sans-serif;
     position: absolute;
     top: 100%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%) rotateX(90deg);
     transform: translate(-50%, -50%) rotateX(90deg);
     color: #fff;
 }

 #ground {
     width: 900px;
     height: 900px;
     position: absolute;
     top: 100%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%) rotateX(90deg);
     transform: translate(-50%, -50%) rotateX(90deg);
     background: -webkit-radial-gradient(center center, farthest-side #9993, transparent);
 }

 @-webkit-keyframes spin {
     from {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }

     to {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
     }
 }

 @keyframes spin {
     from {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }

     to {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
     }
 }

 @-webkit-keyframes spinRevert {
     from {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
     }

     to {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }
 }

 @keyframes spinRevert {
     from {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
     }

     to {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }
 }

 .notification-box {
     font-family: sans-serif;
     display: none;
     width: auto;
     height: auto;
     position: absolute;
     padding: 10px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 10px;
     border: outset;
     border-width: thin;
     border-color: lightgrey;
     z-index: 999;
 }

 form.upload-form {
     padding: 10px 0px 10px 0px;
 }

 /* Submit buttons without sidebar */
 .notification-button {
     -webkit-padding-after: 100px;
     padding-bottom: 80px;
     margin-left: 10px;
     margin-right: 10px;
     bottom: 80px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }

 .notification-button[login=on] {
     padding-bottom: 0px;
     margin-left: -10px;
     margin-right: -10px;
 }

 .notification-button button {
     flex: auto;
     height: 60px;
     font-size: 25px;
     margin-right: 10px;
     margin-left: 10px;
 }

 /******************************************************************************/
 /*  DROP DOWN LIST                                                            */
 /******************************************************************************/
 .ddl {
     width: 100%;
     height: 35px;
     font-weight: bold;
     font-size: 18px;
 }

 input.field {
     width: 100%;
     height: 35px;
     font-weight: bold;
     font-size: 18px;
 }

 /* Progress bar */
 /******************************************************************************/
 /*  PROGRESS BAR                                                              */
 /******************************************************************************/
 progbar {
     grid-area: progbar;
     padding: 10px;
     display: flex;
     flex-direction: column;
     height: 100%;
     align-items: left;
 }

 .progress-bar {
     height: 6px;
     width: 100%;
     border: solid darkblue 2px;
     border-radius: 6px;
     /* margin-top: 16px;
 margin-bottom: 16px; */
 }

 .progress-bar-fill {
     height: 100%;
     width: 0%;
     background: lightblue;
     display: flex;
     align-items: center;
     border-radius: 6px;
     transition: width 0.25s;
 }

 .progress-bar-text {
     padding: 5px 0px 5px 2px;
     font-family: sans-serif;
     color: var(--themetext);
 }

 /******************************************************************************/
 /*  SVG CONTAINER                                                             */
 /******************************************************************************/
 svgbox {
     position: absolute;
     top: 50%;
     left: 50%;
     display: flex;
     /* flex-direction: column; */
     z-index: -1;
     /* margin: auto;
   padding: auto;
   position: absolute; */
     transform: translate(-50%, -50%);
 }

 svgbox text {
     /* width: 100%;
   height: 100%;
   margin: auto;
   position: absolute;
   display: flex; */
     font-family: frijole;
     /* font-weight: bolder; */
     font-size: 18px !important;
     fill: #c68c53;
 }

 @supports (-webkit-touch-callout: none) {
     /* CSS specific to iOS devices svgbox */
     /* svgbox textPath {
     letter-spacing: 2px;
   } */
 }