/* SET UP CSS VARIABLES - FOR CONVENIENCE AND TO ALLOW EASY LIGHT/DARK MODE SWITCHING*/
/* general/light mode */
:root {
    --logoprincipal:#00af59;
    --logoprincipaldarker:#269653;
    --logosecondary:#c8102e;
    --singleurlblue:#27a7b0;
    --backgroundcolor:rgba(255, 255, 255,1); /*to ensure opaque e.g. for dialog boxes*/
    --otherelementtextcolor:black;
    --normaltextcolor:#4d4d4d;
    --inputbackgcolor:#fafafa; /*#f8f3f2;*/
    --inputtextcolor:grey;
    --qrpadding:-0.5rem;
    --symbolcolor:var(--logoprincipal);
    --infoonlygray:darkgray;
    --filesymbols:darkgrey;
    --qrformborder:grey;
    --qrformfill:#ffffe0;
    --qrlogourl:url('qrc8hlight.svg');
    --qrexampleurl:url('qrexamplelight.svg');
    --face404url:url('error404light.svg');
    --rightclickhover:lightgrey;
    --popupcolor:#1a1a1a;
    --qrlistbackgcol: rgb(250,250,250);
    --linkedinicon:url('linkediniconlight.png');
    --fbicon:url('fbiconlight.png');
    --xicon:url('xiconlight.png');
    --emailicon:url('emailiconlight.png');
    --whatsappicon:url('whatsappiconlight.png');
    /* --standardboxshadow: 0 4px 11px 0 hsla(0,0%,0%,.2); */
    --standardboxshadow: 2px 2px 4px 0px lightgrey;
    --largershadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
    --medshadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 4px 12px, rgba(17, 17, 26, 0.1) 0px 4px 12px;
    --dboardinputfocus: #fbfbfb;
    --slidercolour: #ccc;
    --subtlebackground: #fafafa70;
    --copysymbolcolor:grey;
    --plansboxshadow:  0px 0px 9px 0px lightgrey;
    --usertableheadbackg: #26965314;
    --usertablebodybackg:#fdfdfd;
    --usertableborder:1px solid white;
    --usertableoverflow:hidden;
    --usertablebodyhover:#f5f5f5;
}
/*for dark mode*/
[data-theme="dark"] {
    --backgroundcolor:#1d2a35;
    --otherelementtextcolor:white;
    --normaltextcolor: azure;
    --inputbackgcolor:#fafafa;/*#e4e4e4;*/
    --inputtextcolor:black;
    --qrpadding: 0rem;
    --symbolcolor:var(--logoprincipaldarker);
    --qrformborder:darkgrey;
    --qrformfill:var(--backgroundcolor);
    --qrlogourl:url('qrc8hdark.svg');
    --qrexampleurl:url('qrexampledark.svg');
    --face404url:url('error404dark.svg');
    --rightclickhover:#606060;
    --linkedinicon:url('linkedinicondark.png');
    --fbicon:url('fbicondark.png');
    --xicon:url('xicondark.png');
    --emailicon:url('emailicondark.png');
    --whatsappicon:url('whatsappicondark.png');
    --popupcolor:var(--otherelementtextcolor);
    --standardboxshadow: none;
    --largershadow:none;
    --medshadow:none;
    --dboardinputfocus: var(--backgroundcolor);
    --slidercolour: #717171;
    --subtlebackground: #162029;
    --copysymbolcolor:var(--normaltextcolor);
    --plansboxshadow:none;
    --usertableheadbackg: var(--backgroundcolor);
    --usertablebodybackg:var(--backgroundcolor);
    --usertableborder:1px solid white;
    --usertableoverflow:auto;
    --usertablebodyhover:var(--subtlebackground);
}

/* MAIN LAYOUT STRUCTURE */
body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Red hat display', sans-serif;
    font-weight: 300;
    background-color: var(--backgroundcolor);
    visibility: hidden; /*so only shown once dark/light mode set up, otherwise quick flicker*/
    overscroll-behavior-x: none; /*prevents forward/back by horizontal scroll on Chrome laptops, happens accidentally when scrolling plans*/
    /* padding-left: calc(100vw - 100%); to prevent layout shift when hide vert scrollbar e.g. when showing dialog - see https://dev.to/rashidshamloo/preventing-the-layout-shift-caused-by-scrollbars-2flp */
}

/* new grid layout */
.gridcontainer {
    display:grid;
    justify-content: center;
    
}
@media (width >= 1150px) {    /*desktop or landscape mobile layout - updated 1150 10.1*/
    .gridcontainer {
        grid-template-columns: 23rem minmax(3rem,50rem) 20rem;
        grid-template-rows: auto auto max-content;
        grid-template-areas: 
            "logo filler menu"
            "maincontent maincontent maincontent"
            "footer footer footer";
        margin: 0 3rem 4rem 3rem;
        
    }
    .maincontent {
        padding:1rem 10dvw 0rem;
    }
    .logoarea, .topnavarea, .fillerarea {
        position:sticky;
        align-self: start;
        top:0;
        padding:0.8rem 0;
        background: var(--backgroundcolor);
        height:100%;
        z-index:10000;
        opacity:1;
    }
    .fillerarea {
        grid-area:filler;
        width:100%;
    }
    .topnavarea {
        align-self:center;
        text-align:right;
    }
    .logoarea {
        display: flex;
        align-items: center;
        flex-direction: row;
    }
    #topnav {
        justify-content:end;
        height:100%;
    }
}

@media (width < 1150px) {    /*portrait mobile/small desktop layout*/
    .gridcontainer {
        grid-template-columns: 100%;
        grid-template-rows: max-content max-content auto max-content;
        grid-template-areas: 
            "logo"
            "menu"
            "maincontent"
            "footer";
        margin: 0.4rem 2rem 4rem 2rem;
    }
    .maincontent {
        padding:1rem 0;
    }
    .topnavarea {
        position:sticky;
        align-self: start;
        top:0;
        background: var(--backgroundcolor);
    }
    #topnav {
        padding:0.5rem 0;
        justify-content:center;
        height:auto;
    }
    .fillerarea {
        display:none;
    }
    .logoarea {
        text-align:center;
        align-self:center;
        padding:0.7rem 0 0 0;
    }
    .logoarea,.topnavarea {
        z-index:10000;/* updated from 95 previously so leaflet map and its zoom buttons did not come above this still! */
    }
}

.betaarea{
    width:92.5dvw;
    background-color: var(--logosecondary);
    color:white;
    text-align:center;
    padding:0.3rem 3dvw;
    font-size:1.1rem;
    position:sticky;
    top:0;
    z-index: 200;
}
.betaarea a:link, .betaarea a:visited {
    color:white;
    text-decoration: none;
}
.betaarea a:hover {
    text-decoration: underline;
    text-decoration-color: white;
}

.logoarea {
    grid-area:logo;
    width:100%;
}
.topnavarea {
    grid-area:menu;
    text-align: center;
    
}
.maincontent {
    grid-area:maincontent;
}
.footerarea {
    grid-area:footer;
    text-align: center;
}


#topnav {
    display:flex;
    flex-direction: row;
    align-items:center;
}

