body {
    font-family: Arial, Tahoma;
    font-size: 14px;
    margin: 4px;
    height: 100%;
    height: -webkit-fill-available;
    background-color: #FFFFFF;
}

html {
    height: 100%;
    height: -webkit-fill-available;
}

form {
    max-width: 960px;
    margin: 0 auto;
    color: #000000;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 2px;
    border-color: #AAAAAA;
    padding: 8px;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    position: relative;
}

p {
    margin: 20px 0px;
    color: #000000;
}

sup {
    font-size: 8px;
}

input {
    background-color: #FFFFFF;
    color: #000000;
}

#divPleaseWait {
    border-style: solid;
    border-width: 2px;
    border-color: #F0BF4E;
    background-image: url(images/pleasewait.png);
    position: fixed;
    width: 200px;
    height: 50px;
    font-size: 24px;
    padding: 20px 0px 0px 0px;
    display: none;
    margin-top: -15px;
    margin-left: 0px;
    top: 50%;
    left: calc(50% - 100px);
    text-align: center;
    border-radius: 10px;
    z-index: 9999;
}



.offline {
    background-image: url(images/maintenance.gif);
    background-position: 4px 4px;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    padding: 10px 10px 10px 140px;
    min-height: 100px;
}

.noshow {
    display: none;
}



.clearboth {
    clear: both;
}

li ~ li {
    margin-top: 0.2em !important;
}

input[type="text"], input[type="date"], input[type="password"], select, textarea {
    font-size: 100%;
    border-style: solid;
    border-color: #888888;
    border-width: 1px;
    font-family: Arial;
    padding: 2px;
}

.pageheader {
    background-color: #4472C4;
    color: #FFFFFF;
    padding: 5px;
    min-height: 57px;
    position: relative;
    background-image: url(Images/reading.PNG);
    background-repeat: no-repeat;
    background-position: right 60px top;
}

