/* - - - - - - CSS Reset - - - - - - */

/* 
    http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.0;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input, select, textarea{
	border: 0;
	
	font: inherit;
	color: inherit;
}
i{
    font-style: italic;
}
b{
    font-weight: bold;
}

/* - - - - - - Generic styles - - - - - - */
body {
    font-family: Lucida Sans Unicode, Lucida Grande, Arial, Arial, Helvetica, 'Trebuchet MS', sans-serif;
    font-size: 80%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/*
    Numeric values are aligned right (except inside combo's).
*/
.dfData_BCD, .WebControl .dfData_BCD {
    text-align: right;
}
.WebCombo .dfData_BCD{
    text-align: left;
}


.WebApp_DragMask{
    position: fixed;
    z-index: 920;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
    filter: alpha(opacity=0);
    opacity: .0;   
}


.WebWrp_Wrap{
    white-space: normal;
}
.WebWrp_Pre{
    white-space: pre;
}
.WebWrp_PreWrap{
    white-space: pre-wrap;
}
.WebWrp_None{
    white-space: nowrap;
}
.WebWrp_Ellipsis{
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* - - - - - - WebApp - - - - - - */
.WebApp.WebContainer{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.WebApp .WebApp_ViewRegion{
    
}

.WebViewPort{
    height: 100%;
}


/* - - - - - - WebView - - - - - -  */ 
.WebWindow.WebView{
    margin: 0px;
}

.WebView label.WebWin_title{
    display: block;
}


.WebView.WebWin_Hidden{
    display: none;
}
.WebView.WebWin_Visible{
    
}
.WebInlineView > .WebContainer{
    background-color: transparent;
}

/* - - - - - - WebContainer - - - - - - */
/*
    A container hosts panels or other controls.
*/
.WebContainer {
    position: relative;
    outline: none;
    overflow: visible;
    box-sizing: border-box;
}


.WebContainer.WebScroll,
.WebGroup.WebScroll > div > div div.WebContainer,
.WebView.WebScroll > div.WebContainer,
.WebWindow.WebScroll > div.WebWin_main_l > div.WebWin_main_r > div.WebWin_main_c > div,
.WebAcCard.WebScroll .WebContainer{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.WebView.WebScroll > div > div{
}
.WebContainer > .WebCon_Sizer{
    position: relative;
    background-color: inherit;
}

.WebContainer .WebCon_Content{
    background-color: inherit;
}

.WebContainer.NoWitespace > .WebCon_Sizer > .WebCon_Content,
.WebFlPnl.NoWitespace > .WebContainer > .WebCon_Sizer > .WebCon_Content,
.WebContainer.NoPadding > .WebCon_Sizer > .WebCon_Content{
    padding: 0px 0px 0px 0px;
}

/* - - - - - - WebPanel - - - - - - */
.WebPanel{
    
}

.WebPanel > .WebPanel_DividerVertical{
    background-color: red;
    position: absolute;
    width: 2px;
    height: auto;
    top: 0px;
    bottom: 0px;
}

.WebPanel > .WebPanel_DividerHorizontal{
    background-color: red;
    position: absolute;
    width: auto;
    height: 2px;
    left: 0px;
    right: 0px;
}

.WebPanel.Web_Enabled > .WebPanel_DividerVertical{
    cursor: e-resize;
}
.WebPanel.Web_Enabled > .WebPanel_DividerHorizontal{
    cursor: n-resize;
}

.WebPanel_DividerVertical_Ghost, .WebPanel_DividerHorizontal_Ghost{
    
}
.WebPanel_DividerVertical_Ghost{
    position: absolute;
    height: auto;
    width: 0px;
    top: 0px;
    bottom: 0px;
    border-left: 1px dotted #000000;
}
.WebPanel_DividerHorizontal_Ghost{
    position: absolute;
    height: 0px;
    width: auto;
    left: 0px;
    right: 0px;
    border-top: 1px dotted #000000;
}


/* - - - - - - WebControl - - - - - - */
.WebControl{
    display: block;
}

.WebControl.NoWitespace > .WebCon_Inner{
    margin: 0px 0px;
}

/*
    The label is displayed as block with a fixed width or height. It can be located on the left, right 
    or at the top of the control. When a control has a label the inner div will get the WebCon_HasLabel
    class and if left right or top is set explicitly it will also get WebCon_LeftLabel, 
    WebCon_RightLabel or WebCon_TopLabel. If no position class is set the theme CSS determines where it 
    is shown.
*/
.WebControl > div > label{
    width: 130px;
    display: block;
    user-select: none;
    float: left;
    white-space: pre-wrap;
    box-sizing: border-box;
}

.WebControl > div.WebCon_HasLabel > div{
}

.WebControl > div.WebCon_LeftLabel > div{
    margin: 0px 0px 0px 130px;
}

.WebControl > div.WebCon_RightLabel > label{
    float: left;
}

.WebControl > div.WebCon_RightLabel > div{
    margin: 0px 130px 0px 0px;
}

.WebControl > div.WebCon_RightLabel > label{
    float: right;
}

.WebControl > div.WebCon_TopLabel > div{
    margin: 0px;
}

.WebControl > div.WebCon_TopLabel > label{
    float: none;
    width: auto;
    min-height: 1.2em;   /* Set to 1.2 as most themes have a line-height of 1.2 */
}
.WebControl > div.WebCon_Inner > div{
    display: block;
}

.WebControl .Web_Uppercase {
    text-transform: uppercase;
}
.WebControl.Web_Disabled > div > div > .WebFrm_Wrapper, .WebControl.Web_Disabled input,
.WebControl.Web_Disabled textarea, .WebControl.Web_Disabled select {
    -webkit-text-fill-color: currentcolor;    /* Override special IOS color attribute and reset to color (used by themes and psTextColor) */
}


/* - - - - - - WebForm - - - - - - */
.WebForm input{
    width: 100%;
    /*Fix for IE: Cursor isn't shown with align right and no 0px padding right*/
    padding: 0px 2px 0px 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Make sure color can be set of WebFrm_Wrapper */
    background-color: inherit;
}
.df-ie .WebForm input{
    /* Couldn't get inherit to work on IE */
    background-color: transparent;
}

.WebForm input:focus{
    outline: none;
}

/* make sure placeholders are not transformed with the regular text
   of the WebForm's input element. this prevents the pbUppercase
   property from uppercasing the placeholder text. */    
.WebForm ::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
.WebForm :-moz-placeholder {          /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
.WebForm ::-moz-placeholder {        /* Mozilla Firefox 19+ */
    text-transform: none;
}
.WebForm input.dfData_Text:-ms-input-placeholder { /* Internet Explorer 10+ - special selector is required for IE */
    text-transform: none;
}


.WebForm .WebFrm_Prompt{
    float: right;
    display: none;
    width: 16px;
    height: 16px;
    position: relative;
}

.WebForm.Web_Enabled .WebFrm_Prompt{
    cursor: pointer;
}

.WebForm .WebFrm_HasPrompt .WebFrm_Prompt{
    display: inline-block;
}

.WebForm .WebFrm_HasPrompt .WebFrm_PromptSpacer{
    margin-right: 17px;
}

.WebForm.Web_Disabled input {
    background-color: inherit;
}
.WebForm.Web_Disabled > div > div {
    
}

.WebDateForm .WebDF_HiddenDate{
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    opacity: 0.0;
}

.WebDateForm .WebDF_HiddenDate input{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/* - - - - - - WebButton - - - - - - */
.WebButton:before{
    display: none;
}
.WebButton button{
    width: 100%;  
    white-space: pre-wrap;
}

.WebButton.Web_Enabled button{
	cursor: pointer;
}
.WebButton.Web_Disabled button{
    cursor: default;
}
.WebButton.AsAnchor button{
    border: none;
    text-decoration: underline;
}

/* - - - - - - WebLabel - - - - - - */
.WebLabel .WebLabel_border{
    border: 1px solid black;
}

.WebLabel .WebLabel_content{
    overflow: hidden;
    padding: 3px;
    white-space: pre-wrap;
    
}

.WebLabel .WebLabel_content b{
    font-weight: bold;
}   

/* - - - - - - WebCombo - - - - - - */
.WebCombo select{
    width: 100%;  
    background-color: inherit;
}
.df-ie .WebCombo select{
    /* Couldn't get inherit to work on IE */
    background-color: transparent;
}
.WebCombo select:focus{
    outline: none;
}
.WebCombo.Web_Disabled select {
    
}
.WebCombo.Web_Disabled > div > div {
    
}

/* - - - - - - WebRadio - - - - - - */
.WebRadio input{
    display: block;
    float: left;
    
    height: 14px;
}
.WebRadio .WebRadio_Caption{
    display: block;
    margin-left: 20px;
}

/* - - - - - - WebCheckbox - - - - - - */
.WebCheckbox input{
    display: block;
    float: left;
    height: 14px;
}
.WebCheckbox .WebCB_Fake{
    display: none;
}
.WebCheckbox .WebCheckbox_Caption{
    display: block;
    margin-left: 20px;
}

/* - - - - - - WebEdit - - - - - - */
.WebEdit textarea{
    width: 100%;
    resize: none;
    outline: none;
    border: none;
    box-sizing: border-box;
}

.WebEdit textarea:focus{
    outline: none;
}


/* - - - - - - WebList & WebGrid - - - - - - */
/*
    The grid & list share their basic styles.
*/

span.WebHighlight{
    font-weight: bold;
}

/* Body */

.WebList .WebList_Scrolling > .WebList_PlaceHolder, .WebGrid .WebList_Scrolling > .WebList_PlaceHolder{
    position: absolute;
    top: calc(50% - 27px);
    width: 100%;
}
.WebList .WebList_PlaceHolder, .WebGrid .WebList_PlaceHolder{
    text-align: center;
    padding: 15px 0px;
    font-size: 25px;
    opacity: 0.4;
    font-weight: bold;
}

.WebList .WebList_NoScrolling > .WebList_BodyWrp, .WebGrid .WebList_NoScrolling > .WebList_BodyWrp{
    touch-action: pan-y;
    overflow-x: hidden;
    position: relative;
}

/* Scrolling styles */
.WebList .WebList_TableWrp, .WebGrid .WebList_TableWrp{
    overflow: hidden;
    height: 100%;
    position: relative;
    touch-action:none;
    -ms-touch-action:none;
}

.WebList .WebList_TableWrp.WebList_HorizScroll, .WebGrid .WebList_TableWrp.WebList_HorizScroll{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.WebList .WebList_Scroll, .WebGrid .WebList_Scroll{
    height: 100%;
    float: right;
    overflow-y: scroll;
    outline: none;
}

.df-mobile .WebList .WebList_Scroll::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    
}
.df-mobile .WebList .WebList_Scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.4);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.df-mobile .WebList .WebList_Scroll{
    /* position: absolute;
        right: 0px;
    z-index: 1; */
    
}

.WebList .WebList_Focus{
    position: relative; /* needed for placeholder */
    min-height: 24px;
}
.WebList .WebList_Focus:focus, .WebGrid .WebList_Focus:focus{
    outline: none;
}

.WebList table.WebList_Row, .WebGrid table.WebList_Row{
    table-layout: fixed;
    background-color: #ffffff;
    transform: translateX(0px);
}

.WebList .WebList_Body td, .WebGrid .WebList_Body td{
    vertical-align: middle;
    overflow: hidden;
}
.WebList.Web_Enabled .WebList_ShowSelected td, .WebGrid.Web_Enabled td.Web_Enabled{
    cursor: pointer;
}

/* BUGFIX: Right align acts strange in IE8 with left padding so we remove it */
.df-ie8 .WebGrid .WebList_Body .WebList_Row td.dfData_BCD, .df-ie8 .WebList .WebList_Body .WebList_Row td.dfData_BCD{
    padding-left: 0px;
}


/*
    Alignment of column Values according to peAlign
*/
.WebList .WebList_Body td.WebList_AlignLeft, .WebGrid .WebList_Body td.WebList_AlignLeft{
    text-align: left;
}
.WebList .WebList_Body td.WebList_AlignRight, .WebGrid .WebList_Body td.WebList_AlignRight{
    text-align: right;
}
.WebList .WebList_Body td.WebList_AlignCenter, .WebGrid .WebList_Body td.WebList_AlignCenter{
    text-align: center;
}

/* Header */
.WebList .WebList_Head table, .WebGrid .WebList_Head table{
    table-layout: fixed;
    width: 100%;
}

.WebList th, .WebGrid th{
    text-align: left;  
}

.WebGrid .WebList_Head th > div, .WebList .WebList_Head th > div {
    position: relative;
}


.WebList .WebList_Head, .WebGrid .WebList_Head{
    position: relative;
}
.WebList .WebList_Head .WebList_HeadWrp, .WebGrid .WebList_Head .WebList_HeadWrp{
    overflow-x: hidden;
}

.WebList .WebList_Head .WebList_ColHead, .WebGrid .WebList_Head .WebList_ColHead{
    
}

.WebList .WebList_Head .WebList_ColCap, .WebGrid .WebList_Head .WebList_ColCap{
	overflow: hidden;
    white-space: nowrap;
}

/*
    Alignment of column headers according to peAlign
*/
.WebList .WebList_Head th.WebList_AlignLeft, .WebGrid .WebList_Head th.WebList_AlignLeft div.WebList_ColCap{
    text-align: left;
}
.WebList .WebList_Head th.WebList_AlignRight, .WebGrid .WebList_Head th.WebList_AlignRight div.WebList_ColCap{
    text-align: right;
}
.WebList .WebList_Head th.WebList_AlignCenter, .WebGrid .WebList_Head th.WebList_AlignCenter div.WebList_ColCap{
    text-align: center;
}

.WebList .WebList_ColHead .WebList_ColSep, .WebGrid .WebList_ColHead .WebList_ColSep{
	position: absolute;
    right: -3px;
    top: 0px;
    background-color: #FFFFFF;
	width: 1px;
    border-right: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
	height: 100%;
    filter: alpha(opacity=0);
    opacity: .0;
}

.WebList.Web_Enabled .WebList_ColResizable .WebList_ColHead .WebList_ColSep, .WebGrid.Web_Enabled .WebList_ColResizable .WebList_ColHead .WebList_ColSep{
	cursor: e-resize;
    
}

.WebList .WebList_ColResizer, .WebGrid .WebList_ColResizer{
	position: fixed;
	height: 100%;
	width: 1px;
    top: 0px;
	
    border-left: 1px dotted #000000;
    z-index: 800;
}

.WebGrid .WebList_Head .WebList_Sorted, .WebGrid .WebList_Head .WebList_SortedReverse{
    
}

.WebList .WebList_Head .WebList_Sorted, .WebList .WebList_Head .WebList_SortedReverse{
    
}

.WebList .WebList_Head .WebList_SortedReverse, .WebGrid .WebList_Head .WebList_SortedReverse{
    
}

.WebList.Web_Enabled .WebList_Head .WebList_Sortable, .WebGrid.Web_Enabled .WebList_Head .WebList_Sortable{
    cursor: pointer;
}



/* - - - - - - WebList SwipeButtons - - - - - - */

.WebList_SwipeBtns{
    position: absolute;
    box-sizing: border-box;
}
.WebList_SwipeBtnsRight{
    right: 0px;
}
.WebList_SwipeBtn{
    vertical-align: middle;
}
.WebList_SwipeBtn.WebCon_Active{
    
}

.WebTransAll200ms{
    transition: all 200ms; 
}


/* - - - - - - WebGrid - - - - - - */

/* 
    Reset the opacity for the edit cell because else it will be double shaded.
*/
.WebGrid .WebList_Body td.Web_Disabled.WebGrid_EditCell{
    opacity: 1.0;
    filter: alpha(opacity=100);
}

/* - - - - - - WebColumn (Overrides WebForm) - - - - - - */

.WebList .WebColCombo,  .WebGrid .WebColCombo {
    text-align: left;
}

.WebGrid_EditCell .WebForm input{
}

.WebGrid .WebGrid_EditCell .WebControl > div.WebCon_Inner{
    min-height: 0px;
}

.WebGrid td.WebCol.WebGrid_EditCell .WebControl > div.WebCon_Inner,
.WebGrid td.WebColCombo.WebGrid_EditCell .WebControl > div.WebCon_Inner{
    margin: 0px 0px 0px 0px; 
    
}

/*
    FIX: Reset the border-collapse style so that the CSS3 shadow works in IE
*/
.WebGrid_EditCell .WebControl .WebFrm_Wrapper{
    border-collapse: separate;
}

.WebGrid .WebList_Body .WebList_Row td.WebCol.WebGrid_EditCell,
.WebGrid .WebList_Body .WebList_Row td.WebColCombo.WebGrid_EditCell{
    padding: 0px;
}


.WebControl.WebCheckboxColumn > .WebCon_Inner{
    margin: 0px 0px 0px 0px;
    min-height: 0px;
}
.WebColCheckbox .WebCheckbox input{
    display: inline;
    float: none;
}
.WebColCheckbox .WebCheckbox label.WebCheckbox_Caption{
    display: none;
}
.WebColCheckbox.WebList_AlignCenter  > .WebCheckbox > .WebCon_Inner > div{
    text-align: center;
}
.WebColCheckbox.WebList_AlignRight  > .WebCheckbox > .WebCon_Inner > div{
    text-align: right;
}
.WebColLink a{
    cursor: default;
}
.WebColLink.Web_Enabled a{
    cursor: pointer;
}

/* - - - - - - WebColumnButton - - - - - - */
.WebColBtn.Web_Enabled button{
    cursor: pointer;
}

.WebColBtn div.WebCon_Inner{
    padding: 0px;
    margin: 0px;
}

/* - - - - - - WebColumnImage - - - - - - */
.WebColImg span{
    display: inline-block;
    vertical-align: middle;
}
.WebColImg img{
    vertical-align: middle;
}

/* - - - - - - WebTabContainer - - - - - - */
.WebTabContainer .WebTbc_Head{
    
}

.WebTabContainer .WebTbc_Head .WebTab_Btn.Web_Enabled label{
    cursor: pointer;
}

.WebTabContainer .WebTbc_Head  .WebTab_Btn{
    float: left;
}
.WebTabContainer .WebTbc_Head  .WebTab_Btn:focus{
    outline: none;
}

.WebTabContainer .WebTab_Btn span{
    display: inline-block;
}

.WebTabContainer .WebTab_Btn span label{
    display: inline-block;
}
.WebTabContainer .WebTab_Current{
}

.WebTabContainer .WebTab_Current span{
}

.WebTabContainer .WebTab_Current span label{
}

.WebTabContainer .WebTbc_Body{
    
    
}

.WebTabContainer .WebTab_Disabled{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.WebTabPage{
    height: 100%;
}

/* - - - - - - WebCardContainer - - - - - - */

.WebCardContainer .WebTbc_BodyBorder{
    margin: 3px;
}
.WebCardContainer .WebTbc_BodyBorder.WebTbc_HasCaption{
    margin-top: -6px;
}

.WebCardContainer .WebCC_LabelSpacer{
    height: 17px;
}

.WebCardContainer > div > div > .WebCC_LabelSpacer > label{
    display: block;
    position: absolute;
    margin-left: 10px;
    z-index: 100;   /* ToDo: Find a way without z-index */
}

.WebCardContainer .WebCC_Head{
    display: none;
}

div.WebCardContainer > div.WebCon_Inner{
    margin: 0px;
}

div.WebCardContainer > div > div > div  > .WebCard > .WebCon_Sizer > .WebCon_Content{
    padding: 0px;
}



.WebCard{
    height: 100%;
}

.WebC_Swipe{
    z-index: 801;
}
.WebC_SwipeLeaving{

}
.WebC_SwipeBelow{
    position: absolute;
    visibility: visible !important;
    top: 0px;
    z-index: 800;
    width: 100%;
}
.WebCC_Body, .WebTbc_Body{
    position: relative;
    overflow: hidden
}

.WebCC_Swipable{
    touch-action: pan-y;
}

/* - - - - - - WebCommandBar - - - - - - */
.WebCommandBar{
    /* position: relative; */
}


/* - - - - - - WebMenuBar - - - - - - */
.WebMenuItem:before{
    display: none;
}

.WebMenuBar,
.WebToolBar{
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    
    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;          
    
}

.WebCommandBar .WebMenuBar.WebControl > div.WebCon_Inner,
.WebToolBar.WebTlb_Command > div.WebCon_Inner {
    min-height: 0px;
}

.WebMenuBar ul:focus,
.WebToolBar ul:focus{
    outline: none;
}
.WebMenuBar.WebControl > div.WebCon_Inner {
    margin: 0px 0px 0px 0px;
}

.WebToolBar li > ul,
.WebMenuBar li > ul{
    display: none;
}
.WebToolBar li.WebItm_Expanded > ul,
.WebMenuBar li.WebItm_Expanded > ul{
    display: block;
}


/*
    Level 0
*/
.WebMenuBar ul.WebBarRoot > li {
    float: left;
}

.WebMenuBar ul.WebBarRoot > li > div > span.WebItm_Icon{
    display: none;
}


/*
    Level 1
*/
.WebToolBar ul li ul,
.WebMenuBar ul li ul{
    position: fixed;
    /*
        We set the z-index for sub menu's because of the transparency toolbar item issue and to make 
        them display above dialogs.
    */
    z-index: 100;
}
.WebToolBar ul li ul li,
.WebMenuBar ul li ul li{
    clear: both;
    float: left;
}

.WebToolBar .WebMenuItem, .WebToolBar .WebMenuItem.Web_Enabled,
.WebMenuBar .WebMenuItem, .WebToolBar .WebMenuItem.Web_Enabled{
    cursor: pointer;
}

.WebToolBar > div > span.WebItm_Icon,
.WebMenuItem > div > span.WebItm_Icon{
    height: 16px;
    width: 16px;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
}

.WebToolBar > div > a, .WebToolBar > div > a:focus,
.WebMenuItem > div > a, .WebMenuItem > div > a:focus{
    text-decoration: none;
    outline: none;
}

li.Web_Disabled > div {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}

.WebMenuItem > div > a{
    cursor: inherit;
}

/*
    Level 2
*/
.WebToolBar ul li ul li ul,
.WebMenuBar ul li ul li ul{
    position: absolute;
    left: 100%;
    margin-top: -26px;
    /* margin: -25px 0px 0px 216px; */
}


/* - - - - - - WebToolBar - - - - - - */

.WebToolBar.WebTlb_Standalone > div.WebCon_Inner > div{
    overflow: hidden;
    position: relative;
    height: 46px;
    width: 100%;
}
.WebToolBar.WebControl > div.WebCon_Inner {
    margin: 0px 0px 0px 0px;
}

.WebToolBar.WebTlb_Standalone ul.WebBarRoot{
    white-space: nowrap;
}
.WebToolBar li{
    display: inline-block;
    text-align: left;
}

.WebToolBar{
    display: inline-block;
}

.WebToolBar ul.WebTlb_HideIcons > li > div > span.WebItm_Icon{
    display: none;
}

.WebToolBar ul.WebTlb_HideCaption > li > div > a{
    display: none;
}

.WebToolBar .WebTlb_SubItems{
    cursor: pointer;
}


/* - - - - - - WebWindow - - - - - - */
.WebWindow{
    position: fixed; /* absolute; would be better for mobile */
    display: inline;
    user-select: none;
    background-color: #000000;
}

.WebWindow.WebWin_Hidden{
    display: none;
}
.WebWindow.WebWin_Visible{
    
}

.WebWindow .WebWin_header{
    user-select: none;
    background-color: #CCCCCC;
}
.WebWindow.Web_Enabled .WebWin_header{
    cursor: move;
}
.WebWindow .WebWin_header_l{
    padding-left: 1px;
}

.WebWindow .WebWin_header_r{
    padding-right: 1px;
}

.WebWindow .WebWin_header_c{
    min-height: 20px;
}

.WebWindow .WebWin_title{
    float: left;
    overflow: hidden;
}

.WebWindow .WebWin_controls{
    float: right;
}

.WebWindow .WebWin_controls .WebWin_close{
    float: right;
    width: 10px;
    height: 10px;
    margin: 5px;
    background-color: #CC0000;
}
.WebWindow.Web_Enabled .WebWin_controls .WebWin_close{
    cursor: pointer;
}

.WebWindow .WebWin_controls .WebWin_close:focus{
    outline: none;
}

.WebWindow .WebWin_main_l{
    padding-left: 1px;
}
.WebWindow.Web_Enabled.WebWin_Resizable .WebWin_main_l{
    cursor: e-resize;
}

.WebWindow .WebWin_main_r{
    padding-right: 1px;
    
}

.WebWindow .WebWin_main_c{
    cursor: default;
    background-color: #FFFFFF;
}

.WebWindow .WebWin_bottom_l{
    height: 1px;
    padding-left: 1px;
}
.WebWindow.Web_Enabled.WebWin_Resizable .WebWin_bottom_l{
    cursor: ne-resize;
}

.WebWindow .WebWin_resizer{
    display: none;
    position: absolute;
    bottom:0px;
    right: 0px;
}
.WebWindow.WebWin_Resizable .WebWin_resizer{
    display: block;
}
.WebWindow .WebWin_bottom_r{
    height: 1px;
    padding-right: 1px;
}
.WebWindow.Web_Enabled.WebWin_Resizable .WebWin_bottom_r{
    cursor: nw-resize;   
}

.WebWindow .WebWin_bottom_c{
    height: 1px;
}
.WebWindow.Web_Enabled.WebWin_Resizable .WebWin_bottom_c{
    cursor: n-resize;
}

.WebWindow .WebWin_top_l{
    height: 1px;
    padding-left: 1px;
}
.WebWindow.Web_Enabled.WebWin_Resizable .WebWin_top_l{
    cursor: nw-resize;
}

.WebWindow .WebWin_top_r{
    height: 1px;
    padding-right: 1px;
}
.WebWindow.Web_Enabled.WebWin_Resizable .WebWin_top_r{    
    cursor: ne-resize;
}

.WebWindow .WebWin_top_c{
    height: 1px;
}
.WebWindow.Web_Enabled.WebWin_Resizable .WebWin_top_c{    
    cursor: n-resize;
}
.WebWin_ghost{
    filter: alpha(opacity=50);
    opacity: .5;
    z-index: 200;
}

.WebWindow_Mask{
    position: fixed;
    
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
    filter: alpha(opacity=20);
    opacity: .2;
}


/* - - - - - - - Date Picker - - - - - - - - */

.WebDatePicker .WebDP{
    display: inline-block;
}
.WebDatePicker .WebDP_Wrp{ /* this is needed for the 'change month' animation */
    position: relative;
}


/*
    Header & Button
*/

.WebDatePicker .WebDP_BtnPrev{
    float: left;
    width: 13px;
    height: 13px;
}
.WebDatePicker .WebDP_BtnNext{
    float: left;
    width: 13px;
    height: 13px;
}
.WebDatePicker.Web_Enabled .WebDP_BtnPrev,
.WebDatePicker.Web_Enabled .WebDP_BtnNext,
.WebDatePicker.Web_Enabled .WebDP_BtnMonth, .WebDatePicker.Web_Enabled .WebDP_BtnYear,
.WebDatePicker.Web_Enabled .WebDP_MonthMnu, .WebDatePicker.Web_Enabled .WebDP_YearMnu{
    cursor: pointer;
}

.WebDatePicker .WebDP_BtnMonth, .WebDatePicker .WebDP_BtnYear{
    float: right;
    position: relative;
    
}

.WebDatePicker .WebDP_MonthMnu, .WebDatePicker .WebDP_YearMnu{
    display: none;
    position: absolute;
    float: none;
    top: 14px;
    left: 0px;
    z-index: 800;
}

.WebDatePicker .WebDP_MonthMnu li, .WebDatePicker .WebDP_YearMnu li {
    float: none;
    display: block;
}

.WebDatePicker .WebDP_Up{
    height: 10px;
}

.WebDatePicker .WebDP_UpDown{
    height: 10px;
}

.WebDatePicker .WebDP_Down{
    height: 10px;
}

.WebDatePicker .WebDP_DownDown{
    height: 10px;
}

/*
    Body
*/
.WebDatePicker .WebDP_Body table{
    border-collapse: separate;
}

.WebDatePicker .WebDP_Body .WebDP_Day{
    cursor: pointer;
}

/*
    Ani
*/
.WebDatePicker .WebDP_Body .WebDP_HidePrev{
    display: none;
}
.WebDatePicker .WebDP_Body .WebDP_HideNext{
    display: none;
}

/*
    Footer
*/
.WebDatePicker .WebDP_BtnToday{
    display: inline-block;
    cursor: pointer;
}

/* - - - - - - WebDatePicker - - - - - - */

.WebDatePicker.Web_Disabled > div > div {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.WebDatePicker.Web_Disabled .WebDatePicker .WebDP_Body .WebDP_Day:hover,
.WebDatePicker.Web_Disabled .WebDatePicker .WebDP_BtnToday:hover{
    text-decoration: none;
    cursor: default;
}

.WebDatePicker .WebDatePicker_FocusHolder:focus{
    outline: none;
}

/* - - - - - - WebDateForm - - - - - - */




/* - - - - - - WebTreeView - - - - - - - */
.WebTreeView.WebCon_Focus .WebTree_Body{
    
}

.WebTreeView .WebTree_Body{
    background-color: #FFFFFF;
    border: 1px solid #000000;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.WebTreeView .WebTree_Body:focus{
    outline: none;
}

.WebTreeView .WebTree_Body table, .WebTreeView .WebTree_Body tr, .WebTreeView .WebTree_Body td {
    vertical-align: middle;
}

.WebTreeView .WebTree_Loading{
    
}

.WebTreeView .WebTree_Text{
    cursor: pointer;
    white-space: nowrap;
}

.WebTreeView .WebTree_Selected  .WebTree_Text{
    background-color: #CCCCCC;
}

.WebTreeView.WebCon_Focus .WebTree_Selected .WebTree_Text{
    
}

/*
    Expand / collapse animation
*/
.WebTreeView .WebTree_SubRow .WebTree_Item {
    min-height: 18px;
}

.WebTreeView .WebTree_SubRow {
    display: table-row;
    /* line-height: 0px; */
}
.WebTreeView .WebTree_SubRow.WebTree_HiddenSubRow{
    display: none;
}

.WebTreeView .WebTree_SubRow.WebTree_HiddenSubRow .WebTree_Expanded > td, .WebTreeView .WebTree_SubRow.WebTree_HiddenSubRow .WebTree_Collapsed > td{
    overflow: hidden;
}

.WebTreeView .WebTree_SubRow.WebTree_HiddenSubRow .WebTree_Item{
    height: 0px;
}

/*
    Tree lines & buttons
*/
.WebTreeView .WebTree_Item, .WebTreeView .WebTree_Con{
    width: 20px;
}

.WebTreeView .WebTree_Item{
}

.WebTreeView .WebTree_Item div{
    display: block;
    width: 20px;
}

.WebTreeView .WebTree_Expanded .WebTree_EntrySub{
    cursor: pointer;
}

.WebTreeView .WebTree_Collapsed  .WebTree_EntrySub{
    cursor: pointer;
}

.WebTreeView .WebTree_Expanded .WebTree_EndSub{
    cursor: pointer;
}

.WebTreeView .WebTree_Collapsed  .WebTree_EndSub{
    cursor: pointer;
}

.WebTreeView  .WebTree_Expanded .WebTree_StartSub{
    cursor: pointer;
}

.WebTreeView  .WebTree_Collapsed .WebTree_StartSub{
    cursor: pointer;
}

.WebTreeView .WebTree_Start{
}

.WebTreeView .WebTree_Entry{
}

.WebTreeView .WebTree_End{
}

.WebTreeView .WebTree_Con{
}

.WebTreeView  .WebTree_Expanded .WebTree_StartEndSub{
    cursor: pointer;
}

.WebTreeView  .WebTree_Collapsed .WebTree_StartEndSub{
    cursor: pointer;
}

.WebTreeView .WebTree_StartEnd{
}

.WebTreeView .WebTree_StartEnd{
}

/*
    Icons
*/
.WebTreeView .WebTree_Icon, .WebTreeView .WebTree_Folder, .WebTreeView .WebTree_HasIcon{
    position: relative;
    padding-left: 22px;
}

.WebTreeView .WebTree_IconLoading{
}

.WebTreeView  .WebTree_Collapsed .WebTree_Folder{
}

.WebTreeView .WebTree_Expanded  .WebTree_Folder{
}

.WebTreeView .WebTree_Collapsed  .WebTree_Icon{
}

.WebTreeView .WebTree_Expanded  .WebTree_Icon{
}

/*
    Disabled state
*/
.WebTreeView.Web_Disabled .WebTree_Text,
.WebTreeView.Web_Disabled .WebTree_Expanded .WebTree_EntrySub, .WebTreeView.Web_Disabled .WebTree_Collapsed  .WebTree_EntrySub, 
.WebTreeView.Web_Disabled .WebTree_Expanded .WebTree_EndSub, .WebTreeView.Web_Disabled .WebTree_Collapsed  .WebTree_EndSub, 
.WebTreeView.Web_Disabled .WebTree_Expanded .WebTree_StartSub, .WebTreeView.Web_Disabled  .WebTree_Collapsed .WebTree_StartSub,
.WebTreeView.Web_Disabled .WebTree_Expanded .WebTree_StartEndSub, .WebTreeView.Web_Disabled  .WebTree_Collapsed .WebTree_StartEndSub{
    cursor: default;
}


.WebTreeView.Web_Disabled .WebTree_Body > table{
    filter: alpha(opacity=60);
    opacity: 0.6;
}


/* - - - - - - - - - WebImage - - - - - - - - - - */
.WebImage .WebImg_Wrp img{
    vertical-align: top;
}

.WebImage .WebImg_Box{
}


/* - - - - - - - - - WebHtmlBox - - - - - - - - - - */
.WebHtmlBox .WebHtml_Wrp{
    line-height: normal;
    padding: 1px;
}

.WebHtmlBox .WebHtml_Box{
}

.WebHtmlBox .WebHtml_Wrp a{
    text-decoration: underline;
    color: #0645AD;
    cursor: pointer;
}
.WebHtmlBox b{
    font-weight: bold;
}
.WebHtmlBox i{
    font-style: italic;
}
.WebHtmlBox u{
    text-decoration: underline;
}
.WebHtmlBox h1{
    font-size: 15px;
    font-weight: bold;
    margin: 10px 0px 3px;   
}
.WebHtmlBox h2{
    font-size: 13px;
    font-weight: bold;
    margin: 10px 0px 3px;   
}
.WebHtmlBox p{
    margin: 0px 0px 7px;
}


/* - - - - - - - - - WebSpacer - - - - - - - - - - */
.WebSpacer.WebControl > div.WebCon_Inner{
    margin: 0px 0px 0px 0px; 
    min-height: 0px;
}

.WebSpacer .WebSpacer_Spacer{
    height: 30px;
}


/* - - - - - - - - - WebSpacer - - - - - - - - - - */
.WebHorizontalLine hr{
    
}


/* - - - - - - - - - InfoBallon - - - - - - - - - - */
.WebInfoBalloon{
    position: fixed;
    margin-top: 20px;
    
}

.WebInfoBalloon.WebInfoBalloonVisible{
    
}

.df-ie8 .WebInfoBalloon{
    visibility: hidden;
}

.df-ie8 .WebInfoBalloon.WebInfoBalloonVisible{
    visibility: visible;
}

.WebInfoBalloon_Top{
    margin-top: 0px;
    margin-bottom: 20px;
}

.WebInfoBalloon:before{
    content: "";
    display: block;
    width: 0;
    position: absolute;
    left: 14%;
    top: -22px;
    
}

.WebInfoBalloon_Top:before{
    top: auto;
    bottom: -22px;
    
}


.WebInfoBalloon:after{
    content: "";
    display: block;
    width: 0;
    top: -17px;
    position: absolute;
    left: 14%;
    margin-left: 4px;
    
}

.WebInfoBalloon_Top:after{
    top: auto;
    bottom: -17px;
}


/* - - - - - - - - - WebIFrame - - - - - - - - - */
.WebIFrame iframe{
    width: 100%;
    border: 0px;
    margin: 0px;
    height: 100%;
}
.WebIFrame .WebCon_Inner{
    
}

.WebIFrame .WebIFrm_Box{
    padding: 0px;
}


/* - - - - - - - - - WebSlider - - - - - - - - - - */
.WebSlider .WebCon_Inner{
    
}
.WebSlider .WebSlider_Wrapper{
    overflow: hidden;
    position: relative;
}

/* Bar */
.WebSlider .WebSlider_Bar{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.WebSlider .WebSlider_InnerBar{
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.WebSlider .WebSlider_Vertical .WebSlider_BarWrapper {
    height: 100%;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.WebSlider .WebSlider_Vertical .WebSlider_Bar {
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.WebSlider .WebSlider_Horizontal .WebSlider_BarWrapper {
    
}
.WebSlider .WebSlider_Horizontal .WebSlider_Bar {
    height: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.WebSlider  .WebSlider_Horizontal .WebSlider_InnerBar{
    width: 100%;
}

.WebSlider.WebCon_Focus .WebSlider_Bar {
}

.WebSlider .WebSlider_Vertical .WebSlider_ShowRange{
    width: 100%;
    position: relative;
}

.WebSlider .WebSlider_Horizontal .WebSlider_ShowRange{
    height: 100%;
    position: relative;
}

/* Slider */
.WebSlider .WebSlider_SliderWrapper {
    position: absolute;
    overflow: hidden;
    top: 0px;
}
.WebSlider .WebSlider_Horizontal .WebSlider_SliderWrapper {
    width: 100%;
}
.WebSlider .WebSlider_Vertical .WebSlider_SliderWrapper {
    float: left;
    height: 100%;
}
.WebSlider.Web_Enabled .WebSlider_Slider , .WebSlider.Web_Enabled .WebSlider_SliderRanged {
    cursor: pointer;
}
.WebSlider .WebSlider_Slider , .WebSlider .WebSlider_SliderRanged {
    position: absolute;
}

/* Labels */
.WebSlider .WebSlider_Labels{
    position: relative;
    overflow: hidden;
}

.WebSlider .WebSlider_Horizontal .WebSlider_Labels{
    width: 100%;
}

.WebSlider .WebSlider_Vertical .WebSlider_Labels{
    height: 100%;
}

.WebSlider .WebSlider_Label {
    position: absolute;
    cursor: pointer;
    width: 200px;
}

.WebSlider .WebSlider_Horizontal .WebSlider_LabelMarker{
    height: 10px;
}

.WebSlider .WebSlider_Vertical .WebSlider_LabelMarker{
    width: 5px;
}

.WebSlider .WebSlider_LabelText{
    position: absolute;
}
.WebSlider.Web_Enabled .WebSlider_LabelText{
    cursor: pointer;
}

.WebSlider.Web_Enabled .WebSlider_LabelMarker{
    cursor: pointer;
}
.WebSlider .WebSlider_LabelMarker{
    position: absolute;
}

.WebSlider .WebSlider_Horizontal .WebSlider_LabelMarkerWrapper{
    height: 10px;
    width: 1px;
}

.WebSlider .WebSlider_Vertical .WebSlider_LabelMarkerWrapper,
.WebSlider .WebSlider_Vertical .WebSlider_LabelWrapper{
    float : left;
    width: 5px;
    height: 1px;
}


/* - - - - - - WebSuggestions - - - - - - */
.WebSuggestions.WebSug_Hidden{
    display: none;
}

.WebSuggestions{
    position: fixed;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 300;
}

.WebSuggestions table{
    width: 100%;
}

.WebSuggestions .WebSug_Suggestion{
    cursor: pointer;
}
.WebSuggestions .WebSug_Suggestion b{
    font-weight: bold;
}

.WebSuggestions .WebSug_Selected{
    background-color: #9EA85E;
}

.WebSuggestions.WebSug_Loading{
    min-height: 22px;
    
}
.WebSuggestions.WebSug_Loading:after{
    content: '';
    display: block;
    position: absolute;
    
    
}


/* - - - - - - WebProgressBar - - - - - - */
.WebProgressBar .WebPB_Wrp{
    height: 18px;
}

.WebProgressBar .WebPB_Wrp > div{
    position: relative;
    height: 100%;
}

.WebProgressBar .WebPB_Progress.WebPB_Zero{
    display: none;
}
.WebProgressBar .WebPB_Progress{
    height: 100%;
    width: 0%;
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
}

.WebProgressBar .WebPB_Percentage{
    width: 100%;
    text-align:center;
    position: absolute;   
}

/* - - - - - - Drag & Drop - - - - - - */
.WebDropMask{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 920;
}
.WebDropMask .WebDropMask_Mask{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    filter: alpha(opacity=0);
    opacity: .0;  
}


.WebDropZone{
    position: fixed;
    border: 4px dashed #9EA85E;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    
    background: #FFFFFF; /* Fall-back for browsers that don't
    support rgba */
    background: rgba(255, 255, 255, .5);
    
}
.WebDropZone > div{
    font-size: 22px;
    font-weight: bold;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
}   


/* - - - - - - WebFileUploadButton - - - - - - */
.WebUploadBtn .WebFUB_Wrp{
    position: relative;
    overflow: hidden;
}


.WebFile_Mask:before{
    content: 'Upload files!';
    opacity: 1;
    font-size: 28px;
}


/* - - - - - - WebFileUploadForm - - - - - - */
.WebFileFrm .WebFrm_Wrapper:focus{
    outline: none;
}

.WebFileFrm div.WebFile_Content{
    margin-right: 20px;
    height: 18px;
}

.WebFileFrm .WebFile_HasFile div.WebFile_Details{
    text-decoration: underline;
}
.WebFileFrm .WebFile_Pending div.WebFile_Details{
    font-style: italic;
}
.WebFileFrm div.WebFile_Details{
    padding: 2px 1px 1px 1px;
    overflow: hidden;
    white-space: nowrap;
}

.WebFileFrm .WebFile_OnClick{
    cursor: pointer;
}

.WebFileFrm div.WebFile_Btn{
    width: 16px;
    overflow: hidden;
    position: relative;
    float: right;
    height: 16px;
}

.WebFileFrm.Web_Enabled div.WebFile_Btn:hover{
    
}

.WebFileFrm.Web_Enabled .WebFile_Btn{
    cursor: pointer;
}

.WebFileFrm.WebControl div.WebFrm_Wrapper.WebUp_DragHover{
    box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

.WebFileFrm .WebFile_Working{
    width: 100%;
    height: 100%;
}

.WebFileFrm .WebFile_Progress{
    text-align: center;
    position: relative;
    width: 100%;
    
    height: 18px;
}
.WebFileFrm .WebFile_ProgressLabel{
    padding: 2px 1px 1px 1px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    text-decoration: none;
}
.WebFileFrm .WebFile_ProgressBar{
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}


/* - - - - - - WebGroup - - - - - - */
.WebGroup {
    background-color: inherit;
}
.WebGroup > .WebCon_Inner{
    background-color: inherit;
}
.WebGroup > .WebCon_Inner > div{
    position: relative;
}
.WebGroup.WebControl > .WebCon_Inner {
    margin: 0px;
}
.WebGroup.WebGrp_HasBorder > .WebCon_Inner > div > .WebContainer{
    margin: 10px 3px 3px 3px;
    border: 1px solid #000000;
}

.WebGroup.WebGrp_HasCaption  > .WebCon_Inner > div > .WebContainer{
    margin-top: 10px;
}

.WebGroup > .WebCon_Inner > div > .WebGrp_Caption{
    display: none;
}
.WebGroup.WebGrp_HasCaption  > .WebCon_Inner > div > .WebGrp_Caption{
    display: block;
    position: absolute;
    top: -10px;
    left: 13px;
    background-color: inherit;
}

.WebGroup > div.WebCon_Inner > div , .WebGroup > div.WebCon_Inner > div > div.WebContainer{
    background-color: inherit;
}

.WebGroup.WebGrp_HasCaption.NoPadding > div.WebCon_Inner > div > div.WebContainer > div.WebCon_Sizer > .WebCon_Content,    
.WebGroup > div.WebCon_Inner > div > div.WebContainer > div.WebCon_Sizer > .WebCon_Content {
    padding: 0px;
}

/* WebGroup Expand / Collapse Feature */
.WebGroup .WebGrp_ExpandBtn{
    position: absolute;
    display: none;
}
.WebGroup.Web_Enabled .WebGrp_ExpandBtn{
    cursor: pointer;
}

.WebGroup.WebGrp_Collapsible > div > div > .WebGrp_ExpandBtn{
    display: block;
}
.WebGroup.WebGrp_Expanded  > div > div >  .WebGrp_ExpandBtn:before{
    content: '-';
}
.WebGroup.WebGrp_Collapsed  > div > div >  .WebGrp_ExpandBtn:before{
    content: '+';
}




.WebGroup.WebGrp_Collapsible.Web_Enabled > .WebCon_Inner > div > .WebContainer{
    transition: max-height 0.4s cubic-bezier(.17,.67,.13,.97);
}
.WebGroup.WebGrp_Collapsible > .WebCon_Inner > div > .WebContainer{
    overflow: hidden;
}
.WebGroup.WebGrp_Expanded > .WebCon_Inner > div > .WebContainer{
    max-height: 1200px;
}
.WebGroup.WebGrp_Expanded.Web_Enabled > .WebCon_Inner > div > .WebContainer{
    transition: max-height 0.4s cubic-bezier(.68,.12,.92,.14);
}
.WebGroup.WebGrp_Collapsed > .WebCon_Inner > div > .WebContainer{
    max-height: 0px;
}
.WebGroup.WebGrp_Collapsible.Web_Enabled > .WebCon_Inner > div > .WebContainer > .WebCon_Sizer{
    transition: visibility 0s linear 0.4s;
}
.WebGroup.WebGrp_Collapsed > .WebCon_Inner > div > .WebContainer > .WebCon_Sizer{
    visibility: hidden;
}
.WebGroup.WebGrp_Expanded > .WebCon_Inner > div > .WebContainer > .WebCon_Sizer{
    visibility: inherit;
}
.WebGroup.WebGrp_Expanded.Web_Enabled > .WebCon_Inner > div > .WebContainer > .WebCon_Sizer{
    transition-delay: 0s;
}


/* - - - - - - WebMenuList - - - - - - */

.WebMenuList.WebControl > .WebCon_Inner{
    margin: 0px 0px;
}
.WebMenuList .WebMenuWrp:focus{
    outline: 0;
}

.WebMenuList .WebML_Panel{
    position: relative;
    overflow: hidden;
}

.WebMenuList .WebML_Title{
    box-sizing: border-box;
}

.WebMenuList .WebML_Caption{
    display: block;
}

.WebMenuList.WebML_Hidden{
    opacity: 0;
}

.WebMenuList li{
    width: 100%;
    box-sizing: border-box;
}
.WebMenuList li.Web_Enabled{
    cursor: pointer;
}

.WebMenuList li.WebMenuItem div span.WebItm_Icon{
    display: none;
}
.WebMenuList .WebML_ShowIcons li.WebMenuItem div span.WebItm_Icon{
    display: inline-block;
}
.WebMenuList li a{
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
}

.WebMenuList .WebML_Divider{
    height: 20px;
    box-sizing: border-box;
}

.WebMenuList .WebML_Mnu{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
    
    /* left: 0px; */
    -webkit-transform: translateX(0%);
    transform:translateX(0%);
}
.WebMenuList .WebML_NoScollRoot .WebML_Mnu.WebML_Root{
    overflow: visible;
}

.WebMenuList .WebML_Mnu.WebML_HiddenSub{
    /* left: 220px; */
    -webkit-transform: translateX(100%);
    transform:translateX(100%);
}
.WebMenuList .WebML_Mnu.WebML_Current{
    -webkit-transform: translateX(0px);
    transform:translateX(0px);
}
.WebMenuList .WebML_Mnu.WebML_HiddenParent{
    -webkit-transform: translateX(-100%);
    transform:translateX(-100%);
}

.df-ie8 .WebMenuList .WebML_Mnu.WebML_HiddenSub, .df-ie8 .WebMenuList .WebML_Mnu.WebML_HiddenParent{
    display: none;
}

/* - - - - - - - - - WebFloatingPanel - - - - - - - - -*/

.WebMenu_Mask{
    background-color: rgba(0, 0, 0, 0.8);
}
.WebMenu_Mask{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.WebBreadcrumb .WebMenu_Mask,
.WebActionBar .WebMenu_Mask{
    z-index: 90;
}

.WebFlPnl.WebContainer{
    position: fixed;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    overflow: visible;   
}
.WebFlPnl.WebFP_Visible{
    opacity: 1.0;
    visibility: inherit;
}

.WebFlPnl .WebFP_Arrow{
    display: none;
}

.WebFlPnl.WebFP_FixedContentWidth > .WebContainer{
    overflow-x: hidden;
}


/* - - - - - WebMenuButton - - - - - */

.WebFlPnl.WebMBPanel > div > div > .WebCon_Content{
    padding: 0px 0px;
}

.WebMenuAnchor{
    
}

.WebMenuAnchor .WebCon_Inner > div{
    text-align: center;
}




/* - - - - - - WebBreadCrumbPanel - - - - - - */
.WebBreadcrumb.Web_Enabled .WebCrumbs_DropDown div.WebCrumb_DropDownBtn.WebCrumb_Caption {
	cursor: pointer;
}

/* Dropdown Style */
.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs {
    white-space: nowrap;
    display: block;
    position: fixed;
    z-index: 100;
    display: block;
    visibility: hidden;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs.WebCrumbs_Expanded{
    visibility: visible;
}
/* Horizontal Style */
.WebBreadcrumb .WebCrumbs_Horiz.WebCrumbs_Hide {
    display: none;
}


/* - - - - - - WebColorPicker - - - - - - */
.WebColorPicker.Web_Disabled{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.WebColorPicker .WebCP_Main{
    position: relative;
}
.WebColorPicker .WebCP_Main:focus{
    outline: none;
}

.WebColorPicker.WebCon_Focus .WebCP_GradSlider,
.WebColorPicker.WebCon_Focus .WebCP_ColorBar,
.WebColorPicker.WebCon_Focus .WebCP_ColorMap{
    
}
.WebColorPicker .WebCP_Picker{
    position: absolute;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.WebColorPicker .WebCP_ColorMap{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 30px;
}
.WebColorPicker.Web_Enabled .WebCP_ColorMap{
    cursor: crosshair;
}
.WebColorPicker .WebCP_Pointer{
    position: absolute;
    width: 4px;
    height: 4px;
    border: 2px solid #000000;
}

    
.WebColorPicker .WebCP_GradSlider{
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 20px;
}
.WebColorPicker.Web_Enabled .WebCP_GradSlider{
    cursor: n-resize;
}
.WebColorPicker .WebCP_Slide{
    position: absolute;
    height: 4px;
    width: 20px;
    border: 2px solid #000000;
    margin-left: -2px;
}
.WebColorPicker .WebCP_ColorBar{
    display: none;
    height: 20px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    vertical-align: middle;
}

.WebColorPicker .WebCP_ShowColorBar .WebCP_Picker{
    bottom: 30px;
}
.WebColorPicker .WebCP_ShowColorBar .WebCP_ColorBar{
    display: block;
}

.WebColorPicker .WebCP_ColorPalette{
    margin-left: -8px;
    margin-right: -8px;
}
.WebColorPicker .WebCP_Palette{
    table-layout: fixed;
    width: 100%;
}
.WebColorPicker.Web_Enabled .WebCP_PalColor{
    cursor: pointer;
}
.WebColorPicker .WebCP_PalColor{
    height: 24px;
}

/* - - - - - - - - - WebColorForm - - - - - - - - - */

.WebColorForm .WebCF_Box{
    display: none;
}
.WebColorForm .WebCF_ShowBox .WebCF_Box{
    display: block;
    position: absolute;
    width: 59px;
    height: 26px;
    margin-top: -1px;
    margin-left: -3px;
}
.WebColorForm .WebCF_ShowBox .WebFrm_PromptSpacer{
    margin-left: 62px;
}



/* - - - - - - - - - WebAccordionContainer - - - - - - - - */
.WebAccordion .WebAcCard{
    overflow: hidden;
    height: 0px;
}
.WebAccordion.Web_Enabled.WebAc_Rendered .WebAcCard{
    transition: height 0.7s, visibility 0s linear 0.8s;
}
.WebAccordion.WebAc_Rendered .WebAcCard{
    visibility: hidden;
}
.WebAccordion .WebTab_Btn{
    padding: 3px;
    background-color: #F3F3F3;
}
.WebAccordion.Web_Enabled .WebAcCard.WebAcCard_Visible{
    transition-delay: 0s;
}
.WebAccordion div.WebAcCard.WebAcCard_Visible{
    visibility: inherit;
}

/* - - - - - - - - WebListExpandPanel - - - - - - - - - */
.WebListExpPnl{
    overflow: hidden;
    box-sizing: border-box;
    height: auto;
    transition: height 10ms ease;
}
.WebListExpPnl.Web_Enabled{
    transition: height 0.4s ease;
}

.WebListExpPnl.WebCon_Loading:before{
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, .8);
}