/*   GENERAL HTML   */

body {
    font-family: Roboto, arial, sans-serif;
    color: var(--black);
}
textarea {
    font-family: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
}

div {
    box-sizing: border-box;
}
a {
    color: inherit;
    text-decoration: none;
}

/*  COLOURS   */
:root {
    --white: #ffffff;
    --black: #1d1d1b;
    --greendark: #2fc28d;
    --greenlight: #55dfad;
    --purpledark: #6A70A1;
    --purplelight: #9FA5D7;
    --greydark: #c9c9c9;
    --greylight: #f5f5f5;
    --nothing: rgba(0,0,0,0);
    --reddark: #C80000;
}

.backgreen{
    background: var(--greenlight)
}
.backblack{
    background: var(--black)
}

.textlight{
    color: var(--greylight)
}
.textgreen{
    color: var(--greendark);
}

.purplegreen{
    color: var(--purpledark);
}
.purplegreen:hover{
    color: var(--greenlight);
}

/*  ---------------------------------------------------------------------------------   */

/*   font-size changes smoothly between 320px wide (10px) and 1445px wide (16px) pixels wide, 
                and is fixed above and below that */
   
:root {
    --minfont: 10;
    --minfontpx: 10px;
    --maxfont: 16;
    --maxfontpx: 16px;
    --minwidth: 320;
    --minwidthpx: 320px;
    --maxwidth: 1440;
}             

html {
    font-size: calc(var(--minfontpx) + 
                    (var(--maxfont) - var(--minfont)) * 
                    ((100vw - var(--minwidthpx)) / (var(--maxwidth)- var(--minwidth))));
    font-weight: normal;    
    font-size: calc(10px + (var(--maxfont) - var(--minfont)) * ((100vw - var(--minwidthpx)) / (1444 - 320)));
    min-height: 100vh;
}
@media(min-width:1445px){
    html{
        font-size: var(--maxfontpx);
    }
}
@media(max-width:319px) {
    html {
        font-size: var(--minfontpx);
    }
}


/*   -------------------------------------------------------------------------------------  */

.inlineblock{
    display: inline-block;
}

.hide{
    display: none !important;
}





.topheaderbar {
    padding: 1rem 1.5rem;
}
a.logout.button {
    float: right;
}

.logo{
    vertical-align: middle;
}
.header{
    background: var(--greenlight);
    color: var(--greylight);
    padding: 3rem 4rem;
    margin-bottom: 2rem;
    text-align: center;
}
h1 {
    font-size: 3rem;
    font-weight: bold;
    text-align: left;    
    margin: 0;
}
h2 {
    color: var(--greendark);
    margin: 0 0 1rem 0;
    font-size: 1.89rem;
    font-weight: bold;
}
h3 {
    text-align: left;    
    margin: 0;
    font-weight: normal;
}

.downloadholder {
    width: 700px;
    margin: 0 auto;
}

.downloadlink {
    width: 700px;
    max-width: 90vw;
    position: relative;
    display: inline-block;
}

@media(max-width:810px) {
    .downloadholder {
        max-width: 82vw;
        max-width: calc(100vw - 8rem);
    }
    .downloadlink{
        max-width: 82vw;
        max-width: calc(100vw - 8rem);
    }
}

.downloadlink a {
    background-color: #ffffff;
    padding: 0.4em 1em 0.4em 2em;
    border-radius: 0.3em;
    position: absolute;
    right: 0;
    bottom: -3.2rem;    
    font-weight: bold;
    font-size: 0.9rem;
}

.downloadlink.userdata a {
    right: 12rem;
}

.downloadlink a:before {
    content: url('/assets/images/download-button-purple.svg');
    width: 1rem;
    display: block;
    position: absolute;
    left: 0.7em;
}
.downloadlink a:hover:before {
    content: url('/assets/images/download-button-green.svg');
}


form {
    text-align: center;
    margin: 0;
}
.forminner {
    display: inline-block;
    margin-bottom: 2rem;
}
.section {
    padding: 2rem;
    border: solid 2px;
    border-color: var(--greendark);
    border-radius: 1rem;
    text-align: left;
    width: 700px;
    max-width: 90vw;
}
.section.login {
    width: 420px;
}
.section.section4 {
    border: none;
    padding: 0 2rem;
}


.formgroup {
        position: relative;
            clear: both;
}
.formgroup label {
    font-size: 1rem;
    color: var(--black);
    margin-top: 1em;
    line-height: 3rem;
    display: inline-block;
}
.formgroup.error label {
    color: var(--reddark);
}

