﻿body {
    width: 100%;
}


.formholder {
    overflow-x: hidden;
}

li {
    text-indent: 0px;
}

ul, ol {
    margin-top: 0px;
}

.maindisplay {
    overflow-x: hidden;
}

    .maindisplay p {
        line-height: 1.4em !important;
    }

    .maindisplay h1 {
        font-size: 2em !important;
        margin-bottom: 10px !important;
        margin-top: 15px !important;
    }

    .maindisplay h2 {
        font-size: 1.6em !important;
        margin-bottom: 10px !important;
        margin-top: 15px !important;
    }

    .maindisplay h3 {
        font-size: 1.2em !important;
        margin-bottom: 10px !important;
    }

.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;
    }

.exclaimarea {
    background-image: url(images/exclaimorange.gif);
    background-repeat: no-repeat;
    background-position: 2px 6px;
    padding-left: 40px;
}

#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: -75px;*/
    top: calc(50% - 25px);
    left: calc(50% - 100px);
    text-align: center;
    border-radius: 10px;
    z-index: 9999;
}

input[type="text"], input[type="date"], input[type="time"], select, textarea {
    font-size: 100%;
    border-style: solid;
    border-color: #888888;
    border-width: 1px;
    font-family: Arial;
    padding: 2px;
}

.testbar {
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    padding: 5px;
    font-size: 14px;
    background-color: #fef5de;
    color: #000000;
    text-align: center;
}

.highlighttext {
    font-weight: bold;
    text-decoration: underline;
}

.clearboth {
    clear: both;
}

.questionholder {
    clear: both;
    padding-top: 12px;
}

.questionholderpadded {
    clear: both;
    padding-top: 24px;
}


.questionmain {
    padding-right: 10px;
    width: 240px;
    float: left;
}

.questionfull {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

.questionindent {
    padding-left: 20px;
    width: 220px;
}

.textboxholder {
    overflow: hidden;
    display: block;
}



.requiredtext {
    color: #AA0000;
}

.submiticon {
    color: #008800;
    font-size: 60px;
}

.infoicon {
    color: #000088;
    font-size: 60px;
}

.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;
}

.strongtext {
    font-weight: bold;
}

.labelresponse {
    margin: 15px 0px 30px 0px;
    display: block;
}

.labelforsub {
    display: block;
    margin: 10px 0px 2px 25px;
    color: #444444;
}

.marginleft {
    margin-left: 20px;
}

.marginright {
    margin-right: 100px;
}

.margintop {
    margin-top: 10px;
}

.margintopnone {
    margin-top: 0px !important;
}

.returnholder {
    margin-top: 20px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 4px;
    padding: 0px 10px 10px 10px;
    background-color: #FCFCFC;
}

.groupme {
    display: inline-block;
}

/* Text Box Styles */
.textboxfull {
    width: 98%;
}

.textboxsub {
    margin-left: 25px;
    width: calc(98% - 25px);
}


.textboxsmall, .listboxsmall {
    width: 150px;
}

.textboxdate {
    width: 140px;
}

.listboxfull {
    width: 99%;
}

.listboxmid {
    width: 50%;
    min-width: 250px;
}

.textboxmid {
    width: 40%;
    min-width: 150px;
}

.extracheck {
    display: none;
}


input[type="radio"] {
    margin-right: 5px;
    margin-left: 4px;
}

input[type="checkbox"] {
    margin-right: 5px;
}

.checkboxblock {
    padding-left: 20px;
    display: block;
    text-indent: -24px;
    margin-bottom: 2px;
    margin-left: 4px;
}

.checkboxinline {
    display: inline-block;
    margin-right: 20px;
}



.radioicon {
    font-weight: 100 !important;
    color: #000044;
    font-size: 40px;
    margin-right: 10px;
    vertical-align: middle;
    margin-bottom: 8px;
}

    .radioicon:hover {
        font-weight: 500 !important;
    }

.checkboxinline :hover .radioicon {
    font-weight: 500 !important;
}


.infotext {
    font-size: 12px;
    color: #444444;
    display: inline-block;
}

.infotextblock {
    font-size: 12px;
    color: #444444;
    display: block;
    margin-top: 4px;
}