.navbar {
    display:flex;
    list-style-type: none;
    padding:0.8rem 0 0;
    vertical-align: middle;
    margin:0;
    gap:1.5rem;
}
.navbar li {
    font-size: 1.1rem;
    text-decoration: none;
    min-width: max-content;
}
@media(width < 1150px) {
    .navbar li {
        font-size:1.1rem;
        display: flex;
        align-items: center;
    }
    .navbar {
        padding:0rem;
        gap: 1.5rem;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
}
.navbar a:link, .navbar a:visited {
    color:var(--otherelementtextcolor);
}
.navbar li a:hover {
    /* nb separate text-decoration declarations as mobile ios doesn't recognise combined command */
    text-decoration: underline;
    text-decoration-color: var(--logoprincipal);
    text-decoration-style:solid;
    text-decoration-thickness: 4px; 
    text-underline-offset: 3px;
}

/* .selected a:link, .selected a:visited { */
a#homeid.selected, a#faqsid.selected, a#aboutid.selected, a#benefitsid.selected, a#registerid.selected, a#loginid.selected, a#usernavid.selected, a#betaid.selected, a#plansid.selected {
    color:var(--otherelementtextcolor);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--logoprincipal);
    text-decoration-style:solid;
    text-decoration-thickness: 4px; 
    text-underline-offset: 3px;
}
.symbolhref {   /* for menu items with symbol to be vertically centred */
    display:flex;
    flex-direction: row;
    align-items: center;
}
.symbolicon {
    font-size:1rem; 
    color: #c8102e;  /*below here from g fonts stylesheet, adapt as required*/
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.saletag {
    margin-right:0.2rem;
    margin-left:0.3rem;
    vertical-align:-0.15rem;
}
.calicon {
    vertical-align:-0.15rem;
    margin-right:0.2rem;
}
.naturesymbol {
    color:var(--logoprincipaldarker)
}
.symboliconsuccess {
    color: var(--logoprincipaldarker);
    font-size:2.5rem;
}

#authmenu {  /*right-click on QR code, limited to mouse only in js*/
    display:none;
    position:fixed;
    z-index:10003; /*so above header and wholescreenlayer, which is itself so huge a value to be above leaflet map!*/
    margin:0;
    padding:0;
    box-shadow: var(--standardboxshadow);
}
#authmenuitems li {
    font-size:1.1rem;
}

#authmenuitems a {
    cursor:pointer;
}
ul#authmenuitems {
    box-shadow: none;
    border:1px var(--logoprincipaldarker) solid;
    border-radius:0.3rem;
}

.loginicon, .betaicon {
    font-size:1.2rem;
}
.oneremabove {
    margin-top:1rem;
}
.tworemsbelow {
    margin-bottom:2rem;
}
.padlockicon, #createqrdownarrow {
    font-size:1.3rem;
    /* color: var(--backgroundcolor); */
    color:white;
}

.addicon {
    /* color:var(--backgroundcolor); */
    color:white;
    font-size: 1.4rem;
}
.smallbuttonicon {
    color:var(--backgroundcolor);
    font-size:1.1rem;
}

#loginbutton, #registerbutton, #newqrcodebutton, #resetbutton, #tandcdownloadbutton {
    cursor:pointer;
    text-decoration: none;
    /* color:var(--backgroundcolor); */
    color:white;
    padding:0.6rem;
    user-select: none;
    box-shadow: var(--standardboxshadow); 
}
#tandcdownloadbutton a {
    box-shadow: none;
    gap:0.3rem;
}

.h3reducedgap {
    margin-bottom:0.8rem;
}


/* main content container */


.maincontent {
    display:flex;
    flex-direction: column;
    align-items:center;
    text-align: center;
    color: var(--normaltextcolor);
}

/* footer */
.footerarea {
    text-align: center;
    padding:3rem 0 0 0;
    font-size: 1rem;
    font-weight: 300;
    text-decoration: none;
}
.footerarea p{
    font-size:1rem;
    padding-left:0rem;
    margin:0;
    color:var(--otherelementtextcolor);
    line-height: 1.4rem;
}
.footermenu {
    list-style-type: none;
    padding:0rem 0rem 0.5rem 1rem ;
    display:inline;
    margin:0;
    display:flex;
    flex-direction:row;
    justify-content: center;
    flex-wrap: wrap;
}
.footermenu li {
    display: flex;
    padding: 0.2rem 1rem 0.2rem 0rem;
    align-items: center;
}
.footermenu a:link, .footermenu a:visited, #darkmodelink {
    color:var(--otherelementtextcolor);
}
.footermenu li a:hover, #darkmodelink a:hover {
    text-decoration: underline;
    text-decoration-color: var(--logoprincipal);
    text-decoration-style:solid;
    text-decoration-thickness: 2px; 
    text-underline-offset: 2px;
}

/*elements to allow site to be bilingual*/
.entext {
    display:inline;
}
.cytext {
    display:none;
}


/* GENERAL ELEMENT STYLES */
h1 {
    font-size: 2.3rem;
    font-weight:450;
    color:var(--otherelementtextcolor);
    margin-bottom: 0.5rem;
}

h2 {
    font-size:1.4rem;  /*previously 1.5*/
    font-weight:450;
    color:var(--normaltextcolor);
}
#homepagesub {
    font-size:1.5rem;
    margin:0;
    display: flex;
    align-items: center;
}
#userquotes h2{
    margin-top: 2rem;
    margin-bottom: 0;
}
#userquotes {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;
}
.quotemark{
    font-size: 4rem;
    font-family: 'serif';/*'Material Symbols Outlined';*/
    color: var(--logoprincipaldarker);
}
.quoteflex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    max-width: 40rem;
    margin-top: 1.5rem;
    height:5rem;
}
.quotetext {
    font-size: 1.3rem;
    color: var(--normaltextcolor);
    opacity: 1;
    transition: opacity 0.3s;
}
@media(width<850px) {
    .quotemark {
        font-size:3rem;
    }
    .quotetext {
        font-size:1.1rem;
    }
    .quoteflex {
        margin-top:1.7rem;
    }
}
/* .gtsymbolhomepage {
    font-size: 2rem;
    margin: 0;
    padding: 0;
    margin-right: -0.5rem;
    color: var(--logoprincipaldarker);
} */
#indexrotate {  /*note used currently!*/
    /* background-color: var(--logoprincipaldarker);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    color: white;
    margin-left:0.2rem; */
    color:var(--logoprincipaldarker);
    opacity:1;
    transition: opacity 0.6s;
    border:1px dashed var(--qrformborder);
    border-radius:0.5rem;
    padding:0.1rem 0.4rem;
    /* transition: color 0.3s;  */
    /*too difficult to quickly do width transition as auto width doesn't work with transitions, so leave for now*/
}
#rotatewrapper {
    width: 6rem;
    display: flex;
    flex-direction:row;
    align-content: center;
    margin-left:0.4rem;
}
#homepagesubsub {
    max-width:55rem;
    font-size:1.3rem;
}
@media(width<850px) {
    #homepagesub {
        flex-direction:column;
        font-size:1.4rem;
    }
    #homepagesubsub {
        font-size:1.2rem;
    }
    #rotatewrapper {
        width:auto;
        margin-top:0.2rem;
    }
    /* .gtsymbolhomepage {
        display:none;
    } */
}
h3 {
    font-size: 1.4rem;
    font-weight:300;
    color:var(--normaltextcolor);
}

