/*** Root variables ***/
:root {
    --colour-back-main: white;
    --colour-header-main: white;
    --colour-footer-main: white;
    --colour-footer-button: #e4e4e4;
    --colour-scroll-track: #e4e4e4;
    --colour-allergy-text: black;
    --colour-header-modal: #e4e4e4;
    --colour-footer-modal: #e4e4e4;
    --colour-header-fragment: #e4e4e4;
    --colour-footer-fragment: #e4e4e4;
    --colour-header-alert: #e4e4e4;
    --colour-footer-alert: #e4e4e4;
    --colour-header-alert-text: black;
    --colour-button1-text: black;
    --colour-button1-back: white;
    --colour-button1-back-active: #81BD27;
    --colour-button_info-back: black;
    --colour-button_info-text: white;
    --colour-white: #FFFFFF;
    --colour-grey: #e4e4e4;
    --colour-vmcorange: #f58221;
    --colour-black: #000000;
}

/*** Stop pull-to-refresh hack on Android ***/
.body, .wrapper {
    /* Break the flow */
    position: absolute;
    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 {
    /* Send body to the bottom of the stack */
    z-index: 1;
}

.wrapper {
    /* Making the wrapper stack above the body */
    z-index: 2;
    overflow-x: hidden;
}
/***********************************************/


.container {
    background-color: var(--colour-back-main);
    max-width: 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: 4px solid rgba(0, 0, 0, 0.2);
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Houschka Pro';
    src: url('../fonts/houschkapro-medium-webfont.eot');
    src: url('../fonts/houschkapro-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/houschkapro-medium-webfont.woff') format('woff'), url('../fonts/houschkapro-medium-webfont.woff2') format('woff2'), url('../fonts/houschkapro-medium-webfont.ttf') format('truetype'), url('../fonts/houschkapro-medium-webfont.svg#houschka_promedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    background-color: var(--colour-grey);
    height: 100%;
}

body {
    position: fixed;
    height: 100%;
    background-color: var(--colour-back-main);
}

.cpointer {
    cursor: pointer;
}

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

.headerrow {
    height: 6.5vh;
    padding-top: 0px;
    background-color: var(--colour-header-main);
}

.headerrowtext {
    padding-top: 2px;
    font-weight: bold;
    font-size: 1.2em;
}

.bodyrow {
    height: 87vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.bodytitlerow {
    height: 8vh;
    padding-top: 8px;
}

.bodybodyrow {
    height: 79vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.footerrow {
    height: 6.5vh;
    /*padding-top: 8px;*/
    background-color: var(--colour-footer-main);
}

.footerrowbtn {
    height: 11vh;
    padding-top: 0px;
    background-color: var(--colour-grey);
}

.footerrowtext {
    line-height: 120%;
}

.homeicon {
    width: auto;
    height: 6vh;
    padding-top: 0px;
}

.fontsize06 {
    font-size: 0.6em;
}

.fontsize06i {
    font-size: 0.6em;
    font-style: italic;
}

.fontsize08 {
    font-size: 0.8em;
}

.fontsize08i {
    font-size: 0.8em;
    font-style: italic;
}

.fontsize11 {
    font-size: 1.1em;
}

.fontsize12 {
    font-size: 1.2em;
}

.lineht12 {
    line-height: 120%;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.red_back {
    background-color: red;
}

.yellow_back {
    background-color: yellow;
}
.green_back {
    background-color: green;
}
.gray_back {
    background-color: grey;
}

.red {
    color: red;
}

.green {
    color: green;
}

.darkgreen {
    color: darkgreen;
}

.darkgreenback {
    background-color: forestgreen;
}

.blue {
    color: blue;
}

.wred {
    color: red;
}

.wwhite {
    color: lightgrey;
}

.wyellow {
    color: gold;
}

.wrose {
    color: lightcoral;
}

.mistyrose {
    color: mistyrose;
}

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

.errmess {
    font-size: 1.0rem;
    color: red;
}

.invisible {
    visibility: hidden;
}

.collapse {
    visibility: collapse;
}

.water {
    color: rgba(0, 0, 0, 0.5);
}

.selected {
    background-color:white;
}

.deselected {
    background-color: white;
}

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

.surround2 {
    height: 100%;
    width: 100%;
    /*border: 1px solid #fed;*/
    box-shadow: 2px 2px 5px #432;
    border-radius: 8px;
}

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

.button1 {
    height: 100%;
    width: 100%;
    background-color: var(--colour-button1-back);
    color: var(--colour-button1-text);
    border: 3px solid #f58322;
    border-radius: 80px;
    font-weight: 700;
    /*box-shadow: 1px 1px 3px #432;*/
}
    .button1:active {
        background-color: #81BD27;
        color: white;
        /*padding-top: 6px;
        padding-left: 10px;
        border: 1px solid #f58322;*/
    }


.button2 {
    height: 100%;
    width: 100%;
    background-color: white;
    color: black;
    border: 1px solid #f58322;
    border-radius: 80px;
    /*box-shadow: 1px 1px 3px #432;*/
}

    .button2:active {
       animation: button2active 1.0s;
    }

    @keyframes button2active {
        0% {
            background-color: var(--colour-button1-back-active);
        }
        80% {
            background-color: var(--colour-button1-back-active);
        }
        100% {
            background-color: white;
        }
    }


.button_info {
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
    font-weight: bold;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    border-radius: 50px;
    /*box-shadow: 1px 1px 3px #432;*/
}

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

.button_info2 {
    height: 100%;
    width: 100%;
    background-color: ghostwhite;
    color: black;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
    border-radius: 80px;
    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: black;
    color: white;
    font-style: normal;
    font-weight: 700;
    font-family: "Times New Roman", Times, serif;
    border-radius: 50%;
    /*box-shadow: 1px 1px 3px #432;*/
}

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

.btnwarning {
    color: black;
    background-color: #f0ad4e;
}

.btninfo {
    color: white;
    background-color: #17a2b8;
}

.btnalert {    
}

.btngreen {
    color: white;
    background-color: green;
}

.btndanger {
    color: black;
    background-color: #d9534f;
}

.btnsuccess {
    color: black;
    background-color: #5cb85c;
}

.btnfaded {
    color: black;
    background-color: #f7f7f7;
}

.btnsize0 {
    height: 5vh;
}

.btnsize1 {
    height: 6vh;
}

.btnsize2 {
    height: 7vh;
}

.btntext0 {
    font-size: 0.9rem;
}

.btntext1 {
    font-size: 1.4rem;
}

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

.btntext3 {
    font-size: 1.6rem;
}

.inputsize1 {
    height: 6vh;
}

.qwertynum {
    color: black;
}

.qwertylet {
    color: black;
}

.qwertyspc {
    color: sienna;
}

.qwertyemp {
    color: darkmagenta;
}

.qwertydel {
    color: darkred
}

.qwertyclr {
    color: darkorange;
}

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

.send_op_open {
    min-height: 12vh;
}

.f01button {
    height: 8.5vh;
    font-size: 1.6em;
    font-weight: 600;
}

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

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

.v01row {
    height: 6vh;
}

.v01numby {
    font-weight: bold;
}

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

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

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

.v02row {
    height: 6vh;
}

.v02numby {
    font-weight: bold;
}

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

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

.u01row {
    height: 6vh;
}

.u01numby {
    font-weight: bold;
}


.k01headerrow {
    height: 6.5vh;
    background-color: rgb(26,104,58);
}

.k01headerrowtext {
    font-weight: bold;
    font-size: 3em;
    color: white;
}

.k01bodyrow {
    height: 93.5vh;
    font-weight: bold;
    font-size: 2.6em;
    color: white;
    overflow-y: auto;
    overflow-x: hidden;
}

.u02unlockBody {
    margin: 0px -20px;
    /*background-image: url('/images/ksk_u02_backimage_6.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
}

.u02headerrow {
    height: 6.5vh;
    background-color: gray;
    opacity: 0.0;
}

.u02headerrowtext {
    font-weight: bold;
    font-size: 3em;
    color: white;
}

.u02bodyrow {
    height: 93.5vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.u02button {
    height: 10vh;
    font-size: 3em;
    background-color: white;
    color: black;
}


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

.l01headerrow {
    height: 8vh;
    background-color: #e4e4e4;
}

.l01headerrowtext {
    font-weight: bold;
    font-size: 2em;
}

.l01bodyrow {
    overflow-y: auto;
    overflow-x: hidden;
}

.l01row {
    height: 6vh;
}

.l01numby {
    font-weight: bold;
}

.l01footerrow {
    height: 8vh;
    background-color: #e4e4e4;
}


.l02column {
    height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.l02row {
    height: 8vh;
    background-color: floralwhite;
}


.s01Title {
    height: 9vh;
}

.s01List {
    min-height: 8vh;
}

.s01ListI {
    height: 100%;
    font-weight: bold;
    font-size: 1.2em;
}

.s01ListD {
    height: 100%;
    font-size: 0.8em;
}

.s01Body {
    height: 63vh;
}

.s01Body2 {
    height: 64vh;
}

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

.s01Footer {
    height: 10vh;
}

.s01Colour1 {
    background-color: moccasin;
}

.s01btn {
    font-size: 1.25rem;
}

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

.s02Title {
    /*line-height: 140%;*/
    /*padding-top: 8px;*/
    font-weight: 700;
    font-size: 2.8em;
}

.s02Menuicon {
    width: auto;
    height: 6vh;
    padding-top: 0px;
}

.s02Trolleyicon {
    width: auto;
    height: 6vh;
}

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

/*.s02Basketvalue {
    top: +6px;
    font-weight: 700;
    font-size: 2em;
}*/

.s02Basketitems {
    /*position: relative;
    top: +6px;*/
    padding-top: 8px;
    font-weight: 700;
    font-size: 1.6em;
}

.s02Headcolumn {
    background-color: #e4e4e4;
    color: darkslateblue;
    height: 3.5vh;
    font-weight: 500;
    font-size: 1.4em;
}

.s02Menubody {
    background-color: whitesmoke;
}

.s02Menurow {
    height: 77vh;
    overflow-y: hidden;
}

.s02Menu {
    /*border-right: solid;
    border-left: solid;
    border-top: solid;
    padding-top: 2px;

    height: 100%;
    width: 100%;
    background-color: whitesmoke;
    border: 1px solid #fed;
    box-shadow: 1px 1px 3px #432;
    border-radius: 8px;*/
}

.s02Menucolumn {
    height: 100%;
    overflow-y: scroll;
 
}

#s02Menumenucat {
    background-color: #e4e4e4;
}

#s02Menumenuplu {
    background-color: whitesmoke;
}

.s02Menumenurow {
    min-height: 16vh;
    font-size: 1.4em;
    font-weight: 700;
    color: black;
    cursor: pointer;
    background-color: white;
    /*border: 1px solid #f48588;*/
    box-shadow: 1px 1px 2px #432;
    border-radius: 80%/25%;
}

.s02Menuitemplurow {
    min-height: 20vh;
    cursor: pointer;
}

.s02Menuitemrow {
    background-color: white;
    /*border: 1px solid #fdb913;*/
    box-shadow: 1px 1px 2px #432;
    border-radius: 8px;
}

.s02Menuaddrow {
    min-height: 6vh;
}

.s02info {
    height: 2vh;
    font-style: italic;
}
 
.s02Menuitemaltrow {
    min-height: 8vh;
    cursor: pointer;
}

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

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

.s02AlgImg {
    width: auto;
    height: 1.4vh;
}

.s02Pluprice {
    font-size: 1.2em;
    font-weight: 700;
    color: black;
}

.s02Pludesc {
    font-size: 1.1em;
    font-weight: 600;
    color: black;
}

.s02Menuallergy {
    color: black;
    font-size: 0.9em;
    font-style: italic;
}

.s02Menutxt {
    color: darkgreen;
    font-size: 0.9em;
    font-style: italic;
}

.s02Plualtdesc {
    font-size: 1.0em;
    font-weight: 400;
    color: black;
}

.s02Plualtprice {
    font-size: 0.9em;
    font-weight: 400;
    color: black;
}

.s02Extraicon {
    color: green;
    font-size: 0.8em;
}

.s02Menuitemendrow {
    height: 0.6vh;
    background-color: #e4e4e4;
    color: white;
}

.s02kcal {
    color: black;
    font-size: 1.0rem;
}

.s02wtxt {
    color: black;
    font-size: 1.0rem;
    font-style: italic;
}

.s02popsep {
    height: 1.0vh;
    color: black;
}

.s02blocked {
    background-color: lightgrey;
    font-style: italic;
}

.x02Header {
    min-height: 5vh;
    background-color: lightblue;
}

.x02Title {
    font-size: 2.6rem;
    font-weight: 600;
    color: black;
}

.x02Allergyrow {
    height: 3.4vh;
}

.x02Allergy {
    font-size: 1.0rem;
    font-weight: normal;
    color: black;
}

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

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

.x02Rowhead {
    font-size: 1.6rem;
    font-weight: bold;
    font-style: italic;
    min-height: 5vh;
    background-color: #e4e4e4;
}

.x02head1 {

}

.x02head2 {
    font-size: 1.4rem;
}

.x02section {
    font-size: 1.2rem;
}

.x02body {
    height: 69vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.x02footer {
    min-height: 8vh;
    background-color: lightblue;
}

.x02footerstyle {
    font-size: 1.5rem;
    font-weight: bold;
}

.x02qtybutton {
    height: 6vh;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 8px;
}

.x02cancelbutton {
    height: 6vh;
    font-size: 1.4rem;
    font-weight: bold;
}

.x02addbutton {
    height: 6vh;
    font-size: 1.4rem;
    font-weight: bold;
}

.x02kcal {
    color: black;
    font-size: 1.0rem;
    font-weight: bold;
}

.x02Rowhead {
    font-size: 1.6rem;
    font-weight: bold;
    font-style: italic;
    min-height: 5vh;
    background-color: #e4e4e4;
}

.x02xprow {
    font-size: 1.5rem;
    min-height: 5.2vh;
    background-color: white;
    color: black;
}

.x02RowImg {
    width: auto;
    height: 3.6vh;
    padding-top: 0px;
    padding-right: 2px;
}

.x02xpdescr {

}

.x02xpprice {

}

.x02qty {
    height: 6vh;
    font-size: 1.8rem;
    font-weight: bold;
}

.x02info {
    height: 3vh;
    font-size: 1.2rem;
}

.x02infoh {
    height: 3vh;
    font-size: 1.2rem;
}

.x02action {
    height: 6vh;
    font-size: 1.8rem;
    font-weight: bold;
}


.x03heading {
    font-style: italic;
    font-weight: 600;
}

.x03row {
    font-style: normal;
}

.x03rowsum {
    font-style: italic;
    font-weight: 600;
}

.x03rowsumqty {
    font-style: italic;
    font-weight: 600;
    color: darkolivegreen;
}

.m01Title {
    font-size: 2.2rem;
}

.m01Allergyrow {
    height: 3.4vh;
}

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

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

.m01kcal {
    color: black;
    font-size: 1.0rem;
    font-weight: bold;
}

.m01Nomods {
    font-size: 1.0rem;
    background-color: lightblue;
    overflow-y: hidden;
    overflow-x: hidden;
}

.m01info {
    height: 3.0vh;
    font-style: italic;
    border-radius: 50%;
    /*background-color: whitesmoke;
    font-weight: 700;
    font-size: 2rem;*/
}

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

.m01Rowhead {
    font-size: 1.8rem;
    font-weight: bold;
    font-style: italic;
    height: 5vh;
    background-color: #e4e4e4;
}

.m01RowImg {
    width: auto;
    height: 3.6vh;
    padding-top: 0px;
    padding-right: 2px;
}

.m01Modrow {
    font-size: 1.6rem;
    min-height: 6vh;
    background-color: white;
    color: black;
}

.m01Specialrequest {
    overflow-y: auto;
    max-height: 20vh;
}

.m01Nofootsep {
    border-top: 0 none;
}

.m01footer {
    min-height: 5vh;
}

.m01footerstyle {
    font-size: 1.5rem;
    font-weight: bold;
}

.m01qty {
    height: 6vh;
    font-size: 1.8rem;
    font-weight: bold;
}

.m01qtybutton {
    height: 6vh;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 8px;
}

.m01cancelbutton {
    height: 6vh;
    font-size: 1.4rem;
    font-weight: bold;
}

.m01addbutton {
    height: 6vh;
    font-size: 1.4rem;
    font-weight: bold;
}

.m01blocked {
    color: grey;
    font-style: italic;
}

.b01Headerrow {
    height: 8.0vh;
    /*padding-top: 6px;*/
    background-color: var(--colour-header-main);
    /*line-height: 120%;*/
}

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

.b01Backicon {
    width: auto;
    height: 4vh;
    /*padding-top: 10px;*/
}

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

.b01Title {
    /*line-height: 120%;
    padding-top: 6px;*/
    font-weight: 700;
    font-size: 2.8em;
}

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

.b01Basketitems {
    position: relative;
    top: +6px;
    font-weight: 700;
    font-size: 1.4em;
}

.b01Waitericon {
    width: auto;
    height: 5vh;
    /*padding-top: 2px;*/
}

.b01Headcolumn {
    background-color: #e4e4e4;
    color: darkslateblue;
    height: 4vh;
    font-weight: 500;
    font-size: 1.4rem;
}

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

.b01Menurow {
    height: 69vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.b01Basketitemrow {
    min-height: 8vh;
    color: black;
    font-weight: 500;
    font-size: 1.6rem;
}

.b01Basketextra {
    color: teal;
    font-size: 1.5rem;
}

.b01Basketextrax {
    color: darkgreen;
    font-size: 1.5rem;
}

.b01Menuallergy {
    color: black;
    font-size: 0.8em;
    font-style: italic;
}

.b01Basketdelete {
    line-height: 120%;
}

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

.b01Menuitemrowseperator {
    max-height: 3vh;
}

.b01Basketendrow {
    height: 0.6vh;
    background-color: #e4e4e4;
    color: white;
}

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

.b01delete {
    height: 4vh;
    font-size: 1.8rem;
}

.b02Viewrow {
    min-height: 6vh;
    color: black;
}


.p01Headerrow {
    height: 8.5vh;
    background-color: #e4e4e4;
    line-height: 120%;
}

.p01Bodyrow {
    height: 80.5vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.p01Menuicon {
    width: auto;
    height: 7vh;
    padding-top: 6px;
}

.p01Title {
    line-height: 120%;
    padding-top: 6px;
    font-weight: bold;
    font-size: 1.0em;
}

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

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

.p01Actionicon {
    width: auto;
    height: 7vh;
    padding-top: 6px;
}

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

.p01payrow {
    min-height: 7vh;
}

.p01paytype1 {
    font-weight: bold;
    font-size: 1.1em;
    background-color: palegreen;
}

.p01paytype2 {
    font-weight: bold;
    font-size: 1.1em;
    background-color: mistyrose;
}

.p01paytype3 {
    font-weight: bold;
    font-size: 1.1em;
    background-color: lightblue;
}

.p01payreset {
    font-size: 1.2em;
    background-color: lightgray;
}

.p01btn {
    font-size: 1.2rem;
}

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

.p03Headerrow {
    height: 8.5vh;
    background-color: #e4e4e4;
    font-size: 2rem;
    font-weight: bold;
}

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

.p03Bodyrow {
    min-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f5f8ec;
}

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

.p03Tick {
    font-size: 1.6rem;
}

.p03Paytype {
    font-size: 1.4rem;
    font-weight: bold;
    font-style: italic;
    color: darkgreen;
}

.p03Footerrow {
    height: 9.5vh;
    background-color: #e4e4e4;
    overflow-x: hidden;
}


.c01Headerrow {
    height: 8.5vh;
    background-color: #e4e4e4;
    font-size: 2rem;
    font-weight: bold;
}

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

.c01Bodyrow {
    min-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f5f8ec;
}

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

.c01Tick {
    font-size: 1.6rem;
}

.c01Footerrow {
    height: 9.5vh;
    background-color: #e4e4e4;
    overflow-x: hidden;
}


.p04Headerrow {
    height: 8.5vh;
    background-color: #e4e4e4;
    font-size: 2rem;
    font-weight: bold;
}

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

.p04Bodyrow {
    min-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

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

.p04Footerrow {
    height: 9.5vh;
    background-color: #e4e4e4;
    overflow-x: hidden;
}

.p04Order {
    font-size: 2rem;
    font-weight: bold;
}

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


.p04Emailgroup {
    height: 6vh;
}

.p04EmailPrepend {
    color: darkslategrey;
    font-size: 1.6rem;
    height: 6vh;
    background-color: whitesmoke;
    padding-top: 6px;
}

.p04EmailText {
    font-size: 1.6rem;
    height: 6vh;
    padding-top: 6px;
}

.p04EmailReset {
    color: darkgray;
    font-size: 2rem;
    height: 6vh;
    background-color: whitesmoke;
}

#p04errmess {
    font-size: 0.8em;
    color: red;
}



.p05Headerrow {
    height: 8.5vh;
    background-color: #e4e4e4;
    font-size: 2rem;
    font-weight: bold;
}

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

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

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

.p05Footerrow {
    height: 9.5vh;
    background-color: #e4e4e4;
    overflow-x: hidden;
}

.p05AlgImg {
    width: auto;
    height: 5vh;
}

.p05AlgSub {
    height: 5vh;
}

.p05nuts {
    height: 8.5vh;
}

.p05label {
    position: relative;
    /*width: 100px;
    height: 140px;*/
    width: 100%;
    height: 100%;
    text-align: center;
    border: 2px solid #000;
    border-radius: 80%/25%;
    overflow: hidden;
    line-height: 120%;
}

.p05labelnod {
    background-color: #d8d8d8;
}

.p05labelenergy {
    background-color: white;
}

.p05labellow {
    background-color: #81bd27;
}

.p05labelmedium {
    background-color: #f58221;
}

.p05labelhigh {
    background-color: #ed1654;
}

.p05labelline {
    background-color: black;
    height: 2px;
    overflow: hidden;
}

.p05labeltxline {
    height: 1.5vh;
}

.p05labelspace {
    background-color: transparent;
    height: 0.4vh;
    overflow: hidden;
}

.p05byo {
    font-style: italic;
}

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

#s04value {
    font-weight: bold;
    font-size: 1.1em;
}

#s04value:disabled {
    background-color: whitesmoke;
}

.s04row {
    height: 6vh;
}

.s04numby {
    font-weight: bold;
}

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

.nodisplay {
    display: none;
}

.todisplay {
}

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

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

.touched3 {
    background-color: dimgray;
    font-style: italic;
    color: whitesmoke;
}


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

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

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

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

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


/****************************/
/*  Message modal           */
/****************************/
.modal.modalmessage {
    max-height: 100vh;
}

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

    .modal.modalmessage .modal-header {
        font-weight: bold;
        font-size: 1.8rem;
        background-color: #e4e4e4;
    }

    .modal.modalmessage .modal-body {
        min-height: 30vh;
        font-size: 1.4rem;
    }

    .modal.modalmessage .modal-footer {
        background-color: #e4e4e4;
        font-size: 1.4rem;
    }

/****************************/
/*  Alert message modal     */
/****************************/
.modal-alert {
    max-height: 100vh;
}

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

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

    .modal-alert .modal-header {
    }

    .modal-alert .modal-body {
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;

    }

    .modal-alert .modal-footer {
    }

.a01Headerrow {
    min-height: 10vh;
    color: black;
    font-weight: bold;
    font-size: 2rem;
    background-color: #e4e4e4;
}

.a01Bodyrow {
    min-height: 60vh;
    font-size: 1.8rem;
}

.a01Footerrow {
    min-height: 10vh;
    background-color: #e4e4e4;
}


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

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

    .modal.modifier .modal-content {
        max-height: 100vh;
        background-color: lightblue;
        box-shadow: 0px 0px 3px 3px #f58221;
        border-radius: 8px;
    }

    .modal.modifier .modal-header {
        min-height: 6vh;
        font-weight: bold;
        font-size: 2rem;
        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: 764px;
    }

    .modal.fragmentmodal .modal-content {
        min-height: 60vh;
        max-height: 100vh;
    }

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

    .modal.fragmentmodal .modal-body {
    }

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

/*********************************/
/*  Fragment modal (body only)   */
/*********************************/
.modal.fragmentmodalbdy {
    max-height: 100vh;
}

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

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

    .modal.fragmentmodalbdy .modal-header {
    }

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

    .modal.fragmentmodalbdy .modal-footer {
    }


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

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

    .modal.fragmentmodalbdy2 .modal-content {
        min-height: 60vh;
        max-height: 100vh;
        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;
    }

    .modal.fragmentmodalbdy2 .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: #e4e4e4;
        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;
}


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


@media only screen and (min-width: 1201px) and (max-height: 1200px) {

    .u02button {
        height: 16vh;
    }

    .s02Col1icon {
        width: auto;
        height: 12vh;
    }

    .s02Col2icon {
        width: auto;
        height: 12vh;
    }

    .s02info {
        height: 3.8vh;
    }

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

    .p05AlgImg {
        width: auto;
        height: 8vh;
    }

    .p05AlgSub {
        height: 5vh;
    }

    .p05nuts {
        height: 12vh;
    }

    .p05labeltxline {
        height: 2vh;
    }

    .p05labelspace {
        height: 0.5vh;
    }

    .m01info {
        height: 4.0vh;
    }

    .x02xprow {
        min-height: 6.8vh;
    }

    .x02info {
        height: 4vh;
    }

    .x02infoh {
        height: 3.2vh;
    }

}

#infoModal {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 10rem; /*or 100% or anything */
}

.parent {
    display: flex;
}

.child {
    align-self: flex-end;
}