/*******************************************************
    Syn-Web-Form - Frame work    
*********************************************************
    Notes:  1) Put all Dev express input elements after standard HTML elements.
            2) Put all once off or single area related styles at the bottom of this file.
    Note: For element>element to work in IE8 and earlier, a <!DOCTYPE> must be declared.

    Nice info on selectors: http://css.maxdesign.com.au/selectutorial/selectors_child.htm

*/




.synWebForm
{
    display:inline-block;
    float:left;
    width:100%;
    height:auto;
    font-size:11px;
    font-family:Arial;
    margin-bottom:10px;
    cursor:auto;   
}

/*
    Removes the X from input fields in IE.
*/
.synWebForm input[type=text]::-ms-clear {
    display: none;
}

/*******************************************************
    Column sizing.
*********************************************************
    Column width styling.
*/

.synWebForm .formColumn,
.synWebForm .formColumnW-12,
.synWebForm .formColumnW-11,
.synWebForm .formColumnW-10,
.synWebForm .formColumnW-9,
.synWebForm .formColumnW-8, 
.synWebForm .formColumnW-7, 
.synWebForm .formColumnW-6, 
.synWebForm .formColumnW-5, 
.synWebForm .formColumnW-4, 
.synWebForm .formColumnW-3, 
.synWebForm .formColumnW-2, 
.synWebForm .formColumnW-1, 
.synWebForm .formColumnW1, 
.synWebForm .formColumnW2,
.synWebForm .formColumnW3, 
.synWebForm .formColumnW4, 
.synWebForm .formColumnW5, 
.synWebForm .formColumnW6, 
.synWebForm .formColumnW7, 
.synWebForm .formColumnW8, 
.synWebForm .formColumnW9,
.synWebForm .formColumnW10, 
.synWebForm .formColumnW11, 
.synWebForm .formColumnW12,
.synWebForm .formColumnW13, 
.synWebForm .formColumnW14, 
.synWebForm .formColumnW15,
.synWebForm .formColumnW16,
.synWebForm .formColumnW100
{
    display:inline-block;
    float:left;
    width:275px;
    margin:5px;
    clear:none;

   
}

.synWebForm .formColumnW-12   {width:40px;}
.synWebForm .formColumnW-11   {width:60px;}
.synWebForm .formColumnW-10   {width:80px;}
.synWebForm .formColumnW-9   {width:100px;}
.synWebForm .formColumnW-8  {width:120px;}
.synWebForm .formColumnW-7   {width:140px;}
.synWebForm .formColumnW-6   {width:160px;}
.synWebForm .formColumnW-5   {width:180px;}
.synWebForm .formColumnW-4   {width:200px;}
.synWebForm .formColumnW-3   {width:220px;}
.synWebForm .formColumnW-2   {width:240px;}
.synWebForm .formColumnW-1   {width:260px;}
.synWebForm .formColumnW1   {width:280px;}
.synWebForm .formColumnW2   {width:300px;}
.synWebForm .formColumnW3   {width:320px;}
.synWebForm .formColumnW4   {width:340px;}
.synWebForm .formColumnW5   {width:360px;}
.synWebForm .formColumnW6   {width:380px;}
.synWebForm .formColumnW7   {width:400px;}
.synWebForm .formColumnW8   {width:420px;}
.synWebForm .formColumnW9   {width:440px;}
.synWebForm .formColumnW10  {width:460px;}
.synWebForm .formColumnW11  {width:480px;}
.synWebForm .formColumnW12  {width:auto;min-width:400px; max-width:500px;}
.synWebForm .formColumnW13  {width:520px;}
.synWebForm .formColumnW14  {width:540px;}
.synWebForm .formColumnW15  {width:560px;}
.synWebForm .formColumnW16  {width:580px;}
.synWebForm .formColumnW100 {width:100%;}


.synWebForm .formColumn.Clear,
.synWebForm .formColumnW-10.Clear  
.synWebForm .formColumnW-9.Clear,
.synWebForm .formColumnW-7.Clear,
.synWebForm .formColumnW-6.Clear,
.synWebForm .formColumnW-5.Clear,
.synWebForm .formColumnW-4.Clear,
.synWebForm .formColumnW-3.Clear,
.synWebForm .formColumnW-2.Clear,
.synWebForm .formColumnW-1.Clear,
.synWebForm .formColumnW1.Clear,
.synWebForm .formColumnW2.Clear,
.synWebForm .formColumnW3.Clear,
.synWebForm .formColumnW4.Clear,
.synWebForm .formColumnW5.Clear,
.synWebForm .formColumnW6.Clear,
.synWebForm .formColumnW7.Clear,
.synWebForm .formColumnW8.Clear,
.synWebForm .formColumnW9.Clear,
.synWebForm .formColumnW10.Clear,
.synWebForm .formColumnW11.Clear,
.synWebForm .formColumnW12.Clear,
.synWebForm .formColumnW13.Clear,
.synWebForm .formColumnW14.Clear,
.synWebForm .formColumnW15.Clear,
.synWebForm .formColumnW16.Clear,
.synWebForm .formColumnW100.Clear { clear:both;}



/*******************************************************
    Column header
*********************************************************
  Use to label a column.
*/


.synWebForm h6 
{
    display: inline-block;
    float: left;
    width: 100%;
    clear: both;
	color:#636363;
    line-height:18px;
	font-family: Arial;
	font-size: 11px;
	border-bottom: 1px solid #474747;
	margin: 0px;
	margin-bottom: 5px;
}


/*******************************************************
    Group Elements
**********************************************************/

.synWebForm .formGroup
{
    display:block;
    float:left;
    width:inherit;
    padding:10px 0px;    
    width: 100%;
}

.synWebForm .formGroup.first,
.synWebForm .formGroup.noTopPadding
{    
    padding-top:0px;    
}

.synWebForm .formGroup.last
{    
    padding-bottom:0px;    
}

.synWebForm .borderBottom , 
.formGroup.borderBottom{
    border-bottom: 1px solid #ccc;
}


/*******************************************************
    Row elements
*********************************************************
*/

.synWebForm .row, 
.synWebForm .cRow, 
.synWebForm .row .subRow
{
    display:block;
    float:left;
    min-height:17px;
    width:100%;
    clear:both;
    margin-bottom:6px;
}

.synWebForm .row.vFail
{
    background-image:url('../images/16x16YellowAttention.png');
    background-repeat:no-repeat;
    background-position-x:4px;
}
.synWebForm .row.vFail > label
{
    color:#b00000;
}
.synWebForm .row.vFail table,
.synWebForm .row.vFail select,
.synWebForm .row.vFail input
{
     border:solid 1px #b00000;
}


.synWebForm.rowHlite .row
{
    padding-bottom:1px;
}
.synWebForm.rowHlite .row:hover
{
    background-color:#e6e6e6;
    padding-bottom:0px;
    border-bottom:1px dotted #dcdcdc;
}


/*
 .synWebForm .row.resultsGrid
{
    border-top:1px solid grey;
    padding:0px;
    padding-top:5px;
}
.synWebForm .row.resultsGrid table
{
    width:100%;
}

.synWebForm .row.resultsGrid .CDAGridView
{
    display:block;
    float:none;
    margin:0px auto;
    width:100%;
}
.synWebForm .row  label.gridViewlabel
{
    display:block;
    float:left;
    line-height:22px;
    width:inherit;
    clear:both;
    text-align:left;
    font-weight:bold;
}

.synWebForm .row.resultsGrid .dxgv
{
     cursor:pointer;
}

.synWebForm .row.gvWithLabelHeading label
{
    text-align:left;
}*/

.synWebForm .row .textlabel /* deprecate - remove references */
{
    width:100px;
    text-align:left;	
}
.synWebForm .row .valueBlue /* deprecate - remove references */
{
    color: #2B4E7F;
}

/*******************************************************
   Find Button .findButton
*********************************************************
  Use for laying buttons to right of controls
  within a row.
*/
.synWebForm .row .findButton
{   
    display:inline-block;
    float:left;
    margin:0px;
    margin-left:4px;
    vertical-align: top;
    width: 16px;
    height: 16px;
    clear:none;
}

.synWebForm .row .findButton div.dxb
{
    padding: 0px;
}

.synWebForm .row .findButton img
{
    height:16px;
    width:16px;
    padding:0px;
}

/*******************************************************
   Thin Button .thinButton
*********************************************************
  Use for laying buttons to right of controls
  within a row.
*/
.synWebForm .row .thinButton
{   
    display:inline-block;
    float:left;
    margin:0px;
    margin-left:4px;
    vertical-align: top;
    height: 16px;
    clear:none;
}

.synWebForm .row .thinButton div.dxb
{
    padding: 0px;
    padding-right: 2px;
    padding-bottom:1px;
}



/*******************************************************
   Button row class
*********************************************************
    Used to lay button rows, usually at the bottom of your form.
    Will default to floating buttons to the right.
*/
.synWebForm .row.buttons{padding-top: 10px;}
.synWebForm .row.buttons.centerButtons
{
  text-align:center;  
}

.synWebForm .row.buttons .button,
.synWebForm .row.buttons .cdaButton
{
    display:inline-block;
    float:right;
    margin:0px 3px;
}