.formgroup input, select, textarea {
    width: 100%;
    outline-color: var(--greenlight);
}
.formgroup.error input, .formgroup.error select, .formgroup.error textarea, .formgroup.error a {
    border-color: var(--reddark) !important;
}

.formgroup .btn {
    background-color: var(--purpledark);
    border: none;
    border-radius: 0.6rem;
    color: var(--greylight);
    text-transform: uppercase;
    padding: 1em 4em;
    width: inherit;
    font-size: 0.89rem;
    font-weight: bold;
    margin-top: 3rem;
}

.formgroup .btn:hover {
    background-color: var(--purplelight);
    cursor: pointer;
}

.formgroup .btn:disabled {
    background-color: var(--purplelight);
    cursor: auto;
}

div#listcontacts,
.formgroup input[type="text"], 
.formgroup input[type="password"], 
select, textarea {
    padding: 0.5em;
    background-color: var(--greylight);
    border: solid 1px var(--greydark);
    font-size: 1rem;
}
a.contact {
    padding: 5px 0;
    display: block;
}
a.contact.chosen {
    font-weight: bold;
}
.formgroup input[type='file'] {
    position: absolute;
    opacity: 0;
    z-index: -1;
    width: 10rem;
}

.formgroup.price input {
    width: calc(100% - 1.5rem);
    position: relative;
    right: -1.5rem;;
}

.formgroup.price label:after {
    content: "£";
    position: absolute;
    left: 0;
    top: 4.7rem;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1em;;
}

.formgroup a.purple {
    color: var(--purpledark);
    font-weight: bold;
}
.formgroup.error a.purple {
    color: var(--reddark);
}

a.fakefileinput {
    position: absolute;
    height: calc(1em + 0.8rem);;
    right: 0rem;
    bottom: 0;
    font-size: 0.8rem;
    padding: 0 2rem;
    border: solid 1px var(--greydark);
    border-top: none;
    padding-top: 0.7em;
}

.tooltiplink {
background-image: url(/assets/images/question.png);
    height: 1rem;
    width: 1rem;
    display: inline-block;
    background-size: contain;
    margin: 0.2rem 1rem;
    cursor: pointer;
    vertical-align: text-bottom;
}

.tooltip.section {
    position: absolute;
    z-index: 10;
    background-color: #ffffff;
    max-width: 100%;
    box-shadow: #044d2b 12px 12px 37px;
}
.tooltip.section:before {
content: "X";
    font-size: 1.5rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
    line-height: 1.5rem;
}


span.error {
    color: var(--reddark);
    line-height: 1.5em;
    float: right;
    text-align: right;
    margin-top: 1em;
    line-height: 3rem;
}
span.error.notop {
    margin-top: 0.2em;
}
span.error.overall {
    text-align: left;
}

.checkgroup input[type="radio"] {
    width: auto;
    margin-bottom: 1rem;
}
.checkgroup label {
    padding: 0;
    margin: 0;
    line-height: 1.6rem;
    margin-right: 2rem;
}

.fullwidth {
    width: 100% !important;
}
.onehalf {
    width: 49.5%;
    display: inline-block;
}

.centre{
    text-align: center !important;
}

.alone{
    display: block;
}

.fright{
    float:right;
}

/* ----- FOOTER STUFF   ----  */
.footer {
    font-size: 0.89rem;
}
.footer>div {
    padding: 1rem;
}

.popup{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: rgba(0,0,0,0.7);
}

.popup .section {
    display: inline-block;
    box-shadow: #044d2b 12px 12px 37px;
    background-color: #ffffff;
    margin: 8vh 0;
    position: relative;
    padding: 0;
}
.popup.tsandcs .section {
    height: 84vh;
}
.popup .contents:before {
    display: inline-block;
    content: "X";
    font-size: 2rem;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    cursor: pointer;
    line-height: 2rem;
}

.contents {
    overflow: auto;
    position: relative;
    padding: 1rem;
    margin: 5px;
}
.popup.tsandcs .contents {
    height: calc(100% - 10px);
}

input.tsandcs {
    float: left;
    width: auto;
}
.formgroup label.tsandcslabel {
    float: left;
    line-height: 1rem;
    margin-top: 0.2em;
    max-width: 95%;
}
.formgroup label.tsandcslabel.addorder {
    white-space: nowrap;
}