form {
    overflow-x: hidden;
}

.sys_rcnavtitle {
    margin-top: 10px;
}
li~li{
    margin-top:0.2em !important;
}


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

.maindisplay h1 {
    font-size: 30px !important;
    margin-top: 0px;
    margin-bottom: 5px !important;
}
.maindisplay input[type="button"]{
    -webkit-appearance: none;
    border-radius: 0;
}

#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: -100px;
    top: 50%;
    left: 50%;
    text-align: center;
    border-radius: 5px;
    z-index: 9999;
}

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

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

.textboxholder {
    overflow: hidden;
    display: block;
}
.groupme{
    display:inline-block;
}

.infotext {
    color: #444444;
    font-size: 14px;
    display: inline-block;
    font-weight: normal;
}
.infotextlarge{
    color:#444444;
    display:inline-block;
    font-size:90%;
}
.detailtext{
    margin-top:4px;
    color:#222222;
    font-size:15px;
    display:block;
}
.subinfo{
    display:block;
    margin-top:4px;
    font-size:12px;
    color:#000044;
}

.fulltextbox {
    width: 99%;
}

.smalltextbox {
    width: 150px;
}
.smallertext{
    display:block;
    font-size:14px;
    color:#444444;
}

.topvalidatorclass {
    background-color: #FFFAFA;
    border-color: #DDCCCC;
    border-style: solid;
    border-width: 1px;
    display: block;
    background-image: url(images/exclaimorange.gif);
    background-repeat: no-repeat;
    background-position: 4px 4px;
    padding: 4px 4px 0px 40px;
    color: #220000 !important;
    margin-bottom: 5px;
    margin-top: 4px;
}

    .topvalidatorclass ul {
        margin: 10px 0px 5px 0px;
    }

    .topvalidatorclass li {
        margin-left: 5px;
        list-style-type: disc;
        margin-top:2px !important;
        line-height: 1.2em !important;
    }

    .topvalidatorclass a{
        color:#000088;
        text-decoration:none;
    }
    .topvalidatorclass a:hover{
        color:#4444AA;
    }

.showstopper {
    background-image: url(images/exclaimlarge.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    text-align: center;
    width: 90%;
    margin: 0 auto;
    padding-top: 120px;
}

.centreme {
    text-align: center;
}

.padbottom {
    margin-bottom: 10px;
}
.padright{
    padding-right: 12px;
}
.nodisplay{
    display:none !important;
}

.showstoppertext {
    color: #AA0000;
    font-size: 15px;
    display: block;
    margin-bottom: 10px;
}

.showstopper li {
    list-style: none;
    margin-bottom:10px;
}

.showstopper .buttonise {
    padding-left: 0px;
}

.showstopper .buttonise li{
  display:inline-block;
}

.showstopper .buttonise li a{
    border-radius:4px;
    background-color:#305566;
    margin-bottom:5px;
    padding:5px 20px;
    margin-left:5px;
    margin-right:5px;
    text-decoration:none;
    color:#FFFFFF;
    display:inline-block;
}

.showstopper .buttonise li a:hover{
    background-color:#447083;
}

.clearboth {
    clear: both;
}
.padboth{
    margin:10px 0px;
}

.selectionheader {
    margin-bottom: 10px;
}

 .checkboxinline {
        display:inline-block;
        min-width:200px;
    }

 .checkboxblock {
    padding-left: 30px;
    display: block;
    text-indent: -25px;
    margin-bottom: 2px;
}
 .checkboxblock input{
     margin-right:10px;
 }
 .showninfo{
     margin-top:10px;
     padding-top:10px;
 }

.infoblock {
    font-size: 90%;
    margin-bottom: 4px;
   
}

.requiredfielddisplay {
    display: block;
    margin-top: 2px;
    margin-bottom: 14px;
    color: #888888;
    font-size: 12px;
    text-align: right;
}

.requiredtext {
    color: #AA0000;
}

.strongtext {
    font-weight: bold;
}
.highlight{
    font-weight:bold;
    color:#000044;
}
.title {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0px;
}
.nobottom{
    margin-bottom:2px !important;
}

.controlbutton, .linkbutton {
    -webkit-appearance: none;
    border-style: none;
    border-radius: 4px;
    width: 140px;
    background-color: #124987;
    color: #FFFFFF;
    margin-left: 20px;
    cursor: pointer;
    height: 29px;
    font-size: 15px;
}

    .controlbutton:hover {
        background-color: #1d5ba1;
    }

    .controlbutton:disabled {
        color: #AAAAAA;
        background-color: #F1F1F1;
    }
    .linkbutton{
        display:block;
        margin:10px auto 60px auto;
        height:22px;
        font-size:18px;
        padding:5px 20px;
        text-decoration:none;
        text-align:center;
        background-color:#228822;
        width:250px;
    }
    .linkbutton:hover{
        background-color:#33AA33;
    }
.widebutton{
    width:190px;
}

.optionbutton {
    margin:15px 0px;
    display:inline-block;
    text-align:center;
    padding-top:5px;
    width: 250px;
    text-decoration: none;
    height:24px;
}

#backtop:disabled{
    color: #AAAAAA;
}

