/*****************************************************
*****  Entire form container  ************************
******************************************************/

.dataEntryContainer {
    /*width: 700px;*/
    float: left;
    border-width: 1px;
    border-style: solid;
}

/*****************************************************
*****  FormView container  ***************************
******************************************************/

/* The container for the formview control */
.formViewContainer {
    /* If form is shorter than container, the formview will be positioned in the middle */
    margin-left: auto;
    margin-right: auto;
}

/*****************************************************
*****  Main heading  ************************
******************************************************/

h2.formHeading {
    padding-bottom: 3px;
}

/*****************************************************
*****  Questions  ************************************
******************************************************/

/* Wrapper for all the questions within a given page (may appear once per page)*/
.questions {
    float: left;
    width: 100%;
    /*
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    */
}

/* Questions (container) */
.questionsContainer {
    padding: 10px;
}

/* Individual question wrapper containing text, input and validation */
.questionWrapper {
    float: left;
    width: 100%;
    padding-bottom: 2px;
}

/* Question text container */
.questionText {
    float: left;
    width: 70%;
}

.questionTextWidth20 {
    width: 20%;
}

.questionTextWidth30 {
    width: 30%;
}

.questionTextWidth40 {
    width: 40%;
}

.questionTextWidth50 {
    width: 50%;
}

.questionTextWidth55 {
    width: 55%;
}

.questionTextWidth60 {
    width: 60%;
}

.questionTextWidth65 {
    width: 65%;
}

.questionTextBold {
    font-weight: bold;
}

.questionTextAlignLeft {
    text-align: left;
}

.questionTextAlignCenter {
    text-align: center;
}

.questionTextAlignRight {
    text-align: right;
}

/* Question input container */
.questionInput {
    float: left;
    /*    width: 35%;*/
}

/* Question validation container */
.questionValidation {
    float: left;
    width: 3%;
    text-align: left;
}

/* Provides styles on text, input and validation */
.questionPadding {
    padding: 5px;
}

.questionPaddingLeft35 {
    padding: 5px 5px 5px 35px;
}

.questionNumberText {
    float: left;
}

.questionNumberPadding {
    padding: 5px;
}

/*****************************************************
*****  Idenfitier/Form name heading generic style  ***
******************************************************/

/* Row containing heading and style */
.form-info-row {
    float: left;
}

/* Form side heading style */
.form-side-heading {
    float: left;
    font-weight: bold;
    width: 100px;
}

/* Form side value style */
.form-side-text {
    float: left;
}

/*****************************************************
*****  Sub-headings style within the form  ***********
******************************************************/

/* Sub heading (wrapper) */
.formSubHeadingWrapper {
    float: left;
    width: 100%;
    font-weight: bold;
    border: 1px solid #CCCCCC;
    background-color: #ADDAFF;
    color: black;
    margin: 0 0 15px 0;
}

/* Sub heading (padding) */
.formSubHeadingPadding {
    padding: 5px;
}

/* Sub heading secondary (wrapper) */
.formSubHeadingSecondaryWrapper {
    float: left;
    width: 99%;
}

/* Sub heading secondary (padding) */
.formSubHeadingSecondaryPadding {
    padding: 5px;
}

/* Sub heading (wrapper) */
.validationWrapper {
    float: left;
    width: 100%;
    background-color: pink;
    font-size: 11px;
}

    .validationWrapper li {
        padding: 5px;
        font-family: "Ubuntu", sans-serif;
        font-size: 15px;
        height: 25px;
        color: black;
        display: list-item;
    }

        .validationWrapper li:before {
            content: " • ";
        }

/*****************************************************
*****  Heading bar (form name)  **********************
******************************************************/

/*#region Heading bar (form name)*/

/* Form heading bar (wrapper for e.g. Baseline) */
.formHeadingBar {
    float: left;
    width: 64.8%; /* must add up with StudyNo box to max of <100% as IE8 padding pushes it out too far */
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #999999;
    height: 40px;
    /*
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    */
}

/* Form heading bar (container for e.g. Baseline) */
.formHeadingBarContainer {
}

/*#endregion*/

/*****************************************************
*****  Heading bar (identification)  *****************
******************************************************/

/*#region Heading bar (identification)*/

/* Form identifier bar (wrapper for e.g. StudyNo) */
.formIdentifierBar {
    float: left;
    width: 35%; /* must add up with FormName box to max of <100% as IE8 padding pushes it out too far */
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #999999;
    margin-bottom: 10px;
    height: 40px;
    /*  
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    */
}

/* Form identifier bar (container for e.g. StudyNo) */
.formIdentifierBarContainer {
    font-weight: normal;
    height: 35px;
}

/*#endregion*/

/*****************************************************
*****  Action bar  ***********************************
******************************************************/

/*#region Action bar*/

/* Action bar (wrapper) */
.actionBar {
    float: left;
    width: 100%;
    text-align: right;
}

/* Action bar (container) */
.actionBarContainer {
    padding: 5px;
}

/* Action button (save) */
.formview-save-button {
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #333333;
}

.formview-save-button-no-width {
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #333333;
    padding: 6px;
    cursor: pointer;
    margin: 5px 5px 5px 5px;
    background-color: #6F110F;
    color: white;
}

    .formview-save-button-no-width:hover {
        background-color: #B8DC9C;
    }
/*#endregion*/

/*****************************************************
*****  Paging  ***************************************
******************************************************/

/*#region Paging*/

/* Form paging bar (wrapper for paging buttons) */
.formPagingBar {
    float: left;
    width: 85%;
    text-align: left;
    margin-bottom: 5px;
    /*
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    */
}

/* Form paging bar (container for paging buttons) */
.formPagingBarContainer {
}