.charactersused {
    font-size: 12px;
    color: #008800;
    display: inline-block;
    margin-left: 40px;
}

.icondisplay {
    padding-right: 20px;
    width: 60px;
    float: left;
}
/*End of Text Box 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;
}

.standardbutton, .deletebutton {
    border-style: none;
    border-radius: 4px;
    width: 140px;
    background-color: #4444AA;
    color: #FFFFFF;
    margin-left: 20px;
    cursor: pointer;
    height: 28px;
    font-size: 15px;
}

    .standardbutton:hover {
        background-color: #2373CC;
    }

.shortbutton {
    width: 60px;
}


.greenbutton {
    background-color: #00703c
}

    .greenbutton:hover {
        background-color: #1f975f;
    }

.orangebutton {
    background-color: #a86224;
}

    .orangebutton:hover {
        background-color: #d08441;
    }

.greybutton {
    background-color: #305566;
    margin-left: 0px;
    margin-right: 20px;
}

    .greybutton:hover {
        background-color: #41748B;
    }

.redbutton {
    background-color: #A53E29;
}

    .redbutton:hover {
        background-color: #792D1E;
    }


.deletebutton {
    background-color: #A53E29;
    width: 80px;
    margin-right: 150px;
}

    .deletebutton:hover {
        background-color: #792D1E;
    }

    .standardbutton:disabled, .deletebutton:disabled {
        background-color: #AAAAAA;
    }

.smallbutton {
    margin-left: 0px;
    width: 60px;
    height: 20px;
}

.detailstable .smallbutton {
    width: 85px;
}

.greenoverride:disabled {
    background-color: #449d3a;
}
/* End of Button Styles */
/* Table Styles */
.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;
    }

/* End of Table Styles */


/* address finder styles */

.addressfinder {
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    border-radius: 8px;
    padding: 5px 10px 10px 6px;
    background-color: #FAFAFA;
    margin-left: 57px;
    margin-top: 5px;
    margin-right: 0px;
}

.addressfinderpcode {
    margin-left: 10px;
    margin-right: 10px;
    width: 80px;
}

.addressfindertitle {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.addressfinderbutton {
    margin-right: 10px;
    border-style: none;
    border-radius: 4px;
    min-height: 22px;
    background-color: #AA4444;
    color: #FFFFFF;
    width: 50px;
    cursor: pointer;
}

.buttonfixed {
    border-style: none;
    border-radius: 4px;
    min-height: 22px;
    background-color: #AA4444;
    color: #FFFFFF;
    width: 100px;
    cursor: pointer;
}

    .addressfinderbutton:hover, .buttonfixed:hover {
        background-color: #883333;
    }

    .buttonfixed:disabled {
        color: #AAAAAA;
        background-color: #F1F1F1;
    }

.addressfinderlist {
    width: 420px;
    margin-right: 10px;
    margin-top: 8px;
}

.addressfindererror {
    display: block;
    color: #AA0000;
    margin-top: 2px;
    margin-bottom: 5px;
}

@media screen and (max-width:570px) {
    .addressfinderlist {
        width: 75%;
    }
}

/* end of address finder styles */

/* attachment upload styles */
.filebutton {
    background-color: #0045CC;
    border-radius: 5px;
    border-style: none;
    padding: 5px 10px;
    color: #FFFFFF;
    margin-left: 15px;
    display: none;
    margin-bottom: 5px;
    font-size: 16px;
    cursor: pointer;
}

    .filebutton:hover {
        background-color: #2373CC;
    }

.filesize {
    width: 99%;
}

.filebuttonhidden {
    display: none;
}

.filebuttonholder {
    margin: 10px 0px;
}

.infoblock {
    margin: 15px 0px 0px 250px;
    display: block;
    padding: 10px 5px 0px 40px;
    border-style: none;
    background-image: url(images/exclaimorange.gif);
    background-repeat: no-repeat;
    background-position: 4px 8px;
    min-height: 40px;
}

.infoblockleft {
    margin: 0px 0px 0px 25px;
}

.indentblock {
    margin-left: 250px;
}

.attachmentlist {
    margin: 20px 0px 10px 250px;
}

.attachmentitem {
    display: block;
    margin-top: 10px;
}

.extensionimage {
    vertical-align: middle;
    margin-right: 10px;
}
/* End of attachment upload styles */

/* Mapping styles */
.mapholder {
    padding: 0px 2px 0px 30px;
    margin-bottom: 20px;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /* These doesn't affect anything, but, just in case. */
    -webkit-animation: none !important;
    animation: none !important;
}

#map_canvas {
    width: 100%;
    height: 540px;
    max-width: 1000px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
}