h3 a:hover, h3 a:visited, h3 a:link {
    font-weight:400;
}

h3.psst {
    background-color: var(--logoprincipaldarker);
    border-radius:0.5rem;
    color:white;
    padding:0.5rem 0.5rem 0.7rem 0.5rem;
    margin: 1rem min(3rem, 5dvw);
    font-size: 1.1rem;
    box-shadow: var(--largershadow);
}

h3.registernowpara {
    /* margin: 1rem min(3rem, 5dvw) 1.8rem min(3rem, 5dvw); */
    font-size:1rem;
    color: white;
}

.registernowpara a:link, .registernow a:visited, .registernow a:hover {
    text-decoration: white underline;
    text-decoration-thickness: 1px;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    color: white;
    font-weight:200;
}
/* h3.joinbeta a:link {
    text-decoration: none;
    color: var(--logoprincipaldarker);
} */
h3.psst a:link, h3.psst a:visited, h3.psst a:hover {
    text-decoration: white underline;
    text-decoration-thickness: 1px;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    color: white;
}
h3.whichplan {
    margin-top:0;
    font-size:1.2rem;
    display:flex;
    flex-direction: row;
    align-items:center;
    gap:0.4rem;
}
h3 p {
    margin: 0;
    font-size: 1.2rem;
    line-height:normal
}

div.registernow {
    background-color: var(--logoprincipaldarker);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30rem;
    border-radius: 0.5rem;
    color: white;
    padding: 0 1rem 1rem 1rem;
    margin: 1rem min(3rem, 5dvw);
    font-size: 1.1rem;
    border: 1px var(--logoprincipaldarker) dashed;
    box-shadow: var(--largershadow);
}
#registerpara1 {
    margin-bottom: 0rem;
    font-size: 1.3rem;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 0.5rem;
}
#registerpara2 {
    margin-bottom:1.5rem;
}
.whiteicon {
    color: white;
    margin-right: 0.4rem;
    font-size:1.8rem;
}
.poppericon {
    display: inline-block;
    /* vertical-align: text-top; */
    padding-left: 0.5rem;
    font-size: 2rem;
    color: var(--logoprincipaldarker);
}
@media (width <850px) {
    .poppericon {
        font-size:1.6rem;
    }
}
#awaitingtranslation {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--logosecondary);
    margin: 0.5rem 0 0;
    text-align: center;
}

@media (width<850px) {
    h1 {
        font-size: 1.8rem;
        margin-top:0.4rem;
    }
    h2 {
        font-size:1.3rem;
    }
    h3 {
        font-size: 1.1rem;
    }
    h3 p {
        font-size:1rem;
    }
}

p, input, button {
    font-family:inherit;
    font-weight:300;
    font-size:1.3rem;
    margin-bottom:0px;
    line-height: 2rem;
    color:var(--normaltextcolor);
}

input, button {
    line-height:2rem;
}

input[type="checkbox"] {
    width:auto;
    accent-color: var(--logoprincipaldarker);
    /* width:1.5rem; */
    cursor:pointer;
    margin: 0 0.5rem 0 0;
}


a:link, a:visited, a:hover {
    text-decoration: none;
    color:var(--logoprincipal);
}
a:hover {
    text-decoration: underline;
    text-decoration-color: var(--logoprincipal);
    text-decoration-style:solid;
    text-decoration-thickness: 2px; 
    text-underline-offset: 3px;
}

input {
    border-radius:7px;
    border-color:darkgrey;
    border-width:1px;
    background-color: var(--inputbackgcolor);
    color:var(--inputtextcolor);
    width:clamp(2rem,28rem,60dvw);
}
input:focus {
    background-color:white;
    color:black;
}
input#enurlinput:focus::placeholder, input#cyurlinput:focus::placeholder {
    color: transparent;  /*hide placeholder when click on it*/
}
input#enurlinput::placeholder, input#cyurlinput::placeholder {
    color: darkgrey;
}


button {
    color:white;
    border:none;
    border-radius:10px;
    padding:10px;
    background-color: var(--logoprincipaldarker);
    box-shadow: var(--standardboxshadow);
}
button:hover {
    background-color: var(--logoprincipal);
    cursor: pointer;
}

.infosymbol {   /*unicode symbols*/
    color:var(--logosecondary);
    font-size:1.1em;
}
.registerplansymbol {
    line-height: 1.3rem;
    font-size:1.1rem;
    vertical-align: middle;
    padding-right: 0.2rem;
}
@media(width<850px ) {
    .registerplansymbol {
        font-size:1rem;
    }
}
/*OTHER SPECIFIC LAYOUT ELEMENTS*/

#wholescreenlayer {
    /* for preventing other inputs e.g. if showing right click menu */
    z-index:10002;/*96;  /*was 95 - menu still showing at top*/
    display:none;
    opacity: 0;
    width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
}

#dialogcontainer {
    z-index:10002;/*99;*/
    display:none;
    position: fixed;
    top:0;
    left:0;
    height:100dvh;
    width:100dvw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#dialogbox {
    display:none;
    max-width: min(500px,75dvw);
    position:relative; /*required so closebutton is positioned absolute compared with this*/
    border:1px solid var(--normaltextcolor);
    border-radius:0.5rem;
    padding: 1.3rem 1.3rem 1rem 1.3rem;
    font-size:1.2rem;
    background-color:var(--backgroundcolor);
    box-shadow: var(--standardboxshadow);
    
}
#dialogtext {
    text-align:center;
    padding-bottom:0.7rem;
    color:var(--normaltextcolor);
}
#dialogtext h1 {
    font-weight:450;
    font-size:1.2rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
#dialogbuttonsrow {
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
    gap:2rem;
    row-gap:1rem;
    padding: 1rem 0.5rem 0.5rem 0.5rem;
}

#dialogbuttonsrow button {
    font-size:1rem;
    padding:0.2rem 0.7rem;
}

#dialogbuttonsrow img {
    cursor:pointer;
    height:3rem;
    width:3rem;
}

#dialogclosebutton {
    display:none;
    text-align:right;
    position:absolute;
    top:-0.8rem;
    right:-0.8rem;
    background-color: var(--backgroundcolor);
    line-height:0; /*removes whitespace below character*/
    cursor:pointer;
    color:var(--logosecondary);
}
.dialogclosebutton {
    font-size:1.6rem;
}

/* .dialogenteraction {
    border: 2px solid darkgrey;
} */   
 /*for future use - e.g. if make standard buttons white with green border, then just highlight default with solid*/

/* bouncing dots loader */
/* adapted from https://dev.to/kirteshbansal/bouncing-dots-loader-in-react-4jng */
.bouncing-loader {
    margin-top:1.9rem;
    display: flex;
    justify-content: center;
}
  
.bouncing-loader > div {
    width: 10px;
    height: 10px;
    margin: 2px 3px;
    border-radius: 50%;
    background-color: var(--logoprincipaldarker);
    opacity: 1;
    animation: bouncing-loader 0.6s infinite alternate;
}

@keyframes bouncing-loader {
    to {
        opacity: 0.1;
        transform: translateY(-16px);
    }
}

.bouncing-loader > div:nth-child(2) {
    animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
    animation-delay: 0.4s;
}
/* end of loader */