/* Paging (used on page contents i.e. used once per page just inside formViewContainer) */
.paging {
    /*
    border-bottom: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    */
}

.formVersion {
    float: left;
    font-size: 11px;
    width: 100%;
    text-align: center;
    color: #666666;
    margin-top: 5px;
}


/*#endregion*/

/*****************************************************
*****  Common structure (floats)  ********************
******************************************************/

/*#region Stucture - floats*/

/* Float left */
.float-left {
    float: left;
}

/* Float right */
.float-right {
    float: right;
}

/* Text align (left) */
.text-align-left {
    text-align: left;
}

/* Text align (right) */
.text-align-right {
    text-align: right;
}

/*#endregion*/

/*****************************************************
*****  Common structure (widths)  ********************
******************************************************/

/*#region Stucture - widths*/

/* Standard 25% width */
.width-25-percent {
    width: 25%;
}

/* Standard 10% width */
.width-10-percent {
    width: 10%;
}

/* Standard 30% width */
.width-30-percent {
    width: 30%;
}

/* Standard 48% width (safe 50%) */
.width-48-percent {
    width: 48%;
}

/* Standard 50% width */
.width-50-percent {
    width: 50%;
}

/* Standard 100% (full) width */
.width-100-percent {
    width: 100%;
}

/*#endregion*/

/*****************************************************
*****  Common structure (padding)  *******************
******************************************************/

/*#region Padding*/

/* Standard 5px padding */
.padding-5 {
    padding: 5px;
}

/* Standard 10px padding */
.padding-10 {
    padding: 10px;
}

/* Standard 15px padding */
padding-15 {
    padding: 15px;
}

/* Standard 20px padding */
padding-20 {
    padding: 20px;
}

/*#endregion*/

.padding-left-10 {
    padding-left: 10px;
}

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

padding-left-5 {
    padding-left: 5px;
}

/*****************************************************
*****  Column styles  ********************************
******************************************************/

/*#region Columns*/
.columns {
    float: left;
    width: 100%;
}

.columnsPadding {
    padding: 5px;
}

.column-one {
    float: left;
    width: 100%;
}

.column-two {
    float: left;
    width: 50%;
}

.column-three {
    float: left;
    width: 33%;
}

.column-four {
    float: left;
    width: 25%;
}

.column-five {
    float: left;
    width: 20%;
}
/*#endregion*/

/*****************************************************
*****  Formatting specific input types  **************
******************************************************/

.data-item-input-date {
    width: 110px;
    margin-right: 5px;
}


/*****************************************************
*****  Control formatting  ***************************
******************************************************/

/*#region Drop down lists*/
.ddlWidthSmall {
    width: 100px;
}

.ddlWidthMedium {
    width: 150px;
}

.ddlWidthLong {
    width: 220px;
}

.ddlWidthVLarge {
    width: 300px;
}

.ddlWidthXLarge {
    width: 350px;
}

.ddlWidthFull {
    width: 100%;
}
/*#endregion*/

/*#region Textboxes */
.txtBoxWidthSmall {
    width: 100px;
}

.txtBoxWidthMedium {
    width: 150px;
}

.txtBoxWidthLong {
    width: 216px;
}

.txtBoxWidthVLarge {
    width: 350px;
}

.txtBoxWidthFull {
    width: 100%;
}
/*#endregion*/


/*****************************************************
*****  Common modular styles for class picker  *******
******************************************************/

/*Note - removing these may affect the style of a page in preview mode and in target project if copying stylesheet */

/************************   Text align    */
.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

/************************   Text styles    */
.text-format-bold {
    font-weight: bold;
}

.text-format-italic {
    font-style: italic;
}

.text-format-underlined {
    text-decoration: underline;
}


/************************   Borders    */
.box-border-1px-solid {
    border-width: 1px;
    border-style: solid;
}

.box-border-color-gray {
    border-color: Gray;
}

.box-border-color-gray-light {
    border-color: #E2E2E2;
}

.box-border-color-black {
    border-color: black;
}


/************************   Backgrounds    */
.background-color-red {
    background-color: Red;
}

.background-color-pink {
    background-color: Pink;
}

.background-color-green {
    background-color: #BAFFBA;
}

.background-color-gray-light {
    background-color: #E2E2E2;
}

/************************   Margins    */

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

.margin-bottom-5px {
    margin-bottom: 5px;
}

.margin-left-5px {
    margin-left: 5px;
}

.margin-right-5px {
    margin-right: 5px;
}

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

.margin-all-5px {
    margin: 5px;
}

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

.margin-bottom-10px {
    margin-bottom: 10px;
}

.margin-left-10px {
    margin-left: 10px;
}

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

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

.margin-all-10px {
    margin: 10px;
}


/*****************************************************
*****  Column formatting  ****************************
******************************************************/


.columns {
    width: 100%;
    text-align: right;
}

    .columns > div {
        width: auto;
        /*float: right;*/
    }

    .columns .questionText {
        width: auto;
    }

    .columns .questionInput {
        width: auto;
    }

    .columns .questionValidation {
        width: auto;
    }

.column-two:not(:last-child) {
    width: 68.5%;
    text-align: right;
}



/*****************************************************
*****  Special classes  ******************************
******************************************************/

.keyFieldHighlight {
    background-color: #FFFFCC;
    border: 1px dotted #000080;
}


/*****************************************************
*****  Other standard styles  ************************
******************************************************/

.standardPageHeading {
    width: 100%;
    background-color: #244364;
    color: White;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

.standardPageHeadingText {
    padding: 6px;
}

/*****************************************************
*****  Overrides  ************************************
******************************************************/

/*
Hide rather than delete unless really no longer needed
*/

.formHeadingBar .form-side-heading {
    display: none;
}

.formPagingBar .form-side-heading {
    display: none;
}