@charset "UTF-8";


#contentWrap {width: auto;}

/* register module */
#modReg {width: 708px;}
#modReg .modPaneL {width: 175px; height: 200px;}
#modReg .modPaneR {width: 450px; height: 260px;}
.modHedTxtShort {display: none;}

ul.checklist li {margin-bottom: 15px; padding: 0 15px 0 18px; font-size: 14px; line-height: 130%;
background: url(../img/common/icons/iconChecklist.png) no-repeat 0 1px;}

.rowName input.txt {width: 131px;}
.rowName .inputWrap.name1 {margin-right: 20px;}

.formRegister .sbmtButs input {float: right; width: 130px;}
a.linkLogin {float: right; padding-right: 10px; margin: 35px 20px 0 0; font-size: 11px; line-height:1.3em;
background-image: url(../img/common/arrowRtGrn.png); background-repeat: no-repeat; background-position: right 1px;}


/* login */
#modLog {width: 530px;}
#modLog .modPaneR {width: 488px; height: 210px;}


.formLogin {padding: 50px 20px 0 20px;}
.formLogin .sbmtButs input {float: right; width: 130px;}
a.linkForgotPass {font-size: 11px; line-height:1.8em;}
p.formIntro {padding: 10px 0 25px 0;}




@media (min-width: 481px) and (max-width: 767px) {
/* below ipad portrait */
#contentWrap {padding-left: 35px; padding-right: 35px;}
#logoPoweredBy {margin-top: 35px;}

}
@media (max-width: 480px) {
/* below iphone landscape */
header#pgHeader {margin-top: 0;}
#logoAgency {display:block; width: 50%;}
#logoPoweredBy {display:block; margin-top: 35px;}

#contentWrap {width: auto;}
.moduleWrap {padding-top: 30px; padding-bottom: 0;}
.modSofaGrphc {width: 230px; margin-top: -15px; margin-left: -8px;}
.modHedTxt, h1.modHedTxt {padding-left: 220px;}

#modReg {width: 450px;}
#modReg .modPaneL {width: 408px; height: auto; padding-top: 25px;padding-bottom: 8px;}
#modReg .modPaneR {width: 408px; height: auto; padding-bottom: 30px;}

.formRegister .sbmtButs input {float: left; margin-top: 10px;}
.formLogin {padding: 15px 0 0 0;}
.formLogin .sbmtButs input {float: left; margin-top: 10px;}
.formRow {margin-bottom: 6px;}
p.formIntro {padding-bottom: 15px; margin-top:-25px;}

#modLog {width: 450px;}
#modLog .modPaneR {width: 408px; height: auto; padding-bottom: 30px;}
}
@media (max-width: 320px) {
.modSofaGrphc {width: 120px;}
.modHedTxt, h1.modHedTxt {padding: 10px 0 10px 105px; font-size: 32px;}
.modHedTxtLong {display: none;}
.modHedTxtShort {display: block;}

#modReg {width: 290px;}
#modReg .modPaneL {width: 248px;}
#modReg .modPaneR {width: 248px;}

#modLog {width: 290px;}
#modLog .modPaneR {width: 248px;}
.formLogin {padding: 0 0 0 0;}

input.txt {width: 240px;}
.rowName input.txt {width: 106px;}

/* WCAG Issue 3: Fix responsive design for 320px viewport - prevent horizontal scrolling */
/* Keep input field size at 240px and adjust container padding to fit them */

/* Reduce pane padding to accommodate 240px inputs - keep them at original size */
#modReg .modPaneR {
    padding: 20px 4px 30px 4px !important; /* Reduce side padding from 20px to 4px at 320px */
}

/* Shift form content slightly left by reducing padding */
form.wcag-responsive.formLogin {
    padding: 0 !important;
}

/* Make labels stack above inputs instead of side-by-side */
form.wcag-responsive .lbl {
    width: auto !important;
    float: none !important;
    display: block !important;
    margin-bottom: 5px;
    padding: 0 !important;
}

/* Inputs container takes full width */
form.wcag-responsive .inputs {
    float: none !important;
    display: block !important;
    width: 100%;
}

/* Input wrappers - align to left */
form.wcag-responsive .inputWrap {
    float: none !important;
    display: block !important;
    width: auto;
    max-width: 100%;
}

/* Keep input fields at 240px (original size) */
form.wcag-responsive input.txt {
    width: 240px !important; /* Keep original size */
    max-width: 100%; /* But don't overflow screen */
    box-sizing: border-box;
}

/* Fix error message positioning - make them relative instead of absolute */
form.wcag-responsive .errInline {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 240px !important; /* Match input width */
    max-width: 100%;
    height: auto !important;
    margin-bottom: 5px;
    box-sizing: border-box;
}

/* Hide error arrow pointer on mobile */
form.wcag-responsive .errInline .point {
    display: none !important;
}

/* Ensure form rows don't overflow */
form.wcag-responsive .formRow {
    overflow: visible;
}
}