.synWebForm .row.buttons
{
    float:left;
}


/* Dev Express Controls are tables.*/
.synWebForm .row.buttons table.buttonTable, 
.synWebForm .row table.rowTable
{
    display:inline-block;
    float:left;
    margin-right:5px;
    width:auto;
}


/*******************************************************
   Syn form extra classes
*********************************************************
   optional  Useful aesthetic classes
*/
.synWebForm .row.buttons .formMessages
{
    display:inline-block;
    float:left;
    line-height:17px;
    color:red;
    margin:0px 3px;
}

/*******************************************************
    Regions, 
*********************************************************
    use for hiding and showing sub selections of a form using 
    Java script etc.
    Note: Also good for splitting up markup.
*/
.synWebForm .region
{
    display:block;
    float:left;
    width:inherit;
    height:inherit;
}

/*******************************************************
    Sub Form Elements
********************************************************
   Use these styles to lay a sub from within a parent 
   from.
   Note: may deprecate.
*/

.synWebForm .row .subRow label
{
    display:inline-block;
    float:left;
    width:80px;
    min-height:17px;
    height:auto;
    padding-right:5px;
    text-align:right;
}
.synWebForm .row .subFormlabel
{
    display:inline-block;
    float:left;
    width:118px;
    margin-right:5px;
}
.synWebForm .row .subForm
{
    display:inline-block;
    float:left;
}

.synWebForm .row .subFormlabel.SFx1,.synWebForm .row .subForm.SFx1{ height:20px;}
.synWebForm .row .subFormlabel.SFx2,.synWebForm .row .subForm.SFx2{ height:40px;}
.synWebForm .row .subFormlabel.SFx3,.synWebForm .row .subForm.SFx3{ height:60px;}
.synWebForm .row .subFormlabel.SFx4,.synWebForm .row .subForm.SFx4{ height:80px;}
.synWebForm .row .subFormlabel.SFx5,.synWebForm .row .subForm.SFx5{ height:100px;}
.synWebForm .row .subFormlabel.SFx6,.synWebForm .row .subForm.SFx6{ height:120px;}
.synWebForm .row .subFormlabel.SFx7,.synWebForm .row .subForm.SFx7{ height:140px;}
.synWebForm .row .subFormlabel.SFx8,.synWebForm .row .subForm.SFx8{ height:160px;}

.synWebForm .subInfo span, .synWebForm .section label
{
    float:left;
}

.synWebForm .subInfo
{
    margin-bottom:5px;
    clear:both;
}

.synWebForm .row span.vGroup
{
    display:inline-block;
    float:left;
    width:106px;
    clear:none;
}

.synWebForm .fx-3 span.vGroup {width:106px;}
.synWebForm .fx-2 span.vGroup {width:126px;}
.synWebForm .fx-1 span.vGroup {width:146px;}
.synWebForm .fx1  span.vGroup {width:166px;}
.synWebForm .fx2  span.vGroup {width:186px;}
.synWebForm .fx3  span.vGroup {width:206px;}
.synWebForm .fx4  span.vGroup {width:226px;}
.synWebForm .fx5  span.vGroup {width:246px;}
.synWebForm .fx6  span.vGroup {width:266px;}
.synWebForm .fx7  span.vGroup {width:286px;}
.synWebForm .fx8  span.vGroup {width:306px;}
.synWebForm .fx9  span.vGroup {width:326px;}
.synWebForm .fx10 span.vGroup {width:346px;}
.synWebForm .fx11 span.vGroup {width:366px;}
.synWebForm .fx12 span.vGroup {width:386px;}
.synWebForm .fx13 span.vGroup {width:406px;}
.synWebForm .fx14 span.vGroup {width:426px;}
.synWebForm .fx100 span.vGroup {width:100%;}


/*******************************************************
   Thin rows 
*********************************************************
  Note as think as some. (makes throws thiner if needed)
*/

.synWebForm .thinRows .row,
.synWebForm .thinRows .row .subRow
{
     min-height:13px;
     line-height:13px;
     margin-bottom:5px;
}

.synWebForm .thinRows .row label,
.synWebForm .thinRows .row .cdaLabel,
.synWebForm .thinRows .row .subRow .label,
.synWebForm .thinRows .row .subRow .cdaLabel
{   
    font-size:11px;
    font-family:Arial;
    min-height:13px;
    line-height:13px;
    padding-right:5px;
}

/******************************************************************
    Row Slots
****************************************************************** 
  Row slots are used to lay controls horizontally.

 */

.synWebForm .row .rowSlot,
.synWebForm .cRow .rowSlot 
{
	display: inline-block;
	float:left;
	min-height: 20px;
	clear: none;	
}

.synWebForm .row .rowSlot.buttons
{
    padding-left:10px;
}
.synWebForm .row .rowSlot.leftAlign
{
    padding-left:4px;
}
.synWebForm .row .rowSlot.leftAlign label,
.synWebForm .row .rowSlot.leftAlign .label
{
    text-align:left;
    padding-left:4px;
}


/******************************************************************
    Row Tools
****************************************************************** 
  Row tools are custom tools such as image links and tool sets/filters
  that may expand on rollover.
 */

.synWebForm .row .rowTool {   
    display:inline-block;
    float:left;

}
.synWebForm .row .rowTool.imageLink img {
    margin-top:2px;
    cursor:pointer;
    opacity:0.7;
    margin-left:4px;
    margin-right:4px;
}
.synWebForm .row .rowTool.imageLink img:hover {
    margin-top:2px;
    opacity:1;
}







/******************************************************************
    HTML Label
****************************************************************** 
   lblfx() Use these to override default label sizes.
   Note: Can be used in column or row elements but always must be in parent element of any label elements.

 */

.synWebForm label,
.synWebForm .cdaLabel
{
    color:black;
    font-family:Arial;
    font-size:11px;
}
.synWebForm label.red
{
    color:#b00000;
}


/* 
    Alert message: Warning 
*/


.synWebForm .labelWarning 
{   
    display:inline-block;
    float:left;
    background-color:inherit;
    border-bottom:none;
    color: #900 !important;
    line-height:17px;
    margin-top:3px;
    text-align: left;
    width:100% !important;
    background: #FCC;
    box-sizing: border-box;
    padding: 5px 10px;
    margin-bottom: 10px;

}

.synWebForm .row  label,
.synWebForm .cRow  label,
.synWebForm .row  .cdaLabel,
.synWebForm .section label,
.synWebForm .section .cdaLabel,
.synWebForm .section span
{
    display:inline-block;
    float:left;
    min-height:17px;
    line-height:17px;  
  
}

.synWebForm .row > label ,
.synWebForm .cRow > label ,
.synWebForm .row > .cdaLabel ,
.synWebForm .row  .rowSlot > label,
.synWebForm .cRow  .rowSlot > label,
.synWebForm .row  .rowSlot > .cdaLabel
{   
    text-align:right;
    min-width:38px;
    padding-right:5px;
    margin-top:3px;
    width:118px;
}

.synWebForm .row > label:first-letter ,
.synWebForm .cRow > label:first-letter ,
.synWebForm .row > .cdaLabel:first-letter ,
.synWebForm .row  .rowSlot > label:first-letter,
.synWebForm .cRow  .rowSlot > label:first-letter,
.synWebForm .row  .rowSlot > .cdaLabel:first-letter
{
     text-transform: uppercase;
}

    .synWebForm .row.rowlbAuto .leftMargin {
        margin-left: 30px;
    }

.synWebForm .lbfx-2 .row > label,
.synWebForm .lbfx-2 .cRow > label, 
.synWebForm .lbfx-2 .row  .rowSlot  label,
.synWebForm .lbfx-2 .cRow  .rowSlot  label,
.synWebForm .lbfx-2 .row > .cdaLabel, 
.synWebForm .lbfx-2 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx-2 .dxeCaption, 
.synWebForm .lbfx-2 .row .dxeTAL label
{ width:18px;}


.synWebForm .lbfx-1 .row > label,
.synWebForm .lbfx-1 .cRow > label, 
.synWebForm .lbfx-1 .row  .rowSlot  label,
.synWebForm .lbfx-1 .cRow  .rowSlot  label,
.synWebForm .lbfx-1 .row > .cdaLabel, 
.synWebForm .lbfx-1 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx-1 .dxeCaption, 
.synWebForm .lbfx-1 .row .dxeTAL label
{ width:38px;}


.synWebForm .lbfx0 .row > label,
.synWebForm .lbfx0 .cRow > label, 
.synWebForm .lbfx0 .row  .rowSlot  label,
.synWebForm .lbfx0 .cRow  .rowSlot  label,
.synWebForm .lbfx0 .row > .cdaLabel, 
.synWebForm .lbfx0 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx0 .dxeCaption, 
.synWebForm .lbfx0 .row .dxeTAL label
{ width:58px;}
.synWebForm .row.rowlbAuto .first {
    margin-left: 0px;
}

