/* Base Look and Feel definition....*/

.PageStyle
{
    margin: 10px;   
}   
        
.ColumnStyle
{
    /*
    -webkit-border-radius: 0px 199 0px 0px;
    -moz-border-radius: 0px 199px 0px 0px;
    border-radius: 0px 199px 0px 0px;
    */
    border:2px solid #f1f1f1;        
    -webkit-box-shadow: #B3B3B3 19px 19px 19px;
    -moz-box-shadow: #B3B3B3 19px 19px 19px; 
    box-shadow: #B3B3B3 19px 19px 19px;
} 

.ContainerStyle
{
    /*
    border-style:groove;
    border-width:medium;
    border-color:silver;    
*/
    padding-left: 2px;
    padding-right: 2px;  
} 
.ContainerHeader {    
    font-size: 12px;
    padding-top: 5px;
    font-weight: bold;
    color: #A30046;
}  
/*.FormContainerStyle
{
    Padding-left: 15px !important;
}*/
.ContainerBody {

}  
.TableStyle 
{
    width: 100%;
}

.ContainerHeaderTable
{
    width: 100%;
}

.ContainerBodyTable 
{
    width: 100%;
}
    
.guruLabelComponent
{    
    vertical-align: middle;
    /* width: 120px; */    
}

.form-horizontal .control-label
{
	width: auto !important;
}

.ClearComponentButton
{
	vertical-align:top !important;
	margin: 3px !important;
}