.mappointertitle {
    display: block;
    font-size: 18px;
    color: #000000;
}

.mappointerdate {
    display: block;
    margin: 2px 0px;
    color: #000088;
    font-size: 14px;
}

.mappointersubject {
    display: block;
    margin-top: 4px;
    color: #004400;
    font-size: 14px;
}

.mappointerdesc {
    display: block;
    margin-top: 4px;
    color: #444444;
    font-size: 14px;
}

.mapbuttonholder {
    display: block;
    text-align: right;
    margin-top: 10px;
}


.mapbutton {
    font-size: 14px;
    background-color: #2a5d97;
    color: #FFFFFF;
    border-style: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    margin-left: 20px;
}

    .mapbutton:hover {
        background-color: #2d73c3;
    }


.indent {
    padding: 5px 0px 2px 30px;
    display: block;
}

.indentmap {
    padding: 0px 0px 0px 10px;
    font-size: 90%;
    display: block;
    color: #444444;
}
/* End of mapping styles*/

/* Map Resizing Styles */
@media (max-width:767px) {
    #map_canvas {
        height: 450px;
    }

    .pointerholder {
        width: 96%;
    }
}

@media (max-width:499px) {
    #map_canvas {
        height: 400px;
    }

    .pointerholder {
        width: 95%;
    }
}

@media (max-width:399px) {
    #map_canvas {
        height: 300px;
    }
}
/* End of Map Resizing Styles */

/* Pointer Styles */

.inline {
    display: inline-block;
    margin: 10px 0px 0px 0px;
}


.pointericon {
    display: inline-block;
    width: 18px;
    height: 18px;
}

.pointerblock {
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 20px;
}

.pointerholder {
    border-style: solid;
    border-width: 1px;
    border-color: #AAAAAA;
    border-radius: 4px;
    padding: 6px 6px 2px 6px;
    background-color: #EEEEEE;
    overflow: hidden;
    width: 98%;
    margin: 0px 0px 10px 0px;
    max-width: 1000px;
    font-size: 14px;
}

.pointertextbox {
    width: 70%;
    border-style: solid;
    border-width: 1px;
    border-color: #444444;
}

.pointerbutton {
    margin: 0px 0px 4px 10px;
    background-color: #124987;
    border-style: none;
    border-radius: 4px;
    padding: 4px 20px;
    color: #FFFFFF;
    cursor: pointer;
}

    .pointerbutton:hover {
        background-color: #1d5ba1;
    }


@media screen and (max-width:570px) {
    .pointerblock {
        margin-left: 0px;
    }
}

/* End of Pointer Styles */

/* Styles for Step Indicator */
.step-indicator {
    margin-top: 12px;
    margin-bottom: 0px;
    line-height: 30px;
    display: inline-block;
}

.step {
    display: block;
    float: left;
    font-weight: bold;
    background: #e4e4e4;
    padding-right: 10px;
    height: 30px;
    line-height: 30px;
    margin-right: 33px;
    position: relative;
    text-decoration: none;
    color: #666;
    cursor: default;
    font-size: 14px;
    margin-bottom: 5px;
}

    .step:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: -30px;
        border: 15px solid transparent;
        border-color: #e4e4e4;
        border-left-color: transparent;
    }

    .step:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        right: -30px;
        border: 15px solid transparent;
        border-left-color: #e4e4e4;
    }

    .step:first-of-type {
        /*border-radius: 2px 0 0 2px;*/
        border-radius: 0px;
        padding-left: 15px;
    }

        .step:first-of-type:before {
            display: none;
        }

    .step:last-of-type {
        border-radius: 0px;
        margin-right: 25px;
        padding-right: 15px;
    }

        .step:last-of-type:after {
            display: none;
        }

    .step.completed {
        background: #305566;
        color: #fff;
    }

        .step.completed:before {
            border-color: #305566;
            border-left-color: transparent;
        }

        .step.completed:after {
            border-left-color: #305566;
        }

    .step.current {
        background: #fdd26c;
        color: #000;
    }

        .step.current:before {
            border-color: #fdd26c;
            border-left-color: transparent;
        }

        .step.current:after {
            border-left-color: #fdd26c;
        }