.synWebForm .lbfx1 .row > label,
.synWebForm .lbfx1 .cRow > label,
.synWebForm .lbfx1 .row  .rowSlot  label,
.synWebForm .lbfx1 .cRow  .rowSlot  label,
.synWebForm .lbfx1 .row > .cdaLabel,
.synWebForm .lbfx1 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx1 .dxeCaption,
.synWebForm .lbfx1 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx1
{ width:78px;}

.synWebForm .lbfx2 .row > label,
.synWebForm .lbfx2 .cRow > label,
.synWebForm .lbfx2 .row .rowSlot label,
.synWebForm .lbfx2 .cRow .rowSlot label,
.synWebForm .lbfx2 .row > .cdaLabel,
.synWebForm .lbfx2 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx2 .dxeCaption,
.synWebForm .lbfx2 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx2 
{ width:98px;}

.synWebForm .lbfx3 .row > label,
.synWebForm .lbfx3 .cRow > label,
.synWebForm .lbfx3 .row  .rowSlot  label,
.synWebForm .lbfx3 .cRow  .rowSlot  label,
.synWebForm .lbfx3 .row > .cdaLabel,
.synWebForm .lbfx3 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx3 .dxeCaption,
.synWebForm .lbfx3 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx3 
{ width:118px;}

.synWebForm .lbfx4 .row > label,
.synWebForm .lbfx4 .cRow > label,
.synWebForm .lbfx4 .row  .rowSlot  label,
.synWebForm .lbfx4 .cRow  .rowSlot  label,
.synWebForm .lbfx4 .row > .cdaLabel,
.synWebForm .lbfx4 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx4 .dxeCaption,
.synWebForm .lbfx4 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx4 
{ width:138px;}

.synWebForm .lbfx5 .row > label,
.synWebForm .lbfx5 .cRow > label,
.synWebForm .lbfx5 .row  .rowSlot  label,
.synWebForm .lbfx5 .cRow  .rowSlot  label,
.synWebForm .lbfx5 .row > .cdaLabel,
.synWebForm .lbfx5 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx5 .dxeCaption,
.synWebForm .lbfx5 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx5
{ width:158px;}

.synWebForm .lbfx6 .row > label,
.synWebForm .lbfx6 .cRow > label,
.synWebForm .lbfx6 .row  .rowSlot  label,
.synWebForm .lbfx6 .cRow  .rowSlot  label,
.synWebForm .lbfx6 .row > .cdaLabel,
.synWebForm .lbfx6 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx6 .dxeCaption,
.synWebForm .lbfx6 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx6
{ width:178px;}

.synWebForm .lbfx7 .row > label,
.synWebForm .lbfx7 .cRow > label,
.synWebForm .lbfx7 .row  .rowSlot  label,
.synWebForm .lbfx7 .cRow  .rowSlot  label,
.synWebForm .lbfx7 .row > .cdaLabel,
.synWebForm .lbfx7 .row  .rowSlot  .cdaLabel,
.synWebForm .lbfx7 .dxeCaption,
.synWebForm .lbfx7 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx7 {
    width: 198px;
}

.synWebForm .lbfx8 .row > label,
.synWebForm .lbfx8 .cRow > label,
.synWebForm .lbfx8 .row  .rowSlot  label,
.synWebForm .lbfx8 .cRow  .rowSlot  label,
.synWebForm .lbfx8 .row > .cdaLabel,
.synWebForm .lbfx8 .row  .rowSlot .cdaLabel,
.synWebForm .lbfx8 .dxeCaption,
.synWebForm .lbfx8 .row .dxeTAL label,
.synWebForm .row.rowlbAuto label.lbfx8 {
    width: 218px;
}

/* 
    used in Substitute tab in staff Maintenance
*/
.synWebForm .row.rowlbAuto label,
.synWebForm .row.rowlbAuto .cdaLabel,
.synWebForm .row.rowlbAuto .rowSlot label 
.synWebForm .row.rowlbAuto .rowSlot .cdaLabel 
 {
    width: auto;
    white-space: nowrap;
    margin-left: 30px;
 }

/* 
    Colon control class 
    Doesn't work in IE 11??
    Disabled by DD.

    .synWebForm.cColon .row > label:first-of-type:after ,
    .synWebForm.cColon .row  div.rowSlot > label:first-of-type:after {
        content: ":"
}
*/
/*
    HTML P (Paragraph)
*/

.synWebForm .row p
{
    display:inline-block;
    float:left;
    min-height:20px;
    margin:0px;
    padding:0px;
    line-height:20px;
    margin-top:1px;
    font-weight:bold;
    color:#474747;

}



/*
    HTML "select" element
*/
.synWebForm  select
{
    display:inline-block;
    float:left;
    width:106px;
    height:17px;
    cursor:pointer;
}
.synWebForm  select option {  cursor:pointer;}

.synWebForm .fx-3  select{width:66px;}
.synWebForm .fx-2  select{width:86px;}
.synWebForm .fx-1  select{width:106px;}
.synWebForm .fx1  select{width:126px;}
.synWebForm .fx2  select{width:146px;}
.synWebForm .fx3  select{width:166px;}
.synWebForm .fx4  select{width:186px;}
.synWebForm .fx5  select{width:206px;}
.synWebForm .fx6  select{width:226px;}
.synWebForm .fx7  select{width:246px;}
.synWebForm .fx8  select{width:266px;}
.synWebForm .fx9  select{width:286px;}
.synWebForm .fx10  select{width:306px;}
.synWebForm .fx11  select{width:326px;}
.synWebForm .fx12  select{width:346px;}
.synWebForm .fx12  select{width:366px;}
.synWebForm .fx13  select{width:386px;}

/* 
    HTML input[type=text] 
*/

.synWebForm input[type=text], 
.synWebForm input[type=text].cdaTextBox
{   
    display:inline-block;
    float:left;
    /*background-color:white; commented out so the disabled bg-color can show through*/
    border: 1px solid  #9F9F9F;
    min-height: 17px;
}



.synWebForm .row span.vGroup > input[type=text],
.synWebForm .row span.vGroup > input[type=text].cdaTextBox
{   
    display:block;
    float:left;
    margin-bottom:4px;
    clear:right;
}


.synWebForm .fx-3  .row   label + input[type=text]  { width:60px; }
.synWebForm .fx-2  .row   label + input[type=text]  { width:82px; }
.synWebForm .fx-1  .row   label + input[type=text]  { width:104px; }
.synWebForm .fx1   .row   label + input[type=text]  { width:126px; }
.synWebForm .fx2   .row   label + input[type=text]  { width:146px; }
.synWebForm .fx3   .row   label + input[type=text]  { width:166px; }
.synWebForm .fx4   .row   label + input[type=text]  { width:186px; }
.synWebForm .fx5   .row   label + input[type=text]  { width:202px; }
.synWebForm .fx6   .row   label + input[type=text]  { width:222px; }
.synWebForm .fx7   .row   label + input[type=text]  { width:244px; }
.synWebForm .fx8   .row   label + input[type=text]  { width:266px; }
.synWebForm .fx9   .row   label + input[type=text]  { width:288px; }
.synWebForm .fx10  .row   label + input[type=text]  { width:310px; }
.synWebForm .fx11  .row   label + input[type=text]  { width:332px; }
.synWebForm .fx12  .row   label + input[type=text]  { width:352px; }
.synWebForm .fx13  .row   label + input[type=text]  { width:372px; }
.synWebForm .fx14  .row   label + input[type=text]  { width:392px; }


/*
    HTML SPAN or static text values
*/


.synWebForm .row label + span
{   
    display:inline-block;
    float:left;
    height:16px;
    background-color:inherit;
    border-bottom:1px solid #9F9F9F;
    color:#2B4E7F !important;
    line-height:17px;
    margin-top:3px;

}

.synWebForm .fx-4  .row   label + span  { width:38px; }
.synWebForm .fx-3  .row   label + span  { width:60px; }
.synWebForm .fx-2  .row   label + span  { width:82px; }
.synWebForm .fx-1  .row   label + span  { width:104px; }
.synWebForm .fx1   .row   label + span  { width:126px; }
.synWebForm .fx2   .row   label + span  { width:146px; }
.synWebForm .fx3   .row   label + span  { width:166px; }
.synWebForm .fx4   .row   label + span  { width:186px; }
.synWebForm .fx5   .row   label + span  { width:202px; }
.synWebForm .fx6   .row   label + span  { width:222px; }
.synWebForm .fx7   .row   label + span  { width:244px; }
.synWebForm .fx8   .row   label + span  { width:266px; }
.synWebForm .fx9   .row   label + span  { width:288px; }
.synWebForm .fx10  .row   label + span  { width:310px; }
.synWebForm .fx11  .row   label + span  { width:332px; }
.synWebForm .fx12  .row   label + span  { width:352px; }
.synWebForm .fx13  .row   label + span  { width:372px; }
.synWebForm .fx14  .row   label + span  { width:392px; }

.synWebForm  .row   label + span.CDAASPxRadioButton,
.synWebForm  .row   label + span.CDAAspxCheckBox,
.synWebForm  .row   label + span.vGroup
{
   border:none;
   height:auto;
}
.synWebForm  .row   label + span.CDAAspxCheckBox span.dxICheckBox
{
    margin-bottom:6px;
}




