@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;
 }

 /******************************************************************************/
 /*  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);
 }

 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,
 #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);
 }

 .test-img-content {
     max-height: 100vh;
     overflow-y: auto;
     padding-bottom: 200px;
 }

 img.preview-test {
     display: flex;
     flex-direction: row;
     width: 70%;
     gap: 20px;
     object-fit: contain;
     align-items: center;
     padding-top: 20px;
 }

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

     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;
     }

     #context-help {
         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;
     }
 }

 /******************************************************************************/
 /*  OVERRIDES FOR DESKTOP                                                     */
 /******************************************************************************/
 /* if width is changed here it should be matched in closeSidebar() function */
 @media (min-width: 993px) {

     /* button:hover {
   background-color: lightgrey !important;
   color: black;
 } */
     .submit-area {
         margin-left: 210px;
     }

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

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

     progbar {
         margin-left: 200px;
     }

     #context-help,
     #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:
     }
 }

 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;
   } */
 }