#qrcymraeglogo {
    height:3.6rem; /*specifying height & width stops rest of page jumping around when rendering*/
    width:auto;
    padding: 0.2rem 0 0;
    display:inline-block;
    content:var(--qrlogourl);
}
#walesemoji {
    height: 1rem;
    margin-left: 0.3rem;
    vertical-align: -0.1rem;
}
@media (width < 850px) {
    #qrcymraeglogo {
        height:3.6rem;
    }
}

#introdiv {
    padding: 0;
    display:flex;
    flex-direction: column;
    align-items: center;
    max-width:60rem;
}

#introdiv h3 {
    font-size:1.3rem;
}

#trythis {
    padding: 0.5rem 0 0.5rem 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.4rem;
}
#trythistext {
    display:inline-block;
    color:var(--logosecondary);
    font-size:1.5rem;
    font-weight:500;
}
#trythissvg {
    width:1.9rem;
    height:auto;
}
#trythisqr {
    height:10rem; /*specifying height means when loading no reflowing of layout*/
    width:10rem;
    content:var(--qrexampleurl);
    display:block;
}

/* input form to capture URLs to make QR with */
#qrrequestform {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    border: var(--qrformborder) 1px dashed;  /*0.1rem*/
    padding: 0.5rem 1.7rem 1.5rem;
    border-radius: 0.9rem;
    width: fit-content;
    font-size:1.3rem;
    box-shadow: var(--largershadow); 
}
@media(width <500px) {
    #qrrequestform {
        box-shadow: var(--medshadow);
    }
}

#envalid, #cyvalid {  /* <span> to indicate if URL is valid or not*/
    display: flex;
    cursor: default; /*ensures normal rather than text cursor shown*/
    vertical-align: middle;
    font-size: 1.6rem;
}
@media (width>=500px) { /*desktop, or landscape mobile*/
    #inputgrid {
        --inputgridlangorder: [enrow] auto [cyrow] auto;  /*allows switch with cy language*/
        margin:1rem;
        display:grid;
        grid-template-columns: [gridlabel] auto [gridinput] auto [gridtick] 2rem;
        grid-template-rows: var(--inputgridlangorder);
        gap:1rem 0.5rem;
    }
    .enlabel,.cylabel {
        grid-column:gridlabel;
    }
    .eninput, .cyinput {
        grid-column:gridinput;
    }
    .entick, .cytick {
        grid-column:gridtick;
    }
    .enlabel, .eninput, .entick {
        grid-row: enrow;
    }
    .cylabel, .cyinput, .cytick {
        grid-row: cyrow;
    }
}
@media (width<500px) {   /*portrait mobile*/
    #inputgrid {
        --inputgridlangordermobile: [enlabelrow] auto [eninputrow] auto [cylabelrow] auto [cyinputrow] auto;
        --secondlangpadding:0.3rem 0 0;
        font-size:1.1rem;
        margin:1rem 0;
        display:grid;
        grid-template-columns: auto 2rem;
        grid-template-rows: var(--inputgridlangordermobile);
        gap:0.5rem 0.25rem;
    }
    .enlabel {
        grid-area: enlabelrow / 1;
    }
    .cylabel {
        grid-area: cylabelrow / 1;
        padding:var(--secondlangpadding);
    }
    .eninput {
        grid-area: eninputrow / 1;
    }
    .cyinput {
        grid-area: cyinputrow / 1;
    }
    .entick {
        grid-area: eninputrow / 2;
    }
    .cytick {
        grid-area: cyinputrow / 2;
    }
}

.enlabel, .eninput, .entick, .cylabel, .cyinput, .cytick {
    align-self:center;
}
.enlabel, .eninput,.cylabel, .cyinput {
    justify-self: start;
}
.enlabel,.cylabel {
    /* font-size:1.3rem; */
    text-align: left;
}

/* output QR code */
#qroutputintro {
    display:none;
}
#qroutputintro p {
    font-size: 1.1rem;
    margin: 0.8rem 0 1.5rem 0;
    line-height:1.5rem;
}
#qrcodediv {
    margin-bottom:20px;
    display:none;
    width:18rem;
    margin-left:var(--qrpadding); /*so indent shows correctly light/dark mode*/
    background-color: white;
}
#qrimg {
    display:block; /*otherwise displays tiny whitespace below*/
}

#rightclickqr {  /*right-click on QR code, limited to mouse only in js*/
    display:none;
    position:fixed;
    z-index:10003; /*to be above wholescreenlayer*/
    margin:0;
    padding:0;
}

ul.generalrightclickmenu {   
    list-style-type:none;
    border: 1px var(--backgroundcolor) solid;
    border-radius:0.5rem;
    margin:0;
    padding:0.5rem 0rem;
    background-color: var(--backgroundcolor);
    box-shadow:  0 4px 11px 0 hsla(0,0%,0%,.2); /*found on web to mimic browser default- works! - added 11 here otherwise looked odd*/
}
.generalrightclickmenu li {
    font-size:1rem;
    /* padding:0rem 1rem; */ /*moved to a instead so all clickable*/
}
.generalrightclickmenu li:hover {
    background-color: var(--rightclickhover);
}
.generalrightclickmenu a {
    text-decoration: none;
    color:var(--normaltextcolor);
    cursor: default;
    padding:0rem 1rem; 
}

/*div holding content below output QR*/
#qrcodeinfo {
    display:none;
}
#qrcodeinfo p {
    font-size:1.2rem;
    line-height:1.8rem;
    margin-top:0.8rem;
}

/* buttons below output QR code to copy, download etc. */
.buttonwithicon {
    list-style: none;
    margin-top:2rem;
    display:flex;
    flex-direction: row;
    gap:0.9rem;
    align-items:center;
    font-size:1.2rem;
    line-height: normal;
    padding:0;
    flex-wrap:wrap;
    justify-content: center;
    
}

.buttonwithicon li, .buttonwithicon a {
    display: flex;
    flex-direction: row;
    align-items:center;
    box-shadow: var(--standardboxshadow);
    border-radius:0.6rem;
/* added last 3 lines when doing login button - may need to do separately if messes up e.g. qr code buttons */
}
.buttonwithicon li {
    /* padding:0.6rem; */
    border-radius: 0.6rem;
    background-color: var(--logoprincipaldarker);
}
.buttonwithicon li :hover {
    border-radius:0.6rem;
    background-color: var(--logoprincipal);
}
.buttonwithicon a {
    text-decoration: none;
    color:white;
    padding:0.6rem;
}
.qrmenugap{
    margin-top:1.5rem;
}
.smallsimpletextbutton {
    border-radius: 0.6rem;
    background-color: var(--logoprincipaldarker);
    color: white;
    padding: 0.6rem;
    width: max-content;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    gap: 0.3rem;
    flex-wrap: nowrap;
    box-shadow: var(--standardboxshadow);
}
.smallsimpletextbutton:hover, .smallsymbolbutton:hover {
    background-color: var(--logoprincipal);
}
.smallsimpletextbutton a:link, .smallsimpletextbutton a:hover, .smallsimpletextbutton a:visited, .smallbuttonicon a:hover {
    color:white;
}
/* .registernow a:hover {
    text-decoration:none;
} */
.reversecols {
    background-color: white;
    box-shadow: none;
    color: var(--logoprincipaldarker);
    font-weight: 400;
}
.reversecols:hover {
    background-color: white;
    transform: scale(1.03);
    text-decoration:none;
}
.reversecols:link, .reversecols:hover, .reversecols:visited {
    text-decoration: none;
    color: var(--logoprincipaldarker);
}