.synWebForm .row label + span.scale
{
    height:auto;
}

/* 
  HTML Validation Styles (DIV)
*/



.synWebForm div.notification
{
    display:none;
    float:left;
    clear:none;
    min-height:20px;
    overflow:visible;
    margin-top:4px;
    margin-bottom:20px;

    border-bottom:thin;
    padding-left:26px;
    background-image:url('../images/16x16RedAttention.gif');
        
    background-repeat:no-repeat;
    background-position-x:4px;            
    font-size:11px;
    font-family:Arial;   
    color: gray;    
    
}



.synWebForm .row div.vMsg
{
    display:inline-block;
    float:left;
    clear:none;
    min-height:20px;
    overflow:visible;
    margin-top:2px;

    padding-left:26px;
    background-image:url('../images/16x16RedAttention.gif');
    background-size:16px;
    background-repeat:no-repeat;
    background-position-x:4px;
    
}

.hdivider
{
    display: block;
    width: 80%;
    border-bottom: solid 1px grey;
    padding-bottom: 30px;
}

.synWebForm .row div.vMsg span.msg
{
    font-size:11px;
    font-family:Arial;
    border-bottom:1px dashed #3c0000;
    color: #780000;
    font-weight:bold;
}

.synWebForm input.validationFail
{
    color: red;
    border-color: red !important;
}


/* 
    HTML input[type=checkbox] 
*/

.synWebForm .row input[type=checkbox]  
{
   display:inline-block;
   float:left;

}
.synWebForm .row input[type=checkbox] + label
{
   display:inline-block;
   float:left;
   text-align:left;
   width:auto;
   padding:0px;

}

.synWebForm .row span.vGroup input[type=checkbox]  
{   
    display:inline-block;
    float:left;
    clear:left;
}
.synWebForm .row span.vGroup input[type=checkbox] + label
{
    display:inline-block;
    float:left;
    clear:right;
}
/* 
    HTML input[type=radio] 
*/

.synWebForm .row input[type=radio]
{
   display:inline-block;
   float:left;
}

.synWebForm .row input[type=radio] + label
{   
   display:inline-block;
   float:left;
   text-align:left;
   width:auto;
   padding:0px;
  
}

.synWebForm .row span.vGroup input[type=radio]  
{   
    display:inline-block;
    float:left;
    clear:left;
}
.synWebForm .row span.vGroup input[type=radio]  + label
{
    display:inline-block;
    float:left;
    clear:right;
}



/* 
    HTML input[type=button]
*/
.synWebForm .row.buttons input[type=button]
{
    float:right;
    height:24px;
    margin:0px 2px;
}

/* HTML 5 button elements */
.synWebForm button
{
    font-family:Arial;
    font-size:11px;
}
.synWebForm .row.buttons button
{   
    float:right;
    height:24px;
    margin:0px 2px;
}



/****************************************************************
    Dev - Express Controls.    
*****************************************************************
Note: No Dev express controls should appear above this comment.    
    
*/


/* Global Disabled sytle for devxpress controls that have table makrup.*/
.synWebForm table.cdaDisabled , .synWebForm table.dxeReadOnly, .synWebForm table.dxeReadOnly input
{   
    border:none;
    background-color:#eeeeee;
    /*padding:1px;*/
    border:1px solid #cccccc;      
}

.synWebForm table.dxeMemoSys.dxeMemo.CDAAspxMemo.dxeDisabled.CDAAspxMemo.cdaDisabled
{
    border: 1px solid #cccccc;
    background-color:#eeeeee;
    padding:1px;
}

.synWebForm table.CDAAspxCheckBox.cdaDisabled, .synWebForm table.CDAAspxCheckBox.dxeReadOnly
{
    border: 1px solid #9f9f9f;
    background-color:inherit;
    padding:1px;
    border: none;
}
 

/*******************************************************
  Radio button styles
*********************************************************
*/
.synWebForm .row .radioButtonLabel
{
    display: inline-block;
	float: left;
	clear: none;
	height: 20px;
	line-height: 20px;
	padding-right:5px;
	text-align: right;
}
.synWebForm .row  .dxeBase {
	display: inline-block;
	float: left;
	height:17px;
	line-height: 20px;
	padding: 0px !Important;
}
.synWebForm .row .dxeIRadioButton {
	display: inline-block;
	float: left;
	clear: none;
}
.synWebForm .row fieldset.hozRadioButtons
{
    display:inline-block;
    float:left;
    width:inherit;
}
.synWebForm .row .hozRadioButtons label
{
    width:auto;
    padding-left:10px;
}


/*Default Phone input*/
.synWebForm .row input.phone, 
.synWebForm .row input.fax,
.synWebForm .row input.mobile
{
    width:80px !important;
}

.synWebForm .row input.postcode,
.synWebForm .row input.zip
{
    width:40px !important;
}


/******************************************************/





/*
  Dev-Express Check-box   
 */
/*.synWebForm .row span.vGroup table.dxeBase 
{   
    display:inline-block;
    float:left;
    clear:left;
}*/




/****************************************************************
    Dev - Spin Edit controls - CDAAspxSpinEdit
*****************************************************************
*/

.synWebForm  .row table.dxeButtonEditSys.dxeButtonEditSysWithSpacing.dxeButtonEdit input[type=text]
{
    width:100% !Important;
    border:none;
     background-color:transparent;
}


.synWebForm .CDAAspxSpinEdit
{
    display:inline-block;
    float:left;
    clear:none;

}

.synWebForm .fx-3 .row .CDAAspxSpinEdit { width:60px; }
.synWebForm .fx-2 .row .CDAAspxSpinEdit { width:82px; }
.synWebForm .fx-1 .row .CDAAspxSpinEdit { width:104px; }
.synWebForm .fx1  .row .CDAAspxSpinEdit { width:126px; }
.synWebForm .fx2  .row .CDAAspxSpinEdit { width:146px; }
.synWebForm .fx3  .row .CDAAspxSpinEdit { width:166px; }
.synWebForm .fx4  .row .CDAAspxSpinEdit { width:186px; }
.synWebForm .fx5  .row .CDAAspxSpinEdit { width:202px; }
.synWebForm .fx6  .row .CDAAspxSpinEdit { width:222px; }
.synWebForm .fx7  .row .CDAAspxSpinEdit { width:244px; }
.synWebForm .fx8  .row .CDAAspxSpinEdit { width:266px; }
.synWebForm .fx9  .row .CDAAspxSpinEdit { width:288px; }
.synWebForm .fx10 .row .CDAAspxSpinEdit { width:310px; }
.synWebForm .fx11 .row .CDAAspxSpinEdit { width:332px; }
.synWebForm .fx12 .row .CDAAspxSpinEdit { width:352px; }
.synWebForm .fx13 .row .CDAAspxSpinEdit { width:372px; }
.synWebForm .fx14 .row .CDAAspxSpinEdit { width:392px; }
.synWebForm .fx100 .row .CDAAspxSpinEdit { width:100%; }

.synWebForm .fx-3 .row .CDAAspxSpinEdit .dxic { width:36px !important; }
.synWebForm .fx-2 .row .CDAAspxSpinEdit .dxic { width:58px !important; }
.synWebForm .fx-1 .row .CDAAspxSpinEdit .dxic { width:80px !important; }
.synWebForm .fx1  .row .CDAAspxSpinEdit .dxic { width:102px !important; }
.synWebForm .fx2  .row .CDAAspxSpinEdit .dxic { width:122px !important; }
.synWebForm .fx3  .row .CDAAspxSpinEdit .dxic { width:142px !important; }
.synWebForm .fx4  .row .CDAAspxSpinEdit .dxic { width:162px !important; }
.synWebForm .fx5  .row .CDAAspxSpinEdit .dxic { width:178px !important; }
.synWebForm .fx6  .row .CDAAspxSpinEdit .dxic { width:198px !important; }
.synWebForm .fx7  .row .CDAAspxSpinEdit .dxic { width:220px !important; }
.synWebForm .fx8  .row .CDAAspxSpinEdit .dxic { width:242px !important; }
.synWebForm .fx9  .row .CDAAspxSpinEdit .dxic { width:266px !important; }
.synWebForm .fx10 .row .CDAAspxSpinEdit .dxic { width:286px !important; }
.synWebForm .fx11 .row .CDAAspxSpinEdit .dxic { width:208px !important; }
.synWebForm .fx12 .row .CDAAspxSpinEdit .dxic { width:328px !important; }
.synWebForm .fx13 .row .CDAAspxSpinEdit .dxic { width:348px !important; }
.synWebForm .fx14 .row .CDAAspxSpinEdit .dxic { width:368px !important; }
.synWebForm .fx100 .row .CDAAspxSpinEdit .dxic { width:100% !important; }

/*Disabled Spin Edit styles*/


.synWebForm  .CDAAspxSpinEdit.cdaDisabled .dxeButtonEditButton, 
.synWebForm  .CDAAspxSpinEdit.cdaDisabled .dxeSpinLargeIncButton, 
.synWebForm  .CDAAspxSpinEdit.cdaDisabled .dxeSpinLargeDecButton
{
    display:none;
}
.CDAAspxSpinEdit input {
    width: inherit !important;
}