.hrseparator {
    width: 90%;
    margin: 5px auto 10px auto;
}

.buttonholder {
    text-align: right;
}

.mapholder {
    padding: 0px 2px 0px 30px;
}

#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;
}

.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: #2373CC;
    color: #FFFFFF;
    border-style: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
}

    .mapbutton:hover {
        background-color: #3691F7;
    }


.indent {
    padding: 5px 0px 2px 30px;
    display: block;
}

.indentmap {
    padding: 5px 0px 2px 30px;
    font-size: 90%;
    display: block;
    color: #444444;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}

.textright {
    text-align: right;
}

.alignright {
    text-align: right;
}

.infobox {
    background-image: url(images/info.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin: 5px 0px;
    padding: 4px 0px 0px 40px;
    min-height: 40px;
}

.additionalrow {
    display: block;
    font-size: 12px;
    color: #444444;
}

.statusholder {
    clear: both;
    margin-top: 15px;
}

.statustitle {
    font-weight: bold;
    float:left;
    width: 180px;
}

.statusdescription {
    display: block;
    overflow:hidden;
}
.statusheader{
    background-color:#DDDDDD;
    color:#444444;
    padding:2px 4px;
    width:100%;
    font-size:24px;
    margin-bottom:10px;
}
.submitholder{
    text-align:center;
    width:72%;
    margin:0 auto;
    border-style:solid;
    border-width:1px;
    border-color:#888888;
    border-radius:4px;
    padding:10px 40px;
    background-color:#F1F1F1;
}


.submitheader{
    font-weight:bold;
    font-size:20px;
    display:block;
    margin-bottom:14px;
 }
.pleasewait{
    margin-top:30px;
    font-size:30px;
    text-align:center;
    padding:70px 10px 30px 10px;
    background-image: url(images/diskicon.gif);
    background-repeat: no-repeat;
    background-position:center top;
    color:#000000;
}
.pleasewaitsub{
    display:block;
    margin-top:15px;
    font-size:18px;
    color:#444444;
}
.summaryholder{
    border-style:solid;
    border-width:1px;
    border-color:#888888;
    border-radius:4px;
    background-color:#F1F1F1;
    padding:4px;
    margin-top:15px;
    margin-left:280px;
    font-size:85%;
}
.summaryholder h2{
    font-size:20px !important;
    margin-bottom:6px !important;
    margin-top:0px !important;
}
.summaryholder h3{
    font-size:16px;
    margin-bottom:6px;
}
.exampletext{
    font-style:italic;
    font-weight:bold;
    font-size:16px;
}

.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;
}
.offlineinfo{
    background-image:url(Images/exclaimorange.gif);
    background-position:2px 4px;
    background-repeat:no-repeat;
    padding:10px 2px 2px 50px;
    border-style:solid;
    border-width:1px;
    border-color:#888888;
    background-color:#FFF6F6;
    margin-top:20px;
    min-height:25px;
}

@media screen and (max-width:470px) {
    .checkboxinline{
        min-width:150px;
    }
}

@media screen and (max-width:430px) {
    .checkboxinline{
        min-width:120px;
    }
}

@media screen and (max-width:545px){
    .offlineinfo {
     padding:2px 2px 2px 50px;
     min-height:32px;
     }
}

@media screen and (max-width:870px){
    .fulltextbox {
    width: 98%;
}
}

@media screen and (max-width:600px) {
    .statustitle{
        float:none;
        display:block;
        margin-bottom:5px;
    }
    .statusdescription{
        margin-left:10px;
    }
}

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

@media screen and (max-width:745px) {
    .indent{
        padding:5px 0px 2px 10px;
    }
    .mapholder{
        padding:0px 2px 0px 10px;
    }

    .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: 10px;
        margin-top: 5px;
    }

    .checkboxholder {
        overflow: visible;
        display: block;
        margin-left: 25px;
    }
   

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

    .questionsupplemental, .questionmain {
        display: block;
        padding-left: 10px;
        padding-right: 0px;
        width: auto;
        float: none;
    }
    .questionmain{
        font-weight:bold;
        margin-top:5px;
    }

    .indentblock {
        margin-left: 0px;
    }
    .summaryholder {
        margin-left: 10px;
    }
    
}