.step-text {
    background-color: #EEEEEE;
    color: #000000;
    padding: 4px;
    font-size: 18px;
    display: none;
    margin-top: 10px;
}

@media screen and (max-width:700px) {
    .step-indicator {
        display: none;
    }

    .step-text {
        display: block;
    }
}

.buttonsection {
    border-style: none;
    background-color: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    height: 100%;
    cursor: pointer;
    padding: 0px;
}

/* End of Step Indicator Styles */

/* Step Bar Indicators */
.stepbarholder {
    width: 100%;
    background-color: #E1E1E1;
    height: 5px;
    margin: 2px 0px 3px 0px;
    position: relative;
}

.stepbar {
    background-color: #4689aa;
    display: inline-block;
    height: 5px;
    position: absolute;
    top: 0px;
    left: 0px;
}

/* End of Step Bar Indicators */

@media screen and (max-width:745px) {
    .bulletholder {
        width: 25px;
        float: left;
    }

    .labelholder {
        float: none;
        width: auto;
        overflow: hidden;
        display: block;
    }

    .separatortext {
        padding-left: 25px;
    }

    .textboxholder {
        overflow: visible;
        display: block;
        margin-left: 20px;
        margin-top: 5px;
    }

    .checkboxholder {
        overflow: visible;
        display: block;
        margin-left: 25px;
    }

    .textboxholderfull {
        overflow: visible;
        display: block;
        margin-top: 2px;
    }

    .questionsupplemental, .questionmain {
        display: block;
        padding-right: 0px;
        width: auto;
        float: none;
    }




    .addressfinder {
        margin-left: 0px;
    }

    .standardbutton {
        margin-left: 10px;
        padding: 0px 10px;
        width: auto;
        min-width: 100px;
    }

    .marginright {
        margin-right: 20px;
    }

    .attachmentlist {
        margin: 20px 0px 10px 40px;
    }

    .infoblock, .indentblock {
        margin-left: 25px;
    }
}

@media screen and (max-width:410px) {

    .marginright {
        margin-right: 5px;
    }

    .standardbutton {
        margin-left: 6px;
        min-width: 80px;
        margin-bottom: 3px;
    }
}

/* style adaptions */

.noborder {
    border-style: none;
}

a {
    display: inline-block !important;
}

.checkboxblock a, .checkboxinline a {
    display: inline !important;
}

.sys_siteheader {
    padding-top: 0px !important;
}

.sys_skipnav {
    display: none !important;
}
/* End of style adaptions */

/* password styles */
.passwordheader {
    margin: 10px 0px !important;
}

.passwordarea {
    width: 440px;
    margin: 30px auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    box-shadow: #EEEEEE 5px 5px;
    background-color: #fafafa;
    font-size: 14px;
}

    .passwordarea h2 {
        background-color: #223266;
        border-width: 0px 0px 4px 0px;
        border-style: solid;
        border-color: #cb2a81;
        border-radius: 10px 10px 0px 0px;
        color: #ffffff;
        margin: 0px;
        padding: 5px;
        font-size: 20px !important;
    }

    .passwordarea .questionsmall {
        padding-right: 20px;
        width: 120px;
        float: left;
    }

    .passwordarea .textboxholdersmall {
        vertical-align: top;
        width: 270px;
        display: inline-block;
    }

    .passwordarea .fulltextbox {
        width: 99%;
        height: 25px;
    }

.passwordbody {
    color: #000000;
    padding: 0px 10px 10px 10px;
}

    .passwordbody .textboxholdersmall {
        width: 268px;
    }