/****************************************************************
    Dev - TimeEdit - CDATimeEdit
*****************************************************************
*/

.synWebForm .fx-3 .row .CDATimeEdit { width:60px !important; }
.synWebForm .fx-2 .row .CDATimeEdit { width:104px !important; }
.synWebForm .fx1  .row .CDATimeEdit  { width:126px !important; }
.synWebForm .fx2  .row .CDATimeEdit { width:146px !important; }
.synWebForm .fx3  .row .CDATimeEdit { width:166px !important; }
.synWebForm .fx4  .row .CDATimeEdit { width:186px !important; }
.synWebForm .fx5  .row .CDATimeEdit { width:202px !important; }
.synWebForm .fx6  .row .CDATimeEdit { width:222px !important; }
.synWebForm .fx7  .row .CDATimeEdit { width:244px !important; }
.synWebForm .fx8  .row .CDATimeEdit { width:266px !important; }
.synWebForm .fx9  .row .CDATimeEdit { width:288px !important; }
.synWebForm .fx10 .row .CDATimeEdit { width:310px !important; }
.synWebForm .fx11 .row .CDATimeEdit { width:332px !important; }
.synWebForm .fx12 .row .CDATimeEdit { width:352px !important; }
.synWebForm .fx13 .row .CDATimeEdit { width:372px !important; }
.synWebForm .fx14 .row .CDATimeEdit { width:392px !important; }
.synWebForm .fx100 .row .CDATimeEdit { width:100% !important; }


@media screen and (-webkit-min-device-pixel-ratio:0) 
{
    .synWebForm .fx-3 .row .CDATimeEdit { width:62px !important; }
    .synWebForm .fx-2 .row .CDATimeEdit { width:106px !important; }
    .synWebForm .fx1  .row .CDATimeEdit { width:128px !important; }
    .synWebForm .fx2  .row .CDATimeEdit { width:148px !important; }
    .synWebForm .fx3  .row .CDATimeEdit { width:168px !important; }
    .synWebForm .fx4  .row .CDATimeEdit { width:188px !important; }
    .synWebForm .fx5  .row .CDATimeEdit { width:204px !important; }
    .synWebForm .fx6  .row .CDATimeEdit { width:224px !important; }
    .synWebForm .fx7  .row .CDATimeEdit { width:246px !important; }
    .synWebForm .fx8  .row .CDATimeEdit { width:268px !important; }
    .synWebForm .fx9  .row .CDATimeEdit { width:290px !important; }
    .synWebForm .fx10 .row .CDATimeEdit { width:312px !important; }
    .synWebForm .fx11 .row .CDATimeEdit { width:334px !important; }
    .synWebForm .fx12 .row .CDATimeEdit { width:354px !important; }
    .synWebForm .fx13 .row .CDATimeEdit { width:374px !important; }
    .synWebForm .fx14 .row .CDATimeEdit { width:394px !important; }
    .synWebForm .fx100 .row .CDATimeEdit { width:100% !important; }
}
/****************************************************************
    DevExpress - CDA Date Time Edit - CDADateTimeEdit
*****************************************************************
*/


.synWebForm .fx-3 .row .CDADateTimeEdit { width:60px !important; }
.synWebForm .fx-2 .row .CDADateTimeEdit { width:104px !important; }
.synWebForm .fx1  .row .CDADateTimeEdit { width:126px !important;}
.synWebForm .fx2  .row .CDADateTimeEdit { width:146px !important; }
.synWebForm .fx3  .row .CDADateTimeEdit { width:166px !important; }
.synWebForm .fx4  .row .CDADateTimeEdit { width:186px !important; }
.synWebForm .fx5  .row .CDADateTimeEdit { width:202px !important; }
.synWebForm .fx6  .row .CDADateTimeEdit { width:222px !important; }
.synWebForm .fx7  .row .CDADateTimeEdit { width:244px !important; }
.synWebForm .fx8  .row .CDADateTimeEdit { width:266px !important; }
.synWebForm .fx9  .row .CDADateTimeEdit { width:288px !important; }
.synWebForm .fx10 .row .CDADateTimeEdit { width:310px !important; }
.synWebForm .fx11 .row .CDADateTimeEdit { width:332px !important; }
.synWebForm .fx12 .row .CDADateTimeEdit { width:352px !important; }
.synWebForm .fx13 .row .CDADateTimeEdit { width:372px !important; }
.synWebForm .fx14 .row .CDADateTimeEdit { width:392px !important; }
.synWebForm .fx100 .row .CDADateTimeEdit { width:100% !important; }

.synWebForm  table.CDADateTimeEdit
{
    display:inline-block;
    float:none;
    overflow:hidden;
    /*width: auto !important;*/
}

.synWebForm table.CDADateTimeEdit input[type=text]
{   
    padding:0px;
    margin:0px;
    background-color:transparent;
}


/* 
  dxeButtonEdit Effects  (May effect others please add.)
  Date Edit
  ComboBox
  spinner..
*/

.synWebForm .CDAAspxTextBox 
{
    display:inline-block;
    float:left;
    /*height:17px*/ 
}


.synWebForm  .CDAAspxTextBox td {overflow:hidden;}
.synWebForm  table.CDAAspxTextBox input[type="text"]
{   
    /*height:15px;*/
    display:block;
    padding:0px;
    margin:0px;
    background-color:transparent;
        text-indent:2px;
        padding-top:1px;

}
.synWebForm table.CDAAspxTextBox td
{
    padding:0px !important;
}

  
.synWebForm .fx-3 .CDAAspxTextBox,
.row .fx-3 
{ width:60px; }

.synWebForm .fx-3  table.CDAAspxTextBox input[type="text"],
.synWebForm  table.fx-3.CDAAspxTextBox input[type="text"]
{ width:58px !important; }

.synWebForm .fx-2 .CDAAspxTextBox,
.row .fx-2 
{ width:82px; }

.synWebForm .fx-2  table.CDAAspxTextBox input[type="text"],
.synWebForm  table.fx-2 input[type="text"]
{ width:80px !important; }

.synWebForm .fx-1 .CDAAspxTextBox,
.row .fx-1 
{ width:104px; }

.synWebForm .fx-1  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx-1 input[type="text"]
{ width:102px !important; }

.synWebForm .fx1  .CDAAspxTextBox,
.row   .fx1
{ width:126px; }

.synWebForm .fx1  table.CDAAspxTextBox input[type="text"],
.synWebForm  table.fx1 input[type="text"]
{ width:124px !important; }

.synWebForm .fx2  .CDAAspxTextBox,
.row .fx2  
{ width:146px; }

.synWebForm .fx2  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx2.CDAAspxTextBox input[type="text"]
{ width:144px !important; }

.synWebForm .fx3  .CDAAspxTextBox,
.row .fx3
{ width:166px; }

.synWebForm .fx3  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx3.CDAAspxTextBox input[type="text"]
{ width:164px !important; }

.synWebForm .fx4  .CDAAspxTextBox,
.row .fx4
 { width:186px; }

.synWebForm .fx4  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx4.CDAAspxTextBox input[type="text"]
{ width:184px !important; }

.synWebForm .fx5  .CDAAspxTextBox,
.row .fx5
 { width:202px; }

.synWebForm .fx5  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx5.CDAAspxTextBox input[type="text"]
{ width:200px !important; }

.synWebForm .fx6  .CDAAspxTextBox,
.row .fx6
 { width:222px; }

.synWebForm .fx6  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx6.CDAAspxTextBox input[type="text"]
{ width:220px !important; }

.synWebForm .fx7  .CDAAspxTextBox,
.row .fx7
 { width:244px; }

.synWebForm .fx7  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx7.CDAAspxTextBox input[type="text"]
{ width:242px !important; }

.synWebForm .fx8  .CDAAspxTextBox, 
.row .fx8 
{ width:266px; }

.synWebForm .fx8  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx8.CDAAspxTextBox input[type="text"]
{ width:264px !important; }

.synWebForm .fx9  .CDAAspxTextBox ,
.row .fx9 
{ width:288px; }

.synWebForm .fx9  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx9.CDAAspxTextBox input[type="text"]
{ width:286px !important; }

.synWebForm .fx10 .CDAAspxTextBox,
.row .fx10
{ width:310px; }

.synWebForm .fx10  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx10.CDAAspxTextBox input[type="text"]
{ width:308px !important; }

.synWebForm .fx11 .CDAAspxTextBox,
.row .fx11 
{ width:332px; }

.synWebForm .fx11  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx11.CDAAspxTextBox input[type="text"]
{ width:330px !important; }

.synWebForm .fx12 .CDAAspxTextBox,
.row .fx12  
{ width:352px; }

.synWebForm .fx12  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx12.CDAAspxTextBox input[type="text"]
{ width:350px !important; }

.synWebForm .fx13 .CDAAspxTextBox,
.row .fx13  
{ width:372px; }

.synWebForm .fx13  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx13.CDAAspxTextBox input[type="text"]
{ width:370px !important; }

.synWebForm .fx14 .CDAAspxTextBox,
.row .fx14  
{ width:392px; }