/* File Control Styles */
.filebutton {
    background-color: #124987;
    border-radius: 5px;
    border-style: none;
    padding: 5px 10px;
    color: #FFFFFF;
    margin-left: 15px;
    font-size: 16px;
    cursor: pointer;
}

    .filebutton:hover {
        background-color: #1d5ba1;
    }

.filesize {
    width: 99%;
}

.filebuttonhidden {
    display: none;
}

.filebuttonholder {
    margin: 10px 0px;
}
/* End of File Control Styles*/

/* Selector Icon Styles */
.selectoricon {
    display: inline-block;
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-style: none;
    border-width: 1px;
    border-color: #557787;
    border-radius: 5px;
    width: 92px;
    text-align: center;
    vertical-align: top;
    height: 134px;
    padding: 5px;
    text-decoration: none;
    font-size: 75%;
    color: #222222;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

    .selectoricon img {
        display: block;
        margin: 2px auto 5px auto;
        padding: 0px !important;
        border-style:solid;
        border-width:2px;
        border-color:#cda215;
        border-radius:3px;
    }

    .selectoricon:hover {
        /*box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);*/
        padding-left:8px;
        padding-top:8px;
        padding-right:2px;
        padding-bottom:2px;
        background-color: #ffffff;
    }

        .selectoricon:hover img {
          
            border-color:#a58312;
        }

        .selectorlarge{
            font-size:22px;
        }

.selectoriconmain {
    margin-left: 0px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    font-size: 110%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height:140px;

}
.selectoriconmain:hover {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
         
    }

    .selectoriconmain:hover img {
        border-width:0px !important
    }

@media screen and (max-width:530px){
    .selectoricon{
        margin-left:10px;
    }
}
@media screen and (max-width:500px){
    .selectoricon{
        margin-left:5px;
    }
}

@media screen and (max-width:464px) {
    .selectoricon {
        margin-left: 20px;
    }
}

@media screen and (max-width:410px) {
    .selectoricon {
        margin-left: 12px;
    }
}

@media screen and (max-width:380px) {
    .selectoricon {
        margin-left: 4px;
    }
}

.selectorphoto{
   display:inline-block;
   margin:7px 0px 7px 22px;
   cursor:pointer;
}
.selectorphoto img{
   border-style:solid;
   border-width:2px;
   border-color:#FFFFFF;
}
.selectorphoto img:hover{
    opacity:0.8;
    border-color:#f8c959;
}

@media screen and (max-width:684px) and (min-width:520px){
    .selectorphoto img{
        width:180px;
    }
    .selectorphoto{
        width:30%;
        margin:2px 0px 2px 10px;
    }
}

@media screen and (max-width:900px) and (min-width:740px){
    .selectorphoto img{
        width:180px;
    }
    .selectorphoto{
        width:22%;
        margin:3px 0px 3px 12px;
    }
}

@media screen and (max-width:495px) {
    .selectorphoto img{
        width: 180px;
    }
}
@media screen and (max-width:450px) {
    .selectorphoto img{
        width: 160px;
    }
    .selectorphoto{
        width:44%;
        margin:7px 0px 7px 14px;
    }
}

@media screen and (max-width:300px){
    .selectorphoto img{
        width:190px;
    }
    .selectorphoto{
        width:100%;
    }
}


/* End Selector Icon 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;
}

.step {
    display: block;
    float: left;
    font-weight: bold;
    background: #e4e4e4;
    padding-right: 10px;
    height: 30px;
    line-height: 32px;
    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: 0 2px 2px 0;*/
        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-fixed{
            font-size:24px;
            color:#444444;
            display:none;
            background-color:#DDDDDD;
            width:100%;
            padding:2px 4px;

        }

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

    .step-indicator{
        display:none;
    }

    .step-fixed{
        display:inline-block;
    }

    .step {
        height: 20px;
        line-height: 22px;
        margin-right: 23px !important;
        font-size: 10px;
    }

        .step:before {
            left: -20px !important;
            border-width: 10px;
        }

        .step:after {
            right: -20px !important;
            border-width: 10px;
        }
}


/* End of Step Indicator 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 */

/* Datepicker Additional Styles */
@media screen and (max-width:700px) {
    .ui-datepicker {
        font-size: 90% !important;
    }
}