.registernoticep {
    margin-top: 0.5rem;
    line-height: normal;
}
.registernoticeul {
    text-align: left;
    font-size: 1.1rem;
}
@media (width<1150px) {
    .registernoticep {
        font-size:1.1rem;
        margin-top:0;
    }
    .registernoticeul {
        font-size:1rem;
        margin-bottom:0.5rem;
    }
}
.smallsymbolbutton {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: center;
    border-radius: 0.6rem;
    background-color: var(--logoprincipaldarker);
    color: white;
    width: max-content;
    cursor: pointer;
    font-size: 1rem;
    gap: 0.3rem;
    flex-wrap: nowrap;
    box-shadow: var(--standardboxshadow);
}
.smallsymbolbutton a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
    line-height: 1.1rem;
    align-items: center;
    padding:0.6rem;
}



/* options div shown on click below output QR code */
#qroptionsarrow {
    display: inline-block;
    cursor: pointer;
}
#qroptionspanel {
    border:var(--qrformborder) 1px dashed;
    border-radius:0.8rem; /*0.5rem*/
    padding: 0rem min(2rem,5dvw) 1rem;
    display:none;

}
.optionssubhead {
    margin:1.5rem 0 0.5rem;
    font-size:1.4rem;
    font-weight:500;
}

#qrexpiry p {
    margin-top:0.2rem;
    line-height:normal;
}

/* #qrcodedetails {
    margin-top:1.5rem;
} */

#qrcodedetails p {
    line-height:1.5rem;
    margin-bottom:0.5rem;
}

#qrcodedetails p, #qrexpiry p {
    color: var(--infoonlygray);
    font-size: 1rem;
}


/*colour picker in options panel*/
#colourpickerdiv, #themecolourpickerdiv {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#colourpickerdiv {
    gap:0.5rem;
}
#themecolourpickerdiv {
    gap:0.2rem;
}
#colourpickerdiv p, #themecolourpickerdiv p{
    margin-top:0;
    line-height:normal;
}
#colourpickerdiv label, label#themecolourpickersquare {
    min-width:1.5rem;
    min-height:1.5rem;
    background-color:black;
    border: 1px black solid;
    border-radius: 0.3rem;
    cursor:pointer;
}

/*other items in options drop down*/
#backgcolourdiv {
    padding-top:0.5rem;
    color:var(--infoonlygray);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 0.3rem;
}
.backgcolinfosymbol {
    padding-top:0.1rem;
}
#downloadformat input, #pngsize input, #themecolour input {
    width:auto;
    accent-color:var(--logoprincipaldarker);
}
#downloadformat label {
    font-size:1.05rem;
}
#pngsize label, #themecolour label {
    font-size:1.2rem;
}
#themeexplainer {
    font-size:1.1rem;
    font-size: 1rem;
    color: var(--infoonlygray);
    margin-bottom:0.5rem;
}
#colourpicker, input#themecolourpicker {
    visibility:hidden;
    width:0;
    height:0;
    appearance:none;
    border-radius: 0;
    padding:0;
    background-color: var(--backgroundcolor);
    cursor:pointer;
}
#colourhex, input#themecolourhex {
    width:5em;
}
#artworkoption {
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/*below options drop down*/
#createanother {
    font-size: 1.2rem;
    margin-top:3rem;
}

/*OTHER PAGES*/

/* registration form */
.registerprivacy {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    font-size: 1.1rem;
    padding-top: 0.8rem;
    column-gap: 0.3rem;
}
.registerprivacy p {
    margin-top: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}
.registerpadlock {
    vertical-align: top;
    padding-right: 0.2rem;
    font-size: 1.2rem;
    padding-top: 0.1rem;
}

.registerinfosymbol {
    line-height:1.3rem;
    font-size: 1.1rem;
    vertical-align: middle;
    padding-right: 0.3rem;
}
/* .registerinfo p {
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    justify-content: center;
    column-gap:0.3rem;
    row-gap:0;
} */
.registerinfo span.tacaoptions {
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    justify-content: center;
}
.tacaicons {
    margin-right:0.2rem;
    color:var(--logoprincipal)
}
.minusleftmargin {
    margin-left: -0.2rem;
}
p.planchangedialog {
    margin: 0.2rem 0 0.5rem;
    line-height: normal;
    font-size: 1.2rem;
}

input#firstname::placeholder,input#lastname::placeholder, input#email::placeholder {
    color:darkgrey;
}
input#firstname:focus::placeholder, input#lastname:focus::placeholder, input#email:focus::placeholder {
    color: transparent;
}
/* login form */
#loginformdiv {
    display:flex;
    flex-direction: column;
    align-items: center;
    font-size:1.2rem;
    row-gap:2rem;
}
.stayloggedinlabel {
    font-size:1.1rem;
    padding-right:0.5rem;
}
.stayloggedindialogli {
    text-align: left;
    font-size: 1.1rem;
    margin-bottom: 0;
}
.pwordcaption {
    grid-area:pwordcaption;
    justify-self:end;
}
::-ms-reveal {
    display: none;  /*hides password reveal button in edge - have my own implementation instead which works cross-browser*/
}
@media (width>=500px) {   /*desktop, or landscape mob*/
    .logingrid {
        margin-top:1.5rem;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        column-gap:1rem;
        row-gap:1rem;
        text-align:right;
        align-items: center;
        margin-bottom:2rem;
        padding-right:2dvw; /*to correct visual misperception of not centred*/
        grid-template-areas: 
            "emailcaption emailinput"    
            "pwordcaption pwordinput"
            ". pwordvisibility"
    }
    .logingrid input {
        width: min(400px,50dvw)
    }
    .hidepasswordrows {
        grid-template-rows: auto 0 0;
        row-gap:0;
    }
    
}


@media (width<500px) {   /*portrait mobile*/
    .logingrid {
        margin-top:1.5rem;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        column-gap:1rem;
        row-gap:0.5rem;
        text-align:left;
        align-items: center;
        margin-bottom:2rem;
        grid-template-areas: 
            "emailcaption"
            "emailinput"    
            "pwordcaption"
            "pwordinput"
            "pwordvisibility"
    }
    .logingrid input {
        width: min(500px,75dvw)
    }
    .hidepasswordrows {
        grid-template-rows: auto auto 0 0 0;
        row-gap:0;
    }
    .pwordcaption {
        justify-self: start;
    }

}



.pwordshowprompt {
    display:flex;
    flex-direction: row;
    align-items: center;
    cursor:pointer;
    font-size:1rem;
}

.emailcaption {
    grid-area:emailcaption;
}
.emailinput {
    grid-area:emailinput;
}
.pwordcaption {
    grid-area:pwordcaption;
}
.pwordinput {
    grid-area:pwordinput;
}

/* register form */
#registerformdiv,#resetdiv {
    width: min(700px, 90%);
    display:flex;
    flex-direction: column;
    align-items: center;
    font-size:1.2rem;
    row-gap:2rem;
}
#resetdiv {
    row-gap:0rem;
}