.synWebForm .fx14  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx14.CDAAspxTextBox input[type="text"]
{ width:390px !important; }

.synWebForm .fx100 .CDAAspxTextBox, 
.row .fx100 
{ width:100%; }

.synWebForm .fx100  table.CDAAspxTextBox input[type="text"],
.synWebForm   table.fx100.CDAAspxTextBox input[type="text"]
{ width:100% !important; }


.row .fx-3,
.fx-3 .dxeValidStEditorTable
{ width:60px !important; }

.row .fx-2,
.fx-2 .dxeValidStEditorTable 
{ width:82px !important; }

.row .fx-1,
.fx-1 .dxeValidStEditorTable
{ width:104px !important; }

.row   .fx1,
.fx1 .dxeValidStEditorTable
{ width:126px !important; }

.row .fx2,
.fx2 .dxeValidStEditorTable  
{ width:146px !important; }

.row .fx3,
.fx3 .dxeValidStEditorTable
{ width:166px !important; }

.row .fx4,
.fx4 .dxeValidStEditorTable
 { width:186px !important; }

.row .fx5,
.fx5 .dxeValidStEditorTable
 { width:202px !important; }

.row .fx6,
.fx6 .dxeValidStEditorTable
 { width:222px !important; }

.row .fx7,
.fx7 .dxeValidStEditorTable
 { width:244px !important; }

.row .fx8 ,
.fx8 .dxeValidStEditorTable
{ width:266px !important; }

.row .fx9 ,
.fx9 .dxeValidStEditorTable
{ width:288px !important; }

.row .fx10,
.fx10 .dxeValidStEditorTable
{ width:310px !important; }

.row .fx11 ,
.fx11 .dxeValidStEditorTable
{ width:332px !important; }

.row .fx12  ,
.fx12 .dxeValidStEditorTable
{ width:352px !important; }

.row .fx13  ,
.fx13 .dxeValidStEditorTable
{ width:372px !important; }

.row .fx14  ,
.fx14 .dxeValidStEditorTable
{ width:392px !important; }

.row .fx100 
{ width:100% !important; }


.synWebForm .row span.vGroup table.CDAAspxTextBox 
{   
    display:inline-block;
    float:left;
    clear:left;
    margin-bottom:6px;
}

/* 
    Dev Express Combo-box.
*/

.synWebForm table.CDAComboBox
{
    height:18px;
    display:inline-block;
    float:left;
}
.synWebForm table.CDAComboBox input[type=text]
{   
    height:15px !important;
    line-height:15px !important;
    padding:0px;
    margin:0px;
    background-color:transparent !important;
    width:100% !important;
}

.synWebForm table.CDAComboBox  img
{   
    display:block;
    height:17px;
}

.synWebForm .fx-3 .CDAComboBox { width:60px; }
.synWebForm .fx-2 .CDAComboBox { width:82px; }
.synWebForm .fx-1 .CDAComboBox { width:104px; }
.synWebForm .fx1  .CDAComboBox { width:126px; }
.synWebForm .fx2  .CDAComboBox { width:146px; }
.synWebForm .fx3  .CDAComboBox { width:166px; }
.synWebForm .fx4  .CDAComboBox { width:186px; }
.synWebForm .fx5  .CDAComboBox { width:202px; }
.synWebForm .fx6  .CDAComboBox { width:222px; }
.synWebForm .fx7  .CDAComboBox { width:244px; }
.synWebForm .fx8  .CDAComboBox { width:266px; }
.synWebForm .fx9  .CDAComboBox { width:288px; }
.synWebForm .fx10 .CDAComboBox { width:310px; }
.synWebForm .fx11 .CDAComboBox { width:332px; }
.synWebForm .fx12 .CDAComboBox { width:352px; }
.synWebForm .fx13 .CDAComboBox { width:372px; }
.synWebForm .fx14 .CDAComboBox { width:392px; }
.synWebForm .fx100 .CDAComboBox { width:100%; }



/* Disabled comboBox */
.synWebForm .CDAComboBox.cdaDisabled .dxeButtonDisabled
{   
   display:none;
}

/*
   Dev express list box control 
*/
.synWebForm .row .dxeListBox.listbox {
	display: inline-block;
	float: left;
	clear: none;
    margin-right: 10px;
    padding-right: 10px;
}

.synWebForm .row .dxeListBox.listbox .dxeListBoxItemRow {
    display: block;
    float: none;
    clear: none;
}


.synWebForm .fx1 .dxeListBox.listbox .dxeListBoxItemRow{ width:109px;}
.synWebForm .fx2 .dxeListBox.listbox .dxeListBoxItemRow{ width:129px;}
.synWebForm .fx3 .dxeListBox.listbox .dxeListBoxItemRow{ width:149px;}
.synWebForm .fx4 .dxeListBox.listbox .dxeListBoxItemRow{ width:169px;}
.synWebForm .fx5 .dxeListBox.listbox .dxeListBoxItemRow{ width:189px;}
.synWebForm .fx6 .dxeListBox.listbox .dxeListBoxItemRow{ width:209px;}
.synWebForm .fx7 .dxeListBox.listbox .dxeListBoxItemRow{ width:229px;}
.synWebForm .fx8 .dxeListBox.listbox .dxeListBoxItemRow{ width:249px;}
.synWebForm .fx9 .dxeListBox.listbox .dxeListBoxItemRow{ width:269px;}
.synWebForm .fx10 .dxeListBox.listbox .dxeListBoxItemRow{ width:289px;}
.synWebForm .fx11 .dxeListBox.listbox .dxeListBoxItemRow{ width:309px;}
.synWebForm .fx12 .dxeListBox.listbox .dxeListBoxItemRow{ width:329px;}
.synWebForm .fx13 .dxeListBox.listbox .dxeListBoxItemRow{ width:349px;}
.synWebForm .fx14 .dxeListBox.listbox .dxeListBoxItemRow{ width:369px;}
.synWebForm .fx100 .dxeListBox.listbox .dxeListBoxItemRow{ width:100%;}


/* CDA MEMO */
.synWebForm .row label.memoLabel{
    display:block;
    float:left;
    text-align:left;
}

.synWebForm .row label.memoLabel + .CDAAspxMemo
{
    clear:both;
 
} 

.synWebForm .CDAAspxMemo
{
   margin-bottom:3px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
    .synWebForm .CDAAspxMemo 
    {
        margin-bottom: 2px;
    }
}

.CDAAspxMemo /*right border fix*/
{
    padding: 1px !important;
}
  

.synWebForm .fx1 .CDAAspxMemo{ width:126px;}
.synWebForm .fx2 .CDAAspxMemo{ width:146px;}
.synWebForm .fx3 .CDAAspxMemo{ width:166px;}
.synWebForm .fx4 .CDAAspxMemo{ width:186px;}
.synWebForm .fx5 .CDAAspxMemo{ width:206px;}
.synWebForm .fx6 .CDAAspxMemo{ width:222px;}
.synWebForm .fx7 .CDAAspxMemo{ width:246px;}
.synWebForm .fx8 .CDAAspxMemo{ width:266px;}
.synWebForm .fx9 .CDAAspxMemo{ width:286px;}
.synWebForm .fx10 .CDAAspxMemo{ width:310px;}     /*.synWebForm .fx10 .CDAAspxMemo{ width:312px;} */
.synWebForm .fx11 .CDAAspxMemo{ width:334px;}
.synWebForm .fx12 .CDAAspxMemo{ width:346px;}
.synWebForm .fx13 .CDAAspxMemo{ width:366px;}
.synWebForm .fx14 .CDAAspxMemo{ width:386px;}
.synWebForm .fx100 .CDAAspxMemo{ width:100% !important;}
.synWebForm .fx580 .CDAAspxMemo{ width:580px !important;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    

.synWebForm .fx1 .CDAAspxMemo{ width:128px;}
.synWebForm .fx2 .CDAAspxMemo{ width:148px;}
.synWebForm .fx3 .CDAAspxMemo{ width:168px;}
.synWebForm .fx4 .CDAAspxMemo{ width:188px;}
.synWebForm .fx5 .CDAAspxMemo{ width:208px;}
.synWebForm .fx6 .CDAAspxMemo{ width:224px;}
.synWebForm .fx7 .CDAAspxMemo{ width:248px;}
.synWebForm .fx8 .CDAAspxMemo{ width:268px;}
.synWebForm .fx9 .CDAAspxMemo{ width:288px;}
.synWebForm .fx10 .CDAAspxMemo{ width:312px;}     /*.synWebForm .fx10 .CDAAspxMemo{ width:312px;} */
.synWebForm .fx11 .CDAAspxMemo{ width:336px;}
.synWebForm .fx12 .CDAAspxMemo{ width:348px;}
.synWebForm .fx13 .CDAAspxMemo{ width:368px;}
.synWebForm .fx14 .CDAAspxMemo{ width:388px;}
.synWebForm .fx100 .CDAAspxMemo{ width:100% !important;}
.synWebForm .fx580 .CDAAspxMemo{ width:580px !important;}
}