@media screen and (max-width:500px) {
    .ui-datepicker {
        font-size: 80% !important;
    }
}
/* End of Datepicker Additional Styles */

/* Photo Styles */
.photoholder{
    display:inline-block;
    border-style:solid;
    border-width:1px;
    border-color:#888888;
    border-radius:4px;
    padding:5px;
    vertical-align:top;
    margin-right:15px;
    margin-bottom:15px;
}
.photobuttonholder{
    text-align:center;
}
.photobutton{
    -webkit-appearance: none;
    background-color:#880000;
    color:#FFFFFF;
    border-style:none;
    border-radius:4px;
    padding:4px 10px;
    cursor:pointer;
}
.photobutton:hover{
    background-color:#BB2222;
}

/* End of Photo Styles */

/* Info Panel Styles */
.infopanel{
    width:98%;
    margin:0px auto 20px auto;
    padding:5px;
    border-style:none;
    border-color:#888888;
    border-width:1px;
    border-radius:4px;
    /*box-shadow: 5px 5px 3px #888888;*/
    background-color:#ffffff;
    color:#000000;
}
.infopanelheader {
    background-image: url(images/info.gif);
    background-repeat: no-repeat;
    background-position: 4px 4px;
    background-color:#DDDDDD;
    padding: 4px 0px 0px 40px;
    font-size: 24px;
    min-height: 34px;
}
.infopaneldetail {
    border-style:solid;
    border-width:0px 0px 0px 0px;
    border-color:#888888;
    margin:0px 10px 0px 40px;
    padding-top:6px;
    min-height:80px;
}

@media screen and (max-width:745px) {
    .infopaneldetail {
        margin: 0px 10px 0px 10px;
    }
}

/* End of Info Panel Styles */

/* Introduction Styles */
.introduction{
    width:90%;
    margin:0px auto;
    border-style:solid;
    border-width:1px;
    border-color:#888888;
    border-radius:4px;
    padding:15px;
    max-width:800px;
    background-color:#F1F1F1;
}
.intronewfault{
    display:inline-block;
    width:47%;
    text-align:center;
    vertical-align:top;
}
.introseparator{
    display:inline-block;
    vertical-align:top;
    padding-top:40px;
    font-weight:bold;
    font-size:18px;
    text-align:center;

}
.introexistingfault{
    display:inline-block;
    width:47%;
    text-align:center;
    vertical-align:top;
}
.introexistingfaultref{
    padding-bottom:2px;
}
.newfaulticon{
    font-size:40px;
    color:#888888;
    padding-top:1px;
}
.emergencyInfo{
    border-style:solid;
    border-width:1px;
    border-color:#888888;
    border-radius:4px;
    margin-bottom:10px;
    margin-top:20px;
    padding:5px;
    font-size:15px;
    background-color:#fef6e4;
}

@media screen and (max-width:750px) {
    .intronewfault{
        width:46%;
    }
    .introexistingfault{
        width:46%;
    }
}

@media screen and (max-width:670px) {
    .introduction {
        text-align:center;
    }
    .newfaulticon{
        display:none;
    }
    .intronewfault{
        display:block;
        width:100%;
    }
    .introexistingfault{
        display:block;
        width:100%;
    }
    .introseparator{
        padding-top:5px;
        padding-bottom:10px;
    }
}
/* End of Introduction Styles */


/* Collapsible Styles */
.collapsible {
  background-color: #e2e2e2;
  color: #444;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  margin-top:8px;
}

.collapsibleactive, .collapsible:hover {
  background-color: #d2d2d2;
}

.collapsiblecontent {
  padding: 0 16px;
  overflow: hidden;
  background-color: #f2f2f2;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

.collapsible:after {
  content: '\25BC'; /* Unicode character for down arrow */
  font-size: 18px;
  font-weight:bold;
  color: #000000;
  float: right;
  margin-left: 5px;
}

.collapsibleactive:after {
  content: "\25B2"; /* Unicode character for up arrow */
}

.collapsiblecontent li{
    margin-bottom:15px;
}

/* End of Collapsible Styles */


@media screen and (max-width:480px) {
    .showstopper .buttonise li a {
        width: 120px;
        font-size: 14px;
        vertical-align: top;
        padding:2px 10px;
        height: 33px;
    }
}

@media screen and (max-width:380px) {
    .showstopper .buttonise li a {
        width:auto;
        font-size: 14px;
        vertical-align:auto;
        padding:4px 20px;
        height: auto;
        margin-bottom:0px;
    }
     .pointertextbox{
        width:65%;
    }

     .buttonholder .controlbutton{
         width:110px;
     }
}