.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;
}

.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;
}


@media screen and (max-width:500px) {

    .passwordheader {
        display: block;
        font-size: 24px !important;
        margin-top: 0px !important;
    }

    .passwordintroduction {
        display: none;
    }

    .passwordarea {
        margin: 10px 0px;
    }

        .passwordarea .textboxholdersmall {
            width: 92%;
            margin-left: 10px;
        }

    .sys_siteheaderbreadcrumb {
        margin-top: 5px !important;
    }

        .sys_siteheaderbreadcrumb div {
            display: none;
        }

    .createaccount h2 {
        margin: 20px 0px 10px 0px !important;
        font-size: 22px !important;
    }

    .createaccount p {
        margin-top: 10px !important;
        line-height: 1.2em !important;
    }

    .sys_head-r1 {
        display: none !important;
    }

    .sys_tophead {
        height: 80px !important;
    }
}


/* end password styles */

/* new form styles */

.newform {
    width: 90%;
    margin: 10px auto 0px auto;
    border-style: solid;
    border-color: #444444;
    border-width: 1px 0px 0px 0px;
    padding-top: 30px;
    text-align: center;
}

    .newform .standardbutton {
        display: block;
        margin: 10px auto 0px auto;
        width: auto;
    }

.loginbar {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #AAAAAA;
    padding: 5px;
    font-size: 0.8em;
    line-height: 1em;
    position: relative;
    min-height: 22px;
    margin-bottom: 12px;
    background-color: #fefff2;
}

    .loginbar p {
        margin: 0px;
        line-height: 1.1em !important;
    }

.loginbutton {
    float: right;
    width: 100px;
    border-radius: 8px;
    height: 22px;
    margin-left: 20px;
}

.logoutbutton {
    width: 80px;
    background-color: #A53E29;
    height: 24px;
    margin-right: 3px;
}

    .logoutbutton:hover {
        background-color: #792D1E;
    }

@media screen and (max-width:500px) {
    .passwordarea {
        width: 99%;
    }
}


/* Prerequisite styles */

.prereq {
    display: block;
}

.prereqicon {
    display: inline-block;
    vertical-align: top;
    font-size: 40px;
    padding-right: 10px;
    color: #AA0000;
}

.prereqtext {
    display: inline-block;
    vertical-align: top;
    padding-top: 2px;
    font-size: 16px;
    width: calc(100% - 60px);
    line-height: 1.2em;
}

.prereqheader {
    display: block;
    font-weight: bold;
    text-decoration: underline;
    padding-bottom: 4px;
}
/* End of Prerequisite styles */

/* History styles */

.historyholder {
    display: block;
    margin-top: 10px;
}

    .historyholder h4 {
        font-size: 16px;
        margin: 5px 0px !important;
    }

.historygroup {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    margin-right: 3%;
}

.historyitem {
    display: block;
}
/* End of Form History styles*/

/* Credit styles */

#pagebody {
    position: relative;
    overflow-x: hidden;
}

.creditfooter {
    clear: both;
    position: relative;
    display: block;
    margin-left: 15px;
    margin-bottom: 5px;
    font-size: 12px;
    color: #888888;
}

@media screen and (max-width:1218px) {

    .creditfooter {
        margin-left: 0px;
        margin-bottom: 5px;
    }
}

/* End of credit styles */

/* Icon style options */

.iconboxholder {
    margin-left: -15px;
}