@media (width>=500px) {   /*desktop, or landscape mob*/
    .registergrid {
        margin-top:1.5rem;
        display: grid;
        grid-template-columns: auto min(400px,50dvw);
        grid-template-rows: auto;
        column-gap:1rem;
        row-gap:1rem;
        text-align:right;
        align-items: center;
        margin-bottom:2rem;
        padding-right:8dvw; /*to correct visual misperception of not centred*/
        grid-template-areas:
            "firstnamecaption firstnameinput"
            "surnamecaption surnameinput" 
            "emailcaption emailinput"    
            "pwordcaption pwordinput"
            ". pwordvisibility"
    }
    .registergrid input {
        width: 98.8%; /*so lines up perfectly at rhs*/
        /* width: min(400px,50dvw) */
    }
}
@media( width<500px) { /*portrait mob*/
    .registergrid {
        margin-top:1.5rem;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        column-gap:1rem;
        row-gap:0.5rem;
        text-align:left;
        align-items: center;
        margin-bottom:3rem;
        grid-template-areas: 
            "firstnamecaption"
            "firstnameinput"
            "surnamecaption"
            "surnameinput" 
            "emailcaption"
            "emailinput"    
            "pwordcaption"
            "pwordinput"
            "pwordvisibility"
    }
    .registergrid input {
        width: min(500px,75dvw)
    }
    .pwordcaption {
        justify-self: start;
    }
}
.checkfield { /*hidden field to catch bots for register form*/
    display:none;
}

@media (width>=500px) {   /*desktop, or landscape mob*/
    .resetpwordgrid {
        margin-top:1.5rem;
        display: grid;
        grid-template-columns: auto min(400px,50dvw);
        grid-template-rows: auto;
        column-gap:1rem;
        row-gap:1rem;
        text-align:right;
        align-items: center;
        margin-bottom:2rem;
        padding-right:7dvw; /*to correct visual misperception of not centred*/
        grid-template-areas:
            "pwordcaption pwordinput"
            ". pwordvisibility"
    }
    .resetpwordgrid input {
        width: 98.8%; /*so lines up perfectly at rhs*/
        /* width: min(400px,50dvw) */
    }
}

@media (width<500px) {   /*portrait mobile*/
    .resetpwordgrid {
        margin-top:1.5rem;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        column-gap:1rem;
        row-gap:0.5rem;
        text-align:left;
        align-items: center;
        margin-bottom:2rem;
        grid-template-areas: 
            "pwordcaption"
            "pwordinput"
            "pwordvisibility"
    }
    .resetpwordgrid input {
        width: min(500px,75dvw)
    }
    .pwordcaption {
        justify-self: start;
    }

}

.firstnameinput, .surnameinput, .pwordinput, .emailinput {
    text-align: left;
};
input:focus-visible #firstname  {
    border:var(--logoprincipal) solid 2px;
}

.firstnamecaption {
    grid-area:firstnamecaption;
}
.firstnameinput {
    grid-area:firstnameinput;
}
.surnamecaption {
    grid-area:surnamecaption;
}
.surnameinput {
    grid-area:surnameinput;
}
.emailcaption {
    grid-area:emailcaption;
}
.emailinput {
    grid-area:emailinput;
}

.pwordinput {
    grid-area:pwordinput;
}
.pwordvisibility {
    grid-area: pwordvisibility;
    justify-self:end;
}
#pwordinfo {
    line-height:normal;
    padding:0 0 0.1rem 0;
    cursor: pointer;
}




/*OTHER ITEMS BOTTOM OF SCREEN*/

.benefitslist {
    font-size:1.2rem;
    color:var(--normaltextcolor);
    text-align:left;
    margin-bottom:2rem;
}
@media (width<850px) {
    .benefitslist {
        font-size:1.1rem;
    }
}
.benefitslist li {
    padding-left: 0.9rem;
    margin-bottom: 0.1rem;
}
.benefitslist li::marker {
    content: "\2713";
    color:var(--logosecondary); /*bullet colour*/
    font-weight:bold;
}
#benefits {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.trustedby {
    /* width: 80%; */
    /* margin: 2rem 0.5rem 1rem 0.5rem; */
    margin: 1rem min(3rem, 5dvw);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.trustedby h2 {
    margin-bottom: 0.5rem;
}
.logosbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 3rem;
    row-gap: 1.5rem;
    max-width: 100dvw;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;
    padding: 1.3rem;
    border-radius: 0.5rem;
}
.logosbox img {
    height:3rem;
    /* filter: grayscale(1);
    opacity: 0.6; */
}
.logosbox img:hover, img.highlightedlogo {
    opacity:1;
    filter:none;
}
#toast {
    z-index:10002;/*97;*/
    display:flex;
    flex-direction:column;
    align-items:center;
    position:fixed;
    width:100dvw;
    top: 5%;  /*previously bottom*/
    left:0;
}
#toasttext {
    display:none;
    width:auto;
    font-size:1.1rem; /*prev 1.2*/
    color:white;
    background-color: var(--logoprincipaldarker);  /*prev darkred*/
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    text-align: center;
}

.flexhoriz, .flexhoriznogap {
    display:flex;
    flex-direction: row;
    align-items: center;
    gap:0.35rem;
    flex-wrap:wrap; /*added nov 24*/
}

.flexhoriz a, .flexhoriznogap a {
    text-decoration: none;
    color: var(--normaltextcolor);
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    align-items: center;
}
.flexhoriznogap, .flexhoriznogap a {
    gap:0rem;
}
.largebetaicon, .largeanalyticsicon {
    font-size:1.8rem;
}
.largeanalyticsicon {
    margin-right:0.4rem;
}
.redborderdiv {
    margin: 1rem 0 2rem 0;
    border: var(--logosecondary) 1px dashed;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
}

p.tandc {
    margin-top:2rem;
    font-size:1rem;
    line-height:1.3rem;
    flex-direction: row;
    justify-content: center;
    gap:0.3rem;
}
.hometaca {
    gap:0;
}
.hometaca a:link, .hometaca a:visited {
    text-decoration:none;
    color:var(--logoprincipaldarker)
}
.hometaca a:hover {
    text-decoration: underline;
    text-decoration-color: var(--logoprincipal);
    text-decoration-style:solid;
    text-decoration-thickness: 2px; 
    text-underline-offset: 3px;
}
#backtotop {
    display:none;
    position: fixed;
    right:0.5em;
    bottom:0.5em;
    z-index:90;
    padding:0.5em;
    border:var(--logoprincipaldarker) 1px solid;
    border-radius:0.5em;
    margin:1rem 1rem 1rem 0rem;
    color:var(--logoprincipal);
    background-color: var(--backgroundcolor);
}
#backtotop a, a:hover #backtotop {
    text-decoration:none;
    cursor:pointer;
}

/*my popup from scratch*/
#popupcontainer {
    z-index: 10005; /*so above map etc. 99;*/
    position:absolute;
    display:none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    background-color: var(--popupcolor);
    padding:0.4rem 0.7rem;
    border-radius: 0.4rem;
    gap:0.4rem;
    max-width:40dvw;/*30dvw;*/
    flex-wrap:wrap;
}


#popupcontainer.downarrow::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--popupcolor) transparent transparent transparent;
}

#popupcontainer.uparrow::before {
    /*for up arrow*/
    content: "";
    position: absolute;
    top: 0%;
    margin-top:-10px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--popupcolor) transparent;
}