.synWebForm .height1 .CDAAspxMemo textarea {height: 40px;}
.synWebForm .height2 .CDAAspxMemo textarea {height: 60px;}
.synWebForm .height3 .CDAAspxMemo textarea {height: 80px;}
.synWebForm .height4 .CDAAspxMemo textarea {height: 100px;}
.synWebForm .height5 .CDAAspxMemo textarea {height: 120px;}
.synWebForm .height6 .CDAAspxMemo textarea {height: 140px;}
.synWebForm .height7 .CDAAspxMemo textarea {height: 160px;}
.synWebForm .height8 .CDAAspxMemo textarea {height: 180px;}
.synWebForm .height9 .CDAAspxMemo textarea {height: 200px;}
.synWebForm .height10 .CDAAspxMemo textarea {height: 220px;}

.synWebForm .CDAAspxMemo.cdaDisabled,
.synWebForm .CDAAspxMemo .dxeReadOnly
{

 background-color:transparent;
}
.synWebForm .CDAAspxMemo.dxeReadOnly textarea.dxeMemoEditArea
{
     background-color:transparent;
     font-size:11px;
     font-family:Arial;
}

/* CDA MEMO Inner textarea*/
.synWebForm .row .CDAAspxMemo
{
    float:left;
    clear:none;

}

.synWebForm .CDAAspxMemo textarea {
    height:57px;
    font-size:11px;
    font-family:Arial;
}
/*.synWebForm .fx1 .CDAAspxMemo textarea{width:118px !important;}*/
/*.synWebForm .fx2 .CDAAspxMemo textarea{width:138px !important;}*/
/*.synWebForm .fx3 .CDAAspxMemo textarea{width:158px !important;}
.synWebForm .fx4 .CDAAspxMemo textarea{width:178px !important;}
.synWebForm .fx5 .CDAAspxMemo textarea{width:198px !important;}
.synWebForm .fx6 .CDAAspxMemo textarea{width:210px !important;}
.synWebForm .fx7 .CDAAspxMemo textarea{width:238px !important;}
.synWebForm .fx8 .CDAAspxMemo textarea{width:258px !important;}
.synWebForm .fx9 .CDAAspxMemo textarea{width:278px !important;}
.synWebForm .fx10 .CDAAspxMemo textarea{width:298px !important;}
.synWebForm .fx11 .CDAAspxMemo textarea{width:318px !important;}
.synWebForm .fx12 .CDAAspxMemo textarea{width:338px !important;}
.synWebForm .fx100 .CDAAspxMemo textarea{width:100% !important;}*/

/*
    CDAAspxCheckBox & CDAASPxRadioButton
 */
.synWebForm .row  table.CDAAspxCheckBox, 
.synWebForm .row span.vGroup table.CDAASPxRadioButton
{
    height:17px;
    margin-right:4px;
}
.synWebForm .row  table.CDAAspxCheckBox td, 
.synWebForm .row span.vGroup table.CDAASPxRadioButton td
{   
    height:17px;
    padding:0px !important;
    vertical-align:top;
}


.dxflFormLayout .synWebForm .row  table.CDAAspxCheckBox td, 
.dxflFormLayout .synWebForm .row span.vGroup table.CDAASPxRadioButton td
{
    padding-left: 0px !important;
}

.dxflFormLayout .synWebForm .row table.CDAAspxCheckBox.dxeTAL td label,
.dxflFormLayout .synWebForm .row table.CDAAspxCheckBox.dxeTAL td label
{
    padding-left: 0;
    text-align: right;
}

.synWebForm .fx3 .row table.CDAAspxCheckBox.dxeTAL td.dxichCellSys { width: 162px;}

.dxflFormLayout .synWebForm .row  table.CDAAspxCheckBox.dxeTAL td.dxichTextCellSys
{
    padding-right: 6px !important;
}

.synWebForm .row  table.CDAAspxCheckBox td span
{   
    margin-bottom:2px;
    vertical-align:top;
}

.synWebForm .row  table.CDAAspxCheckBox label, 
.synWebForm .row span.vGroup table.CDAASPxRadioButton label
{
    height:17px;
    margin:0px !important;
    padding-left:4px;
    min-width:38px;
    /*width:auto !important;*/
}

.dxflFormLayout .synWebForm .row span.vGroup table.CDAASPxRadioButton label
{
    width: auto;
}

 .synWebForm .row span.vGroup table.CDAAspxCheckBox, 
 .synWebForm .row span.vGroup table.CDAASPxRadioButton
{
  display:block;
  float:left;
  clear:both;   
}
 

 .synWebForm .row  span.dxeIRadioButton 
 {
     margin-bottom:4px;
 }
  .synWebForm .row  table.CDAASPxRadioButton label
  {
     margin-bottom:2px;
  }



.synWebForm .row .dxeButtonEdit table.dxbebt
{
    width:5px;
    padding:0px;
}

.HiddenSearchPanel
{
    display:none;
    float:none;
}

.synWebForm fieldset
{
    padding:0;
    border-width: 1px !important;
}

.synWebForm .row .checkbox label
{
    float: none;
    text-align: left;
}

/* Disabled TextBox */



.synWebForm.legacyStyle .cdaDisabled
{
    border-bottom:none;
}





 /* 
     CDA aspx memo control disabled
*/

.synWebForm .cdaDisabledMemo, .synWebForm .CDAAspxSpinEdit.cdaDisabled
, .synWebForm .CDAAspxSpinEdit.dxeReadOnly
, .synWebForm .cdaTextBox.readOnly 
 {
    border:none;
    color:#2B4E7F;
    background-color: #eeeeee;
    border:1px solid #cccccc;
}

.synWebForm.legacyStyle .cdaDisabledMemo
{
     border-bottom:none;
} 


.synWebForm .cdaDisabledMemo textarea
{
    border:none;
    height:auto;
}
  


.row.menuRow
{
     background-color:#3A637A;
     border-bottom:solid 1px black;
}
.row.menuRow a
{
    display:inline-block;
    float:left;
    padding:0px 5px 0px 5px;
    height:20px;
    line-height:20px;

    background-color:#3A637A;
    color:white;
    border-right:solid white 1px;

}
.row.menuRow a:hover
{
    color:yellow;
    text-decoration:none;
    background-color:#4477be;
    cursor:pointer;
}


/* 
    Needed for controls with validation so they sit correctly
    May need more work, see Dave if you have issues.
*/
.synWebForm .dxeErrorFrame
{

    float:left;
    display:inline-block;
    position:relative;/*Fixes strange positioning issue in chrome.*/
}

/*.synWebForm .fx1 .dxeErrorFrame{width:124px;}
.synWebForm .fx2 .dxeErrorFrame{width:144px;}
.synWebForm .fx3 .dxeErrorFrame{width:164px;}
.synWebForm .fx4 .dxeErrorFrame{width:184px;}
.synWebForm .fx5 .dxeErrorFrame{width:204px;}
.synWebForm .fx6 .dxeErrorFrame{width:224px;}
.synWebForm .fx7 .dxeErrorFrame{width:244px;}
.synWebForm .fx8 .dxeErrorFrame{width:264px;}    
.synWebForm .fx9 .dxeErrorFrame{width:284px;}
.synWebForm .fx10 .dxeErrorFrame{width:304px;}
.synWebForm .fx11 .dxeErrorFrame{width:324px;}
.synWebForm .fx12 .dxeErrorFrame{width:344px;}*/    


/*
    staticRowTable 
    Used to create a grid like element with row separators
*/

.synWebForm .row table.staticRowTable
{
    display:block;
    float:left;
    width:100%;
    border-bottom:solid 1px #9f9f9f;
    border-top:solid 1px #9f9f9f;
    border-collapse:collapse;   
}

.synWebForm .row .staticRowTable tr
{
    height:22px;
    line-height:22px;
    border-top:solid 1px #9f9f9f;
    background-color:white;
    border-left:solid 1px #9f9f9f;
    border-right:solid 1px #9f9f9f;
}

.synWebForm .row .staticRowTable tr.split
{
    height:22px;
    line-height:22px;
    border-top:solid 1px #9f9f9f;
    background-color:transparent;
     border-left:none;
    border-right:none;
}



.synWebForm .row .staticRowTable tr td
{   
    padding:3px;
}

.synWebForm .row .staticRowTable tr > td
{
    padding-left:6px;
}

.synWebForm .row .staticRowTable thead,
.synWebForm .row .staticRowTable thead tr,
.synWebForm .row .staticRowTable thead tr td
{   
    width:100%;
    background-color:#DCDCDC;
    margin:0px;
    font-weight:bold;
    border-top:none;
}



/* ===========================================================================
    SynWebForm  - Caveats & and bad extra classes...
        Below this Comment add styles that are area or one off specific.
        All the styles above should be usable globally.
 =========================================================================== */*

.createAbsenceEvents .studentDetails .synWebForm .row
{
    margin-bottom: 0;
}

.createAbsenceEvents .studentDetails .synWebForm .row .dxeTextBoxSys
{
    height: auto;
}

.createAbsenceEvents .studentDetails .synWebForm .searchStudent .dxeTextBoxSys
{
    width: 100% !important;
}