.radioboxicon, .checkboxicon {
    position: relative;
    border-width: 1px;
    border-color: #000000;
    border-style: none;
    vertical-align: top;
    width: 115px;
    height: 150px;
    padding: 5px;
    display: inline-block;
    cursor: pointer;
    font-size: 22px;
    overflow-y: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


    .checkboxicon i, .radioboxicon i {
        display: block;
        text-align: center;
        font-size: 40px;
        height: 45px;
    }

    .checkboxicon input, .radioboxicon input {
        position: absolute;
        height: 0px;
        width: 0px;
        top: 0px;
        left: 0px;
        opacity: 0;
    }

    .checkboxicon label, .radioboxicon label {
        cursor: pointer;
        width: 100%;
        height: 100%;
        display: block;
    }

    .radioboxicon .optionresponse, .checkboxicon .optionresponse {
        display: block;
        position: relative;
        height: 25px;
        width: 25px;
        margin: 0 auto;
        border-width: 5px;
        border-style: solid;
        background-color: transparent;
    }

    .radioboxicon .optionresponse {
        border-radius: 25px;
    }

.responsetext {
    display: block;
    font-size: 17px;
    text-align: center;
    height: 42px;
    vertical-align: top;
    width: 109px;
    margin: 0px auto;
}

.optionresponsecheck {
    display: block;
    position: absolute;
    left: 2px;
    top: 2px;
    background-color: #FFFFFF;
    width: 21px;
    height: 21px;
}

.radioboxicon .optionresponsecheck {
    left: 3px;
    top: 3px;
    width: 19px;
    height: 19px;
    border-radius: 18px;
}

.checkboxicon:hover label .optionresponse .optionresponsecheck,
.radioboxicon:hover label .optionresponse .optionresponsecheck {
    background-color: #DDDDDD;
}

.checkboxicon input:checked ~ label .optionresponse .optionresponsecheck,
.radioboxicon input:checked ~ label .optionresponse .optionresponsecheck {
    background-color: #100cda;
    -webkit-print-color-adjust: exact;
}

.checkboxicon .optionresponsecheck:after {
    content: '\2713';
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    left: 4px;
    top: -1px;
    display: none;
}

.checkboxicon input:checked ~ label .optionresponse .optionresponsecheck:after {
    display: block;
}

@media print {
    .checkboxicon, .radioboxicon {
        height: 150px;
    }

        .checkboxicon input, .radioboxicon input {
            position: absolute;
            height: 1px;
            width: 1px;
            opacity: 0;
        }
}
/* End of icon style options */



/* 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 */


.notice {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    display: none;
    padding: 5px;
    border-style: solid;
    border-width: 4px;
    border-color: #000000;
    background-color: #FAFAFA;
}


/* Signature styles */

.signatureholder {
    border-style: solid;
    border-color: #000000;
    background-color: #FFFFFF;
    border-width: 1px;
    color: #0000FF;
    touch-action: none;
}

.signatureclear {
    display: block;
    width: 100px;
    margin-top: 5px;
    font-size: 1em;
    padding: 1px 0px;
    margin-left: 250px;
    border-style: none;
    border-radius: 5px;
    background-color: #0000AA;
    color: #FFFFFF;
}

@media screen and (max-width:410px) {
    .signatureholder {
        margin-left: -20px;
    }

    .signatureclear {
        width: 80px;
    }
}

/* End of signature styles */

/* Question errors */

.questionerror .questionmain, .questionerror .questionfull {
    color: #BB0000 !important;
    font-weight: bold !important;
}

.questionerror .checkboxblock {
    color: #BB0000 !important;
}

.questionerror .textboxfull, .questionerror .listboxfull, .questionerror .textboxdate, .questionerror .signatureholder {
    border-color: #BB0000 !important;
    border-width: 2px !important;
}

/* End of question errors */

/* Conversion styles */

.textboxconv {
    width: 60px;
}

.convlabel {
    display: inline-block;
    margin-left: 8px;
    margin-right: 5px;
    min-width: 168px;
}

.convholderdouble .textboxconv {
    width: 45px;
}

.convholderdouble .convlabel {
    min-width: 60px;
}


.convoptionholder {
    display: inline-block;
    margin-left: 5px;
    width: 280px;
}

.convoption {
    display: inline-block;
    margin-right: 10px;
}

    .convoption input[type="radio"] {
        display: none;
    }

        .convoption input[type="radio"] + label {
            display: inline-block;
            background-color: #EEEEEE;
            color: #555555;
            border-style: none;
            border-radius: 4px;
            padding: 2px 10px;
            cursor: pointer;
        }

        .convoption input[type="radio"]:checked + label {
            background-color: #74f9e7;
            color: #000000;
        }

@media screen and (max-width:820px) {

    .convoptionholder {
        margin-left: 0px;
        margin-top: 5px;
    }
}

/* End of conversion styles */