.label
{
	vertical-align: text-bottom;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:hover 
{
	background-color: lightGray;
}

/******************************************************/
/*************RADIO CONTROL CSS************************/
div.jsRadioButtonControl-guru-control
{
    /*width:250px; SNL CHANGED THIS TO AUTO*/ 
    /* width: auto; */
}

div.jsRadioButtonControl-selectedBlock
{
    padding: 1px;
    width: 250px;
    height: 16px;
    border: solid 1px #488AC7;
    overflow:hidden;
}

.jsRadioButtonControl-selectedText
{
    font-size: .75em;
    float: left;
    overflow:hidden;
    width:215px;
}

.jsRadioButtonControl-unselectedListItemImage
{
    height: 16px;
    width: 16px;
    margin-left: auto;
    background-image: url('images/jquery.jsRadioButtonControl/radio-unselected.png');
    background-repeat: no-repeat;
    background-position: left top;
    float: left;
}
.jsRadioButtonControl-selectedListItemImage
{
    height: 16px;
    width: 16px;
    margin-left: auto;
    background-image: url('images/jquery.jsRadioButtonControl/radio-selected.png');
    background-repeat: no-repeat;
    background-position: left top;
    float: left;
}

.jsRadioButtonControl-Label
{
	padding: 3px !important;	
}

div.jsRadioButtonControl
{
    /*width:227px; SNL CHANGED THIS TO AUTO*/ 
    width: 220px; 
    overflow: auto;
    background-color: transparent;
}

.jsRadioButtonControl
{
	width: 100%; /* LG - Made more responsive*/
	padding-left: 20px;
}

.jsRadioButtonControl-item { /* Overrides Boostraps block */
    display: inline;    
}

.jsRadioButtonControl >div >input /* This is the radio button itself - Overrides Bootstrap Block */
{
    display: inline;
    margin: 0 4px 0 4px;
}

.jsRadioButtonControl >div /* This is the radio button wrapper & Bootstrap can apply scrollbars - Overrides Bootstrap Scrollbars */
{
    overflow-y: hidden; 
}

.jsRadioButtonControl-invalidItem
{
	border-radius: 4px 4px 4px 4px  !important;
    color: #FFFFFF;
    background-color: #FF0000;
    padding: 3px !important;
}

.jsRadioButtonControl-constrainedItem
{
    color: #808080;    
}

.jsRadioButtonControl-selectedItem
{
	/* LG - Changed radio highlight styles */
	/*border-radius: 4px 4px 4px 4px  !important;*/
    color: #000000 !important;
    background-color: #DDDDDD !important;
    padding: 3px !important;
}

.GuruButton
{
	
}

.GuruButton-disabled
{
	cursor: not-allowed !important;
}

/******************************************************/
/*************TABLE CONTROL CSS************************/
.jsGuruGrid-row
{
    color: Black;
    background-color: White;
    border: 1px solid #FFFFFF;    
}

.jsGuruGrid-row-disabled
{
	cursor: not-allowed !important;
}

tr.jsGuruGrid-row > td
{
    padding: 2px !important;
}

.jsGuruGrid-row:hover
{
    cursor: pointer;
}

.jsGuruGrid-row:active
{
    color: Black;
    background-color: White;
}
.jsGuruGrid-header-disabled
{
	cursor: not-allowed !important;
}
.jsGuruGrid-header
{
	color: Black !important;
	font-weight: bold !important;
}

.jsGuruGrid-header:hover
{
    cursor: pointer;
}

.jsGuruGrid-invalidRow
{
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
}

.jsGuruGrid-constrainedRow
{
    color: #808080 !important;
    background-color: White !important;
}

.jsGuruGrid-constrainedRow-disabled
{
    color: #808080 !important;
    background-color: White !important;
}

.jsGuruGrid-constrainedRow:hover
{
    color: #666699 !important;
}

.jsGuruGrid-constrainedRow-disabled:hover
{
    
}

.jsGuruGrid-constrainedRow:active
{
    color: #808080;
    background-color: White;
}

.jsGuruGrid-invalidRow
{
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
}

.jsGuruGrid-invalidRow-disabled
{
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
}

.jsGuruGrid-invalidRow:hover
{
    
}

.jsGuruGrid-invalidRow-disabled:hover
{
    
}

.jsGuruGrid-invalidRow:active
{
    color: #FFFFFF;
    background-color: #FF0000;
}

.jsGuruGrid-selectedRow
{
    color: #FFFFFF !important;
    background-color: #0000FF !important;
}

.jsGuruGrid-selectedRow-disabled
{
    color: #FFFFFF !important;
    background-color: #0000FF !important;
}

.jsGuruGrid-selectedRow:hover
{
    
}

.jsGuruGrid-selectedRow-disabled:hover
{
    
}

.jsGuruGrid-selectedRow:active
{
    color: #FFFFFF;
    background-color: #0000FF;
}


/******************************************************/
/*************LIST CONTROL CSS************************/
div.jsLabelComponent
{    
    /*vertical-align: middle;*/
}

div.jsListControl-guru-control
{
    /*width:250px; SNL CHANGED THIS TO AUTO*/ 
    width: auto; 
    /*vertical-align: middle;*/
}

.jsListBoxControl-control-div
{
    padding-bottom: 0px;
}
    
.jsListBoxControl-control-table
{
    /* border: 1px solid #808080 !important; */
    border-style: none !important;
    border-width: 0px !important;

    border-collapse: separate;
    cursor: pointer;
    width:220px;
}

.jsListBoxControl-item
{
    color: Black;
    background-color: White;
    border: 1px solid #FFFFFF;
}

tr.jsListBoxControl-item-disabled > td
{
	cursor: not-allowed !important;
}

tr.jsListBoxControl-item > td
{
    padding: 2px !important;
}

.jsListBoxControl-item:hover
{
    background-color: #99CCFF;
}

.jsListBoxControl-item-disabled:hover
{
    cursor: not-allowed !important;
}

.jsListBoxControl-item:active
{
    color: Black;
    background-color: White;
}

.jsListBoxControl-invalidItem
{
    color: #FFFFFF;
    background-color: #FF0000;
}

.jsListBoxControl-invalidItem-disabled
{
    color: #FFFFFF;
    background-color: #FF0000;
}

.jsListBoxControl-invalidItem-disabled:hover
{
	color: #FFFFFF !important;
    background-color: #FF0000 !important;
    cursor: not-allowed !important;
}

.jsListBoxControl-constrainedItem
{
    color: #808080;
    background-color: White;
}
.jsListBoxControl-constrainedItem-disabled
{
	color: #808080;
    background-color: White;
    cursor: not-allowed !important;
}

.jsListBoxControl-constrainedItem:hover
{
    color: #666699;    
}

.jsListBoxControl-constrainedItem-disabled:hover
{
	color: #808080 !important;
    background-color: White !important;
    cursor: not-allowed !important;
}

.jsListBoxControl-constrainedItem:active
{
    color: #808080;
    background-color: White;
}

.jsListBoxControl-selectedListItem
{
    color: #FFFFFF;
    background-color: #0000FF;
}

.jsListBoxControl-selectedListItem-disabled
{
    color: #FFFFFF;
    background-color: #0000FF;
    cursor: not-allowed !important;
}

.jsListBoxControl-selectedListItem:hover
{
    color: #0000FF;    
}

.jsListBoxControl-selectedListItem-disabled:hover
{
	background-color: #0000FF !important;    
}

.jsListBoxControl-selectedListItem:active
{
    color: #FFFFFF;
    background-color: #0000FF;
}


/* IAN */
div.jsListBoxImageControl-guru-control
{
    /*width:250px; SNL CHANGED THIS TO AUTO*/ 
    width: auto; 
    /*vertical-align: middle;*/
}

.jsListBoxImageControl-control-div
{
    padding-bottom: 0px;
}
    
.jsListBoxImageControl-control-table
{
    border: 1px solid #808080 !important;
    border-collapse: separate;
    cursor: pointer;
}

.jsListBoxImageControl-item
{
    color: Black;
    background-color: White;
    border: 1px solid #FFFFFF;
}

.jsListBoxImageControl-item-disabled
{
	cursor: not-allowed !important;	
}

tr.jsListBoxImageControl-item > td
{
    padding: 2px !important;
}

.jsListBoxImageControl-item:hover
{
    background-color: #99CCFF;
}

.jsListBoxImageControl-item-disabled:hover
{
	background-color: White;
}

.jsListBoxImageControl-item:active
{
    color: Black;
    background-color: White;
}

.jsListBoxImageControl-invalidItem
{
    color: #FFFFFF;
    background-color: #FF0000;
}
.jsListBoxImageControl-invalidItem-disabled
{
    color: #FFFFFF;
    background-color: #FF0000;
}

.jsListBoxImageControl-invalidItem-disabled:hover
{
    color: #FFFFFF;
    background-color: #FF0000;
    cursor: not-allowed !important;	
}

.jsListBoxImageControl-constrainedItem
{
    color: #808080;
    background-color: #D3D3D3;
}

.jsListBoxImageControl-constrainedItem-disabled
{
    color: #808080;
    background-color: #D3D3D3;
    cursor: not-allowed !important;	
}

.jsListBoxImageControl-constrainedItem:hover
{
    color: #666699;
}

.jsListBoxImageControl-constrainedItem-disabled:hover
{
    color: #808080;
    background-color: #D3D3D3;
}

.jsListBoxImageControl-constrainedItem:active
{
    color: #808080;
    background-color: #D3D3D3;
}

.jsListBoxImageControl-selectedListItem
{
    color: #FFFFFF;
    background-color: #0000FF;
}

.jsListBoxImageControl-selectedListItem-disabled
{
    color: #FFFFFF;
    background-color: #0000FF;
}

.jsListBoxImageControl-selectedListItem:hover
{
    color: #0000FF;        
}

.jsListBoxImageControl-selectedListItem-disabled:hover
{
    color: #FFFFFF;
    background-color: #0000FF;
    cursor: not-allowed !important;	
}

.jsListBoxImageControl-selectedListItem:active
{
    color: #FFFFFF;
    background-color: #0000FF;
}
/* IAN */

div.jsCarouselControl-guru-control
{

}

.jsListControlDropDown
{    
    width:auto;
    overflow:visible;
}

div.jsListControl-selectedblock
{
    padding: 1px;
    width: 225px;
    height: 16px;
    border: solid 0px #488AC7;
    overflow:hidden;
}

.jsListControl-selectedtext
{
    font-size: .75em;
    float: left;
    overflow:hidden;
    width:195px;
}

.jsListControl-ddl-img
{
    z-index:100000;
    height: 16px;
    width:15px;
    margin-left:auto;
    background-image:url('images/jquery.alerts/downArrow.png');
    background-repeat:no-repeat;
    background-position:right top;
    border-color:#000000;
}

.jsListControl-prodListed div.jsListBoxControl-control-div
{
    border: 1px solid #808080;
    overflow: auto; 
}

div.jsListControl-prodListed
{
    /* overflow: auto; */
    /* border: solid 0px #eeeeee; */
    border-width: 0px !important;
    border-style: none !important;

    position: relative;
    text-align: left;
    width:220px;    
}

.jsListControl-prodListed-selected
{
    /* overflow: auto; */
    border: solid 0px #eeeeee;
    position: relative;
    text-align: left;
}

.jsListControl-prodListed-invalid
{
    /* overflow: auto; */
    border: solid 0px #eeeeee;
    position: relative;
    text-align: left;
}

div.jsCarouselControl
{
    
}

.jsListControl-prodListed select
{
   /* margin-bottom:0px; */
}
.jsListControl-prodListed select option
{
	
}

.jsListControl-prodListed select:hover
{
    /*background-color: #eee9e9;*/
}

.jsListControl-prodListed-selected select
{
    color: #FFFFFF;
    background-color: #0000FF;
}

.jsListControl-prodListed-invalid select
{
    color: #FFFFFF;
    background-color: #FF0000;
}

.jsListControl-invalidItem
{
    color: #ff0000;
}

.jsListControl-constrainedItem
{
    color: #FF9966;
}

.jsListControl-item
{
    color: Black;
    background-color: White;
}

.jsListControl-item:hover
{
    border: 1px solid #999999;
    background-color: #99CCFF;
}

.jsListControl-item:active
{
    color: Black;
    background-color: White;
}

.jsListControl-constrainedItem
{
    color: #808080;
    background-color: White;
}
.jsListControl-constrainedItem:hover
{
    color: #666699;
    border: 1px solid #999999;
    background-color: #99CCFF;
}

.jsListControl-constrainedItem:active
{
    color: #808080;
    background-color: White;
}

.jsListControl-selectedInvalidItem
{
    color: #FFFFFF;
    background-color: #FF0000;
}

.jsListControl-selectedInvalidItem:hover
{
    color: #FF0000;
    border: 1px solid #999999;
    background-color: #99CCFF;
}

.jsListControl-selectedInvalidItem:active
{
    color: #FFFFFF;
    background-color: #FF0000;
}

.jsListControl-selectedItem
{
    color: #FFFFFF;
    background-color: #0000FF;
}

.jsListControl-selectedItem:hover
{
    color: #0000FF;
    border: 1px solid #999999;
    background-color: #99CCFF;
}

.jsListControl-selectedItem:active
{
    color: #FFFFFF;
    background-color: #0000FF;
}


.jsListControl-selectedListItem
{
    
}


/*************GRID CONTROL CSS************************/
.jsGridRow-selectedItem
{
    color: #009900; /* green */
    background: #ccc;
}
.jsGridRow-invalidItem
{
    color: #D80000 !important; /* red */
    background: #ccc;
}
.jsGridRow-unselectedItem
{
    color: #202020;	/* black */
}
.jsGridRow-constrainedItem
{
	color: #909090;
}

/*********************************************************/
/*************CHECKBOX LIST CONTROL CSS*******************/

.jsGuruCheckBoxControl
{
	width:200px;	
	padding-left: 20px;
}

.jsGuruCheckBoxControl >div >.jsCheckBoxListControl-input /* Overrides Bootstrap */
{
    margin: 0;
}

.jsCheckBoxListControl-Label /* Overrides Bootstrap Block */
{
    padding: 3px !important;
}

.jsCheckBoxListControl-constrainedItem
{
    color: #808080;
}

.jsCheckBoxListControl-selectedItem
{
	border-radius: 4px 4px 4px 4px !important;
	color: #FFFFFF !important;
    background-color: #0000FF !important;
    padding: 3px !important;
}

.jsCheckBoxListControl-invalidItem
{
	border-radius: 4px 4px 4px 4px !important;
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
    padding: 3px !important;
}

/*********************************************************/
/*************CHECKBOX CONTROL CSS************************/
.jsCheckBox-prodListed
{
	/*width:220px;	*/
    width: auto;
    padding-left: 2px;    
}

div.jsCheckBoxControl-guru-control
{
}

div.jsCheckBoxControl-prodListed
{
   
}

.jsCheckBoxControl-invalidItem
{
    color: #ff0000;
}

.jsCheckBoxControl-constrainedItem
{
    color: #808080;
}

.jsCheckBoxControl-selectedListItem
{
    
}


/*********************************************************/
/*************NUMERIC CONTROL CSS************************/
.jsNumeric-prodListed
{
	margin-bottom: 0px;
}

.jsNumericControl
{
    text-align: right;
    padding-right: 25px;    
}

.jsNumericControl-validItem
{
    color: #FFFFFF !important;
    background-color: #0000FF !important;
}

.jsNumericControl-invalidItem
{
    /* color: #ff0000; */
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
}

.jsNumericControl-constrainedItem
{
    color: #C0C0C0;
}

/*********************************************************/
/*************TEXTBOX CONTROL CSS************************/
.jsTextBoxControl-invalidItem
{
    color: #ff0000;
}

.jsTextBoxControl-constrainedItem
{
    color: #FF9966;
}


/*********************************************************/
/*************TEXTAREA CONTROL CSS************************/
.jsTextAreaControl-invalidItem
{
    color: #ff0000;
}

.jsTextBoxControl-constrainedItem
{
    color: #FF9966;
}


/*********************************************************/
/*************TEXTAREA CONTROL CSS************************/
.jsDateControl
{
    text-align: left;
    padding-right: 25px;        
}

.jsDateControl-input
{
	width: 172px !important;
}

.jsDateControl-prodListed
{
	
}

.jsDateControl-validItem
{
    color: #FFFFFF !important;
    background-color: #0000FF !important;
}

.jsDateControl-invalidItem
{
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
}

.jsDateControl-constrainedItem
{
    color: #FF9966;
}

.jsDateControl-image
{
	vertical-align:sub;
}
	
.optionImage 
{
    width: 100px;
}

/* Navigation buttons */

table td {
    height: 20px;
}
.btnNextNav, .btnBackNav {
    margin-left: 10px;
}
.guruTrafficLightComponent {
    height: 20px;
    vertical-align:top;
}
.guruTrafficLightComponent > img { /* Overrides Bootstrap style that can shrink Traffic Light */
    max-width: none;
}
.jsTrafficLight
{
	margin:5px;
	width:20px;
	height:20px;
	min-width:20px;
	min-height:20px;
	vertical-align:top;
}
.guruClearButtonComponent {
    height: 20px;
    /* margin-top: -5px; */
    vertical-align: top;
}

.guruClearButtonComponent > button { /* Override jQueryUI style that can result in larger button */
    font-size: initial;
}


.btnClear 
{
	margin:2px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12 !important;
    font-weight:normal;
    vertical-align:top;
}

.ui-tabs .ui-tabs-nav li a {
    padding: 2px 2px 2px 2px; 
}

/* Tabs header area... */
.ui-widget-header {
    background-position: 75%;
}

.tabHeaderDisabled {
    background-color: lightgrey;    
}

/* TFS 1611 - Textarea control width property has no impact on the rendered page */
/* Need to override BS's default width of 260px */
textarea {            
    width: 100%;
}