.subjectAssessmentAreaPanels .synWebForm
{
    margin-bottom: 0;
}

#ticketPlaceholder .ticket .synWebForm .buttons
{
    float: left;
}

#ticketPlaceholder .ticket .synWebForm .buttons .cdaTextBox
{
    margin-left: 5px;
    margin-top:0;
    margin-bottom:0;
    height:17px;
}

.synWebForm .fx1 .long .dxeMemo{ width:380px;}
/* 
    These need parent classes for the areas they're used in.
    UCtrlGeneralLedgerBudgetActual & UCtrlGeneralLedgerPurchaseOrders UCtrlCorrespondence.ascx 
*/
.synWebForm table.resetExtraCss label
{
    width: auto;
    height: inherit;	
}
.synWebForm .subHeading
{
    text-align:left;
    display: block;
    font-weight: bold;
}

.synWebForm .subInfo span
{
    text-align:right;
    width: 118px;
}


.synWebForm .row .information 
{
    width:16px;
    height:16px;
}




/*Needs UctrlCreateAbsenceEvents parent class ..*/
.synWebForm .row .rowSlot .dxSynlabelValue {
	display: inline-block;
	float:left;
	min-height: 20px;
	clear: none;	
    min-width:160px;
    color: #2B4E7F;
    line-height: 20px;
}

.synWebForm.CapLabels label
{
    text-transform:capitalize;
}

/* New may solve some of the funny spacing issues*/
.synWebForm table td
{
    border-spacing:0px !important;
}

.synWebForm .fxPx54 input[type=text].standard  {width: 62px;}
/*
    Needed some cross over with mimic gridview framework.
*/
.synWebForm .MimicGridView .row ,.synWebForm .MimicGridView .rowHeaders{
	margin-bottom:0px;
}
.synWebForm .fx1 .long .dxeMemo textarea{width:378px !important;}

/*.synWebForm .fx-4 .row table.dxeButtonEditSys.dxeButtonEditSysWithSpacing.dxeButtonEdit { width:65px; }
.synWebForm .fxPx34 .dxeTextBoxSys  input[type=text] {width:32px !important;}
.synWebForm .fxPx44 .dxeTextBoxSys  input[type=text] {width:42px !important;}
.synWebForm .fxPx54 .dxeTextBoxSys  input[type=text] {width:52px !important;}

.synWebForm .fx1 .long .dxeTextBoxSys  input[type=text] {width: 373px;}
.synWebForm .fx1 .medium .dxeTextBoxSys  input[type=text] {width: 150px;}
.synWebForm .fx1 .long .dxeTextBoxSys, .synWebForm .fx1 .long .dxeTextBoxSys .dxeTextBox{width:375px;}
.synWebForm .fx1 .medium .dxeTextBoxSys, .synWebForm .fx1 .medium .dxeTextBoxSys .dxeTextBox{width:150px;}

.synWebForm .fxPx34 .dxeTextBoxSys, .synWebForm .fxPx34 .dxeTextBoxSys .dxeTextBox{width:34px !important;}
.synWebForm .fxPx44 .dxeTextBoxSys, .synWebForm .fxPx44 .dxeTextBoxSys .dxeTextBox{width:44px !important;}
.synWebForm .fxPx54 .dxeTextBoxSys, .synWebForm .fxPx54 .dxeTextBoxSys .dxeTextBox{width:54px !important;}*/


/*

/*
    Enforces rules on Dev Express validation controls.
*/
.synWebForm  .dxeErrorCell{padding-left:0px;height:auto;padding-top:4px;}     
/*.synWebForm .fx1 .dxeErrorCell{width:124px;}          
.synWebForm .fx2 .dxeErrorCell{width:144px;}
.synWebForm .fx3 .dxeErrorCell{width:164px;}
.synWebForm .fx4 .dxeErrorCell{width:184px;}
.synWebForm .fx5 .dxeErrorCell{width:204px;}
.synWebForm .fx6 .dxeErrorCell{width:224px;}
.synWebForm .fx7 .dxeErrorCell{width:244px;}
.synWebForm .fx8 .dxeErrorCell{width:264px;}  
.synWebForm .fx9 .dxeErrorCell{width:284px;}
.synWebForm .fx10 .dxeErrorCell{width:304px;}
.synWebForm .fx11 .dxeErrorCell{width:324px;}
.synWebForm .fx12 .dxeErrorCell{width:344px;}*/  

[id="checkboxlistExcursionOverallConsent"] .dxichCellSys,
[id="checkboxlistExcursionAdditionalConsents"] .dxichCellSys {
        vertical-align: top;
}

/*.synWebForm .dxeErrorCell td{
 font-size: 11px;
 font-family: Arial;	
}*/


.dxgvEditFormCell .dxeReadOnly, .dxgvEditFormCell .dxeReadOnly input
{
    background-color: inherit;
}
.synWebForm .divider
{
    display: block;
    width: 100%;
    border-bottom: solid 1px grey;
    padding-bottom: 2px;
    padding-top: 2px;
}


.synWebForm .row .labelLeft 
{   
    display:inline-block;
    float:left;
    height:16px;
    background-color:inherit;
    border-bottom:none;
    color:#2B4E7F !important;
    line-height:17px;
    margin-top:3px;

}

.synWebForm .row .labelRight 
{   
    display:inline-block;
    float:left;
    height:16px;
    background-color:inherit;
    border-bottom:none;
    color:#2B4E7F;
    line-height:17px;
    margin-top:3px;
    text-align: right;
    width:100px;

}




.dxflFormLayout .synWebForm .row label
{
    float: none;
}


.CDAASPxRadioButtonList td.dxe, .dxeCheckBoxList td.dxe
{
    padding-top: 0; 
    padding-left:0;
}

/*.dxflHARSys .dxeCaption
{
    text-align: right;
}*/



/******************************************************
    Styling for Leave tab in Staff Maintenance
 ****************************************************
*/

/* 
    Alignment for first filter in a row 
*/

.leavePanel div#filter1 
{
    margin-left: 0;
}

.leavePanel div#filter6 
{
    margin-left: 0;
}

/* 
    Spacing and divider between grids
*/

.leavePanel .dxgvControl.CDATheme.CDAGridView 
{
    margin-bottom: 30px;
}

.leavePanel .synWebForm 
{
    border-top: solid 1px #ccc;
    padding-top: 5px;
}

/* 
    Show/Hide link position
*/

.leavePanel .hide-filters 
{
    float: right;
    width: auto;
    display: block;
    text-align: right;
    padding: 5px;
    box-sizing: border-box;
}

/* 
    Show/Hide link style 
*/

.leavePanel a#filterSwitchTop, 
.leavePanel a#filterSwitchBottom 
{
    font-weight: bold;
    color: #5B5B5B;
    text-decoration: underline;
    cursor: pointer !important;
}

.leavePanel a#filterSwitchTop:hover, 
.leavePanel a#filterSwitchBottom:hover 
{
    color: #222;
}

/* 
    Arrow icons for Show/Hide link 
*/

.leavePanel .caret-down 
{
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
}

.leavePanel .caret-up 
{
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0px;
    vertical-align: middle;
    border-bottom: 4px solid;
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
}

/* set bottom margin to 0 for popup */
.CDAAspxPopUp .dxpc-contentWrapper .synWebForm {
    margin-bottom: 0px;
}

.noMargin {
    margin: 0px !important;
}

table.CDAComboBox td.dxeButtonEditButton img {
    position: relative;
    top: -1px;
    right: -1px;
    border-collapse: collapse !important;
}

table.CDADateTimeEdit td.dxeButtonEditButton img {
    position: relative;
    top: -1px;
    right: -1px;
    border-collapse: collapse !important;
}

/*only chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .synWebForm table.CDAComboBox img {
        height: 19px;
    }

    .CDADateTimeEdit td.dxeButtonEditButton img {
        height: 19px;
    }
}
/*only chrome*/
 
.marginInput .cdaButton,
.marginInput .CDAComboBox,
.marginInput .CDAASPxRadioButton,
.marginInput .CDAAspxMemo,
.marginInput .CDAAspxCheckBox,
.marginInput .CDAAspxSpinEdit,
.marginInput .CDATimeEdit,
.marginInput .cdaTextBox,
.marginInput .CDAAspxTextBox,
.marginInput .CDADateTimeEdit,
.marginInput .autoLabel,
.row.pFloatRight label + span {
    margin: 0 15px 0 5px;
}

.row.pFloatRight label.last + span {
    margin-right: 0px;
}
    .marginInput.autoLabel .autoLabel,
    .marginInput.autoLabel .autoLabelInput {
        width: auto;
        min-width: 0px !important;
    }

     .marginInput.autoLabel .autoLabelInput {
        margin-right: 0px;
    }

    .marginInput.autoLabel label {
        white-space: nowrap;
    }

.inlineInput {
    margin-bottom: 15px !important;
}

.noWrap, .noWrap label {
    white-space: nowrap;
}

.leftAlign {
    text-align: left !important;
}

.topLabel {
    width: 100%;
    display: inline-block;
}

.floatLeft
{
    float:left !important;
}

.textAlignRight 
{
    text-align:right !important;
}