#popuptext {
    font-size:1rem;
    color:var(--backgroundcolor);
    margin-right:0.2rem;
    text-align:center;
}

#popupcontainer button {
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1.2rem;
    box-shadow: none;
}
  


#sharetext {
    flex-shrink: 0;
}


img.socialicon {
    width:2rem;
    height:auto; 
}

#sharesymbol {
    color:var(--logosecondary);
}

/*FOR PAGES OTHER THAN INDEX*/
#face404 {
    height:7rem; /*by specifying height will reserve correct vertical space in DOM while loading image; if do width only then have very brief jump in text from para below*/
    margin: 1.3rem 0 2.4rem 2.7rem;
    content:var(--face404url);
}

#faqpage h2, #privacypage h2, #aboutpage h2 {
    margin-top:2rem;
    margin-bottom:0rem;
}
#betapage h2 {
    margin-top:1rem;
    font-size:1.3rem;
    margin-bottom:0rem;
}

#tacpage h3 {
    font-size: 1.1rem;
    margin: 0.7rem 0 0 0;
}
#tacpage h2 {
    margin-top:1.5rem;
}
#faqpage, #privacypage,#tacpage, #aboutpage, #betapage {
    text-align:left;
}
#faqpage p, #privacypage p, #aboutpage p {
    font-size:1.2rem;
    line-height:1.7rem;
}
#tacpage p {
    font-size: 1.1rem;
    line-height: 1.4rem;
}
#tacpage p strong, #tacpage li strong {
    font-weight:500;
}
#betapage p {
    font-size:1.1rem;
    line-height:1.5rem;
}
#faqpage ul {
    font-size:1.2rem;
}
#tacpage ul {
    font-size:1rem;
}
#betapage ul {
    font-size:1.1rem;
}
#tacpage ul, #betapage ul {
    margin-top: 0.3rem;
}
#faqpage li, #tacpage li, #betapage li {
    padding: 0.2rem 0;
}
li#tandcdownloadbutton {
    padding:0;
}
#tacpage ul.buttonwithicon {
    justify-content: flex-start;
    margin-top: 1.5rem;
    margin-bottom:2rem;
}
#faqpage li::marker, #tacpage li::marker, #betapage li::marker {
    color:var(--logosecondary); /*bullet colour*/
}
h2#featuresbeta, h2#privacybeta, h2#plannedfeatures, h2#knownissues,h2#paid,h2#genconditions,h2#notpaid {
    scroll-margin-top: 10rem; /*so when scroll to them doesn't hide under fixed header at top of page*/
}
#betapage strong {
    font-weight:450;
}


/*plans page*/
.maincontentplans {
    margin-left: 2%;
    width: 90%;
    padding: 2rem 4%;
}
.plansscrollsymbol {
    font-size:3rem;
    color:var(--infoonlygray);
    cursor:pointer;
    user-select: none;
    box-shadow: 0 0 4rem 4rem var(--backgroundcolor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100%;
    z-index:1 /*needed otherwise weirdly doesn't show box shadow on left lt symbol*/
}
.plansdiv {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    /* gap: 2rem; */
    align-items: center;
    justify-content: space-between;
    /* touch-action: none; */
}
.plansintro {
    width: 90%;
    margin-bottom:0.5rem;
}
.plansintro p {
    font-size: 1.2rem;
    line-height:normal;
    margin-top:0.5rem;
}

.planslayout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow: scroll;
    /* scroll-behavior: smooth; */
    /* touch-action: none; */
    user-select: none;
    /* overflow: auto; */
    /* white-space: nowrap; */
    scrollbar-width: none;
    cursor:grab;
    overscroll-behavior-x: none; /*prevents forward/back by horizontal scroll on Chrome laptops, happens accidentally when scrolling plans*/
}
.planbasisdiv {
    margin:1rem 0 0.6rem 0;
    display:flex;
    flex-direction:row;
    gap:0.5rem;
    align-items:center;
    font-size: 1.1rem;
    justify-content: center;
}
.planbasisdiv label {
    cursor:pointer
}
.planbasisdiv input {
    width:auto;
    accent-color: var(--logoprincipaldarker);
    cursor: pointer;
    margin: 0 0 0 0.5rem;
}
.planbasissymbol {
    font-size:1.2rem;
}
.plansgrid {
    margin:1rem;
    display:grid;
    grid-template-areas:
        "plantitle"
        "plandescr"
        "plancost"
        "planequiv"
        "planfeatures"
        "choose"
        "chooseinfo";
    grid-template-columns: 13rem;
    grid-template-rows: 2.5rem 3.5rem 3rem 2.5rem auto 4rem 1.7rem;
    border: var(--logoprincipal) 1px solid;
    border-radius: 1rem;
    padding: 1.3rem 1.5rem 1.1rem 1.5rem;
    box-shadow: var(--plansboxshadow);
}
.plantitle {
    grid-area: plantitle;
    font-size:1.3rem;
    font-weight:500;
}
.plandescr {
    grid-area: plandescr;
    font-size: 1rem;
    color: var(--infoonlygray);
    font-weight: 300;
    /* align-self:center */
}
.planequiv {
    grid-area: planequiv;
    font-size:0.9rem;
    font-weight:200;
    color:var(--infoonlygray)
}
.plancost {
    grid-area: plancost;
    font-size:1.4rem;
    font-weight:200;
    align-self:center;
}
.plancost strong {
    font-weight:500;
}
.choose {
    grid-area: choose;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content:end;
    transition: opacity 0.1s;
}
.chooseinfo {
    grid-area:chooseinfo;
    font-size:0.9rem;
    color:var(--infoonlygray);
    display:flex;
    flex-direction:column;
    justify-content: end;
}
.planfeatures {
    grid-area: planfeatures;
    font-size:0.9rem;
    font-weight:normal;
}
.planfeatures strong {
    font-weight:500
}
.planfeatures p {
    font-size: 1rem;
    margin: 0.3rem 0 0.8rem 0;
    padding: 0;
    line-height:normal;
}
.planfeatures ul {
    list-style-type:none;
    margin:0;
    padding-left:1rem;
}
.planfeatures li {
    padding-left: 0.9rem;
    margin-bottom: 0.1rem;
    text-align:left;
    font-weight:300;
    font-size:1rem;
}

.planfeatures li::marker, .universalfeatures li::marker {
    content: "\2713";
    color:var(--logosecondary); /*bullet colour*/
    font-weight:bold;
}
.universalfeatures li {
    padding-left: 0.4rem;
    padding-right: 1.5rem;
}
ul.universalfeatures {
    width: min(80dvw, 70rem);
    list-style-type:none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5rem;
}
.plansuniversal p {
    font-size:1.2rem;
    line-height: normal;
}