.gradientholder {
    position: absolute;
    width: calc(100% - 410px);
    left: 0px;
    top: 0px;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(to right, #2556ac, #4472C4);
}


.titleholder {
    position: absolute;
    top: 5px;
    left: 7px;
}


.userholder {
    position: absolute;
    top: 5px;
    right: 5px;
}

.logoffholder {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.subtitle {
    display: block;
    font-size: 16px;
}

.titleskillset {
    position: absolute;
    left: 4px;
    bottom: 4px;
    font-size: 18px;
    width: 120px;
    text-align: center;
    background-color: #123677;
    padding-top: 1px;
    border-radius: 8px;
}

.headerbar {
    position: relative;
    background-color: #565656;
    font-size: 16px;
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 0px;
}



.headerinfo {
    width: calc(100% - 100px);
    margin-top: 2px;
    padding-bottom: 4px;
    font-size: 18px;
    color: #222222;
}

.headerbutton {
    padding: 4px 12px 3px 12px;
    background-color: #565656;
    border-style: none;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
}

    .headerbutton:hover {
        background-color: #727272;
    }

    .headerbutton:disabled {
        color: #AAAAAA;
    }

        .headerbutton:disabled:hover {
            background-color: #888888;
        }

.rightbutton {
    position: absolute;
    right: 0px;
    color: #FFFFFF;
    text-decoration: none;
}

.pagefooter {
    color: #FFFFFF;
    padding: 4px;
    position: absolute;
    bottom: 8px;
    width: calc(100% - 24px);
    background-color: #4472C4;
}

.mainarea {
    overflow: hidden;
    background-color: #ffffff;
    padding: 0px 0px 20px 0px;
    margin-bottom: 64px;
}

.cvInfo {
    margin: 10px 0px 10px 0px;
    display: block;
    padding: 5px 5px 0px 40px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 5px;
    background-color: #FAFAFA;
    background-image: url(images/exclaimorange.gif);
    background-repeat: no-repeat;
    background-position: 4px 8px;
}

    .cvInfo li {
        margin-top: 2px !important;
        line-height: 1.2em !important;
    }


h1 {
    font-size: 22px;
    margin-top: 14px;
    margin-bottom: 10px;
}

.pageheader h1 {
    font-weight: normal;
}


h2 {
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 20px;
}

h3 {
    font-size: 18px;
    margin-bottom: 8px;
    margin-top: 14px;
}

h4 {
    font-size: 16px;
    margin-bottom: 6px;
}

h5 {
    font-size: 14px;
    margin-bottom: 4px;
}

.confirm {
    background-image: url(images/exclaimorange.gif);
    background-position: center 4px;
    background-repeat: no-repeat;
    margin-top: 10px;
    padding-top: 50px;
    text-align: center;
}

.hrseparator {
    width: 95%;
    margin-top: 20px;
    border-width: 1px 0px 0px 0px;
    border-color: #AAAAAA;
    margin-bottom: 5px;
}




.strongtext {
    font-weight: bold;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
    right: 0px;
}

.questionholder {
    clear: both;
    padding-top: 12px;
}

    .questionholder p {
        margin-top: 0px !important;
        margin-bottom: 15px;
    }

.questionmain {
    padding-right: 20px;
    width: 200px;
    float: left;
}

.questionsmall {
    padding-right: 10px;
    padding-left: 10px;
    width: 150px;
    float: left;
}



.questionsub {
    display: block;
    margin-left: 20px;
    font-size: 12px;
}

.questioninline {
    display: inline-block;
    padding-right: 10px;
    padding-left: 15px;
    min-width: 50px;
}

.questioninlinewide {
    min-width: 93px;
    display: inline-block;
}


.textboxholder {
    overflow: hidden;
    display: block;
}

.textboxholdersmall {
    vertical-align: top;
    width: 270px;
    display: inline-block;
}

.textboxholdermultiline {
    display: block;
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.fulltextbox, .fullquestion {
    width: 98%;
}

.dropdownadapt {
    max-width: 98%;
}

.smalltextbox {
    width: 145px;
}

.datetextbox {
    width: 120px;
}

.optiontextbox {
    width: 80px;
}


.interventiondropdown {
    width: 126px;
}

.interventiondropdownwide {
    width: 167px;
}

.valuetextbox {
    width: 60px;
}

.numbertextbox {
    width: 44px;
}

.hidetext label {
    width: 1px;
    display: none;
}


.smalltd {
    width: 35px;
}

.widetd, .optiontd {
    width: 70px;
}

.widertd {
    width: 90px;
}

.midlistbox, .midtextbox {
    width: 50%;
    min-width: 250px;
}

.widetextbox {
    width: 85%;
    min-width: 250px;
}

.smalllistbox {
    width: 150px;
}

.monthlistbox {
    width: 152px;
}

.separator {
    padding-left: 2px;
    padding-right: 2px;
}

.probelistbox, yearlistbox {
    width: 75px;
}

.checkboxblock {
    padding-left: 20px;
    display: block;
    text-indent: -20px;
    margin-bottom: 2px;
}

.checkboxinline {
    display: inline-block;
    margin-right: 50px;
}

.checkboxinlinesmall {
    display: inline-block;
    margin-right: 20px;
}

.checkboxinlinesmallest {
    display: inline-block;
    margin-right: 1.2px;
}

.checkboxnolabel {
    display: inline-block;
    padding-left: 15px;
}

.checkboxskillword {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.checkboxskillnumber {
    display: inline-block;
    min-width: 60px;
    margin-right: 10px;
}

    .checkboxskillnumber label {
        display: block;
        width: 20px;
        text-align: center;
    }


.groupme {
    display: inline-block;
    margin-bottom: 5px;
}

.smalltext {
    font-size: 12px;
    color: #444444;
}

.requiredtext {
    color: #AAAAAA;
}

.greentext {
    color: #006600;
}

.inlineblock {
    display: inline-block;
}

.infotext {
    display: inline-block;
    color: #444444;
    font-size: 12px;
    padding-left: 10px;
}

.infotextblock {
    display: block;
    color: #444444;
    font-size: 12px;
    padding: 5px 0px 0px 10px;
}



.infobox {
    display: block;
    margin: 5px 0px 20px 0px;
    min-height: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    background-color: #FAFAFA;
    padding: 5px 5px 5px 50px;
    font-size: 14px;
    background-image: url(images/info.gif);
    background-position: 5px 5px;
    background-repeat: no-repeat;
}

.textboxholder .infobox {
    margin: 0px 12px 0px 0px;
}

.infohighlight {
    padding-left: 40px;
    color: #00AA00;
}

.marginright {
    margin-right: 100px;
}

.marginrightmid {
    margin-right: 78px;
}

.marginrightsmall {
    margin-right: 20px;
}

.marginbottomsmall {
    margin-bottom: 5px;
}

.charactersused {
    font-size: 12px;
    color: #008800;
    display: inline-block;
    margin-left: 40px;
}

/* Skill highlight styles */
.skillhighlight {
    text-decoration: underline;
}

.reviewwordsholder .skillhighlight {
    text-decoration-thickness: 2px;
}
/* End of Skill highlight styles */

/* button Styles */

.buttonholder {
    display: block;
    margin-top: 15px;
    text-align: right;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: #AAAAAA;
    padding-top: 5px;
}

.buttonholdertall {
    clear: both;
    margin-bottom: 8px;
}

.standardbutton, .deletebutton {
    border-style: none;
    border-radius: 4px;
    min-width: 140px;
    background-color: #4444AA;
    color: #FFFFFF;
    margin-left: 20px;
    cursor: pointer;
    height: 28px;
    font-size: 15px;
}

    .standardbutton:hover {
        background-color: #2373CC;
    }

.standardbuttonsmall {
    width: 60px;
}

.hrefbutton, .hrefbutton:hover, .hrefbutton:visited {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    text-decoration: none;
    color: #FFFFFF;
    height: 14px;
    padding: 2px 5px 4px 5px;
    margin: 4px 0px 2px 5px;
    width: 90px;
    min-width: 90px;
}

.shortbutton {
    width: 80px;
    margin-left: 10px;
}

.midbutton {
    width: 100px;
    margin-left: 10px;
}


.greenbutton {
    background-color: #388b29;
}

    .greenbutton:hover {
        background-color: #3fbd29;
    }


.orangebutton {
    background-color: #a86224;
}

    .orangebutton:hover {
        background-color: #d08441;
    }

.purplebutton {
    background-color: #8f3178;
}

    .purplebutton:hover {
        background-color: #b14b98;
    }


.greybutton {
    background-color: #305566;
    margin-left: 0px;
    margin-right: 20px;
}

    .greybutton:hover {
        background-color: #41748B;
    }

.redbutton {
    background-color: #A53E29;
}

    .redbutton:hover {
        background-color: #792D1E;
    }

.lightbluebutton {
    background-color: #506284;
}

    .lightbluebutton:hover {
        background-color: #6f82a5;
    }

.deletebutton {
    background-color: #A53E29;
    min-width: 80px;
    margin-right: 150px;
}

    .deletebutton:hover {
        background-color: #792D1E;
    }

    .standardbutton:disabled, .deletebutton:disabled {
        background-color: #AAAAAA;
    }

.smallbutton {
    margin-left: 24px;
    width: 80px;
    height: 20px;
}

.narrowbutton {
    margin-left: 0px;
    margin-top: 0px;
    width: 120px;
    height: 22px;
}

.logbutton {
    border-style: none;
    border-radius: 4px;
    background-color: #29318d;
    color: #FFFFFF;
    margin-left: 20px;
    cursor: pointer;
    font-size: 15px;
    width: 60px;
    height: 20px;
}

    .logbutton:hover {
        background-color: #3c44a0;
    }

.loginbutton {
    margin-right: 10px;
}

.linkbutton {
    text-decoration: none;
    color: #FFFFFF;
    display: inline-block;
    vertical-align: middle;
    width: 160px;
    height: 22px;
    text-align: center;
    padding-top: 3px;
    margin-left: 0px;
}

@media screen and (max-width:826px) {
    .linkbutton {
        margin-left: -15px;
    }
}


/* end of button styles */

/* table styles */

.resultsholder {
    padding-top: 10px;
    padding-bottom: 10px;
}

.detailstable {
    width: 100%;
    font-size: 14px;
}

    .detailstable th {
        text-align: left;
        background-color: #e0ebff;
    }

    .detailstable tr {
        vertical-align: top;
        min-height: 20px;
    }


    .detailstable tbody tr:nth-child(odd) {
        background-color: #F4F4F4;
    }



.extracontrols {
    display: none;
}

@media screen and (min-width:790px) {
    .extendedtable tbody tr:hover {
        background-color: #fffff6;
    }

        .extendedtable tbody tr:hover .extracontrols {
            display: block;
        }
}


/* end of table styles */

/* Pager Styles*/

.pagecontrolstop {
    display: block;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    padding-bottom: 4px;
    border-color: #888888;
}

.pagecontrolsbottom {
    display: block;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    padding-top: 4px;
    border-color: #888888;
}

.resultsheader {
    font-size: 120%;
    font-weight: bold;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}

.centreme {
    text-align: center;
    clear: both;
    display: block;
}

.pagernolink {
    color: #000000;
    margin: 1px 5px 1px 5px;
}

.pager, .pager:visited {
    display: inline-block;
    margin: 1px 5px 1px 5px;
    color: #888888;
}

    .pager:hover {
        color: #AAAAAA;
    }

/* End Pager Styles*/



/* Test Styles */

.testheader {
    font-size: 16px;
    color: #444444;
    background-color: #F1F1F1;
    margin-top: 4px;
    margin-bottom: 10px;
    padding: 4px 2px;
    display: table;
    width: 100%;
}

.testheadertitle {
    display: table-cell;
    white-space: nowrap;
    padding-right: 10px;
    width: 150px;
}

.testheaderdesc {
    display: table-cell;
}

.testheadercode {
    display: table-cell;
    text-align: right;
}


.testwordholder {
    display: block;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.testwordarea {
    display: block;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    background-color: #fdfdac;
    padding: 20px 0px;
    font-size: 120px;
    text-align: center;
    height: 200px;
    vertical-align: middle;
}


.testwordareagrey {
    background-color: #FCFCFC;
}

.testcolour {
    height: 95%;
    width: 80%;
    margin: 0 auto;
    background-color: #000000;
    border-style: solid;
    border-radius: 20px;
    color: #FFFFFF;
}


.testword {
    line-height: 140px;
}

.testwordordinal {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #666666;
    font-size: 20px;
}

.testinteractive {
    text-align: left;
    padding-left: 10px;
    padding-top: 45px;
}

.testinteractivenumeral {
    text-align: left;
    padding-left: 50px;
    padding-top: 1px;
    font-size: 140px;
    line-height: 200px;
}

.testwordbase {
    font-size: 26px;
    margin-top: 40px;
}

.testwordsub {
    display: inline-block;
    width: 19%;
    text-align: center;
}

.testresponse {
    color: #0000AA;
}

.testinterface {
    width: 100%;
    text-align: center;
}

.testcontrolholder {
    display: inline-block;
    margin: 0 auto 30px auto;
    width: calc(100% - 300px);
    min-width: 340px;
    vertical-align: top;
}

.testcontrols {
    display: block;
    margin-top: 60px;
}

.testbutton {
    border-style: none;
    border-radius: 4px;
    background-color: #008800;
    margin: 0px 10px 20px 10px;
    color: #FFFFFF;
    min-width: 140px;
    height: 36px;
    font-size: 22px;
    box-shadow: 5px 5px 5px #CCCCCC;
    cursor: pointer;
}

.testredbutton {
    background-color: #880000;
}

.testbluebutton {
    background-color: #000088;
}

.testorangebutton {
    background-color: #ef8718;
}

.testsmallbutton {
    background-color: #000088;
    width: 80px;
    height: 25px;
    font-size: 17px;
    margin: 0px 5px;
}

.testbutton:hover {
    opacity: 0.8;
}

.testbutton:disabled {
    background-color: #CCCCCC;
}

.testmathcontrol {
    width: 250px;
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    padding: 10px 0px 0px 10px;
    text-align: left;
    margin-left: 30px;
    margin-top: 20px;
    vertical-align: top;
    display: none;
}

.testmathbutton {
    border-style: solid;
    border-color: #888888;
    border-width: 2px;
    font-size: 26px;
    padding: 5px;
    border-radius: 8px;
    width: 70px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
}

.testspellingcontrol {
    display: none;
    width: 710px;
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    padding: 10px 0px 0px 10px;
    text-align: left;
    vertical-align: top;
    margin: 20px auto 0px auto;
}

.testspellingbutton {
    border-style: solid;
    border-color: #888888;
    border-width: 2px;
    font-size: 22px;
    padding: 5px;
    border-radius: 8px;
    width: 50px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
}

.testspellingcontrol button {
    font-family: inherit;
    font-size: 24px;
}

.testspellingmiddleline {
    margin-left: 20px;
}

.testspellingbottomline {
    margin-left: 40px;
}


.testbackbutton {
    background-color: #e19e9e;
}

.testokbutton {
    background-color: #9ee1ac;
}

.testnumeracygroup {
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    border-radius: 20px;
    background-color: #F8F8F8;
    display: inline-block;
    position: relative;
    width: 198px;
    height: 198px;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
}

.testnumeracyone {
    position: absolute;
    left: 5px;
    top: 54px;
    width: 100%;
    font-size: 90px;
    line-height: 98px;
    letter-spacing: 12px;
    text-align: center;
}

.testnumeracytwo {
    position: absolute;
    left: 5px;
    top: 6px;
    width: 100%;
    font-size: 90px;
    line-height: 98px;
    letter-spacing: 12px;
    text-align: center;
}

.testwordarea .testnumeracyanswer {
    border-style: solid;
    border-width: 1px;
    background-color: #EEFFEE;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
}

.testwordarea .labelnumeracyanswer {
    display: block;
    margin-top: -20px;
}

    .testwordarea .labelnumeracyanswer .numeracytext {
        font-size: 40px;
        display: block;
        margin-top: -26px;
    }


@media screen and (max-width:700px) {
    .testwordarea {
        font-size: 80px;
    }

    .testwordbase {
        font-size: 20px;
        margin-top: 45px;
    }
}

@media screen and (max-width:550px) {
    .testwordbase {
        font-size: 17px;
    }

    .testwordsub {
        width: 18%;
    }

    .testheader {
        font-size: 14px;
        font-weight: normal;
        color: #000000;
    }
}

@media screen and (max-width:450px) {
    .testwordbase {
        font-size: 15px;
    }

    .testcontrols {
        margin-top: 40px;
    }
}
/* End of test styles*/

/* Recent assessment styles */

.recentassessmentholder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    width: 100%;
}
.recentholder {
    vertical-align: top;
}

.recentholderpositive {
    border-style: solid;
    border-width: 0px 0px 6px 0px;
    border-color: #00AA00;
}

.recentholdernegative {
    border-style: solid;
    border-width: 0px 0px 6px 0px;
    border-color: #DDDDDD;
}

.recentholderneutral {
    border-style: solid;
    border-width: 0px 0px 6px 0px;
    border-color: #888888;
}



.recentlink {
    max-width:110px;
    border-style: none;
    text-decoration: none;
}

.recentlinkimage {
    border-style: none;
    color: #4472C4;
}

.fa-file-text:before {
    font-size: 36px;
}

.fa-file-text-o:before {
    font-size: 42px;
    color: #444444;
    margin-right: 10px;
}

.fa-envelope-o {
    margin-top: -7px;
}

    .fa-envelope-o:before {
        font-size: 52px;
        color: #444444;
        margin-right: 10px;
    }

.recentheader {
    border-style: solid;
    border-width: 1px;
    border-color: #777777;
    text-align: center;
    color: #FFFFFF;
    background-color: #888888;
}

.recentheaderA {
    background-color: #4444AA;
}

.recentheaderB {
    background-color: #b1964b;
}

.recentheaderC {
    background-color: #4b8fb1;
}

.recentheaderD {
    background-color: #b14b98;
}

.recentheaderG {
    background-color: #649121;
}


.recentdetail {
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #888888;
    text-align: center;
    background-color: #F8F8F8;
    color: #222222;
}

.resultneutral {
    color: #000000;
}

.resultpositive {
    color: #008800;
}

.resultnegative {
    color: #880000;
}

/* SEARCH OPTIONS */
.searchcontrols {
    vertical-align: top;
    background-color: #FEFAEC;
    border-style: solid;
    border-width: 1px;
    border-color: #D2AF44;
    padding: 0px 5px 5px 5px;
    margin-top: 4px;
    position: relative;
}

.searchblock {
    display: inline-block;
    vertical-align: top;
}

.searchoption {
    display: block;
    padding-top: 5px;
    margin-right: 20px;
}

.inlineblock .searchoption {
    display: inline-block;
}

.searchoptioncheck {
    margin-left: -4px;
    margin-right: 16px;
}

.searchoptionlabel {
    display: inline-block;
    margin-right: 5px;
    width: 100px;
}

.searchoptionlabelsmall {
    width: 80px;
}

.searchoptionpadleft {
    padding-left: 48px;
}

.searchoptionpadright {
    margin-right: 70px;
}

.searchdropwide, .searchdropwider, .searchdropfull {
    width: calc(100vw - 190px);
}

.smallpadleft {
    padding-left: 3px;
}

.padright {
    padding-right: 20px;
}

.searchoptionsmall {
    min-width: 71px;
}

.settingdropdown {
    width: 300px;
}

.smalldropdown {
    width: 70px;
}

.numberdropdown {
    width: 40px;
}

.searchbuttonholder {
    display: block;
    text-align: right;
}

.searchbuttonholderinline {
    position: absolute;
    bottom: 6px;
    right: 1px;
}


.searchbutton {
    margin-top: 5px;
    border-style: none;
    border-radius: 4px;
    width: 60px;
    background-color: #459a34;
    padding: 3px 8px;
    color: #FFFFFF;
    cursor: pointer;
    margin-right: 5px;
}

    .searchbutton:hover {
        background-color: #56c73f;
        border-color: #56c73f;
    }

    .searchbutton:disabled {
        background-color: #CCCCCC;
    }


.searchbox {
    width: 470px;
}

.searchboxsmall {
    width: 165px;
}

.searchdrop {
    width: 220px;
}

.paddrop {
    margin-right: 119px;
}

.descfull {
    display: inline-block;
}

.descshort {
    display: none;
}



.noresults {
    display: block;
    padding: 16px 0px 0px 50px;
    min-height: 40px;
    background-image: url(images/exclaimorange.gif);
    background-repeat: no-repeat;
    background-position: 4px 14px;
    margin-left: 20px;
    margin-top: 20px;
}

/* END OF SEARCH OPTIONS */

/* password styles */



.passwordarea, .didyouknowholder {
    width: 440px;
    margin: 50px auto;
    border-radius: 8px;
    box-shadow: #E4E4E4 5px 5px;
   
}

    .passwordarea h2, .didyouknowholder h3 {
        background-color: #345eaa;
        color: #ffffff;
        margin: 0px;
        padding: 5px;
        border-style: solid;
        border-width: 1px 1px 0px 1px;
        border-radius:8px 8px 0px 0px;
        border-color: #000000;
    }

.passwordbody {
    color: #000000;
    padding: 0px 10px 10px 10px;
    border-radius: 10px;
    position: relative;
    background-color: #fafafa;
    background-image: linear-gradient(to bottom right, #FFFFFF, #F2F2F2);
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-radius: 0px 0px 8px 8px;
    border-color: #000000;
}

    .passwordbody .textboxholdersmall {
        width: 238px;
    }

.passwordfooter {
    position: absolute;
    bottom: 2px;
    right: 20px;
    font-size: 10px;
    color: #888888;
}

.blockcolour {
    background-color: #F1F1F1;
}

.passwordbox {
    width: 300px;
}

.accountbutton {
    color: #FFFFFF;
    border-style: none;
    border-radius: 2px;
    padding: 2px 10px;
    background-color: #444444;
    height: 20px;
    cursor: pointer;
}

    .accountbutton:hover {
        background-color: #888888;
    }

.passwordinfo {
    color: #222222;
    font-size: 12px;
    padding-left: 10px;
}

/* end password styles */

/* Privacy block styles */
.privacyblock {
    font-size: 14px;
    border-style: solid;
    border-radius: 4px;
    border-color: #888888;
    border-width: 1px;
    width: 90%;
    margin: 80px auto 0px auto;
    padding: 5px;
    background-color: #FCFCFC;
}

.privacytitle {
    font-weight: bold;
}
/* End of privacy block styles*/

/* Did you know styles */

.didyouknowholder {
    width: 80%;
}

    .didyouknowholder h3 {
        background-color: #58b5b2;
        color: #f4f4f4;
    }

.didyouknowimageholder {
    float: left;
    height: 80px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.didyouknowimage {
    max-height: 100%;
}

.didyouknowbody {
    line-height: 20px;
    line-height: 20px;
    min-height: 80px;
    padding: 5px;
    background-color: #f2fdfc;
    background-image: linear-gradient(to bottom right, #FFFFFF, #f2fdfc);
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-radius: 0px 0px 8px 8px;
    border-color: #000000;
}

    .didyouknowbody .standardbutton {
        padding: 4px;
        margin-left: 0px;
    }

/* End of Did you know styles */

/* Resizing styles */
@media screen and (max-width:915px) {
    .pageheader h1 {
        font-size: 18px;
    }

    .descfull {
        display: none;
    }

    .descshort {
        display: inline-block;
    }
}

@media screen and (max-width:785px) {
    .titlesub {
        display: block;
    }

    .pageheader {
        height: 64px;
    }


    .titleskillset {
        font-size: 16px;
        width: 110px;
        bottom: 3px;
    }

    .widertd {
        width: 1px;
        display: none;
        overflow: hidden;
    }
}

@media screen and (max-width:650px) {
    .marginright {
        margin-right: 20px;
    }

    .standardresize {
        padding: 0px 10px;
        width: auto;
        min-width: 60px;
    }

    .searchdropreport {
        width: calc(100vw - 150px);
    }

    .searchoption {
        display: inline-block;
    }

    .smalltd {
        width: 1px;
        display: none;
        overflow: hidden;
    }
}

@media screen and (max-width:600px) {

    .widetd {
        width: 1px;
        display: none;
        overflow: hidden;
    }

    .labelholder {
        float: none;
        width: auto;
        overflow: hidden;
        display: block;
    }


    .textboxholder {
        overflow: visible;
        display: block;
        margin-left: 20px;
        margin-top: 5px;
    }


    .textboxholderfull {
        overflow: visible;
        display: block;
        margin-top: 2px;
    }

    .questionsmall, .questionmain {
        display: block;
        padding-right: 0px;
        width: auto;
        float: none;
    }

    .standardbutton {
        margin-left: 10px;
        padding: 0px 10px;
        width: auto;
        min-width: 60px;
        margin-bottom: 10px;
    }

    .smallbutton {
        margin-left: 25px;
        width: 80px;
        min-width: 80px;
        height: 20px;
    }

    .attachmentlist {
        margin: 20px 0px 10px 40px;
    }

    .infoblock, .indentblock {
        margin-left: 25px;
    }

    .passwordarea {
        width: calc(100% - 80px);
        min-width: 320px;
    }

    .adminbuttonc {
        display: none !important;
    }

    .loginbutton {
        margin-right: 14px;
    }

    .passwordarea .questionmain, .passwordarea .questionfull {
        display: inherit;
        float: left;
        width: 80px;
    }

    .passwordarea .textboxholdersmall {
        width: calc(98% - 100px);
    }

    .passwordarea .fulltextbox {
        margin-left: 10px;
        width: calc(100% - 12px);
    }

}

@media screen and (max-width:560px) {
    .pageheader {
        background-repeat: no-repeat;
        background-position: right 80px bottom;
        background-size: 50%;
    }

    .gradientholder {
        display: none;
    }
}

@media screen and (max-width:530px) {
    .adminbuttonb {
        display: none !important;
    }
}

@media screen and (max-width:480px) {
    .searchboxsmallvariable {
        width: calc(100vw - 310px);
    }
}


@media screen and (max-width:470px) {
    .inlineblock {
        display: block;
    }

   
    .passwordarea {
        margin: 35px auto 45px auto;
    }

        .passwordarea h2 {
            font-size: 16px;
        }

    .mainarea {
        margin-bottom: 70px;
    }

    .pageheader {
        min-height: 38px;
    }

        .pageheader h1 {
            font-size: 16px;
        }


    .privacyblock {
        font-size: 12px;
        width: 95%;
        margin: 0px auto 0px auto;
    }

    .didyouknow {
        width: 90%;
    }


    .userheader {
        display: none;
    }

    .titleskillset {
        margin-top: 8px;
    }
}

@media screen and (max-width:440px) {
    .headerbutton {
        padding: 4px 6px 3px 6px;
    }

    .searchoption {
        margin-right: 10px;
    }
}

@media screen and (max-width:420px) {
    .titleskillset {
        display: none;
    }
}

@media screen and (max-width:400px) {
    .passwordarea {
        width: 276px;
        margin: 20px auto 25px auto;
    }

    .titleskillset {
        display: none;
    }
}

@media screen and (max-width:380px) {
    .adminbuttona {
        display: none !important;
    }
}






/* End of resizing styles */

/* Access code styles */
.accesscodeholder {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 4px;
}

.accesscode {
    font-size: 28px !important;
    padding: 4px;
    margin: 0px 3px;
    border-style: solid;
    border-color: #888888;
    border-radius: 10px;
    height: 40px;
    width: 30px;
    text-align: center;
}

/* Report styles */

.reportholder {
    margin-top: 5px;
    background-color: #FDFDFD;
    border-collapse: collapse;
    width: 100%;
    max-height: 310px;
    overflow-x: auto;
    overflow-y: auto;
}

    .reportholder::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .reportholder::-webkit-scrollbar-thumb {
        background: #646464;
        border-radius: 10px;
    }

    .reportholder::-webkit-scrollbar-track {
        background: #f1f1f1;
        width: 10px;
        height: 10px;
    }

.reporttable {
    border-collapse: collapse;
}

    .reporttable tr td:first-child {
        position: sticky;
        left: 0px;
        z-index: 7999;
    }

    .reporttable a, .reporttable a:visited {
        text-decoration: none;
        color: #000000;
    }



    .reporttable td {
        border-style: solid;
        border-width: 1px;
        padding: 2px;
        border-color: #AAAAAA;
    }

.reportnone {
    background-image: url(images/exclaimorange.gif);
    background-position: 2px 2px;
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-top: 8px;
    margin-top: 20px;
    margin-left: 50px;
    min-height: 40px;
}

.reportwait {
    background-image: url(images/report2.gif);
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0px auto;
    padding-top: 260px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* End of Report styles */

/* Graph styles */

.graph {
    display: block;
    margin-bottom: 15px;
    margin-right: 50px;
    width: 100%;
}

    .graph h3 {
        font-size: 17px;
        color: #444444;
        margin-bottom: 12px;
    }

.graphb {
    display: block;
    margin-bottom: 0px;
    margin-right: 50px;
    width: 100%;
}

.graph h3 {
    font-size: 17px;
    color: #444444;
    margin-bottom: 6px;
}

.grapharea {
    position: relative;
}

.graphscroller {
    display: inline-block;
    width: calc(100% - 253px);
    vertical-align: top;
    overflow-x: scroll;
    height: 395px;
}

.graphscrollerb {
    display: inline-block;
    width: calc(100% - 80px);
    vertical-align: top;
    overflow-x: hidden;
    height: 370px;
    overflow-y: hidden;
}

.graphholder {
    height: 320px;
    min-width: 255px;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #C8C8C8;
    display: inline-block;
    vertical-align: top;
    background-image: url('images/grid.gif');
    padding-right: 14px;
}

.graphy {
    display: inline-block;
    vertical-align: top;
}

.graphylabel {
    display: block;
    width: 40px;
    text-align: right;
    padding-right: 2px;
    font-size: 12px;
    color: #444444;
    height: 18px;
    margin-top: -6px;
    margin-bottom: 28px;
}

.graphylabeltall {
    margin-bottom: 52px;
}

.graphyinfo {
    display: inline-block;
    height: 320px;
    width: 15px;
    position: relative;
    text-align: center;
}

.graphyinfolabel {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    padding-top: 20px;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    /* Firefox */
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    /* IE */
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    font-size: 14px;
    color: #888888;
}

.graphsubtext {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    margin-left: 60px;
    color: #444444;
}

.nomargin {
    margin-bottom: 0px;
}

.graphx {
    clear: both;
    display: block;
    margin-left: 67px;
}

.graphxlabel, .graphxlabelsmall, .graphxlabelsmallest, .graphxlabelnarrowa, .graphxlabelnarrowb {
    display: inline-block;
    width: 50px;
    padding-top: 4px;
    text-align: center;
    color: #444444;
    font-size: 14px;
    height: 50px;
    overflow: hidden;
}

.graphxlabelsmall {
    font-size: 12.8px;
}

.graphxlabelsmallest {
    font-size: 11px;
}


.graphxlabelnarrowa {
    width: 40px;
}

.graphxlabelnarrowb {
    width: 30px;
}


.graphxlabeldate {
    display: block;
    font-size: 12px;
}

.graphcolumnholder {
    display: inline-block;
    margin-left: 10px;
}

.graphcolumnholdernospace {
    display: inline-block;
    margin-left: 1px;
}

.graphcolumn {
    display: flex;
    /*justify-content: flex-end;*/
    flex-direction: column-reverse;
    height: 320px;
}

.graphblock, .graphblocknarrowa, graphblocknarrowb {
    width: 50px;
    display: block;
    vertical-align: bottom;
}

.graphblocknarrowa {
    width: 40px;
}


.graphblocknarrowb {
    width: 30px;
}

.graphinline {
    display: inline-block;
    margin-left: 40px;
    width: 510px;
    vertical-align: top;
}

.graphinlinenarrow {
    width: 380px;
}

.graphkeyinline {
    display: inline-block;
    margin-left: 15px;
    width: 180px;
    vertical-align: top;
}

.graphkey {
    display: block;
    margin-top: 20px;
    padding: 10px 10px 5px 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA;
    vertical-align: top;
    background-color: #FFFFFF;
}

.graphkeyb {
    display: block;
    padding: 10px 10px 5px 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA;
    vertical-align: top;
    background-color: #FFFFFF;
    position: absolute;
    left: 80px;
    top: 5px;
    opacity: 0.7;
}

.graphkeyitem {
    display: block;
}

.graphkeyicon {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    height: 10px;
    width: 10px;
    vertical-align: top;
}

.graphkeyinfo {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    font-size: 12px;
}

.graphkeyinfotitle {
    display: inline-block;
    margin-bottom: 4px;
    color: #222222;
    width: 135px;
    font-weight: bold;
}

.graphkeyinfolabel {
    display: inline-block;
    color: #0000AA;
    width: 50px;
    margin-left: 20px;
}

.graphkeyinfovalue {
    display: inline-block;
    color: #00AA00;
    width: 30px;
    margin-right: 20px;
}

.graphoptions {
    display: block;
}

.graphoptionslabel {
    display: inline-block;
}

.graphoptionsweekly {
    width: 160px;
    vertical-align: top;
    display: inline-block;
}


.graphoptionscheckbox {
    display: inline-block;
    width: 40px;
    margin-left: -8px;
    margin-right: 5px;
}

.graphoptionscheckboxn {
    width: 35px;
}

.graphtext {
    position: absolute;
    display: block;
    width: 50px;
    text-align: center;
    padding-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
}

@media screen and (max-width:660px) {
    .graphkey {
        position: absolute;
        left: 80px;
        top: 5px;
        margin-top: 0px;
        opacity: 0.7;
    }

    .graphscroller {
        width: calc(100% - 80px);
    }
}

.graphblue {
    background-color: #3280C1;
}

.graphorange {
    background-color: #ef8718;
}

.graphgrey {
    background-color: #CCCCCC;
}

.graphred {
    background-color: #CC0000;
}

.graphgreen {
    background-color: #65c132;
}

.graphdblue {
    background-color: #32b1c1;
}


.graphhalf {
    width: 392px;
    display: inline-block;
    vertical-align: top;
}

.graphnarrow {
    width: 345px;
    display: inline-block;
    vertical-align: top;
}

    .graphnarrow .graphkeyb {
        width: 110px;
        left: 185px;
    }

    .graphnarrow .graphkeyinfotitle {
        width: 85px;
    }

.graphfull {
    width: 784px;
    display: inline-block;
}

.printform .graphscrollerb {
    width: inherit;
}

.graphhalf .graphholder {
    width: 300px;
}

.graphfull .graphholder {
    width: 692px;
}

.printform .headertext, .printform .basetext {
    font-size: 18px;
    background-color: #4472C4;
    color: #FFFFFF;
    padding: 5px;
    display: none;
}

.printform .headertext {
    background-image: url(Images/reading.PNG);
    background-repeat: no-repeat;
    background-position: right 5px top;
    background-size: 262px 60px;
}

.printform .headerall, .printform .baseall {
    display: block;
    position: relative;
}

.printform .headersmall {
    font-size: 16px;
    margin-top: 4px;
}

.printform .headeradditional {
    position: absolute;
    right: 5px;
    top: 3px;
    font-size: 14px;
}

.printform .basetext {
    font-size: 14px;
}

.printform .summaryholder {
    max-width: 795px;
    margin: 0px auto;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    padding: 4px;
    position: relative;
}

.printform .schoolinfo {
    display: block;
    position: absolute;
    top: 135px;
    left: 440px;
    width: 220px;
    font-size: 15px;
    font-weight: bold;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    color: #444444;
    padding: 5px;
}

.printform .schoolinfoheader {
    display: block;
    font-weight: normal;
    margin-top: 8px;
    font-size: 14px;
}

.printform .schoolinfoline {
    display: block;
    font-weight: normal;
    margin-left: 20px;
    margin-top: 2px;
    font-size: 12px;
}

.printonly {
    display: none;
}

@media print {


    .summaryholder, .graph {
        -webkit-print-color-adjust: exact;
    }

    .pagebreak {
        page-break-before: always;
    }

    .printonly {
        display: block;
    }


    .printform h3, .printform .pageheader, .printform .headerbar, .printform .headerinfo, .printform .skillsetbar, .printform .searchcontrols, .printform .buttonholder, .printform .pagefooter {
        display: none;
    }

    .printform .headertext, .printform .basetext {
        display: block;
    }

    .schoolsummary h3 {
        display: block;
        font-size: 16px;
        margin-bottom: 7px;
        margin-top: 7px;
    }

    .schoolsummary h4 {
        display: block;
        font-size: 15px;
        margin-bottom: 6px;
        margin-top: 6px;
    }

    .printform .summaryholder {
        max-width: 3000px;
        border-style: none;
        padding: 0px;
        margin: 0px;
    }


    .printform {
        max-width: 3000px;
        border-style: none;
        padding: 0px;
        overflow: hidden;
    }

        .printform .graphblock {
            width: 40px;
        }

        .printform .graphxlabel {
            width: 40px;
        }

        .printform .graphblocknarrowa {
            width: 32px;
        }

        .printform .graphblocknarrowb {
            width: 20px;
        }

        .printform .graphxlabelnarrowa {
            width: 32px;
        }

        .printform .graphxlabelnarrowb {
            width: 20px;
        }

        .printform .graphxlabeldate {
            font-size: 10px;
        }

        .printform .graphfull .graphcolumnholder {
            margin-left: 5px;
        }

        .printform .graphb {
            margin-right: 0px;
        }

        .printform .graphhalf {
            width: 340px;
        }

        .printform .graphscrollerb {
            height: 365px;
        }

    .graphhalf .graphholder {
        width: 260px;
    }

    .printform .graphfull {
        width: 695px;
    }

    .printform .graphsubtext {
        margin-top: 0px;
    }

    .graphcolumnholdernospace {
        margin-left: 2px;
    }

    .graphfull .graphholder {
        width: 615px;
    }
}

/* End of Graph styles */

/* Review word styles */

.reviewwordsholder {
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 39px;
    display: table;
    width: 100%;
}

    .reviewwordsholder .standardbutton, .sheetgenerator .standardbutton {
        vertical-align: top;
        width: 134px;
        margin-left: 10px;
        background-color: #506284;
        border-radius: 4px 16px 16px 4px;
    }

    .reviewwordsholder .standardbutton {
        margin-bottom: 4px;
    }

        .reviewwordsholder .standardbutton:hover, .sheetgenerator .standardbutton:hover {
            background-color: #8194b6;
        }

        .reviewwordsholder .standardbutton:disabled, .sheetgenerator .standardbutton:disabled {
            background-color: #AAAAAA;
        }

    .reviewwordsholder .standardbuttonsmall {
        display: none;
    }

.reviewwordsheader {
    display: table-cell;
    width: 95px;
    font-weight: bold;
    vertical-align: top;
    padding-top: 9px;
    border-style: solid;
    border-width: 1px 0px 1px 1px;
    border-color: #444444;
    border-radius: 20px 0px 0px 20px;
    padding-left: 10px;
    min-height: 28px;
    background-color: #506284;
    color: #FFFFFF;
}

.reviewwords {
    display: table-cell;
    vertical-align: top;
    padding: 2px 10px;
    border-style: solid;
    border-width: 1px 0px;
    border-color: #444444;
    background-color: #fdfff0;
}

.reviewwordstable {
    display: table;
}

.reviewwordsrow {
    display: table-row;
}

.reviewwordscategory {
    display: table-cell;
    width: 160px;
}

.reviewwordslist {
    display: table-cell;
}

.reviewwordsoptions {
    display: table-cell;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    border-radius: 0px 20px 20px 0px;
    border-color: #444444;
    width: 300px;
    text-align: right;
    vertical-align: top;
    padding-top: 5px;
    background-color: #fdfff0;
    padding-right: 5px;
}

.reviewwordsdropdown {
    vertical-align: top;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    width: 45px;
    height: 27px;
}


.reviewwordsdropdownmargin {
    margin-top: -4px;
}

.sheetgenerator {
    display: table;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: #444444;
    border-radius: 0px 0px 20px 20px;
    padding: 4px;
    background-color: #fdfff0;
    margin: -11px auto 0px auto;
    max-width: 560px;
}


.sheetgeneratoroptions {
    display: table-cell;
    width: 140px;
    text-align: right;
}

.sheetoption {
    display: table-cell;
    vertical-align: middle;
    padding-top: 5px;
    padding-left: 5px;
}

.sheetgenerator .standardbutton {
    border-radius: 4px 4px 16px 4px;
}


@media screen and (max-width:900px) {
    .reviewwordsholder .standardbutton, .sheetgenerator .standardbutton {
        width: 100px;
        margin-left: 5px;
    }

    .reviewwordsoptions {
        width: 150px;
        padding-right: 5px;
    }

        .reviewwordsoptions .reviewwordsdropdown {
            border-radius: 0px 16px 0px 0px;
        }
}
@media screen and (max-width:655px) {
    .sheetgenerator {
        margin: 5px auto 0px auto;
        border-width: 1px 1px 1px 1px;
        border-color: #444444;
        border-radius: 20px 20px 20px 20px;
    }

        .sheetgenerator .standardbutton {
            border-radius: 4px 16px 16px 4px;
        }

    .reviewwordsdropdownmargin {
        margin-top: -5px;
    }
}

    @media screen and (max-width:640px) {
        .reviewwordscategory {
            display: block;
            font-size: 16px;
        }

        .reviewwordslist {
            display: block;
            padding-bottom: 6px;
        }

        .sheetoption {
            display: table-cell;
            padding-left: 10px;
            vertical-align: top;
        }



        .sheetgenerator .standardbutton {
            height: 34px;
        }
    }

    /* End of Review word styles */

    /* Contact Form styles */
    .contactform {
        margin: 0px 3px 0px 0px;
    }

        .contactform h2 {
            font-size: 17px;
        }

        .contactform h3 {
            font-size: 15px;
        }

        .contactform p {
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .contactform a {
            color: #4444CC;
            text-decoration: none;
            font-weight: bold;
        }

            .contactform a:hover {
                text-decoration: underline;
                color: #5555DD;
            }

            .contactform a img {
                vertical-align: middle;
                margin-right: 10px;
                margin-left: 15px;
            }

    .documentlink {
        display: inline-block;
        width: calc(33% - 12px);
        min-width: 318px;
        background-color: #fefceb;
        border-style: solid;
        border-width: 1px;
        border-color: #AAAAAA;
        margin: 2px 5px;
    }

        .documentlink:hover {
            background-color: #fbfaf0;
            box-shadow: #AAAAAA 2px 2px;
        }

        .documentlink img {
            margin-left: 5px !important;
        }

    .documentlinkintro {
        display: block;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    /* End of Contact Form styles */


    /* Wordsheet styles */

    .wordform {
        max-width: 674px;
    }

    .wordsheet {
        width: 100%;
        font-family: Arial;
    }

    .wordsheetheader {
        min-height: 72px;
        background-color: #FFFFFF;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #444444;
        margin-top: -7px;
    }


    .wordsheetheaderimages {
        float: right;
        margin-left: 10px;
    }

    .wordsheetreference {
        display: block;
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        width: 120px;
        margin: 0 auto;
        text-align: center;
        color: #646464;
        font-size: 16px;
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        border-radius: 5px;
    }

    .wordsheetreferencesub {
        display: block;
        margin-top: 0px;
        font-size: 10px;
    }

    @media screen {
        .wordsheetreference {
            display: none;
        }
    }

    .wordsheetimage {
        display: inline-block;
        height: 50px;
        margin-left: 10px;
        vertical-align: top;
        margin-top: 8px;
    }

    .wordsheetlogo {
        display: inline-block;
        height: 64px;
        padding-top: 5px;
        vertical-align: top;
    }

    .wordsheetfooter {
        font-size: 10px;
        color: #888888;
        padding: 2px 2px 0px 2px;
        position: absolute;
        bottom: 2px;
        width: calc(100% - 24px);
    }

    .wordsheetheaderinstruction {
        display: block;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .wordsheettitle {
        font-size: 15px;
        display: inline-block;
        color: #444444;
        text-align: center;
        padding-top: 14px;
        width: calc(100% - 340px);
    }

    .wordsheettitlesub {
        display: none;
    }

    .wordsheettitlesubtext {
        display: block;
    }

    @media all and (max-width:880px) {
        .wordsheettitle {
            width: 100%;
            padding-top: 5px;
        }

        .wordsheettitlesub {
            display: inline-block;
        }

        .wordsheettitlesubtext {
            display: inline-block;
        }
    }


    .wordsheetsectionheader {
        text-decoration: underline;
        font-weight: bold;
        font-size: 16px;
        display: block;
        margin-bottom: 10px;
    }

    .wordsheetseparator {
        display: block;
        width: 98%;
        margin: 0px auto 5px auto;
    }

    .wordsheetdetail {
        font-family: ABeeZee, Comme, Opendyslexic, Cavolini, 'Comic Sans MS', Arial, Helvetica, sans-serif;
        display: block;
        margin-top: 30px;
        overflow: hidden;
        padding: 0px 0px 20px 0px;
        margin-bottom: 4px;
    }

    .wordsheetprobe {
        margin-bottom: 30px;
    }

    .wordsheetitem5 {
        display: block;
        text-align: center;
        margin-bottom: 20px;
        font-size: 120px;
    }

    .wordsheetitem10 {
        display: inline-block;
        width: 49%;
        font-size: 70px;
        margin-bottom: 50px;
        text-align: left;
    }




    .wordsheetitem20 {
        display: inline-block;
        width: 49%;
        font-size: 52px;
        margin-bottom: 18px;
        text-align: left;
    }

    .wordsheetitem30 {
        display: inline-block;
        width: 31%;
        font-size: 44px;
        margin-bottom: 18px;
        text-align: left;
    }

    .wordsheetitem #text {
        width: 50px;
    }

    .wordsheetitem42 {
        display: inline-block;
        width: 30%;
        font-size: 36px;
        margin-left: 20px;
        margin-bottom: 18px;
        text-align: left;
    }

    .wordsheetitem60 {
        display: inline-block;
        width: 30%;
        font-size: 24px;
        margin-left: 30px;
        margin-bottom: 10px;
        text-align: left;
    }

    .wordsheetitem80 {
        display: inline-block;
        width: 24%;
        font-size: 24px;
        margin-bottom: 12px;
        text-align: left;
    }

    .wordsheetitem100 {
        display: inline-block;
        width: 24%;
        font-size: 18px;
        margin-bottom: 10px;
        text-align: left;
    }

    .skillsheetquestion {
        display: inline-block;
        -webkit-print-color-adjust: exact;
        min-width: 200px;
        font-size: 36px;
        margin-bottom: 12px;
        padding-left: 20px;
        text-align: left;
    }



    .skillsheetanswer {
        border-style: solid;
        border-width: 3px;
        border-color: #646464;
        padding: 0px 18px;
        vertical-align: middle;
        display: inline-block;
        height: 34px;
        margin: 0px 5px;
    }

    .skillsheetgroup {
        border-style: solid;
        border-width: 2px;
        display: inline-block;
        width: 47%;
        margin-right: 1%;
        margin-top: 10px;
        border-color: #444444;
        min-height: 140px;
        padding: 4px;
        font-size: 20px;
    }

        .skillsheetgroup .skillsheetanswer {
            display: none;
        }

    @media print {
        .skillsheetquestion {
            background-color: #FBFBFB;
        }

            .skillsheetquestion:nth-of-type(odd) {
                background-color: #F1F1F1;
            }
    }

    @media screen and (max-width:700px) {
        .skillsheetquestion {
            width: 45%;
        }
    }

    @media screen and (max-width:350px) {
        .skillsheetquestion {
            width: 90%;
        }
    }


    .wordsheetordinal {
        min-width: 80px;
        text-align: right;
        display: inline-block;
        margin-right: 20px;
        color: #0000AA;
    }

    .wordsheetsectionholder {
        clear: both;
        width: 98%;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #444444;
        margin: 0 auto;
    }

        .wordsheetsectionholder .wordsheetsectionheader, .wordsheetsectionholder .wordsheetsectionfooter {
            display: block;
            margin-top: 10px;
            margin-bottom: 10px;
            text-decoration: none;
            font-size: 18px;
        }


    @media print and (min-width:700px) {
        .wordsheetitem100 {
            width: 150px;
            font-size: 22px;
            margin-bottom: 6px;
            margin-left: 10px;
        }

        .wordsheetitem80 {
            width: 180px;
            font-size: 20px;
            margin-left: 10px;
            margin-bottom: 8px;
        }

        .wordsheetitem60 {
            width: 190px;
            font-size: 26px;
            margin-left: 10px;
            margin-bottom: 12px;
        }

        .wordsheetitem42 {
            width: 190px;
            font-size: 30px;
            margin-bottom: 18px;
            margin-left: 10px;
        }

        .wordsheetitem20 {
            width: 300px;
            margin-left: 20px;
            font-size: 50px;
            margin-bottom: 16px;
        }

        .wordsheetitem10 {
            width: 300px;
            margin-left: 20px;
            font-size: 64px;
            margin-bottom: 50px;
        }

        .wordsheetitem5 {
            width: 470px;
            margin-left: 30px;
            text-align: left;
            display: inline-block;
            font-size: 90px;
            margin-bottom: 60px;
        }
    }

    .reviewheader {
        text-decoration: underline;
        color: #888888;
        font-size: 16px;
    }

    .reviewlinebreak {
        display: block;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 16px;
    }

    .reviewincorrect {
        color: #880088;
        font-weight: bold;
    }

    .reviewfluency {
        color: #000088;
    }

    .reviewcorrect {
        color: #000000;
        font-style: italic;
    }

    .reviewnew {
        color: #008800;
        font-weight: bold;
    }

    .printbutton {
        float: right;
        margin-left: 10px;
        margin-bottom: 5px;
    }


    @media print {
        .printbutton {
            display: none;
        }
    }

    .wordsheetdisplay {
        max-width: 1900px;
    }

    @media screen {
        .wordsheetdisplay {
            background-color: #fbfce8;
        }
    }

    .wordsheetdisplay .wordsheetitem100 {
        max-width: 200px;
        min-width: 14%;
        width: auto;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .wordsheetdisplay .wordsheetitem80 {
        max-width: 240px;
        min-width: 18%;
        width: auto;
        font-size: 20px;
        margin-bottom: 8px;
    }

    .wordsheetdisplay .wordsheetitem60 {
        max-width: 280px;
        min-width: 18%;
        width: auto;
        font-size: 24px;
        margin-bottom: 8px;
    }

    .wordsheetdisplay .wordsheetitem42 {
        max-width: 300px;
        min-width: 22%;
        width: auto;
        font-size: 30px;
        margin-bottom: 8px;
    }

    .wordsheetdisplay .wordsheetitem20 {
        max-width: 340px;
        min-width: 24%;
        width: auto;
        font-size: 58px;
        margin-bottom: 8px;
    }

    .wordsheetdisplay .wordsheetitem10 {
        max-width: 500px;
        min-width: 32%;
        width: auto;
        font-size: 70px;
        margin-bottom: 20px;
    }

    .wordsheetdisplay .wordsheetitem5 {
        display: inline-block;
        width: auto;
        max-width: 700px;
        min-width: 48%;
        font-size: 110px;
        margin-bottom: 20px;
    }



    .wordsheetdisplay .printbutton {
        display: none;
    }



    /* End of Wordsheet styles */

    /* Yes - No styles */

    .yesnobox {
        width: 80%;
        margin: 0 auto;
        border-style: solid;
        border-width: 1px;
        margin-top: 20px;
        border-radius: 10px;
        padding: 0px;
        box-shadow: #EEEEEE 5px 5px;
    }

        .yesnobox h2 {
            margin-top: 0px;
            background-color: #4472C4;
            padding: 5px;
            color: #FFFFFF;
            border-radius: 10px 10px 0px 0px;
        }

        .yesnobox .buttonholder {
            padding: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }


    /* End of Yes - No styles*/




    /* EPS Styling */

    .pagefooter {
        background-color: #f1f1f1;
        color: #444444;
        font-size: 12px;
        border-style: solid;
        border-color: #888888;
        border-width: 1px 0px 0px 0px;
        height: 70px;
        overflow: hidden;
    }


    .pagefootercontent {
        position: relative;
        height: 70px;
    }

    .pagefooterlogo {
        display: block;
        height: 66px;
        position: relative;
        left: 6px;
        top: 1px;
        z-index: 1000;
    }

    .pagefooterimageholder {
        position: absolute;
        top: 0px;
        right: 5px;
    }

    .pagefooterimage {
        height: 52px;
        margin-top: 1px;
    }

    .pagefootertext {
        display: block;
        right: 6px;
        bottom: 1px;
        position: absolute;
        z-index: 1000;
    }


    a, a:visited {
        color: #0000AA;
    }

    .pagefooter a, .pagefooter a:hover, .pagefooter a:visited {
        text-decoration: none;
        border-style: none;
    }



    @media screen and (max-width:570px) {

        .pagefooter, .pagefootercontent {
            height: 80px;
        }
    }

    @media screen and (max-width:420px) {

        .pagefooter, .pagefootercontent {
            height: 85px;
        }
    }



    /* End of EPS Styling */

    /* Workgroup styling */

    .workgroupheader {
        font-size: 16px;
        margin-top: 2px;
        margin-bottom: 0px;
        background-color: #506284;
        padding: 5px;
        border-style: solid;
        border-width: 1px;
        border-color: #444444;
        border-radius: 10px 0px 0px 0px;
        color: #FFFFFF;
    }

    .workgrouplistholder {
        width: 44%;
        display: inline-block;
        vertical-align: top;
    }

    .workgrouplist {
        width: 100%;
        height: 160px;
        border-style: solid;
        border-color: #444444;
        border-width: 1px;
        border-radius: 0px 0px 0px 10px;
        background-color: #f9f9f2;
    }

    .workgroupcontrols {
        width: 10%;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        margin-top: 30px;
    }

    .workgroupbutton {
        width: 60px;
        min-width: 60px;
        margin-bottom: 10px;
        margin-left: 0px;
    }

    @media screen and (max-width:680px) {
        .workgrouplistholder {
            width: 40%;
        }

        .workgroupcontrols {
            width: 80px;
        }
    }

    .grouplistholder {
        width: 49%;
        display: inline-block;
        vertical-align: top;
    }

    @media screen and (max-width:500px) {
        .workgrouplistholder {
            width: 35%;
        }
    }

    .workgrouplistholder .questionsmall {
        background-color: #506284;
        font-size: 14px;
        padding: 2px 5px 3px 5px;
        border-style: solid;
        border-width: 1px 0px 1px 1px;
        border-color: #444444;
        border-radius: 10px 0px 0px 10px;
        color: #FFFFFF;
        width: 100px;
        height: 16px;
    }


    .workgrouplistholder .standardbutton {
        font-size: 14px;
        padding: 2px 5px 3px 5px;
        border-radius: 0px 10px 10px 0px;
        color: #FFFFFF;
        height: 23px;
        margin-top: 2px;
    }

    .workgroupcontrols .lightbluebutton {
        height: 23px;
        margin-top: 23px;
    }

    .workgroupcontrols .standardbutton:disabled {
        background-color: #AAAAAA;
    }


    /* End of Workgroup styling */

    /* Videolink styling */
    .videolinks {
        border-style: solid;
        border-width: 1px;
        border-radius: 8px;
        border-color: #888888;
        padding: 4px;
        width: 280px;
        margin-bottom: 20px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: top;
        height: 180px;
    }

        .videolinks h3 {
            background-color: #4472C4;
            color: #FFFFFF;
            font-size: 16px;
            padding: 3px;
            margin-top: 0px;
            border-radius: 6px 6px 0px 0px;
        }

        .videolinks ol {
            padding-inline-start: 25px;
            padding-left: 25px;
        }

        .videolinks li > * {
            vertical-align: text-top;
        }

    .videolinksshort {
        height: 150px;
    }

    .noheight {
        height: 1px;
    }

    .videolinkswide a {
        display: inline-block;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        border-radius: 8px;
        border-color: #888888;
        padding: 5px 4px;
        width: 280px;
        margin-bottom: 20px;
        margin-right: 10px;
        vertical-align: top;
        height: 52px;
    }

        .videolinkswide a:hover, .videolinks li:hover {
            background-color: #fefaf0;
        }

        .videolinkswide a img {
            width: 90px;
            display: none;
            margin: 0px auto 10px auto;
            border-radius: 8px;
        }

    .videolinksub {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: #000000;
    }

    .videolinks a {
        display: inline-block;
        width: 99%;
    }




    @media screen and (max-width:678px) {


        .videolinkswide a img {
            display: none;
        }

        .videolinkswide a {
            height: 35px;
            margin-bottom: 5px;
            border-style: none;
            padding: 5px 2px;
        }

        .videolinkswide {
            border-style: solid;
            border-width: 1px;
            border-color: #888888;
            border-radius: 8px;
            width: 286px;
        }
    }

    /* End of Videolink styling */

    /* Acknowledgements styling */

    .acknowledgements {
        margin: 20px 0px 10px 0px;
    }

    .fullbutton {
        width: 260px;
        height: 20px;
        border-radius: 8px;
    }

    /* End of acknowledgements styling */

    /* Sort Styling */
    .sort a, .sort a:visited, .sort a:hover {
        text-decoration: none;
        color: #000000;
        display: block;
        width: 100%;
        position: relative;
    }

        .sort a .sorticon {
            position: absolute;
            top: 0px;
            right: 2px;
        }

    /* Sort Styling */
    /* New Styles */
    body {
        background-color: #F1F1F1;
    }

    form {
        max-width: 1200px;
        padding: 4px;
        border-style: solid;
    }

    .pagefooter {
        bottom: 4px;
        padding: 0px;
        width: calc(100% - 8px);
    }


    .videolinkswide a {
        width: calc(33% - 20px);
    }

    .videolinks {
        width: calc(50% - 25px);
    }

    @media screen and (max-width:900px) {
        .videolinkswide a {
            width: calc(50% - 25px);
        }

        .videolinks {
            width: calc(50% - 25px);
        }
    }

    @media screen and (max-width:678px) {
        .videolinkswide {
            width: 100%;
            margin-right: 0px;
        }

            .videolinkswide a {
                width: calc(100% - 5px);
                height: 60px;
            }

        .videolinks {
            width: calc(50% - 15px);
            margin-right: 3px;
        }
    }

    @media screen and (max-width:615px) {
        .videolinks, .videolinksshort {
            height: auto;
            width: calc(100% - 8px);
            margin-right: 0px;
        }
    }

    @media screen and (min-width:800px) and (max-width:1200px) {
        .searchdropwide {
            width: calc(398px + (100vw - 990px));
        }
    }

    @media screen and (min-width:800px) and (max-width:1200px) {
        .searchdropwider {
            width: calc(398px + (100vw - 880px));
        }
    }

    @media screen and (min-width:650px) and (max-width:1200px) {
        .searchdropreport {
            width: calc(398px + (100vw - 850px));
        }
    }

    @media screen and (min-width:1200px) {
        .searchdropwide {
            width: 630px;
        }
    }

    @media screen and (min-width:1200px) {
        .searchdropwider {
            width: 720px;
        }
    }

    @media screen and (min-width:1200px) {
        .searchdropreport {
            width: 760px;
        }
    }

    @media screen and (max-width:450px) {
        .searchdropwide, .searchdropwider, .searchdropfull {
            width: 100%;
        }
    }

    .searchdrop {
        width: 170px;
    }


    /* End of New Styles */


    /* Reading page styles */
    .readdisplay h2 {
        font-size: 20px;
        margin-top: 12px;
        margin-bottom: 8px;
    }

    .readholder {
        width: calc(100% - 22px);
        height: calc(100vh - 358px);
        margin-top: 10px;
        overflow-y: scroll;
        overflow-x: hidden;
        word-wrap: break-word;
        font-size: 40px;
        font-family: Comme;
        border-style: solid;
        border-width: 1px;
        padding: 10px;
        line-height: 1.4em;
        position: relative;
        background-color: #fdfef2;
    }

        .readholder .readhighlight {
            background-color: #b6e4f9;
        }

    .readsave {
        background: url(images/diskicon.gif) no-repeat 4px 4px;
        width: 70px;
        padding-bottom: 30px;
        height: 70px;
        line-height: 10px;
        display: block;
        margin-top: 30px;
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        border-radius: 4px;
        background-color: #EEEEEE;
        color: #AA0000;
        cursor: pointer;
    }

        .readsave:hover {
            border-width: 2px;
            border-color: #000000;
        }

    .readsavealt {
        display: none;
    }

    .highlightparagraph {
        display: block;
        border-style: solid;
        border-width: 1px;
        border-color: #444444;
        padding: 4px;
        background-color: #fdfef2;
        margin-top: 5px;
        width: calc(100% - 25px);
    }

    @media screen and (max-width:600px) {
        .readsave {
            display: none;
        }

        .readsavealt {
            display: block;
        }
    }


    .reading {
        position: absolute;
    }

    .readingbutton {
        min-width: 83px;
    }

    .readingbutton {
        margin-left: 10px;
    }

        .readingbutton i {
            margin-right: 8px;
        }

    .readingcontrols {
        display: inline-block;
        margin-right: 40px;
    }

    @media screen and (max-width:490px) {
        .readingcontrols {
            margin-right: 0px;
        }
    }

    @media print {
        .readholder {
            border-style: none;
            width: 100%;
            height: inherit;
            background-color: #FFFFFF;
        }

        .reading {
            position: relative;
            height: auto;
            -webkit-print-color-adjust: exact;
        }
    }
    /* End of reading page styles */



    /* Video window styles */
    .videoholder {
        display: none;
        width: 70%;
        margin-left: 10px;
        margin-bottom: 10px;
        vertical-align: top;
        border: 1px;
        border-style: solid;
        border-color: #AAAAAA;
        text-align: center;
        background-color: #FAFAFA;
        position: relative;
        float: right;
        padding-bottom: 35%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

        .videoholder iframe, .videoholder object, .videoholder embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-style: none;
        }


    .html5-video-container {
        top: 2px !important;
    }

    .html5-video-player .video-click-tracking, .html5-video-player .video-stream {
        top: 0px !important;
    }

    /* End of Video Window Styles */


    /* Reset password example screen styles */
    .emailinfo {
        border-style: solid;
        border-width: 1px;
        border-color: #AAAAAA;
        background-color: #FFFFFA;
        padding: 10px;
        width: 90%;
        margin: 0 auto 20px auto;
        border-radius: 15px;
    }

    .rounder {
        border-radius: 10px;
    }

    .emailexample {
        background-color: #FFFFFF;
        width: 80%;
        margin: 30px auto;
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        padding: 10px;
        box-shadow: 5px 5px #CCCCCC;
    }

    .linkexample {
        color: #0000AA;
        text-decoration: underline;
    }

    a.underline {
        text-decoration: underline;
    }

    .infoaccess {
        border-style: solid;
        border-width: 5px;
        border-color: #4472C4;
        padding: 20px;
        background-color: #FFFFFF;
        text-align: center;
        font-size: 18px;
        color: #000000;
        margin: 20px auto;
        width: 50%;
    }

    /* End of reset password example screen styles */

    /* Message styles */
    .messagedisplay {
        height: calc(100vh - 500px);
        min-height: 180px;
        overflow-y: scroll;
        overflow-x: hidden;
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        padding: 5px 2px;
        width: 98%;
        margin: 0px auto 20px auto;
        background-color: #FAFAFA;
    }

    .messagedisplayshort {
        height: calc(100vh - 670px);
        min-height: 100px;
    }

    .messagereceiver, .messagesender {
        display: block;
        min-height: 40px;
        padding: 5px;
        border-style: none;
        border-width: 0px;
        margin-bottom: 10px;
        word-break: break-word;
        box-shadow: 4px 4px 4px #AAAAAA;
    }

    .messagesender {
        background-color: #fdf0ca;
        border-radius: 24px 4px 24px 4px;
        margin-right: 20px;
        margin-left: 5px;
        text-align: left;
        padding-right: 18px;
    }

    .messagereceiver {
        background-color: #bae4fa;
        border-radius: 4px 24px 4px 24px;
        margin-right: 5px;
        margin-left: 20px;
        text-align: right;
        padding-left: 18px;
    }

    .messageyou, .messageinitials {
        height: 30px;
        padding-top: 11px;
        width: 40px;
        border-style: none;
        border-radius: 20px;
        vertical-align: top;
        font-size: 16px;
        color: #FFF;
        margin-bottom: 10px;
        text-align: center;
    }

    .messageyou {
        background-color: #298DC0;
        float: right;
        margin-left: 10px;
    }

    .messageinitials {
        background-color: #cda215;
        float: left;
        margin-right: 10px;
    }

    .messageheader {
        display: block;
        color: #000000;
        font-size: 12px;
        margin-bottom: 2px;
    }

    .messagetime {
        color: #440000;
    }

    .messagetitle {
        font-weight: bold;
        display: block;
        margin-bottom: 3px;
    }

    .messagetext {
        display: block;
    }

    .messageunread {
        font-weight: bold;
        color: #AA0000;
    }

    .messageinfo {
        display: block;
        width: 90%;
        margin: 10px auto;
        border-style: solid;
        border-width: 2px;
        border-color: #AAAAAA;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        background-color: #fdfaf4;
    }

    .messagealert {
        display: block;
        min-height: 40px;
        padding: 5px;
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        border-radius: 10px;
        margin-top: 5px;
        margin-bottom: 10px;
        width: calc(100% - 14px);
        word-break: break-word;
        box-shadow: 4px 4px 4px #AAAAAA;
        background-color: #FAFFFA;
    }

        .messagealert a {
            text-decoration: none;
        }

    .messagealerticon {
        height: 40px;
        padding-top: 11px;
        width: 50px;
        border-style: none;
        border-radius: 30px;
        vertical-align: top;
        font-size: 24px;
        color: #FFF;
        margin-bottom: 10px;
        text-align: center;
        background-color: #008800;
        float: left;
        margin-right: 10px;
    }

    .messageread {
        background-color: #AA0000;
        font-size: 17px;
        border-radius: 8px;
        width: 20px;
        color: #FFF;
        text-align: center;
        height: 20px;
        position: absolute;
        bottom: 0px;
        right: 4px;
    }

    .readhistorylist {
        display: block;
        width: 98%;
        margin: 0px auto 10px auto;
        padding: 5px;
        border-radius: 10px 0px 0px 10px;
    }

    .messagedisplayholder h2, .readhistory h2 {
        font-size: 18px;
        margin-bottom: 2px;
    }
    /* End of Message Styles */

    /* Font selection Styles */
    .fontstyle {
        display: inline-block;
        margin-left: 10px;
        margin-right: 20px;
        font-size: 12px;
        width: 80px;
        position: relative;
        vertical-align: 5px;
        text-align: left;
    }

    .fontpositiona {
        position: absolute;
        left: 20px;
        top: 0px;
    }

    .fontpositionb {
        position: absolute;
        right: 0px;
        bottom: 0px;
    }

    .fontseparator {
        position: absolute;
        left: 50px;
        font-size: 25px;
    }

    .fontstyleicon {
        font-size: 23px;
        vertical-align: top;
    }

    .fontstylepad {
        display: inline-block;
        padding-left: 38px;
    }

    .fontstylea {
        font-family: ABeeZee, Comme, Opendyslexic, Cavolini, 'Comic Sans MS', Arial, Helvetica, sans-serif;
    }

    .fontstyleb {
        font-family: Comme, Opendyslexic, Cavolini, 'Comic Sans MS', Arial, Helvetica, sans-serif;
    }

    @media screen and (max-width:465px) {
        .fontstyle {
            margin-right: 50px;
        }

        .fontstylepad {
            padding-left: 0px;
        }
    }

    @media screen and (max-width:400px) {
        .fontstyle {
            margin-right: 10px;
        }
    }

    .fontstylesheet {
        margin-left: 0px;
        margin-right: 10px;
        margin-bottom: 4px;
        vertical-align: top;
    }


    /* End of Font Selection Styles */


    /* Interaction Styles */

    .interactionanswer {
        display: inline-block;
        min-width: 150px;
        font-size: 20px;
        margin-right: 10px;
        margin-bottom: 20px;
    }

    .interactionquestion {
        display: inline-block;
        width: 30px;
        padding-right: 5px;
        text-align: right;
    }

    .interactionpad {
        margin-left: 44px;
    }

    /* End of Interaction Styles */

    /* Skill Set Styles */
    .skillsetbar {
        background-color: #f0bf4e;
        padding-top: 2px;
        padding-left: 12px;
        min-height: 25px;
        position: relative;
    }

    .skillseticons {
        position: absolute;
        top: 2px;
        right: 10px;
        font-size: 22px;
        color: #FFFFFF;
    }

    .skillsetbutton {
        display: inline-block;
        margin-left: 10px;
    }

        .skillsetbutton a {
            color: #f4f4f4;
            text-decoration: none;
        }

    .skillsetselected a {
        color: #222222 !important;
    }

    .skillsetbutton a:hover {
        color: #fdfcf5;
    }

    @media screen and (max-width:440px) {

        .skillsetbar {
            padding-left: 6px;
        }

        .skillseticons {
            right: 6px;
        }
    }
    /* End of Skill Set Styles */


    /* Chevron Styling */

    .chevrongroup {
        width: 98%;
        margin-left: 1%;
        margin-top: 15px;
        -webkit-print-color-adjust: exact;
    }

    .chevrongroup, .chevrontitle, .chevronwordlist, .chevroncolumns {
        border-style: solid;
        border-width: 2px;
        border-color: #888;
    }

    .chevroncolumns {
        border-width: 2px 2px 0px 2px;
    }

    .chevrontitle {
        display: block;
        text-align: center;
        padding: 2px;
        border-width: 0px 0px 2px 0px;
        font-size: 16px;
        z-index: 1000;
    }

    .chevrons {
        width: 350px;
        padding-left: 22px;
        display: inline-block;
    }

    .chevronheader {
        display: inline-block;
        vertical-align: top;
        width: 60px;
        text-align: center;
        margin-top: -6px;
        font-size: 12.8px;
    }

    .chevrondetail {
        display: inline-block;
        vertical-align: top;
        font-size: 16px;
        color: #000;
        margin-top: -37px;
        height: 38px;
        width: 250px;
        padding: 2px 5px;
        border-style: solid;
        border-width: 2px 2px 2px 0px;
        border-radius: 0px 4px 4px 0px;
        border-color: #4472C4;
    }

    .chevrondetailred {
        border-color: #FF0000;
    }

    .chevronwordlist {
        display: inline-block;
        vertical-align: top;
        padding-left: 10px;
        font-size: 40px;
        border-width: 0px 0px 0px 2px;
        width: calc(98% - 380px);
    }

    .chevrona, .chevronb, .chevronbbluered, .chevronbred, .chevronbredblue, .chevronc {
        background-repeat: no-repeat;
        background-position: 0 0;
        height: 55px;
        color: #FFF;
        font-size: 14px;
    }

    .chevrona {
        background-image: url(Images/chevrona.png);
    }

    .chevronb {
        background-image: url(Images/chevronb.png);
    }

    .chevronbbluered {
        background-image: url(Images/chevronbbluered.png);
    }

    .chevronbred {
        background-image: url(Images/chevronbred.png);
    }

    .chevronbredblue {
        background-image: url(Images/chevronbredblue.png);
    }


    .chevronc {
        background-image: url(Images/chevronc.png);
    }

    .chevronworditem {
        display: inline-block;
        width: 220px;
        font-size: 40px;
        margin-bottom: 10px;
    }

    .chevroncolumnheader {
        font-size: 18px;
        text-decoration: none;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .chevroninstruction {
        border-style: solid;
        border-width: 1px;
        border-color: #888888;
        border-radius: 10px;
        background-color: #FAFAFA;
        padding: 10px;
        width: 300px;
        margin-bottom: 20px;
    }


    .wordsheetfooter {
        display: none;
    }

    @media print {

        .chevrongroup {
            width: 100%;
            border-style: none;
            margin: 0px;
        }

        .chevrons {
            width: 270px;
            padding-left: 5px;
        }

        .chevrondetail {
            width: 190px;
            font-size: 14px;
            padding: 2px 3px;
        }

        .chevroninstruction {
            width: 235px;
        }

        .chevronwordlist {
            width: calc(100% - 300px);
        }

        .chevronworditem {
            display: inline-block;
            width: 124px;
            margin-bottom: 3px;
            font-size: 27px;
        }

        .chevroncolumnheader {
            font-size: 15px;
        }

        .wordsheetsectionfootertitle {
            display: block;
        }

        .wordsheetsectionholder .wordsheetsectionheader {
            margin-top: 4px;
            margin-bottom: 4px;
            font-size: 15px;
        }

        .wordsheetsectionholder .wordsheetsectionfooter {
            margin-top: 4px;
            margin-bottom: 4px;
            font-size: 15px;
        }

        .wordsheetfooter {
            display: block;
        }
    }

    /* End of Chevron Styling */

    /* Survey Styling */

    .surveyholder {
        border-style: solid;
        border-radius: 4px;
        border-color: #444444;
        background-color: #fcfbed;
        border-width: 1px;
        width: calc(100% - 12px);
        padding: 5px;
        margin-top: 10px;
    }

        .surveyholder h2 {
            padding-top: 0px;
            margin-top: 0px;
        }

    .surveyqrcode {
        width: 200px;
        vertical-align: top;
    }

    .surveytext {
        display: inline-block;
        vertical-align: top;
        max-width: calc(100% - 20px);
        margin-left: 10px;
    }

        .surveytext p {
            padding-top: 0px;
        }

    /* End of Survey Styling */


    /* Section colours */

    .readingcolour {
        /* rajah */
        background-color: #FBAB60;
    }

    .spellingcolour {
        /* sage */
        background-color: #BCB88A;
    }

    .numeracycolour {
        /* nyanza */
        background-color: #E9FFDB;
    }

        .numeracycolour .skillsetbutton a {
            color: #C6C6C6;
        }

            .numeracycolour .skillsetbutton a:hover {
                color: #888888;
            }

    /* End of section colours */


    /* Style overrides */
    .nodisplay {
        display: none;
    }

    .noborder {
        border-style: none;
    }

    .notop {
        margin-top: 0px;
    }

    .notoppadding {
        padding-top: 0px;
    }

    .noleft {
        padding-left: 0px;
    }

    .noright {
        margin-right: 0px;
    }

    .smalltop {
        margin-top: 5px;
    }

    .smallbottom {
        margin-bottom: 5px;
    }

    .midtop {
        margin: 10px 0px 0px 0px;
    }

    .linkbutton:visited {
        color: #FFFFFF;
    }
    /* End of style overrides */
    /* Number spinner override */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }

    input[type=number] {
        -moz-appearance: textfield; /* Firefox */
    }

    /* Number spinner override */
    .searchdropreport option:disabled {
        color: #4472C4;
        font-weight: bold;
    }

    .randomizer {
        position: absolute;
        font-size: 10px;
        color: #646464;
        bottom: 80px;
        left: 5px;
    }


    .skillsheetblocks {
        display: inline-block;
        margin-right: 35px;
        margin-bottom: 18px;
    }

        .skillsheetblocks .testnumeracyone, .skillsheetblocks .testnumeracytwo {
            font-size: 30px;
            width: 82px;
            line-height: 40px;
            left: 8px;
            letter-spacing: 6px;
            margin-top: 0px;
        }

        .skillsheetblocks .testnumeracyone {
            top: 26px;
        }

        .skillsheetblocks .testnumeracyequal {
            display: inline-block;
            vertical-align: middle;
            font-size: 30px;
            margin-top: 14px;
        }

        .skillsheetblocks .testnumeracyanswer, .skillsheetblocks .skillsheetanswerlarge, .skillsheetblocks .skillsheetanswerwide {
            display: inline-block;
            width: 50px;
            height: 50px;
            border-style: solid;
            border-width: 1px;
            border-color: #444444;
            background-color: #FFFFFF;
            vertical-align: top;
            margin-left: 6px;
            margin-right: 5px;
        }

        .skillsheetblocks .testnumeracygroup {
            width: 90px;
            height: 90px;
            border-radius: 5px;
            margin-left: 4px;
            margin-right: 0px;
        }

        .skillsheetblocks .skillsheetanswerlarge {
            width: 94px;
            height: 70px;
            margin-left: 5px;
            margin-right: 0px;
        }

        .skillsheetblocks .skillsheetanswerwide {
            width: 180px;
            height: 45px;
            margin-left: 10px;
            margin-right: 0px;
        }

    .skillsheetanswerpadded {
        display: inline-block;
        min-width: 60px;
        text-align: right;
        padding-right: 5px;
    }

    .skillsheetanswerextend {
        display: inline-block;
        border-style: solid;
        width: 140px;
        border-width: 2px;
        border-color: #000000;
        height: 53px;
    }

    .teachingsheetblock {
        display: inline-block;
        width: 190px;
        border-style: solid;
        border-width: 1px;
        font-size: 28px;
        border-color: #888888;
        margin: 0px 12px 10px 10px;
        padding: 5px 5px 80px 5px;
        border-radius: 10px;
        text-align: right;
        vertical-align: top;
    }

    .teachingsheetanswer, .teachingsheetanswershort, .teachingsheetanswergiven {
        display: block;
        border-style: solid;
        border-width: 2px;
        border-color: #444444;
        width: 100%;
        height: 40px;
    }

    .teachingsheetanswershort {
        display: inline-block;
        width: 80px;
    }

    .teachingsheetanswergiven {
        margin-top: 5px;
        border-width: 2px 0px 2px 0px;
    }

    .teachingsheet {
        display: none;
        page-break-before: always;
    }

    @media print {
        .teachingsheet {
            display: block;
        }

        .skillsheetblocks {
            margin-right: 20px;
            margin-bottom: 18px;
        }

        .wordsheetsectionheader {
            display: block;
        }

        .wordsheetdetail {
            margin-top: 10px;
        }
    }

    .testaccount, .testaccount label {
        color: #880000;
    }