/* *********************************************************
// TopTill Andriod ePoS v1.1.1
// Copyright (c)2021-2025 TopTill Limited, Wrangle, England.
// ********************************************************/

/****************************/
/*  Setup                   */
/****************************/

/*** Root variables ***/
:root {
    --colour-page-header: lightsalmon;
    --colour-page-footer: lightsalmon;
    --colour-page-body: white;
    --colour-fragment-header: lightsalmon;
    --colour-fragment-footer: lightsalmon;
    --colour-fragment-body: white;
    --colour-fragment2-header: peachpuff;
    --colour-fragment2-footer: peachpuff;
    --colour-fragment2-body: white;
    --colour-fragment3-header: silver;
    --colour-fragment3-footer: silver;
    --colour-fragment3-body: white;
    --colour-enquiry-header: powderblue;
    --colour-enquiry-footer: powderblue;
    --colour-enquiry-body: white;
    --colour-message-header: lightsteelblue;
    --colour-message-footer: lightsteelblue;
    --colour-message-body: aliceblue;
    --colour-alert-header: red;
    --colour-alert-footer: red;
    --colour-alert-body: white;
    --colour-disabled: lightyellow;
}

/*** Stop pull-to-refresh hack on Android ***/
.body, .wrapper {
    /* Break the flow */
    top: 0px;
    /* Give them all the available space */
    width: 100%;
    height: 100%;
    /* Remove the margins if any */
    margin: 0;
    /* Allow them to scroll down the document */
    overflow-y: hidden;
    /*Prevent horizontal pull-back*/
    overflow-x: hidden;
}

.body {
    /* Sending body at the bottom of the stack */
    z-index: 1;
    position: fixed;
    background-color: white;
    height: 100%;
    min-height: 100%;
}

.wrapper {
    /* Making the wrapper stack above the body */
    z-index: 2;
    position: absolute;
    overflow-x: hidden;
    height: 100%;
    min-height: 100%;
}

