﻿/* Form content */




.scfSectionContent 
{
    float:none;
    position:relative;

}



.scfSectionContent table td 
{

    padding-right:40px;
    
}


.scfSectionContent > div > div 
{
    float:none;
    width:60%;
}


.scfSectionContent label 
{
    position:relative;
    display:block;
    width:auto;
    float:none;
     color: #4176BA;
}

.scfSectionContent select, .scfSectionContent input, .scfSectionContent span
{
     color: #4176BA;
     float:none;
}


.scfSectionContent .scfMultipleLineTextBorder > div 
{
    position:relative;
    display:block;
}







/* @ Date selector */

.scfSectionContent .scfDateSelectorBorder 
{
     cursor: pointer;
    font-family: "Helvetica Neue", "Helvetica", "Arial";
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    color: #4176BA;
}

.scfSectionContent .scfDateSelectorBorder > span 
{
    position:relative;
    display:block;
    float:none;
}


.scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel label 
{
    position:absolute;
}



.scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel select 
{
    margin-top:15px;
    margin-right:5px;
    width:200px;
}


.scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel .scfDateSelectorShortLabelYear 
{
}

.scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel .scfDateSelectorShortLabelMonth 
{
    left:206px;
}


.scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel .scfDateSelectorShortLabelDay 
{
    left:410px;
}

.scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel select 
{
    width:200px;
    margin-top:20px;
   
}







/* @ date picker */








/* @ checkbox */

.scfSectionContent .scfCheckbox input, .scfSectionContent .scfCheckbox label
{
    float:left;
}

.scfSectionContent .scfCheckbox input 
{
    margin-top:5px;
}

.scfCheckbox .ui-checkbox {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    } 
    
.scfCheckbox .ui-checkbox input[type="checkbox"] {
    position: absolute;
    top: 0px; left: 0px;
    margin-left: 0px;
    margin-top: 5px;
    }

.scfCheckbox .ui-checkbox .ui-btn {
    padding: 0px;
    padding-left: 10px;
    }


/* Radio buttons */

.scfSectionContent .scfRadioButtonListBorder .scfRadioButtonListLabel 
{
    float:none;
}

.scfSectionContent .scfRadioButtonListBorder input, .scfSectionContent .scfRadioButtonListBorder label 
{
    float:left;
}

.scfSectionContent .scfRadioButtonListBorder input 
{
    margin-top:5px;
}


/* @ Check box list */
.scfSectionContent .scfCheckBoxListBorder input, .scfSectionContent .scfCheckBoxListBorder label, .scfSectionContent .required-checkbox input, .scfSectionContent .required-checkbox label 
{
    float:left;
}

.scfSectionContent .scfCheckBoxListBorder input, .scfSectionContent .required-checkbox input
{
    margin-top:5px;
}






/* @ Validation summary */