@media(width<500px) {
    .plansdiv {
        gap:0rem;
    }
    .plansintro p {
        font-size:1.1rem;
        margin-top:0.2rem;
    }
    .planbasisdiv {
        font-size:1rem;
    }
    .plansscrollsymbol {
        font-size:2rem;
        box-shadow: none;
    }
    .planslayout {
        gap:1rem;
        margin-right:0.4rem; /*attempt to account for box shadow stopping end of scroll being recognised*/
    }
    .plansgrid {
        margin:0.6rem;
        grid-template-columns: 55dvw;
        padding:4dvw;
    }
    .maincontentplans {
        margin-left: 0;
        width: 100%;
        padding:1rem 0;
    }
    .planfeatures li {
        font-size:0.9rem;
    }
    .plansuniversal p {
        font-size: 1.1rem;
        width: 80dvw;
        margin-left: 6dvw;
    }
    ul.universalfeatures {
        padding: 0.5rem 0.5rem 0.5rem 3rem;
        font-size: 0.95rem;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
    }
    .universalfeatures li {
        padding: 0 1.5rem 0.2rem 0.7rem;
        text-align: left;
    }
}
@media(width<1150px) {
    .plansscrollsymbol {
        font-size:2rem;
        box-shadow: none;
    }
}

p.smallerp {
    font-size:1rem;
    margin-bottom:0.5rem;
}
.maincontentplans h1 {
    margin-top:0;
    margin-bottom:0;
}

/*benefits page*/
.benefitsintro p {
    font-size: 1.2rem;
    margin: 0rem 0 0.6rem 0;
    line-height: 1.5rem;
    text-align:left;
}
.benefitsintro {
    margin: 1.5rem 0 1.5rem 1.5rem;
}
.benefitsubhead {
    font-size:1.35rem;
    font-weight:450;
    align-self:flex-start;
    margin-top:0rem;
}
.benefitsgrid {
    margin: 0.5rem 0 2rem;
    display: grid
;
    align-self: flex-start;
    grid-template-areas: "benefiticon benefitdescr benefitimg";
    grid-template-columns: 5rem auto 30rem;
    grid-template-rows: auto;
    box-shadow: var(--medshadow);
    padding: 1.8rem 3rem 2rem 1.5rem;
    border-radius: 1rem;
    align-items: center;
}

.benefiticon {
    grid-area: benefiticon;
    color: var(--logoprincipaldarker);
    font-size: 2.5rem;
    margin-top: 0rem;
    /* font-weight: 100; */
    text-align: left;
    margin-left:0.2rem;
    align-self:start;
}
.benefiticonsmaller {
    font-size: 2.1rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
}
.benefitdescr {
    grid-area: benefitdescr;
    text-align: left;
    margin-right: 3rem;
    align-self: start;
}
.benefitdescr img, .benefitimg img {
    width:auto;
    margin:1rem 0;
}
.benefitimg {
    margin: 1rem;
    grid-area: benefitimg;
    /* margin-top: 3.5rem; */
    max-height: 10rem;
    width: auto;
    justify-self: center;
    padding: 1rem;
    
}
.benefitscreenshot {
    width: auto;
    height: auto;
    padding: 0.5rem;
    border: lightgray 1px solid;
    border-radius: 0.5rem;
    max-height: 18rem;
    max-width: 28rem;
    box-shadow: var(--standardboxshadow);
    background-color: white; /*so works ok in dark mode*/
}
p.benefitcap {
    font-size: 1.05rem;
    font-weight: 450;
    margin-top: 1rem;
    line-height: 1.3rem;
}
p.benefitdetail {
    font-size: 1.05rem;
    line-height: 1.5rem;
    margin-top: 0.3rem;
}
.noborder {
    border:none;
}
.noshadow {
    box-shadow: none;
}
.largertext {
    font-size:1.2rem;
}
.smallerscreenshot {
    padding:0.5rem; 
    max-width:23rem;
}
@media (width<1300px) {
    .benefitsgrid {
        grid-template-areas: 
            "benefiticon benefitdescr"
            "benefiticon benefitimg";
        grid-template-columns: 3rem auto;
        grid-template-rows: auto auto;
        padding: 1.5rem 2rem 1rem 1rem;
    }
    .benefitscreenshot, .smallerscreenshot {
        max-width:100%
    }
    .benefitdescr {
        margin-right:0;
    }
    .benefiticon {
        font-size:1.8rem;
        margin-top:0.2rem;
    }
    .benefiticonsmaller {
        font-size:1.6rem;
    }

    .benefitsintro p {
        font-size:1.2rem;
    }
    .benefitcap {
        font-size:1rem;
    }
    .benefitsubhead {
        font-size:1.3rem;
        line-height:1.3
    }
    .benefitspage h1 {
        /* margin: 0.2rem 0 0.1rem 0; */
    }
}

@media (width<850px) {
    .benefitsintro {
        margin:0.5rem 0 1rem 0rem;
    }
}

#pagetoken {
    display:none;
    visibility:hidden;
}

.disabledbutton, #newqrcodebutton.disabledbutton{
    pointer-events: none;
    cursor:default;
    background-color:lightgrey;
}
.disablednotallowed, .disablednotallowed:hover {
    cursor:not-allowed;
    background-color:lightgrey;
}


.businesscardintro {
    font-size: 1.2rem;
    margin:0.5rem 0 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
}
.businesscard h1 {
    font-size:2rem;
}


#tompheadshot {
    width: max(12%, 100px);
    border-radius: 50%;
    padding-top: 0.5rem;
    float: right;
    margin: 1rem 0 1rem 1rem;
}
.businesscard {
    padding:0.8rem 0 0;
}
.businesscardheadshot {
    width: max(12%, 100px);
    border-radius: 50%;
    padding-top: 0.5rem;
    float: left;
    margin: 0 1rem 0;
}
.businesscardgrid {
    display: grid;
    grid-template-areas: "buscardicon buscarddetails";
    grid-template-columns: 2.1rem 17rem;
    grid-template-rows: auto;
    text-align:left;
    margin: 0.15rem 0;
    font-size: 1.1rem;
    align-items:center;
}

.buscardicon {
    grid-area: buscardicon;
    display:flex;
    justify-content: center;
}
.buscarddetails {
    grid-area:buscarddetails;
    margin-left:0.7rem;
}
.linkedinbuscardicon {
    width:1.7rem;
}
.emailbuscardicon {
    font-size:1.9rem;
    padding-top: 0.15rem;
}
.businesscardpara {
    margin-top:0.6rem;
}
.businesscardpara p{
    font-size:1.2rem;
    line-height:1rem;
    margin: 0.8rem;
}
.trynowbutton {
    margin: 0.8rem 0 0;
}
.newfeature {
    vertical-align: 0.06rem;
    background-color: darkgrey;
    color: white;
    border-radius: 0.6rem;
    padding: 0 0.4rem 0.1rem 0.4rem;
    margin: 0 0.3rem 0.1rem -0.1rem;
    font-size: 0.9rem;
}
@media(width<850px) {
    .businesscard h1 {
        font-size:1.5rem;
    }
    .businesscardintro{
        font-size:1.1rem;
        margin:0.5rem 0 1rem;
    }
    .businesscardpara p {
        font-size:1rem;
    }
    .buscarddetails {
        font-size:1.1rem;
    }
    .businesscardgrid {
        grid-template-columns: 2.1rem 13rem;
    }
}

/* ANIMATIONS */

@keyframes fadeinout{
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeout {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes borderfadein {
    0%{
        border: 1px rgb(221, 221, 221) solid; /*var(--backgroundcolor) solid;   */
    }
    100% {
        border: 1px var(--logoprincipaldarker) solid;   /* was green; potential future dev - use color #27a7b0;*/
    }
}