*:not(input):not(textarea) {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

.container {
    background-color: white;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
}

.container-fluid {
    background-color: white;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background-color: var(--colour-grey);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb {
    /*background-color: #d4aa70;
    border-radius: 100px;
    background-image: linear-gradient(180deg, red 0%, lightsalmon 99%);
    box-shadow: inset 2px 2px 5px 0 #d4aa70;*/
    border-radius: 100px;
    border: 8px solid rgba(0, 0, 0, 0.4);
}


* {
    box-sizing: border-box;
}

html {
    background-color: white;
    height: 100%;
}



.tl01row {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: scroll;
}

.tl01col {
    width: 480px;
}

.tl01form {
    width: 480px;
}

.tl01mid {
    width: 480px;
}

.dot {
    height: 20vh;
    width: 20vh;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}


/****************************/
/*  General                 */
/****************************/
.dropdown-menu {
    background-color: floralwhite;
}

.dropclose {
    font-size: 1.6rem;
    opacity: 0.5;
    height: 26px;   
    margin-top: -16px !important;
}

.cpointer {
    cursor: pointer;
}

.modalz1 {
    z-index: 1081 !important;
}

.modalz2 {
    z-index: 1082 !important;
}

.modalz3 {
    z-index: 1083 !important;
}

.modalz4 {
    z-index: 1084 !important;
}

.modalz5 {
    z-index: 1085 !important;
}

.modalz6 {
    z-index: 1086 !important;
}

.modalz7 {
    z-index: 1087 !important;
}

.modalz8 {
    z-index: 1088 !important;
}

.modalztop {
    z-index: 1089 !important;
}


.noheadsep {
    border-bottom: 0 none;
}

.nofootsep {
    border-top: 0 none;
}

.moreleft {
    text-align: left !important;
    position: relative;
    margin-left: -16px;
    margin-right: 16px;
}

.moreright {
    text-align: left !important;
    position: relative;
    margin-left: 12px;
    margin-right: -12px;
}


.redhalo {
    box-shadow: 0px 0px 3px 3px red;
    border-radius: 8px;
}

.greenhalo {
    box-shadow: 0px 0px 3px 3px green;
}

.bluehalo {
    box-shadow: 0px 0px 3px 3px blue;
}

.surround1 {
    border: 1px solid #fed;
    box-shadow: 1px 1px 3px #432;
    border-radius: 8px;
}

.invsurround1 {
    box-shadow: 1px 1px 3px #fed;
}

.divhr {
    height: 2px;
    width: 100vw;
    padding: 0px;
    margin: 0px;
}

.divspace1 {
    height: 1vh;
}

.divspace2 {
    height: 2vh;
}

.divspace3  {
    height: 3vh;
}

.divspace5 {
    height: 5vh;
}

.divspace3p {
    height: 3%;
}

.divspace5p {
    height: 5%;
}

.divspace5x {
    height: 5px;
}

.divspace2x {
    height: 2px;
}

.bof {
    background-color: green;
}

.eof {
    background-color: red;
}

.mof {
    background-color: lightslategray;
}

.width-0 {
    width: 34px;
}

.width-1 {
    width: 86px;
}

.width-2 {
    width: 68px;
}

.width-3 {
    width: 180px;
}

input:focus,
button:focus {
    outline: none;
}

input:disabled {
    background-color: aliceblue;
}

.showactive:active {
    color: whitesmoke;
    background: linear-gradient(to bottom, silver, slategray);
}

.button1 {
    height: 90%;
    width: 90%;
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}

.touched1 {
    color: whitesmoke;
    font-style: italic;
    border: 1px solid black;
    background: linear-gradient(to bottom, silver, slategray);
}

.touched11 {
    color: whitesmoke;
    background: linear-gradient(to bottom, silver, slategray);
}

.btnstd {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}
    .btnstd:hover {
        background-color: lemonchiffon;
    }

.btnselect {
    background-color: palegreen;
    border: 1px solid #f58322;
}
    .btnselect:hover {
        background-color: palegreen;
    }

.btnback {
    background-color: lightgray;
    border: 1px solid #f58322;
}
    .btnback:hover {
        background-color: lightgray;
    }

.btnreset {
    background-color: lightpink;
    border: 1px solid #f58322;
}
.btnreset:hover {
    background-color: lightpink;
}

.btnadd {
    background-color: lightpink;
    border: 1px solid #f58322;
}
.btnadd:hover {
    background-color: lightpink;
}

.btnedit {
    background-color: palegreen;
    border: 1px solid #f58322;
}
    .btnedit:hover {
        background-color: palegreen;
    }

.btnsave {
    background-color: palegreen;
    border: 1px solid #f58322;
}
.btnsave:hover {
    background-color: palegreen;
}

.btnselect {
    background-color: palegreen;
    border: 1px solid #f58322;
}
    .btnselect:hover {
        background-color: palegreen;
    }

.btnedit2 {
    background-color: khaki;
    border: 1px solid #f58322;
}
    .btnedit2:hover {
        background-color: khaki;
    }

.button-info {
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
    font-weight: bold;
    font-style: italic;
    border-radius: 50px;
    border: 1px solid #f58322;
}

    /*.button-info:active {
        border: 1px solid #f58322;
        box-shadow: 1px 1px 3px #f58322;
    }*/

.button-info2 {
    height: 100%;
    width: 100%;
    background-color: lemonchiffon;
    color: black;
    /*font-size: 1.2rem;*/
    font-weight: bold;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    border-radius: 50px;
    /*border: 1px solid #e4e4e4;
    box-shadow: 1px 1px 3px #f58322;*/
}

    /*.button-info2:active {
        border: 1px solid #f58322;
        box-shadow: 1px 1px 3px #f58322;
    }*/

.button-delete {
    height: 100%;
    width: 100%;
    background-color: lemonchiffon;
    color: black;
    font-style: normal;
    font-weight: 700;
    font-family: "Times New Roman", Times, serif;
    border-radius: 50%;
    /*box-shadow: 1px 1px 3px #432;*/
    border: 1px solid #f58322;
}

    .button-delete:active {
        border: 2px solid #f58322;
        box-shadow: 1px 1px 3px #f58322;
    }


.btnsize2x {
    height: 26px;
    font-size: 0.9rem;
}

.btnsize3x {
    height: 36px;
    font-size: 0.9rem;
}

.btnsize4x {
    height: 46px;
    font-size: 1.0rem;
}

.height5px {
    height: 56px;
    font-size: 1.0rem;
}

.btnsize5 {
    height: 5vh;
    font-size: 0.9rem;
}

.btnsize6 {
    height: 6vh;
}

.btnsize7 {
    height: 7vh;
}

.btnnoshow {
    background-color: transparent;
    border-color: transparent;
}

.btnclose {
    opacity: 0.6;
}

.touched {
    background-color: darkorange;
    font-style: italic;
    color: maroon;
}

.touched2 {
    background-color: peachpuff;
    font-style: italic;
    color: maroon;
}

.touched3 {
    font-style: italic;
    border: 0px;
    background: linear-gradient(to bottom, silver, slategray);
}

.nodisplay {
    display: none;
}

.txtgreen {
    color: green;
}

.txtmaroon {
    color: maroon;
}

.txtred {
    color: red;
}



/**********************************/
/*  (m01) Message modal           */
/**********************************/
.modal.modalmessage {
    max-height: 96vh;
}

    .modal.modalmessage .modal-dialog {
        max-width: 460px;
    }

    .modal.modalmessage .modal-content {
        max-height: 100vh;
        box-shadow: 0px 0px 3px 3px brown;
        border-radius: 8px;
    }

    .modal.modalmessage .modal-header {
        font-weight: bold;
        font-size: 1.2em;
        background-color: var(--colour-message-header);
    }

    .modal.modalmessage .modal-body {
        min-height: 30vh;
        background-color: var(--colour-message-body);
    }

    .modal.modalmessage .modal-footer {
        background-color: var(--colour-message-footer);
    }


.m01headerRow {
    background-color: var(--colour-message-header);
}

.m01bodyRow {
    background-color: var(--colour-message-body);
}

.m01footerRow {
    background-color: var(--colour-message-footer);
}

.m01btn {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}

/**********************************/
/*  (m02) Alert message modal     */
/**********************************/
.modal-alert {
    max-height: 96vh;
}

    .modal-alert .modal-dialog {
        max-width: 460px;
    }

    .modal-alert .modal-content {
        max-height: 100vh;
        box-shadow: 0px 0px 3px 3px black;
        border-radius: 8px;
    }

    .modal-alert .modal-header {
        background-color: var(--colour-alert-header);
    }

    .modal-alert .modal-body {
        background-color: var(--colour-alert-body);
        min-height: 30vh;
    }

    .modal-alert .modal-footer {
        background-color: var(--colour-alert-footer);
    }

.m02headerrow {
    color: white;
    background-color: var(--colour-alert-header);
    font-weight: 600;
}

.m02bodyrow {
    background-color: var(--colour-alert-body);
}

.m02footerrow {
    background-color: var(--colour-alert-footer);
}

.m02btn {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}

/****************************/
/*  Modifier modal          */
/****************************/
.modal.modifier {
    max-height: 100vh;
}

    .modal.modifier .modal-dialog {
        max-width: 460px;
    }

    .modal.modifier .modal-content {
        max-height: 96vh;
        background-color: lightblue;
    }

    .modal.modifier .modal-header {
        font-weight: bold;
        font-size: 1.1em;
        background-color: lightblue;
        padding: 2px 0px 6px 0px;
        margin: 2px 0px 6px 0px;
    }

    .modal.modifier .modal-body {
        padding: 0px;
        margin: 0px;
    }

    .modal.modifier .modal-footer {
        max-height: 50vh;
        background-color: lightblue;
        padding: 0px;
        margin: 6px 0px 6px 0px;
    }


/****************************/
/*  Fragment modal          */
/****************************/
.modal.fragmentmodal {
    max-height: 100vh;
}

    .modal.fragmentmodal .modal-dialog {
        max-width: 700px;
    }

    .modal.fragmentmodal .modal-content {
        min-height: 40vh;
        max-height: 96vh;
    }

    .modal.fragmentmodal .modal-header {
        font-weight: bold;
        font-size: 1.2em;
        background-color: var(--colour-fragment-header);
    }

    .modal.fragmentmodal .modal-body {
        background-color: var(--colour-fragment-body);
    }

    .modal.fragmentmodal .modal-footer {
        background-color: var(--colour-fragment-footer);
    }


/*********************************/
/*  Fragment modal (body only)   */
/*********************************/
.modal.fragmentmodalbdy {
    max-height: 98vh;
    overflow-y: hidden;
}

    .modal.fragmentmodalbdy .modal-dialog {
        max-width: 700px;
    }

    .modal.fragmentmodalbdy .modal-content {
        min-height: 40vh;
        max-height: 96vh;
        padding: 0px;
        margin: 0px;
        box-shadow: 0px 0px 3px 3px #f58221;
        border-radius: 8px;
    }

    .modal.fragmentmodalbdy .modal-header {
    }

    .modal.fragmentmodalbdy .modal-body {
        background-color: var(--colour-fragment-body);
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .modal.fragmentmodalbdy .modal-footer {
    }


/**********************************/
/*  Fragment modal (body only) 2  */
/**********************************/
.modal.fragmentmodalbdy2 {
    max-height: 100vh;
    overflow-y: hidden;
}

    .modal.fragmentmodalbdy2 .modal-dialog {
        max-width: 700px;
    }

    .modal.fragmentmodalbdy2 .modal-content {
        background-color: var(--colour-fragment2-body);
        min-height: 40vh;
        max-height: 96vh;
        padding: 0px;
        margin: 0px;
        box-shadow: 0px 0px 3px 3px #f58221;
        border-radius: 8px;
    }

    .modal.fragmentmodalbdy2 .modal-header {
    }

    .modal.fragmentmodalbdy2 .modal-body {
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .modal.fragmentmodalbdy2 .modal-footer {
    }


/**********************************/
/*  Fragment modal (body only) 3  */
/**********************************/
.modal.fragmentmodalbdy3 {
    max-height: 100vh;
    overflow-y: hidden;
}

    .modal.fragmentmodalbdy3 .modal-dialog {
        max-width: 700px;
    }

    .modal.fragmentmodalbdy3 .modal-content {
        background-color: var(--colour-fragment2-body);
        min-height: 40vh;
        max-height: 96vh;
        padding: 0px;
        margin: 0px;
        box-shadow: 0px 0px 3px 3px #f58221;
        border-radius: 8px;
    }

    .modal.fragmentmodalbdy3 .modal-header {
    }

    .modal.fragmentmodalbdy3 .modal-body {
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .modal.fragmentmodalbdy3 .modal-footer {
    }


/****************************/
/*  Side Panel modal        */
/****************************/
.modal.leftmenu {
    position: fixed;
    left: -320px;
    top: 0;
    width: 320px;
    height: 100vh;
}

    .modal.leftmenu .modal-dialog {
        margin: 0px;
        padding: 0px;
        width: 320px;
    }

    .modal.leftmenu .modal-content {
    }

    .modal.leftmenu .modal-body {
        padding: 0px;
    }

    .modal.leftmenu .sidemodalheader {
        height: 9vh;
        font-size: 1.2em;
        font-weight: bold;
        background-color: var(--colour-header-default1);
        padding-top: 10px;
    }

    .modal.leftmenu .sidemodalheaderclose {
        margin-left: -14px;
    }

    .modal.leftmenu .bodybody {
        height: 90.7vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

img.chevronbackmodal {
    width: auto;
    height: 4vh;
}

/*********************************/
/*  Enquiry modal (body only)   */
/*********************************/
.modal.enquirymodalbdy {
    max-height: 100vh;
    overflow-y: hidden;
}

    .modal.enquirymodalbdy .modal-dialog {
        max-width: 700px;
    }

    .modal.enquirymodalbdy .modal-content {
        min-height: 40vh;
        max-height: 96vh;
        padding: 0px;
        margin: 0px;
        box-shadow: 0px 0px 3px 3px #f58221;
        border-radius: 8px;
    }

    .modal.enquirymodalbdy .modal-header {
    }

    .modal.enquirymodalbdy .modal-body {
        background-color: var(--colour-enquiry-body);
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .modal.enquirymodalbdy .modal-footer {
    }

/******************************/
/*  Busy modal (body only)    */
/******************************/
.modal.busymodalbdy {
    max-height: 100vh;
    overflow-y: hidden;
}

    .modal.busymodalbdy .modal-dialog {
        max-width: 700px;
    }

    .modal.busymodalbdy .modal-content {
        padding: 0px;
        margin: 0px;
        border:hidden;
        background-color: transparent !important;
    }

    .modal.busymodalbdy .modal-header {
    }

    .modal.busymodalbdy .modal-body {
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .modal.busymodalbdy .modal-backdrop {
    }

    .modal.busymodalbdy .modal-footer {
    }

    .busyspin {
        height: 100px;
        width: 100px;
    }



/****************************/
/*  Content                 */
/****************************/

.oninput {
    color: black;
    opacity: 1;
}

    .oninput::placeholder {
        color: navy;
        opacity: 0.68;
    }

.noinput {
    background-color: var(--colour-disabled);
}

.heighth2 {
    height: 58px;
}

.heighth3 {
    height: 48px;
}

.widthp0 {
    width: 36px;
}

.widthp1 {
    width: 120px;
}

.widthp2 {
    width: 64px;
}

.widthg0 {
    max-width: 102px;
}

.widthg1 {
    max-width: 260px;
}

.widthg2 {
    max-width: 400px;
}

.widthg3 {
    max-width: 340px;
}

.widthg4 {
    max-width: 220px;
}

.widthi0 {
    padding: 6px;
}

.widthi1 {
    max-width: 106px;
    min-width: 106px;
}

.widthi2 {
    max-width: 56px;
    min-width: 56px;
}

.widthr1 {
    width: 36px;
}

.widthgm {
    width: 100%;
}

.section {
    font-weight: 500;
    color: black;
}

.bolder {
    font-weight: 500;
}


.f01footer {
    height: 8.5vh;
    padding-top: 8px;
    background-color: var(--colour-page-footer);
}

.f01footerstd {
    height: 9vh;
    font-size: 0.8rem;
    line-height: 1.2;
    background-color: var(--colour-page-footer);
}


.a02headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.a02title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.a02aboutrow {
    min-height: 40vh;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.a02footer {
    height: 8.5vh;
    background-color: var(--colour-fragment-footer);
}

.a02homeicon {
    width: auto;
    height: 4vh;
}


.a03headerrow {
    height: 68px;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.a03homeicon {
    width: auto;
    height: 34px;
}

.a03title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.a03listrow {
    min-height: 40vh;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.a03aboutrow {
    min-height: 40vh;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.a03notice {
    color: maroon;
    font-style: italic;
    font-size: 0.8rem;
}

.a03btn {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}

.a03footer {
    height: 68px;
    background-color: var(--colour-fragment-footer);
}




.d01header {
    height: 9vh;
    background-color: var(--colour-page-header);
    line-height: 120%;
    font-weight: bold;
    font-size: 1.4rem;
}

.d01homeicon {
    width: auto;
    height: 6.6vh;
}

.d01title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.d01heading {
    font-weight: bold;
    font-size: 1.2em;
}

.d01table {
    font-weight: bold;
    font-size: 1.2em;
}

.d01body {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

.d01footer {
    height: 9vh;
    background-color: var(--colour-page-footer);
}

.d02header {
    height: 9vh;
    background-color: var(--colour-page-header);
    line-height: 120%;
    font-weight: bold;
    font-size: 1.4rem;
}

.d02homeicon {
    width: auto;
    height: 6.6vh;
}

.d02title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.d02heading {
    font-weight: bold;
    font-size: 1.2em;
}

.d02table {
    font-weight: bold;
    font-size: 1.2em;
}

.d02body {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}
.d02mess {

}

.d02but01 {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}

.d02footer {
    height: 9vh;
    background-color: var(--colour-page-footer);
}




.r01header {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.r01headertext {
    font-weight: bold;
    font-size: 1.2rem;
}

.r01title{
    font-weight: bold;
    font-size: 1.0rem;
}

.r01homeicon {
    width: auto;
    height: 6.6vh;
}

.r01menugroup {
    color: maroon;
    font-weight: 600;
}

.r01menuicon {
    width: auto;
    height: 4.8vh;
}

.r01body {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

.r01grpbtn {
    height: auto;
    background-color: rgb(248,249,250);
    border: 1px solid rgb(222,222,222);
    border-radius: 8px;
    padding-top: 16px;
}

.r01footer {
    height: 9vh;
    font-size: 0.8rem;
    line-height: 1.2;
    background-color: var(--colour-page-footer);
}

.u01headerrow {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.u01homeicon {
    width: auto;
    height: 6.6vh;
}

.u01title {
    color: red;
}

.u01bodyrow {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

#u01PinCode:disabled {
    background-color: ghostwhite;
}

.u01row {
    height: 6vh;
}

.u01numby {
    font-weight: bold;
}



.u02headerrow {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.u02homeicon {
    width: auto;
    height: 34px;
    padding-top: 0px;
}

.u02menugroup {
    color: maroon;
    font-weight: 600;
}

.u02heading {
    font-weight: bold;
    font-size: 1.2em;
}

.u02table {
    font-weight: bold;
    font-size: 1.2em;
}

.u02title {
    color: red;
}

.u02bodyrow {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

#u02PinCode:disabled {
    background-color: ghostwhite;
}

.u02row {
    height: 6vh;
}

.u02numby {
    font-weight: bold;
}

.u02hint {
    color: darkgreen;
    font-style: italic;
    font-size: 0.9rem;
}

.u02tandc {
    color: darkred;
    font-style: italic;
    font-size: 0.9rem;
}


.u03headerrow {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.u03homeicon {
    width: auto;
    height: 34px;
    padding-top: 0px;
}

.u03menugroup {
    color: maroon;
    font-weight: 600;
}

.u03heading {
    font-weight: bold;
    font-size: 1.2em;
}

.u03table {
    font-weight: bold;
    font-size: 1.2em;
}

.u03title {
    color: red;
}

.u03bodyrow {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

.u03errmess {
    font-size: 0.8em;
    color: red;
}

.u03allergies {
    font-size: 0.8em;
    color: red;
}

.u03btnstd {
    height: 48px;
}

.u03hint {
    color: darkgreen;
    font-style: italic;
    font-size: 0.9rem;
}

.u03market {
    color: darkblue;
    font-style: italic;
    font-size: 0.9rem;
}

.u03tandc {
    color: darkred;
    font-style: italic;
    font-size: 0.9rem;
}

.l01headerrow {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.l01homeicon {
    width: auto;
    height: 6.6vh;
}


.l01bodyrow {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

#l01PinCode:disabled {
    background-color: ghostwhite;
}

.l01row {
    height: 6vh;
}

.l01numby {
    font-weight: bold;
}



.c01header {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.c01body {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

.c01footer {
    height: 9vh;
    font-size: 0.8rem;
    line-height: 1.2;
    background-color: var(--colour-page-footer);
}


.c02header {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.c02homeicon {
    width: auto;
    height: 6.6vh;
}

.c02body {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

.c02footer {
    height: 9vh;
    font-size: 0.8rem;
    line-height: 1.2;
    background-color: var(--colour-page-footer);
}



.z01headerrow {
    height: 68px;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.z01homeicon {
    width: auto;
    height: 34px;
}

.z01title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.z01sep {
    height: 2px;
    background-color: darkorange;
    color: lemonchiffon;
}

.z01listrow {
    min-height: 40vh;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.z01aboutrow {
    min-height: 40vh;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.z01btn {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}

.z01footer {
    height: 68px;
    background-color: var(--colour-fragment-footer);
}



.g01headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.g01home {
    padding-left: 10px;
    width: auto;
    height: 4.2vh;
}

.g01title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.g01menu {
    padding-right: 10px;
    width: auto;
    height: 5.2vh;
}

.g01menugroup {
    color: maroon;
    font-weight: 600;
}

.g01listrow {
    /*height: 69vh;*/
    min-height: 60vh;
    max-height: 78vh;
    overflow-y: scroll;
    overflow-x: hidden;
}


.g01footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment-footer);
}




.t02headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.t02home {
    padding-left: 10px;
    width: auto;
    height: 4.2vh;
}

.t02title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.t02menu {
    padding-right: 10px;
    width: auto;
    height: 5.2vh;
}

.t02menugroup {
    color: maroon;
    font-weight: 600;
}

.t02listrow {
    /*height: 69vh;*/
    min-height: 60vh;
    max-height: 78vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.t02footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment-footer);
}


.k01Headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.k01home {
    padding-left: 10px;
    width: auto;
    height: 4.2vh;
}

.k01Title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.k01Menu {
    padding-right: 10px;
    width: auto;
    height: 5.2vh;
}

.k01menugroup {
    color: maroon;
    font-weight: 600;
}

.k01menuitem {

}

.k01Listrow {
    /*height: 69vh;*/
    min-height: 60vh;
    max-height: 78vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.k01row {
    height: 4vh;
    color: black;
}

.k01row2 {
    min-height: 8vh;
    color: black;
}

.k01line2 {
    color: blue;
}

.k01rowSelected {
    background-color: lightblue;
}

.k01Footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment-footer);
}



.k02Headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment2-header);
    line-height: 120%;
}

.k02Home {
    padding-left: 10px;
    width: auto;
    height: 4.2vh;
}

.k02trash {
    padding-left: 0px;
    width: auto;
    height: 5.6vh;
}

.k02Title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.k02Menu {
    padding-right: 10px;
    width: auto;
    height: 5.2vh;
}

.k02Listrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.k02Footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment2-footer);
}

.k02gotop {
    color: navy;
    opacity: 0.68;
}



.k03headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment3-header);
    line-height: 120%;
}

.k03home {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.k03title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.k03menu {
    padding-right: 10px;
    width: auto;
    height: 5.2vh;
}

.k03menugroup {
    color: maroon;
    font-weight: 600;
}

.k03menuitem {
}

.k03listrow {
    /*height: 69vh;*/
    min-height: 60vh;
    max-height: 78vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.k03row {
    height: 4vh;
}

.k03row2 {
    min-height: 8vh;
    color: black;
}

.k03line2 {
    color: blue;
}

.k03rowSelected {
    background-color: lightblue;
}

.k03footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment3-footer);
}



.e01Headerrow {
    height: 9vh;
    background-color: var(--colour-enquiry-header);
    line-height: 120%;
}

.e01Home {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.e01Title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2rem;
}

.e01Menu {
    padding-right: 26px;
}

.e01Listrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    background-color: var(--colour-enquiry-body);
    overflow-y: scroll;
    overflow-x: hidden;
}

.e01Row {
    height: 5vh;
    font-weight: bold;
}

.e01rowSelected {
    background-color: lightblue;
}

.e01Footer {
    height: 9vh;
    padding-top: 0px;
    background-color: var(--colour-enquiry-footer);
}



.e01button {
    height: 5.8vh;
    font-size: 1.0rem;
    font-weight: 500;
    color: darkblue;
}


.e02headerrow {
    height: 9vh;
    background-color: var(--colour-enquiry-header);
    line-height: 120%;
}

.e02home {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.e02title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2rem;
}

.e02menu {
    padding-right: 26px;
}

.e02listrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    background-color: var(--colour-enquiry-body);
    overflow-y: scroll;
    overflow-x: hidden;
}

.e02row {
    height: 5vh;
    font-weight: bold;
}

.e02rowSelected {
    background-color: lightblue;
}

.e02footer {
    height: 9vh;
    padding-top: 0px;
    background-color: var(--colour-enquiry-footer);
}

.e02button {
    height: 5.8vh;
    font-size: 1.0rem;
    font-weight: 500;
    color: darkblue;
}


.e03headerrow {
    height: 9vh;
    background-color: var(--colour-enquiry-header);
    line-height: 120%;
}

.e03home {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.e03title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2rem;
}

.e03menu {
    padding-right: 26px;
}

.e03listrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    background-color: var(--colour-enquiry-body);
    overflow-y: scroll;
    overflow-x: hidden;
}

.e03row {
    height: 5vh;
    font-weight: bold;
}

.e03rowSelected {
    background-color: lightblue;
}

.e03footer {
    height: 9vh;
    padding-top: 0px;
    background-color: var(--colour-enquiry-footer);
}

.e03button {
    height: 5.8vh;
    font-size: 1.0rem;
    font-weight: 500;
    color: darkblue;
}


.e04headerrow {
    height: 9vh;
    background-color: var(--colour-enquiry-header);
    line-height: 120%;
}

.e04home {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.e04title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2rem;
}

.e04menu {
    padding-right: 26px;
}

.e04listrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    background-color: var(--colour-enquiry-body);
    overflow-y: scroll;
    overflow-x: hidden;
}

.e04row {
    height: 5vh;
    font-weight: bold;
}

.e04rowSelected {
    background-color: lightblue;
}

.e04footer {
    height: 9vh;
    padding-top: 0px;
    background-color: var(--colour-enquiry-footer);
}

.e04button {
    height: 5.8vh;
    font-size: 1.0rem;
    font-weight: 500;
    color: darkblue;
}


.e05headerrow {
    height: 9vh;
    background-color: var(--colour-enquiry-header);
    line-height: 120%;
}

.e05home {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.e05title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2rem;
}

.e05menu {
    padding-right: 26px;
}

.e05listrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    background-color: var(--colour-enquiry-body);
    overflow-y: scroll;
    overflow-x: hidden;
}

.e05row {
    height: 5vh;
    font-weight: bold;
}

.e05rowSelected {
    background-color: lightblue;
}

.e05footer {
    height: 9vh;
    padding-top: 0px;
    background-color: var(--colour-enquiry-footer);
}

.e05button {
    height: 5.8vh;
    font-size: 1.0rem;
    font-weight: 500;
    color: darkblue;
}


.e06headerrow {
    height: 9vh;
    background-color: var(--colour-enquiry-header);
    line-height: 120%;
}

.e06home {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.e06title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2rem;
}

.e06menu {
    padding-right: 26px;
}

.e06listrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    background-color: var(--colour-enquiry-body);
    overflow-y: scroll;
    overflow-x: hidden;
}

.e06row {
    height: 5vh;
    font-weight: bold;
}

.e06rowSelected {
    background-color: lightblue;
}

.e06footer {
    height: 9vh;
    padding-top: 0px;
    background-color: var(--colour-enquiry-footer);
}

.e06button {
    height: 5.8vh;
    font-size: 1.0rem;
    font-weight: 500;
    color: darkblue;
}


.enqheaderrow {
    height: 9vh;
    background-color: var(--colour-enquiry-header);
    line-height: 120%;
}

.enqhome {
    padding-left: 10px;
    width: auto;
    height: 4vh;
}

.enqtitle {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2rem;
}

.enqmenu {
    padding-right: 26px;
}

.enqlistrow {
    /*height: 69vh;*/
    min-height: 40vh;
    max-height: 78vh;
    background-color: var(--colour-enquiry-body);
    overflow-y: scroll;
    overflow-x: hidden;
}

.enqrow {
    height: 5vh;
    font-weight: bold;
}

.enqrowSelected {
    background-color: lightblue;
}

.enqfooter {
    height: 9vh;
    padding-top: 0px;
    background-color: var(--colour-enquiry-footer);
}

.enqbutton {
    height: 5.8vh;
    font-size: 1.0rem;
    font-weight: 500;
    color: darkblue;
}




.v02title {
    font-weight: bold;
    font-size: 1.4rem;
}

.v01row {
    height: 6vh;
}

.v01value {
    font-weight: bold;
    font-size: 1.2rem;
}

    .v01value:disabled {
        background-color: whitesmoke;
    }


.v01numby {
    font-weight: bold;
}

.v01errmess {
    font-size: 0.8rem;
    color: red;
}


.v02row {
    height: 6vh;
}

.v02prepend {
    font-size: 1.2rem;
}

.v02value {
    font-weight: bold;
    font-size: 1.2rem;
}

    .v02value:disabled {
        background-color: whitesmoke;
    }

.v02numby {
    font-weight: bold;
}

.v02errmess {
    font-size: 1.2rem;
    font-style: italic;
    color: red;
}





.s01headerrow {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.s01homeicon {
    width: auto;
    height: 6.6vh;
}

.s01menuicon {
    width: auto;
    height: 4.4vh;
}

.s01menustatus {
    color: blue;
    font-weight: 600;
}

.s01menuoptions {
    color: maroon;
    font-weight: 600;
}

.s01title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.s01body {
    height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
}

.s01footer {
    height: 9vh;
    background-color: var(--colour-page-footer);
}




.s02headerrow {
    height: 9vh;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--colour-page-header);
}

.s02homeicon {
    width: auto;
    height: 6.6vh;
}

.s02menuicon {
    width: auto;
    height: 4.4vh;
}

.s02menustatus {
    color: blue;
    font-weight: 600;
}

.s02menuoptions {
    color: maroon;
    font-weight: 600;
}

.s02title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.0em;
}

.s02titlerow {
    height: 4.8vh;
    font-weight: bold;
    font-size: 1.0rem;
    background-color:  whitesmoke;
}

.s02body {
    height: 77.2vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colour-page-body);
    font-weight: normal;
}

.s02tablerow {
    height: 6vh;
}

.s02optionicon {
    width: auto;
    height: 16px;
}

.s02rowheader {
    height: 6vh;
}

.s02footer {
    height: 9vh;
    background-color: var(--colour-page-footer);
}

.s02refresh {
    width: auto;
    height: 3.2vh;
}


.s03headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.s03homeicon {
    width: auto;
    height: 4vh;
}

.s03title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.2em;
}

.s03aboutrow {
    min-height: 40vh;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.s03footer {
    height: 8.5vh;
    background-color: var(--colour-fragment-footer);
}


.s04headerrow {
    height: 8vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.s04homeicon {
    width: auto;
    height: 4vh;
}

.s04title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.4rem;
}

.s04listrow {
    min-height: 40vh;
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.s04footer {
    height: 8.5vh;
    background-color: var(--colour-fragment-footer);
}




.n01headerrow {
    height: 8.5vh;
    padding-top: 6px;
    background-color: var(--colour-page-header);
}

.n01Title {
    line-height: 120%;
    padding-top: 0px;
    font-weight: bold;
    font-size: 1.1rem;
}

.n01Menuicon {
    width: auto;
    height: 34px;
    padding-top: 0px;
}

.n01Trolleyicon {
    width: auto;
    height: 34px;
}

.n01printicon {
    width: auto;
    height: 80%;
}

/*.n01basketvalue {
    font-weight: bolder;
}*/

.n01basketitems {
    position: relative;
    top: +6px;
}

.n01headcolumn {
    background-color: darkorange;
    color: black;
    height: 3.5vh;
    font-weight: bold;
    font-size: 0.9rem;
}

.n01menurow {
    height: 79.5vh;
}

.n01menucolumn {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

#n01Menumenucat {
    background-color:  seashell;
}

#n01Menumenuplu {
    background-color: white;
}

.n01head1 {
    font-size: 0.9rem;
    color: darkgoldenrod;
    font-weight: bold;
}

.n01head2 {
    font-size: 0.9rem;
    color: darkgoldenrod;
    font-weight: bold;
}

.n01menumenurow {
    min-height: 58px;
    font-size: 1.0rem;
    font-weight:  normal;
    color: black;
    cursor: pointer;
    line-height: 120%;
    padding-left: 5px;
}

.n01menuitemplurow {
    min-height: 54px;
    cursor: pointer;
    line-height: 100%;
    padding-left: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.n01menuitemaltrow {
    min-height: 8vh;
    cursor: pointer;
}

.n01col1icon {
    width: auto;
    height: 36px;
    padding-top: 0px;
}

.n01col2icon {
    width: auto;
    height: 8vh;
    padding-top: 0px;
}

.n01pluimgimg {
    height: 88px;
    width: auto;
}

.n01pludesc {
    font-size: 1.0rem;
    font-weight: normal;
    color: black;
    line-height: 100%;
    margin-bottom: 2px;
}

.n01pluprice {
    font-size: 1.0rem;
    font-weight: normal;
    color: darkblue;
    line-height: 100%;
    padding-right: 2px;
}

.n01Plualtdesc {
    font-size: 0.86rem;
    font-weight: 400;
}

.n01Plualtprice {
    font-size: 0.9rem;
    font-weight: 400;
    color: darkblue;
}

.n01menuallergy {
    color: darkred;
    font-size: 0.7rem;
    font-style: italic;
    line-height: 100%;
}

.n01menutxt {
    color: orangered;
    font-size: 0.7rem;
    font-style: italic;
    line-height: 100%;
}

.n01menuxtxt {
    color: darkgreen;
    font-size: 0.7rem;
    font-style: italic;
    line-height: 100%;
}

.n01fcal {
    color: gray;
    font-size: 0.7rem;
    font-style: italic;
    line-height: 100%;
}

.n01veg {
    color: darkgreen;
    font-size: 0.68rem;
    font-style: italic;
    line-height: 100%;
}

.n01glf {
    color: gray;
    font-size: 0.68rem;
    font-style: italic;
    line-height: 100%;
}

.n01Extraicon {
    color: green;
    font-size: 0.8rem;
}

.n01info {
    width: 2.6vw;
    border-radius: 100%;
    line-height: 100%;
}

.n01infotxt {
    font-style: italic;
    font-size: 0.86rem;
    line-height: 100%;
}

.n01K1txttxt {

}

.n01menuhead {
}

.n01menuitemendrow {
    height: 2px;
    background-color: darkorange;
    color: lemonchiffon;
}

.n01footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-page-footer);
}


.n03headerrow {
    line-height: 120%;
    min-height: 6.8vh;
    font-size: 1.1em;
    background-color: lightblue;
}

.n03allergy {
    color: darkred;
    font-size: 0.8rem;
    font-weight: normal;
}

.n03Nofootsep {
    border-top: 0 none;
}

.n03info {
    height: 22px;
    width: 22px;
    border-radius: 50px;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    background-color: whitesmoke;
    border: 1px solid #f58322;
    margin-top: 1.4px;
    margin-left: 4px;
    line-height: 20px;
}

.n03infotxt {
    color: darkslategrey;
    font-style: italic;
    font-size: 0.66rem;
    margin-left: 1px;
}

.n03AlgImg {
    width: auto;
    height: 3vh;
}

.n03rowhead {
    font-weight: bold;
    font-style: italic;
    height: 36px;
    background-color: orange;
}

.n03modrow {
    min-height: 46px;
    background-color: whitesmoke;
    color: darkblue;
}

.n03specialrow {
    background-color: lightblue;
}

.n03specialrequest {
    overflow-y: auto;
    line-height: 1.2;
}


.b01headerrow {
    height: 8.0vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.b01Menuicon {
    width: auto;
    height: 30px;
    padding-top: 6px;
}

.b01backicon {
    width: auto;
    height: 30px;
}

.b01Trashicon {
    width: auto;
    height: 80%;
}

.b01title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.1rem;
}

.b01basketvalue {
    /*position: relative;*/
}

.b01basketitems {
    position: relative;
    top: +6px;
}

.b01waitericon {
    width: auto;
    height: 38px;
}

.b01headcolumn {
    background-color: darkorange;
    color: black;
    height: 4vh;
    font-weight: bold;
    font-size: 0.86rem;
}

.b01Headcolumncell {
    /*height: 3.5vh;*/
}

.b01basket {
    min-height: 49vh;
    max-height: 74vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.b01basketitemrow {
    min-height: 36px;
    color: black;
    line-height: 100%;
}

.b01Basketinfo {
    
}

.b01basketextra {
    color: teal;
    padding-left: 10px;
}

.b01basketextrax {
    color: darkgreen;
}

.b01menuallergy {
    color: darkred;
    font-size: 0.7rem;
    font-style: italic;
}

.b01basketdelete {
    /*line-height: 120%;*/
}

.b01Basketcrossicon {
    width: auto;
    height: 3vh;
}

.b01Menuitemrowseperator {
    max-height: 3vh;
}

.b01Btnicon {
    height: 2vh;
    width: auto;
    position: relative;
    top: -1px;
}

.b01delbtn {
    width: 8px;
    height: auto;
    border-radius: 50%;
}

.b01deltxt {
    color: red;
    padding-top: 0px;
}

.b01pref {
    color: teal;
}

.b01spinst {
    color:  saddlebrown;
    font-size: 0.9rem;
    font-weight: normal;
}

.b01spreqw {
    color: saddlebrown;
    font-size: 0.9rem;
    font-weight: normal;
}

.b01flags {
    color: green;
    font-size: 0.6rem;
    font-weight: normal;
    padding-top: 0px;
}

.b01veg {
    color: darkgreen;
    font-size: 0.68rem;
    font-style: italic;
    line-height: 100%;
}

.b01glf {
    color: gray;
    font-size: 0.68rem;
    font-style: italic;
    line-height: 100%;
}

.b01delete {
    height: 20px;
    border-radius: 50%;
    font-size: 1.0rem;
    font-weight: 500;
    color: red;
    border: 1px solid #f58322;
}

.b01footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment-footer);
}


.b02Headerrow {
    height: 8.5vh;
    background-color: var(--colour-fragment2-header);
    font-size: 1.2rem;
    font-weight: bold;
}

.b02Heading {
    font-size: 1.6rem;
    font-weight: bold;
}

.b02body {
    min-height: 40vh;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.b02emailgroup {
    height: 40px;
}

.b02EmailPrepend {
    color: darkslategrey;
    font-size: 1.0rem;
    font-weight: bold;

    background-color: whitesmoke;
    padding-top: 6px;
}

.b02emailadr {
    font-size: 1.0rem;

    padding-top: 6px;
    background-color: white !important;
}

.b02errmess {
    font-size: 0.8em;
    color: red;
}

.b02qbtn {
    height: 36px;
}

.b02footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment2-footer);
}


.b03headerrow {
    height: 8.0vh;
    background-color: var(--colour-fragment-header);
    line-height: 120%;
}

.b03menuicon {
    width: auto;
    height: 20px;
}

.b03basketvalue {
    /*position: relative;*/
}

.b03waitericon {
    width: auto;
    height: 38px;
}

.b03backicon {
    width: auto;
    height: 30px;
}

.b03title {
    line-height: 120%;
    font-weight: bold;
    font-size: 1.1rem;
}

.b03basket {
    min-height: 49vh;
    max-height: 78vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.b03postype {
    font-size: 1.1rem;
    font-weight: bold;
}

.b03viewrow {
    color: black;
}

.b03basketextra {
    color: teal;
    
}

.b03basketextrax {
    padding-left: 10px;
}

.b03totals {
    font-weight: bold;
    color: darkgreen;
}

.b03totalst {
    font-weight: bold;
    color: darkblue;
}

.b03hint {
    font-size: 0.8em;
    font-style: italic;
    color: red;
}

.b03btn {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}

.b03footer {
    height: 8.5vh;
    padding-top: 0px;
    background-color: var(--colour-fragment-footer);
}





.n04headerrow {
    height: 8.5vh;
    background-color: lightblue;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 110%;
}

.n04desc {    
}

.n04price {
}

.n04bodyrow {
    min-height: 50vh;
    max-height: 74vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.n04rowrow {
    font-size: 1.0rem;
    font-weight: normal;
}

.n04pluimgimg {
    height: 220px;
    width: auto;
}

.n04alts {
    font-weight: bold;
}

.n04byo {
    font-style: italic;
}

.n04suited {
    font-size: 1.0rem;
    font-weight: normal;
    color: darkblue;
}

.n04alergy {
    font-size: 1.0rem;
    font-weight: normal;
    font-style:italic;
    color: darkred;
}

.n04info {
    font-size: 1.0rem;
    font-weight: normal;
    color: orangered;
}

.n04xinfo {
    font-size: 1.0rem;
    font-weight: normal;
    color: darkgreen;
}

.n04kcal {
    font-size: 1.0rem;
    font-weight: normal;
    color: darkslategray;
    font-style: italic;
}

.n04footerrow {
    height: 9.5vh;
    background-color: lightblue;
    overflow-x: hidden;
}

.n04btn {
    background-color: lemonchiffon;
    border: 2px solid lightcoral;
    border-radius: 10px;
}