.scfValidationSummary 
{
    margin-top:30px;
    font-size:12px;
    position:relative;
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    margin-left:0;
    color: #C09853;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #FCF8E3;
    border: 1px solid #FBEED5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.scfValidationSummary ul, .scfValidationSummary li 
{
    position:relative;
    list-style:none;
    margin:0;
    padding:0;
    line-height:1.6em;
}




/* @ captcha */

.scfCaptcha .scfCaptchaLabel 
{
    outline:1px solid blue;
    display:none
}


.scfCaptcha .scfValidator 
{
    margin-top:8px;
    font-size:12px;
    position:relative;
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    margin-left:0;
    color: #C09853;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #FCF8E3;
    border: 1px solid #FBEED5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    line-height:1.6em;
    
}



.scfSubmitButtonBorder input
{
    margin-top:10px !important;
}


.scfEmailTextBox, .scfSingleLineTextBox, .scfPasswordTextBox, .scfNumberTextBox, .scfDatePickerTextBox, .scfDateTextBox, .scfRadioButtonList, .scfListBox, .scfCheckBoxList, .scfFileUpload, .scfCreditCardTextBox, .scfCreditCardType, .scfConfirmPasswordTextBox, .scfTelephoneTextBox, .scfSmsTelephoneTextBox 
{
  width:auto;   
}

.scfDropListLabel, .scfEmailLabel, .scfMultipleLineTextLabel, .scfSingleLineTextLabel, .scfPasswordLabel, .scfNumberLabel, .scfDatePickerLabel, .scfDateLabel, .scfRadioButtonListLabel, .scfCheckBoxListLabel, .scfListBoxLabel, .scfFileUploadLabel, .scfDateSelectorLabel, .scfCreditCardLabel, .scfConfirmPasswordLabel, .scfCaptchaLabel, .scfTelephoneLabel, .scfSmsTelephoneLabel 
{
    width:auto;
}


.scfForm .scfSectionContent .scfSingleLineGeneralPanel, .scfForm .scfSectionContent .scfTelephoneGeneralPanel  
{
    width:60%!important;
}

.scfForm .scfSectionContent .scfSingleLineGeneralPanel input, .scfSectionContent input.scfTelephoneTextBox, .scfSectionContent .scfListBox
{
    width:100%!important;
}

/*=====front end fixes to forms start======== */

.scfRadioButtonListGeneralPanel .ui-radio {
    margin-top: 10px;    
    }
    
.scfSectionContent .scfRadioButtonListBorder .scfRadioButtonListLabel {
    margin: 0px;
    }
    
.scfSectionContent table td {
    padding-right: 0px;    
    }
        
.scfForm .scfSectionContent .scfSingleLineGeneralPanel input {
    min-width: 200px;
    }

.scfForm textarea, .scfForm select {
    min-width: 200px;
    margin-bottom: 10px;
    }
 
 div.scfFileUploadGeneralPanel input.scfFileUpload {
     width: inherit !important;
     min-width: 200px;
     margin-top:10px;
     }

.ui-checkbox .ui-btn-inner.ui-btn-corner-all .ui-icon.ui-icon-checkbox-off.ui-icon-shadow {
    display: none;
    }
       
.scfForm .scfCheckboxBorder .ui-btn-text {
    margin-left: 15px;
    }

.ui-checkbox label.ui-btn {
    padding: 0px !important;
    margin-bottom: 10px !important;
    }
    
.scfCheckBoxListLabel {
    margin-bottom: 10px;
    }

.ui-icon.ui-icon-calendar.ui-icon-datepicker {
    display: none;
    }
    
    
/*style for mobile only as default displays well in desktop*/

@media screen and (max-width:768px) {
    
    /*to ensure all input containers look the same*/
    div.scfSectionBorder .scfSectionContent .scfSmsTelephoneTextBox,
    div.scfSectionBorder .scfSectionContent .scfEmailTextBox,
    div.scfSectionBorder .scfSectionContent .scfPasswordTextBox,
    div.scfSectionBorder .scfSectionContent .scfNumberTextBox, 
    div.scfSectionBorder .scfSectionContent .scfTelephoneTextBox,
    div.scfSectionBorder .scfSectionContent .scfDatePickerTextBox,
    div.scfSectionBorder .scfSectionContent .scfCaptchaTextBox,
    fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfEmailTextBox,
    fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfSmsTelephoneTextBox,
    fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfPasswordTextBox,
    fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfNumberTextBox,
    fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfTelephoneTextBox,
    fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfDatePickerTextBox,
    fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfCaptchaTextBox   
    {
        min-width: 200px!important;
        }
        
   fieldset.scfSectionBorderAsFieldSet .scfSectionContent .scfCheckBoxListLabel,
   div.scfSectionBorder .scfSectionContent .scfSectionContent .scfCheckBoxListLabel
        {
            width: auto !important;
            }
    .scfForm .scfSingleLineTextLabel,
    .scfForm .scfNumberLabel,
    .scfForm .scfFileUploadLabel, 
    .scfForm .scfFileUpload, 
    .scfForm .scfIntroBorder 
    {
        width: auto !important;
        }
    
    .scfSectionContent .scfDropListLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfForm select, .scfForm textarea {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfForm .scfSingleLineTextLabel, .scfForm .scfNumberTextBox, .scfForm .scfNumberLabel, .scfForm .scfFileUploadLabel, .scfForm .scfFileUpload, .scfForm .scfIntroBorder {
    margin-left: 20px !important;
    margin-right: 20px !important;
    }
    .scfForm .scfSectionContent .scfSingleLineGeneralPanel input {
    margin-left: 20px !important;
    margin-right: 20px !important;
    }
    .scfMultipleLineGeneralPanel textarea.scfMultipleLineTextBox {
    margin-left: 20px;
    margin-right: 20px;
    }    
    .scfMultipleLineTextLabel.ui-input-text {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfSmsTelephoneLabel {
    margin-left: 20px;
    margin-right: 20px;     
    }
    .scfSectionContent .scfPasswordLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfPasswordTextBox {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scForm .scfSectionContent input {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfMultipleLineTextLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfEmailLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfTelephoneLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfEmailTextBox {
    margin-left: 20px;
    margin-right: 20px;
    }
   .scfSectionContent .scfTelephoneTextBox {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfSmsTelephoneTextBox {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfDateSelectorLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfDatePickerLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfDatePickerTextBox.hasDatepicker {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfCaptchaLimitGeneralPanel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfCaptchaLabelText {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfPasswordBorder input {
    width:100%;
    }         
    .scfSubmitButtonBorder input[type="submit"] {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .scfRadioButtonListBorder .scfRadioButtonListLabel {
    margin-left: 20px;
    margin-right: 20px;     
    }
    .scfSectionContent .scfRadioButtonListGeneralPanel, .scfCheckbox .ui-checkbox, .scfForm .scfFileUpload {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionBorderAsFieldSet .ui-checkbox, .scfSectionBorder .ui-checkbox {
    margin-left: 20px;
    margin-right: 20px;
    }
    /*.scfCheckBoxListBorder .scfCheckBoxListLabel { 
    margin-left: 20px;
    margin-right: 20px;
    }*/
    .scfSectionContent .scfCheckbox input {
    margin-left: 20px;
    }
    .scfSectionContent .scfCheckBoxListLabel {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfSectionContent .required-checkbox input { /*here*/
    margin-left: 20px;
    }
    .scfSectionContent .scfCheckBoxListGeneralPanel {
    clear:both;
    }
    .scfSectionContent .scfListBoxLabel.ui-select {
    margin-left: 20px;
    margin-right: 20px;
    }
    .scfForm .scfCheckboxBorder .ui-btn-text {
    margin-left: 0px !important;
    }
    .scfSectionContent .required-checkbox input[type="checkbox"] {
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 0px;
    margin-top: 5px;
    }
    /*remove minor labels for date-picker*/
    .scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel .scfDateSelectorShortLabelYear,
    .scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel .scfDateSelectorShortLabelDay,
    .scfSectionContent .scfDateSelectorBorder .scfDateSelectorGeneralPanel .scfDateSelectorShortLabelMonth,
    .ui-icon.ui-icon-shadow.ui-icon-checkbox-on {
   display: none; 
   }
}

/*style for both mobile and desktop as does not need to be visible*/

.scfSectionContent .ui-btn-text .scfDropList {
    display: none;
    }
.scfForm .scfSectionContent .scfSingleLineGeneralPanel, .scfForm .scfSectionContent .scfSubmitButtonBorder {
    margin: 0!important
    }
div.scfSectionContent .scfSingleLineTextBorder label.scfSingleLineTextLabel.ui-input-text, .scfForm .scfSubmitButtonBorder {
    margin-left: 0px;
    }     
.scfForm .scfSectionBorderAsFieldSet {
    padding-left: 0 !important;
    }
    
@media screen and (min-width:768px) {
    .ui-btn-icon-left .ui-btn-inner {
     margin-left: 0px !important;
     }
    .scfForm .scfSectionBorderAsFieldSet .scfSingleLineTextLabel, .scfForm .scfFileUploadLabel, .scfCheckbox .ui-checkbox, .scfForm .scfFileUpload {
    margin-left: 0 !important;
    margin-right: 0  !important;
    }   
    .scfSectionContent .scfDateSelectorGeneralPanel, .scfSectionBorderAsFieldSet .scfSectionContent > div.scfDateSelectorGeneralPanel {
    width:100%;
    } 
}

.ui-radio .ui-btn-text, .ui-checkbox .ui-btn-text {
    font-family: "Helvetica Neue", "Helvetica", "Arial";
    font-weight: normal;
    font-size: 16px;
    }
   
/*margin on the left not necessary*/
.scfSectionContent input[type=checkbox] + label, .scfSectionContent input[type=radio] + label {
    margin-left: 20px !important;
    }
    
 .scfCheckBoxListBorder .scfCheckBoxListLabel {
     width:100%;
     }
  .scfSectionContent input[type=radio] + label {
     margin-right:20px;
     }     
.scfForm .scfCheckboxBorder .ui-btn-inner {
    margin-left: 0px !important;
    }
.scfSectionContent .scfMultipleLineTextLabel.ui-input-text {
    margin-bottom: 10px;
    }
.scfSectionBorderAsFieldSet .ui-checkbox,.scfSectionBorder .ui-checkbox , .scfSectionBorderAsFieldSet .required-checkbox {
    position: relative;
    }    
.scfForm {
    overflow:hidden; /*to prevent side scroll on mobile*/
    }
.scfCheckBoxListBorder .scfCheckBoxListLabel {
    width: auto !important;
    }
 .scfSectionContent .scfRadioButtonListLabel {
    width: auto !important;
    }
.scfSectionContent .scfCheckbox input, .scfSectionContent .required-checkbox input, .scfSectionContent .scfCheckBoxListBorder input, .scfSectionContent .scfRadioButtonListBorder input, .scfSectionContent .scfCheckbox input[type="checkbox"] {
    position: absolute;
    }
.scfSectionContent table td {
    position: relative;
    }    
.scfForm .scfSectionContent .ui-btn-icon-left .ui-btn-inner {
    margin-left: 0!important;
    }
.scfSectionContent .scfCheckbox input {
    margin-left: 0px !important;
    }
.scfForm .scfSectionContent .ui-radio .ui-btn-icon-left .ui-btn-inner, .scfForm .ui-checkbox .ui-btn .ui-btn-inner {
    padding-left: 0!important;
    }
 .scfSectionContent .scfDateSelectorLabel {
    width: auto;
    }
    
 
 .scfSectionContent .scfCheckBoxListBorder input, .scfSectionContent .scfCheckBoxListBorder label, .scfSectionContent .required-checkbox input, .scfSectionContent .required-checkbox label 
{
    float:none; /*fix for firefox*/
}

.scfSectionContent .scfCheckbox input, .scfSectionContent .scfCheckbox label {
    float: none !important;
}

.scfSectionContent .scfRadioButtonListBorder input, .scfSectionContent .scfRadioButtonListBorder label {
    float: none !important;
}

/*=====front end fixes to forms end======== */
