@charset 'UTF-8';

/* - - - - - - Generic style - - - - - - */

/*
    The following style is used by the JavaScript framework to determine wether the theme is properly 
    loaded. Please do not remove this style!
*/
#df_load_test{
    height: 10px;
}

body{
    font-family: Arial, Helvetica, 'Trebuchet MS', sans-serif;
    font-size: 80%;
    color: #313F54;
    line-height: 1.2;
}

::selection {color:#fff;background:#83A8E0; text-shadow: none;}
::-moz-selection {color:#fff;background:#83A8E0;text-shadow: none;} 

.WebDateForm_Mask, .WebWindow_Mask{
    background-color: #000000;
}
.WebWindow_Mask{
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.WebDateForm_Mask{
    filter: alpha(opacity=20);
    opacity: 0.2;
}


/* - - - - - - WebApp - - - - - - */
.WebInlineView > div.WebContainer{
    padding: 0px 20px 20px 20px;
}
.WebApp.WebContainer {
    background: #FFFFFF;
}


/* - - - - - - WebPanel - - - - - - */
.WebPanel{
    background-color: #FFFFFF;
}
.WebPanel > .WebPanel_DividerVertical {
    background-color: #D6DBE0;
    bottom: 0;
    height: auto;
    position: absolute;
    top: 0;
    width: 2px;
    margin: 10px 0px 10px 0px; 
}

.WebPanel.Web_Enabled > .WebPanel_DividerHorizontal {
    background-color: #D6DBE0;
    margin: 0px 10px 0px 10px; 
}

/* - - - - - - WebContainer - - - - - -  */
/* Margins inside the container */
.WebContainer .WebCon_Content{
    padding: 5px;
} 

/* - - - - - - WebView - - - - - -  */ 
.WebView{
    
}

.WebInlineView label.WebWin_title{
    background-color: #313F54;
    padding: 10px 9px 6px;
    color: #FFFFFF;
    text-shadow: 1px 1px 0px #000;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}


/*
    This sets the background color for views & panels
*/
.WebContainer, .WebTabContainer .WebTbc_Body .WebContainer{
    background-color: inherit;
} 
.WebInlineView > div > div > div > .WebCon_ContentWrp{
    background-color: #F5F5F5;
}

/* - - - - - - WebControl - - - - - - */
.WebControl > div.WebCon_Inner{
    margin: 3px 3px 3px 3px; 
    min-height: 30px;
}
.WebList > div.WebCon_Inner{
    margin: 0px 0px 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;
    padding: 8px 2px 0px 2px;
    -moz-user-select: none;
    text-shadow: 1px 1px 0 #fff;
}

.WebControl > div.WebCon_HasLabel > div{
    margin-left: 130px;
}

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

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

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

.WebControl > div.WebCon_TopLabel > label{
    padding-bottom: 4px;
    float: none;
    width: auto;
    min-height: 27px;
}

.WebControl > div.WebCon_Inner > div{
    
}

/* This defines the border used around the WebForm, WebCombo & WebEdit */
.WebControl .WebFrm_Wrapper, .WebTreeView .WebTree_Body{
    padding: 4px;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
}
.WebControl.WebCon_Focus > div > div > .WebFrm_Wrapper, .WebTreeView.WebCon_Focus .WebTree_Body{
    box-shadow: 0 0 2px #83A8E0;
    border: 1px solid #83A8E0;
}

.WebControl.WebError div.WebFrm_Wrapper{
    border: 1px solid #DD0000;
    box-shadow: 0 0 2px #DD0000;
}



/* - - - - - - WebForm - - - - - - */

.WebForm input{
    background-color: transparent;
    height: 20px;
    padding: 0 3px;
}

.WebForm .WebFrm_Prompt,
.WebFileFrm div.WebFile_Btn{
    color: #313F54;
    height: 18px;
    width: 18px;
}

.WebForm.Web_Enabled .WebFrm_Prompt:hover,
.WebFileFrm.Web_Enabled .WebFile_Btn:hover{
    color: #83A8E0;
}

.WebFileFrm div.WebFile_Btn{
    overflow: hidden;
    position: relative;
    float: right;
    margin: 3px 3px 0px 0px;
}

.WebForm.Web_Disabled .WebFrm_Prompt{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

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

.WebControl.Web_Disabled > div > div > .WebFrm_Wrapper{
    background-color: #FAFAFA;
}
.WebControl.Web_Disabled input, .WebControl.Web_Disabled select {
    color: #8A868A;
}
.WebForm.Web_ReadOnly input, .WebEdit.Web_ReadOnly textarea{
    color: #8A868A;
}


/* - - - - - - WebButton - - - - - - */
.WebButton > div.WebCon_Inner{
    
}

.WebButton button,
.WebColBtn.Web_Enabled button{
    background: #313F54;
    border: 1px solid #313F54;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 3px 3px 3px 3px;
    min-height: 30px;
    margin: 0px 3px 0px 0px;
    color: #FFFFFF;
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
}
.WebButton.Web_Enabled button:hover, 
.WebButton.Web_Enabled.WebCon_Focus button, /* Changed from :focus for WebUploadBtn */
.WebColBtn.Web_Enabled button:hover{   /* Added for WebUploadBtn */
    background: #83A8E0;
    border: 1px solid #83A8E0;
    color: #fff;
}
.WebButton.Web_Enabled button:active,
.WebColBtn.Web_Enabled button:active{
    background: #A2ABA5;
    border: 1px solid #A2ABA5;
    color: #FFFFFF;
}

.WebButton.Web_Disabled button,
.WebColBtn.Web_Disabled button{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.WebButton.AsAnchor button{
    color: #313F54;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    border: none;
}

.WebButton.AsAnchor.Web_Enabled button:hover,
.WebButton.AsAnchor.Web_Enabled.WebCon_Focus button,
.WebButton.AsAnchor.Web_Enabled:hover button,
.WebButton.AsAnchor.Web_Enabled button:focus{
    color: #83A8E0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    border: none;
    outline: 0;
}

/* - - - - - - WebLabel - - - - - - */
.WebLabel .WebLabel_content{
    line-height: 15px;  /* This line height needs to be fixed because of rounding issues with panels */
    padding: 8px 3px 3px;
}

/* - - - - - - WebCombo - - - - - - */
.WebCombo select{
    height: 20px;
}


/* - - - - - - WebRadio - - - - - - */
.WebRadio input{
    margin: 9px 2px 0px;
    height: 14px;
}
.WebRadio .WebRadio_Caption{
    padding: 8px 2px 0px 0px;
    margin-left: 20px;
}


/* - - - - - - WebCheckbox - - - - - - */
.WebCheckbox input{
    margin: 9px 2px 0px;
    height: 14px;
}
.WebCheckbox .WebCheckbox_Caption{
    padding: 8px 2px 0px 0px;
    margin-left: 20px;
}
.WebCheckbox > .WebCon_Inner > div{
    height: 28px;
}


/* - - - - - - WebEdit - - - - - - */
.WebEdit textarea{
    background-color: transparent;
    
}



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

.WebGrid .WebList_Head .WebList_Sorted:before, 
.WebGrid .WebList_Head .WebList_SortedReverse:before, 
.WebList .WebList_Head .WebList_Sorted:before, 
.WebList .WebList_Head .WebList_SortedReverse:before {
    color: #494949;
    text-shadow: 0px 1px 0 #FFFFFF;
    float: right;
    font-size: 13px;
    padding: 10px 4px 0 0;
}

.WebList.Web_Disabled, .WebGrid.Web_Disabled{
    color: #686668;
}

/*
    Add some dinstance between the grid and other controls.
*/
.WebGrid.WebControl > .WebCon_Inner, .WebList.WebControl > .WebCon_Inner{
    margin: 10px 3px 3px 3px;
}

/* Body */
.WebGrid .WebList_BodyWrp, .WebList .WebList_BodyWrp{
    border: 1px solid #E6E6E6;
    background-color: #ffffff;
    margin: 0px 0px 4px 0px;
}
.WebGrid .WebList_Body, .WebList .WebList_Body{
    
}

.WebGrid .WebList_Body .WebList_RowOdd, .WebList .WebList_Body .WebList_RowOdd{
    background-color: #FBFBFB;
}

.WebGrid .WebList_Body .WebList_Row, .WebList .WebList_Body .WebList_Row{
    
}

.WebGrid .WebList_Body .WebList_Row td, .WebList .WebList_Body .WebList_Row td{
    padding-left: 6px;
    padding-right: 6px;
    
    height: 24px;
    border-left: 1px solid #ECECEC;
}
.WebGrid .WebList_HorizScroll .WebList_Row td:last-child,
.WebList .WebList_HorizScroll .WebList_Row td:last-child{
    border-right: 1px solid #ECECEC;
}

.WebGrid .WebList_Body .WebList_Row td:first-child, .WebList .WebList_Body .WebList_Row td:first-child{
    border-left: none;
}

.WebGrid .WebList_Body td.Web_Disabled, .WebList .WebList_Body td.Web_Disabled{
    color: #8A868A;
}
.WebGrid.Web_Disabled .WebList_Head .WebList_ColCap, .WebList.Web_Disabled .WebList_Head .WebList_ColCap{
    color: #8A868A;
}

/* Header */

.WebList th, .WebGrid th{
    text-align: left;
    border-left: 1px solid #E6E6E6;
    font-weight: bold;
}
.WebList .WebList_HorizScroll th:last-child,
.WebGrid .WebList_HorizScroll th:last-child{
    border-right: 1px solid #E6E6E6;
}

.WebList th:first-child, .WebGrid th:first-child{
    border-left: none;
}

.WebGrid .WebList_Head, .WebList .WebList_Head {
    background: none;
    border-top: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    border-left: 1px solid #E6E6E6;
    
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #313F54;
}

.WebGrid .WebList_Footer,
.WebList .WebList_Footer {
    background: none;
    border-top: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    border-left: 1px solid #E6E6E6;

    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #313F54;
}

.WebList.Web_Enabled .WebList_Footer.WebList_Body .WebList_Row:hover, 
.WebList.Web_Enabled .WebList_Footer.WebList_Body .WebList_Row:focus,
.WebList.Web_Enabled .WebList_Footer.WebList_Body .WebList_Row:hover a, 
.WebList.Web_Enabled .WebList_Footer.WebList_Body .WebList_Row:focus a{
    color: #313F54;
    background-color: #FBFBFB;
}

.WebGrid .WebList_FooterWrp.WebList_BodyWrp, .WebList .WebList_FooterWrp.WebList_BodyWrp {
    border: none;
}

.WebGrid .WebList_Footer.WebList_Body .WebList_Row, .WebList .WebList_Footer.WebList_Body .WebList_Row {
    border: none;
}

.WebGrid .WebList_Head th{
    height: 23px;
}

/*
    Left & Right margin are needed because of the body borders.
*/
.WebGrid .WebList_Head .WebList_HeadWrp, .WebList .WebList_Head .WebList_HeadWrp{
    margin-left: 1px;
    margin-right: 1px;
}

.WebGrid .WebList_Head th > div, .WebList .WebList_Head th > div{
    /* height: 23px; */
}

.WebGrid .WebList_Head, .WebList .WebList_Head{
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
}

.WebGrid .WebList_Head .WebList_ColCap, .WebList .WebList_Head .WebList_ColCap{
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 6px 4px 6px;
    color:#292B2D;
    font-family:helvetica, arial;
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}

/*
    This is the separator that is shown when resizing columns.
*/
.WebGrid .WebList_ColResizer, .WebList .WebList_ColResizer{
    border-left: 1px dotted #AAAAAA;
}

.WebGrid .WebList_Head .WebList_Sorted, 
.WebGrid .WebList_Head .WebList_SortedReverse, 
.WebList .WebList_Head .WebList_Sorted, 
.WebList .WebList_Head .WebList_SortedReverse{
    font-weight: bold;
}


.WebGrid .WebList_Head .WebList_Sorted .WebList_ColCap, 
.WebGrid .WebList_Head .WebList_SortedReverse .WebList_ColCap, 
.WebList .WebList_Head .WebList_Sorted  .WebList_ColCap, 
.WebList .WebList_Head .WebList_SortedReverse  .WebList_ColCap{
    padding-right: 20px;
}

.WebGrid .WebList_Head .WebList_SortedReverse, 
.WebList .WebList_Head .WebList_SortedReverse{
    /* background-position: right -87px; */
}

.WebGrid .WebList_Head .WebList_Sortable, 
.WebList .WebList_Head .WebList_Sortable{
    text-decoration: underline;
}

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

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

.WebList.Web_Enabled .WebList_Body .WebList_Row:hover, 
.WebList.Web_Enabled .WebList_Body .WebList_Row:focus,
.WebList.Web_Enabled .WebList_Body .WebList_Row:hover a, 
.WebList.Web_Enabled .WebList_Body .WebList_Row:focus a{
    background: #313F54;
    color: #fff;
}

.WebGrid.Web_Enabled.WebCon_Focus .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected,
.WebList.Web_Enabled.WebCon_Focus .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected{
    background: #83A8E0;
    color: #fff;
    text-shadow: none;
}

.WebList .WebList_Body .WebList_Row td{
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.WebColLink a{
    color: #7293C3;
}

.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected,
.WebList .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected{
    background: #313F54;
    color: #FFFFFF;
    text-shadow: 1px 1px 0 #000;
}
.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebGrid_EditCell{
    color: #313F54;
}
.WebGrid.Web_Disabled .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected,
.WebList.Web_Disabled .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected{
    background: #CCD1AA;
}


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

.WebGrid_EditCell .WebForm input{
    height: 18px;
    
}

.WebGrid_EditCell .WebControl > div.WebCon_Inner{
    
}


.WebGrid_EditCell .WebControl .WebFrm_Wrapper{
    padding: 1px;
    margin: 1px 3px 1px 3px;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
}
.WebGrid_EditCell .WebControl .WebFrm_Wrapper:hover, .WebGrid_EditCell .WebControl .WebFrm_Wrapper:focus{
    border: 1px solid #83A8E0;
}

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

.WebCheckboxColumn > .WebCon_Inner > div{
    height: 18px;
}

.WebCheckboxColumn > .WebCon_Inner > div > input{
    margin-top: 0px;
    vertical-align: middle;
}
.WebGrid_EditCell .WebCheckboxColumn{
    margin-left: 10px;
}

.WebColLink.Web_Disabled a{
    color: #8A868A;
}

/* - - - - - - WebTabContainer - - - - - - */
.WebTabContainer .WebTbc_Head{
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 0px 0px;
    border-bottom: 1px solid #313F54;
}

.WebTabContainer .WebTbc_Head .WebTab_Btn{
    margin: 0px 2px 0px 0px;
    height: 28px;
}
.WebTabContainer .WebTbc_Head .WebTab_Btn span{
    padding-left: 8px;
    padding-right: 8px;
    background-color: #313F54;
    border: 1px solid #313F54;
    height: 28px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.WebTabContainer .WebTbc_Head .WebTab_Btn span label{
    height: 17px;
    padding-top: 8px;
    vertical-align: bottom;
    color: #FFFFFF;
    text-decoration: none;
}

.WebTabContainer .WebTbc_Head .WebTab_Btn.Web_Enabled:hover span {
    background-color: #83A8E0;
    border: 1px solid #83A8E0;
    border-bottom: 1px solid #313F54;
}

.WebTabContainer .WebTab_Btn.Web_Enabled.WebTab_Focus span{
    background-color: #83A8E0;
    border: 1px solid #83A8E0;
    border-bottom: 1px solid #313F54;
    color: #fff;
}
.WebTabContainer .WebTab_Btn.Web_Enabled.WebTab_Current.WebTab_Focus span,
.WebTabContainer .WebTab_Btn.Web_Enabled.WebTab_Current:hover span {
    border: 1px solid #313F54;
    border-bottom: 1px solid #313F54;
}


.WebTabContainer .WebTbc_Head .WebTab_Current span{
    background-color: #f5f5f5;
    border: 1px solid #313F54;
}

.WebTabContainer .WebTbc_Head .WebTab_Current span label{
    color: #313F54;
}
.WebTabContainer .WebTbc_Head .WebTab_Current.Web_Enabled:hover span label {
    color: #fff;
}

.WebTabContainer .WebTbc_Head .WebTab_Current.Web_Enabled.WebTab_Focus span label{
    color: #fff;
}


.WebTabContainer .WebTbc_Body{
    border: 1px solid #313F54;
    border-top: none;
}

.WebTabContainer .WebTbc_Head .WebTab_Btn.Web_Disabled{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

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

.WebCardContainer > div > div > .WebCC_Caption{
    color: #313F54;
    font-weight: bold;
    left: 13px;
    top: -10px;
    padding: 0px 4px;
}


.WebCardContainer.WebCC_HasBorder .WebCC_Body{
    border: 1px solid #E6E6E6;
    margin: 0 5px 10px;
    padding: 5px;
}

.WebCardContainer.WebCC_HasCaption .WebCC_Body{
    margin-top: 9px;
}


/* - - - - - - WebMenuBar - - - - - - */
.WebMenuBar{
    background-color: #313F54;
    padding: 0;
    margin: 0;
    -webkit-box-shadow: 0 -3px 8px -2px #000 inset;
    box-shadow: 0 -3px 8px -2px #000 inset;
}
.WebMenuBar ul.WebBarRoot {
    margin: 0px 0px 0px 5px;
}
.WebMenuBar ul.WebBarRoot > li{
    margin: 8px 0 0 0px;
}

/*
    Level 0
*/
.WebMenuBar ul.WebBarRoot > li > div{
    
}

.WebMenuBar ul.WebBarRoot > li > div > a{
    color: #FFFFFF;
    padding: 6px 8px 7px 8px;
    display: block;
    text-shadow: 1px 1px 0px #000;
}

/* 'Active' state also defined on WebItm_Expanded which is applied while the submenu is shown */
.WebMenuBar ul.WebBarRoot > li:hover > div, .WebMenuBar ul.WebBarRoot > li.WebItm_Expanded > div{
    
}

.WebMenuBar ul.WebBarRoot > li:hover > div > a, .WebMenuBar ul.WebBarRoot > li.WebItm_Selected > div > a,.WebMenuBar ul.WebBarRoot > li.WebItm_Expanded > div > a{
    color: #83A8E0;
}

.WebMenuBar  ul.WebBarRoot .WebMenuItem.WebItm_HasSub.WebCon_Focus > div a,
.WebMenuBar ul.WebBarRoot > li:hover > div > a,
.WebMenuBar ul.WebBarRoot > li.WebItm_Expanded > div > a{
    background: #FFFFFF;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    color: #000;
    text-shadow: none;
}
.WebMenuBar  ul .WebMenuItem.WebItm_HasSub.WebCon_Focus .WebItm_HasSub div a  {
    background: none;
}

.WebMenuBar ul.WebBarRoot > li:hover > div > a, .WebMenuBar ul.WebBarRoot > li.WebItm_Selected > div > a,.WebMenuBar ul.WebBarRoot > li.WebItm_Expanded > div > a{
    /*     color: #000000; */
}

.WebMenuBar  ul .WebMenuItem.WebItm_HasSub .WebItm_HasSub.WebCon_Focus > div a{
    color: #fff;
}

/*
    Level 1
*/
.WebMenuBar ul li ul{
    min-width: 220px;
    background-color: #FFFFFF;
    /*
        We set the z-index for sub menu's because of the transparency toolbar item issue and to make 
        them display above dialogs.
    */
    -webkit-border-bottom-right-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    -moz-box-shadow: 0 3px 2px #313f54; /* Firefox/Mozilla */
    -webkit-box-shadow: 0 3px 2px #313f54; /*Safari/Chrome */
    box-shadow: 0 3px 2px #313f54; /* Opera & hoe het zou moeten */
}

.df-ie8 ul li ul{
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    margin-left: -1px;
}
.WebMenuBar ul li ul li{
    min-width: 220px;
    border-top: 1px solid transparent;
    padding: 0;
    
}
.WebMenuBar ul .WebItm_HasSub ul li {
    margin: 0;
}

.WebMenuBar ul li ul li.WebItm_BgnGroup {
    border-top: 1px solid #dfdfdf;
}

.WebMenuBar  ul  li  ul li > div{
    padding: 5px 4px;
    border: 1px solid transparent;
}

.WebMenuBar  ul li ul li.WebItm_Selected > div, 
.WebMenuBar  ul li ul li.WebItm_HasSub.WebItm_Expanded > div,
.WebMenuBar  ul li ul li.WebCon_Focus > div,
.WebMenuBar  ul li ul li.WebCon_Focus > div a{
    border: 1px solid #83A8E0;
    background-color: #83A8E0;
    color: #fff;
}
.WebMenuBar .WebItm_Selected > div > a {
    color: #fff;
}

.WebMenuBar ul li ul li.WebItm_HasSub > div {
    /* background: transparent url(dropdown.png) no-repeat right 0px; */
}

.WebMenuBar ul li ul li a{
    margin-left: 9px;
    vertical-align: middle;
    padding: 0;
}

.WebMenuItem{
}

.WebMenuItem > div > span.WebItm_Icon{
    height: 21px;
    width: 21px;
    margin: 0;
}

.WebMenuItem > div > a{
    color: #313F54;
}

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

/*
    Level 2
*/
.WebMenuBar ul li ul li ul{
    margin-top: -22px;
    left: 221px;
}

.df-ie8 .WebMenuBar ul li ul li ul{
    border-top: 1px solid #666666;
}


/* - - - - - - WebToolBar - - - - - - */
.WebCommandBar {
    padding: 0;
    background: #FFFFFF;
}

.WebCommandBar .WebCmd_ToolWrap{
    padding: 12px 20px 0 160px;
}
.WebToolBar.WebTlb_Command{
    margin: 0px 7px 10px;
}
.WebToolBar li{
    padding: 1px;
}

.WebToolBar:focus{
    outline: none;
}

.WebToolBar{
    background: #FFFFFF;
    
    
    height: 23px;
    border-radius: 0px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.WebToolBar .WebCon_Inner{
    margin: 1px;
}

/*
    Google chrome formats toolbar labels to low on middle.
*/
.df-webkit .WebToolBar ul > li > div > a{
    vertical-align: top;
}
.WebToolBar ul > li > div > a{
    display: inline-block;
    margin-left: 0px;
    padding: 2px 6px 0 0;
    text-shadow: 1px 1px 0 #ffffff;
    vertical-align: top;
    font-weight: bold;
    white-space: nowrap;
}

.WebToolBar ul > li > div{
    border: 1px solid transparent;
    height: 20px;
}

/*
    The first item in a new 'group'.
*/
.WebToolBar ul > li.WebItm_BgnGroup{
    /* background: red url('toolbar-separator.png') no-repeat 0px center; */
    padding-left: 2px;
}

/*
    The first item in a new 'group'.
*/
.WebToolBar ul > li.WebItm_BgnGroup:before {
    content: '';
    width: 1px;
    margin-left: -2px;
    margin-top: 0px;
    height: 22px;
    background-color: #D6DBE0;
    position: absolute;
}
.WebToolBar ul > li.WebItm_BgnGroup{
    padding-left: 3px;
}

/* - - - - - - WebContextMenu - - - - - - */

.WebContextMenu .WebControl > .WebCon_Inner{
    min-height: unset;
}

.WebContextMenu .WebMenuList li a {
    padding: 0px;
}

.WebContextMenu .WebMenuList li.WebItm_HasSub:before {
    margin-top: 3px;
}

.WebContextMenu .WebMenuList .WebML_Back:before {
    margin-top: 2px;
    left: -7px;
}

.WebContextMenu .WebMenuList .WebML_Item.WebML_Back a {
    padding: 4px;
    padding-left: 22px;
}

.WebContextMenu .WebItm_CheckBox {
    margin: 0px;
    margin-top: 2px;
}

.WebMenuBar .WebItm_CheckBox {    
    margin: 0px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 28px;
    display: inline-block;
}

.WebMenuBar .WebItm_HasCheckbox a {
    margin: 0px;
    padding: 0px;
    margin-left: 2px;
    margin-top: -6px;
    display: inline-block;
}

.WebMenuItem.WebItm_HasCheckbox > div > span.WebItm_Icon {
    position: absolute;
}

.WebContextMenu .WebML_ShowIcons .WebMenuItem > div > span.WebItm_Icon:before {
    font-size: 18px;
}

.WebContextMenu .WebML_ShowIcons .WebMenuItem a {
    margin-top: 0px;
}

/* - - - - - - WebWindow - - - - - - */
.WebWindow{
    
}

.WebWindow .WebWin_header{
    
}
.WebWindow .WebWin_header_l{
    padding-left: 3px;
    background-color: green;
}

.WebWindow .WebWin_header_r{
    padding-right: 1px;
    background-color: #313F54;
}

.WebWindow .WebWin_header_c{
    background-color: #313F54;
    padding: 10px 9px 6px;
}

.WebWindow .WebWin_title{
    padding-left: 5px;
    color: #FFFFFF;
    text-shadow: 1px 1px 0px #000;
}

.WebWindow .WebWin_controls{
    
}

.WebWindow .WebWin_controls .WebWin_close{
    
}

.WebWindow .WebWin_main_l{
    padding-left: 1px;
    background-color: #313F54;
}

.WebWindow .WebWin_main_r{
    padding-right: 1px;
    background-color: #313F54;
    -moz-box-shadow: 0px 0px 2px #313f54; /* Firefox/Mozilla */
    -webkit-box-shadow: 0px 0px 2px #313f54; /*Safari/Chrome */
    box-shadow: 0px 0px 2px #313f54; /* Opera & hoe het zou moeten */
}

.WebWindow .WebWin_main_c{
    background-color: #F5F5F5;
    padding: 5px 0px 0px 0px;
}
.WebWindow .WebWin_bottom_l{
    height: 1px;
    padding-left: 1px;
    background-color: #313F54;
}

.WebWindow .WebWin_bottom_r{
    height: 1px;
    padding-right: 1px;
    background-color: #313F54;
}

.WebWindow .WebWin_resizer{
    width: 10px;
    height: 10px;
    background-image: url('WebWin-Resize.png');
}

.WebWindow .WebWin_bottom_c{
    height: 1px;
    background-color: #313F54;
}

.WebWindow .WebWin_top_l{
    height: 1px;
    padding-left: 1px;
    background-color: #313F54;
}

.WebWindow .WebWin_top_r{
    height: 1px;
    padding-right: 1px;
    background-color: #313F54;
}
.WebWindow .WebWin_top_c{
    height: 1px;
    background-color: #313F54;
}

.WebWin_ghost{
    filter: alpha(opacity=70);
    opacity: .7;
}

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

.WebDP{
    
}

/*
    Header & Button
*/
.WebDatePicker .WebDP_Head{
    background-color: #313F54;
    color: #FFFFFF;
    padding: 4px 0px 0px 4px;
}

.WebDatePicker .WebDP_BtnPrev, .WebDatePicker .WebDP_BtnNext{
    width: 13px;
    height: 13px;
}

.WebDatePicker .WebDP_BtnMonth, .WebDatePicker .WebDP_BtnYear{
    padding-right: 8px;
}

.WebDatePicker .WebDP_MonthMnu, .WebDatePicker .WebDP_YearMnu{
    background: none repeat scroll 0 0 #ffffff;
    border: none;
    color: #466381;
    left: -11px;
    top: 26px;
    -webkit-box-shadow: 0 1px 3px 1px #3f3f3f;
    box-shadow: 0 1px 3px 1px #3f3f3f;
}

.WebDatePicker .WebDP_YearMnu {
    margin: 0px 0px 0px 0px;
    left: 19px;
}

.WebDP_BtnYear {
    margin: 0px 0px 0px 15px;
}

.WebDatePicker .WebDP_MonthMnu li, .WebDatePicker .WebDP_YearMnu li {
    padding: 1px 4px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.WebDatePicker.Web_Enabled .WebDP_MonthMnu li:hover, .WebDatePicker.Web_Enabled  .WebDP_YearMnu li:hover {
    background-color: #445773;
    border-top: 1px solid #445773;
    border-bottom: 1px solid #445773;
    color: #FFFFFF;
}

.WebDatePicker li.WebDP_Current,
.WebDatePicker.Web_Enabled .WebDP_MonthMnu .WebDP_Current:hover, .WebDatePicker.Web_Enabled .WebDP_YearMnu .WebDP_Current:hover {
    background-color: #83a8e0;
    border-bottom: 1px solid #83a8e0;
    border-top: 1px solid #83a8e0;
    color: #fff;
}

.WebDatePicker .WebDP_MonthMnu li:last-child, .WebDatePicker .WebDP_YearMnu li:last-child {
    border-bottom: none;
}

.WebDatePicker .WebDP_MonthMnu li:first-child, .WebDatePicker .WebDP_YearMnu li:first-child {
    border-top: none;
}


.WebDatePicker .WebDP_Up:before, .WebDatePicker .WebDP_YearMnu .WebDP_Up.WebDP_UpDown:before,
.WebDatePicker .WebDP_Down:before, .WebDatePicker .WebDP_YearMnu .WebDP_Down.WebDP_DownDown:before{
    color: #000;
}
.WebDatePicker.Web_Enabled .WebDP_Up:hover:before, .WebDatePicker.Web_Enabled .WebDP_YearMnu .WebDP_Up.WebDP_UpDown:hover:before,
.WebDatePicker.Web_Enabled .WebDP_Down:hover:before, .WebDatePicker.Web_Enabled .WebDP_YearMnu .WebDP_Down.WebDP_DownDown:hover:before {
    color: #fff;
}

.WebDatePicker .WebDP_Up, .WebDatePicker .WebDP_Down{
    height: 13px;
}

.WebDatePicker .WebDP_YearMnu .WebDP_Up.WebDP_UpDown,
.WebDatePicker .WebDP_YearMnu .WebDP_Down.WebDP_DownDown{
    
}
.WebDatePicker.Web_Enabled .WebDP_YearMnu .WebDP_Up.WebDP_UpDown:hover:before,
.WebDatePicker.Web_Enabled .WebDP_YearMnu .WebDP_Down.WebDP_DownDown:hover:before {
    color: #83A8E0;
}

/*
    Body
*/
.WebDatePicker .WebDP_Body{
    background-color: #313F54;
    color: #FFFFFF;
    padding: 10px 0px 0px 0px;
}

.WebDatePicker .WebDP_Body table{
    background-color: #313F54;
}

.WebDatePicker .WebDP_Body td{
    padding: 6px 1px;
    border-right: 1px solid #313F54;
    border-left: 1px solid #313F54;
    width: 30px;
    text-align: center;
}

.WebDatePicker .WebDP_Body .WebDP_BodyHead {
    
}

.WebDatePicker .WebDP_Body th{
    font-weight: bold;
    letter-spacing: 0px;
    padding:0px 0px 12px 0px;
}

.WebDatePicker .WebDP_Body .WebDP_Day{
    border: 1px solid #313F54;
}
.WebDatePicker.Web_Enabled .WebDP_Body .WebDP_Day:hover,
.WebDatePicker.Web_Enabled .WebDP_Body .WebDP_Day:hover{
    text-decoration: underline;
    background-color: #445773;
    border: 1px solid #445773;
}

.WebDatePicker .WebDP_Body .WebDP_Today{
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #fff;
    color: #313f54;
    text-decoration: underline;
}

.WebDatePicker .WebDP_Body .WebDP_WeekNr{
    color: #B8BCC1;
}

.WebDatePicker .WebDP_Body .WebDP_Weekend{
    
}
.WebDatePicker .WebDP_Body .WebDP_Overflow{
    color: #C2C7CA;
}

.WebDatePicker .WebDP_Body .WebDP_Selected{
    background-color: #83A8E0;
    border: 1px solid #83A8E0;
    color: #fff;
}

.WebDatePicker.WebCon_Focus .WebDP_Body .WebDP_Selected{
    background-color: #83A8E0;
    border: 1px solid #83A8E0;
}

/*
    Next & previous animations.
    
    When changing page the WebDP_Old class is set. Then it adds the WebDP_HidePrev or WebDP_HideNext 
    class so that transformations can be used to animate this process.
*/
.WebDatePicker .WebDP_Body > div{
    width: 100%;
    margin-left: 0%;
}
.WebDatePicker .WebDP_Old{
    position: absolute;
    overflow: hidden;
    
    
    -webkit-transition: width .4s ease-in, margin-left .4s ease-in;
    -moz-transition: width .4s ease-in, margin-left .4s ease-in;
    -o-transition: width .4s ease-in, margin-left .4s ease-in;
    transition: width .4s ease-in, margin-left .4s ease-in;
}
.WebDatePicker .WebDP_HideNext table{
    float: right;
}
.WebDatePicker .WebDP_Body .WebDP_HidePrev{
    margin-left: 100%;
    width: 0%;
    display: block;
}
.WebDatePicker .WebDP_Body .WebDP_HideNext{
    width: 0%;
    display: block;
}

/*
    Footer
*/
.WebDatePicker .WebDP_Footer{
    background-color: #313f54;
    border-top: 1px solid #49576c;
    color: #ffffff;
    padding: 10px;
    text-align: center;
}

.WebDatePicker .WebDP_BtnToday{
    
}
.WebDatePicker.Web_Enabled .WebDP_BtnToday:hover{
    text-decoration: underline;
}

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

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

.WebDateForm .WebFrm_Prompt{
    /* TODO: Add datepicker icon to MS_ActionIcons.png */
    background-position: 0px -250px;
}
.WebDateForm_Picker{
    opacity: 0;
    box-shadow: 0px 1px 2px #666666;
    -webkit-transition: opacity .6s ease, visibility .6s ease;
    -moz-transition: opacity .6s ease, visibility .6s ease;
    -o-transition: opacity .6s ease, visibility .6s ease;
    transition: opacity .6s ease, visibility .6s ease;
    
}
.WebDateForm_Picker.WebDF_WrapVisible{
    opacity: 1;
}


/* - - - - - - WebTreeView - - - - - - - */

.WebTreeView .WebTree_Body > table{
    /* margin: 5px 3px; */
    width: 100%;
}

.WebTreeView .WebTree_Body{
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
}

.WebTreeView .WebTree_Body table, .WebTreeView .WebTree_Body tr, .WebTreeView .WebTree_Body td {
    
}

.WebTreeView .WebTree_Loading{
    background: #FFFFFF url('LoadingBig.gif') no-repeat 10px 10px;
}

.WebTreeView .WebTree_Text{
    margin: 5px 0px 0px 4px;
    display: inline-block;
}
.WebTreeView .WebTree_Icon .WebTree_Text {
    padding: 0px 0 0;
}

.WebTreeView .WebTree_Text:hover {
    text-decoration: underline;
}

.WebTreeView .WebTree_Selected  .WebTree_Text{
    /* font-weight: bold; */
    text-decoration: underline;
    background: transparent;
    color: #83A8E0;
}


.WebTreeView.WebCon_Focus .WebTree_Selected .WebTree_Text{
    background: transparent;
    color: #83A8E0
}

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

.WebTreeView .WebTree_SubRow {

}

.WebTreeView .WebTree_SubRow.WebTree_Expanded {
    
}

.WebTreeView .WebTree_SubRow.WebTree_HiddenSubRow .WebTree_Expanded > td, .WebTreeView .WebTree_SubRow.WebTree_HiddenSubRow .WebTree_Collapsed > td{
    
}

.WebTreeView .WebTree_SubRow.WebTree_HiddenSubRow .WebTree_Item{
    min-height: 22px;
}

/*
    Tree lines & buttons
*/
.WebTreeView .WebTree_Item, .WebTreeView .WebTree_Con{
    /* background-repeat: repeat-y; */
    width: 20px;
    /* background-image: url('WebTreeView-Images.gif'); */
}

.WebTreeView .WebTree_Item{
    min-height: 22px;
    position: relative;
}

.WebTreeView .WebTree_Item div{
    width: 20px;
}
.WebTreeView .WebTree_Item:before{
    position: absolute;
}

.WebTreeView .WebTree_Expanded .WebTree_EntrySub{
    /* background-position: -0px 0px; */
}

.WebTreeView .WebTree_Collapsed  .WebTree_EntrySub{
    /* background-position: -20px 0px; */
}

.WebTreeView .WebTree_Expanded .WebTree_EndSub{
    /* background-position: -40px 0px; */
}

.WebTreeView .WebTree_Collapsed  .WebTree_EndSub{
    /* background-position: -60px 0px; */
}

.WebTreeView  .WebTree_Expanded .WebTree_StartSub{
    /* background-position: -80px 0px; */
}

.WebTreeView  .WebTree_Collapsed .WebTree_StartSub{
    /* background-position: -100px 0px; */
}

.WebTreeView .WebTree_Start{
    /* background-position: -120px 0px; */
}

.WebTreeView .WebTree_Entry{
    /* background-position: -140px 0px; */
}

.WebTreeView .WebTree_End{
    /* background-position: -160px 0px; */
}

.WebTreeView .WebTree_Con{
    /* background-position: -180px 0px; */
}

.WebTreeView  .WebTree_Expanded .WebTree_StartEndSub{
    /* background-position: -200px 0px; */
}

.WebTreeView  .WebTree_Collapsed .WebTree_StartEndSub{
    /* background-position: -220px 0px; */
}

.WebTreeView .WebTree_StartEnd{
    /* background-image: none; */
}

.WebTreeView .WebTree_StartEnd{
    /* background-image: none; */
}

/*
    Icons
*/

.WebTreeView .WebTree_HasIcon{
    background-position: 3px 4px;
}
.WebTreeView .WebTree_Icon, .WebTreeView .WebTree_Folder{
    /*     background-image: url('WebTreeView-Icons.gif');
    background-repeat: no-repeat; */
    /* padding-left: 16px; */
}

.WebTreeView .WebTree_IconLoading{
    background-image: url('LoadingSmall.gif');
    background-repeat: no-repeat;
    padding-left: 16px;
}

.WebTreeView  .WebTree_Collapsed .WebTree_Folder{
    /* background-position: 0px 1px; */
}

.WebTreeView .WebTree_Expanded  .WebTree_Folder{
    /* background-position: 0px -31px; */
}

.WebTreeView .WebTree_Collapsed  .WebTree_Icon{
    /* background-position: 0px -63px; */
}

.WebTreeView .WebTree_Expanded  .WebTree_Icon{
    /* background-position: 0px -63px; */
}


/* - - - - - - - - - WebImage - - - - - - - - - - */
.WebImage .WebImg_Box{
    background-color: #FFFFFF;
    border: 1px solid #000000;
}


/* - - - - - - - - - WebHtmlBox - - - - - - - - - - */
.WebHtmlBox .WebHtml_Box{
    background-color: #FFFFFF;
    border: 1px solid #000000;
    line-height: normal;
}


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

.WebSpacer .WebSpacer_Spacer {
    height: 36px;
}


/* - - - - - - - - - ShowMessageBox - - - - - - - - - */
.WebMsgBoxConfirm .WebLabel_content, .WebMsgBoxError .WebLabel_content, .WebMsgBoxInfo .WebLabel_content, .WebMsgBoxWarning .WebLabel_content{
    margin-left: 70px;
    min-height: 70px;
}

.WebMsgBoxProgress .WebLabel_content{
    margin-left: 60px;
    min-height: 40px;
    padding-top: 20px;
}

.WebErrorDetails .WebHtml_Wrp{ /* Details box used with HTTP errors received from the server */
    border: 1px solid black;
    background-color: #FFFFFF;
}


/* - - - - - - - - - WebInfoBalloon - - - - - - - - - - */
.WebInfoBalloon{
    background-color: #C80606;
    border: 1px solid #C80606;
    padding: 10px;
    line-height: 1.3em;
    /*     color: #fff; */
    font-weight: normal;
    border-radius: 3px;
    -webkit-box-shadow: 1px 3px 4px -1px  rgba(0, 0, 0, 0.71);
    -moz-box-shadow:    1px 3px 4px -1px  rgba(0, 0, 0, 0.71);
    box-shadow:         1px 3px 4px -1px  rgba(0, 0, 0, 0.71);
    
    margin-top: 12px;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    opacity: 1;
    visibility: visible;
}
.WebInfoBalloon.WebInfoBalloonHidden{
    opacity: 0;
    visibility: hidden;
}
.WebInfoBalloon.WebInfoBalloonVisible{
    transition-delay: 0s;
}


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

.WebInfoBalloon:before{
    border-color: #C80606 transparent;
    border-style: solid;
    border-width: 0 12px 11px;
    top: -11px;
}

.WebInfoBalloon_Top:before{
    border-width: 11px 12px 0px;
    top: auto;
    bottom: -11px;
}


.WebInfoBalloon:after{
    border-color: #C80606 transparent;
    border-style: solid;
    border-width: 0 10px 10px;
    top: -10px;
    margin-left: 2px;
}

.WebInfoBalloon_Top:after{
    border-width: 10px 10px 0 10px;
    top: auto;
    bottom: -10px;
}

/* - - - - - - - - - WebErrorTooltip - - - - - - - - - */
.WebErrorTooltip{
    color: #fff;
}


/* - - - - - - - - - WebIFrame - - - - - - - - - */
.WebIFrame .WebIFrm_Box{
    border: 1px solid #000000; 
}


/* - - - - - - - - - WebSlider - - - - - - - - - - */
.WebSlider .WebSlider_Wrapper{
    outline: none;
    overflow: visible;
}

/* Bar */
.WebSlider .WebSlider_Horizontal .WebSlider_BarWrapper{
    height: 21px;
}

.WebSlider .WebSlider_Bar{
    background-color: #C8C8C8;
    border: 1px solid #C8C8C8;
    border-radius: 1px;
}
.WebSlider.Web_Disabled .WebSlider_Bar{
    background-color: #DEDBDB;
    border: 1px solid #B8BFC1;
    
}
.WebSlider .WebSlider_Horizontal .WebSlider_Bar{
    height: 4px;
    padding: 0px 10px 0px 10px;
    margin-top: 5px;
    /* http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html */
}
.WebSlider .WebSlider_Vertical .WebSlider_Bar{
    padding: 10px 0px 10px;  
    margin-left: 5px;
    width: 4px;
    
    /* http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html */
}

.WebSlider.Web_Disabled .WebSlider_ShowRange, .WebSlider .WebSlider_ShowRange:before{
    background: #A0A0A0;
}

.WebSlider.Web_Disabled  .WebSlider_Horizontal .WebSlider_ShowRange{
    border-top: 1px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
}

.WebSlider.Web_Disabled .WebSlider_Vertical .WebSlider_ShowRange{
    border-left: 1px solid #A0A0A0;
    border-right: 1px solid #A0A0A0;
}

.WebSlider.Web_Disabled .WebSlider_ShowRange, .WebSlider.Web_Disabled .WebSlider_ShowRange:before{
    background: #A0A0A0;
}
.WebSlider .WebSlider_ShowRange, .WebSlider .WebSlider_ShowRange:before{
    background: #83A8E0;
}

.WebSlider  .WebSlider_Horizontal .WebSlider_ShowRange{
    margin-top: -1px;
    height: 2px;
    border-top: 1px solid #83A8E0;
    border-bottom: 1px solid #83A8E0;
}
.WebSlider  .WebSlider_Vertical .WebSlider_ShowRange{
    margin-left: -1px;
    width: 2px;
    border-left: 1px solid #83A8E0;
    border-right: 1px solid #83A8E0;
}

.WebSlider.Web_Disabled .WebSlider_Horizontal.WebSlider_NoRange .WebSlider_ShowRange:before{
    border-left: 1px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    border-top: 1px solid #A0A0A0;
}
.WebSlider.Web_Disabled .WebSlider_Vertical.WebSlider_NoRange .WebSlider_ShowRange:before{
    border-left: 1px solid #A0A0A0;
    border-right: 1px solid #A0A0A0;
    border-top: 1px solid #A0A0A0;
}

.WebSlider .WebSlider_Horizontal.WebSlider_NoRange .WebSlider_ShowRange:before{
    content: '';
    position: absolute;
    margin-left: -11px;
    top: -1px;
    height: 2px;
    width: 10px;
    
    border-left: 1px solid #83A8E0;
    border-bottom: 1px solid #83A8E0;
    border-top: 1px solid #83A8E0;
    border-radius: 1px 0px 0px 1px;
    left: 0px;
}
.WebSlider .WebSlider_Vertical.WebSlider_NoRange .WebSlider_ShowRange:before{
    content: '';
    position: absolute;
    margin-top: -11px;
    left: -1px;
    height: 10px;
    width: 2px;
    border-left: 1px solid #83a8e0;
    border-right: 1px solid #83a8e0;
    border-top: 1px solid #83a8e0;
    border-radius: 1px 1px 0px 0px;
}


/* Slider */
.WebSlider .WebSlider_Horizontal .WebSlider_SliderWrapper{
    margin: -3px 0 0;
    height: 24px;
    overflow: visible;
}
.WebSlider .WebSlider_Vertical .WebSlider_SliderWrapper{
    margin: 0;
    /* width: 26px; */
    overflow: visible;
}

.WebSlider .WebSlider_Horizontal .WebSlider_Slider:before,
.WebSlider .WebSlider_Vertical .WebSlider_Slider:before {
    font-size: 22px;
    color: #313F54;
    text-shadow: 1px 1px 0 #fff;
}
.WebSlider .WebSlider_Horizontal .WebSlider_Slider:before{
    margin: -5px 0 0 -3px;
}
.WebSlider .WebSlider_Vertical .WebSlider_Slider:before {
    margin: -1px 0 0 -4px;
}

.WebSlider .WebSlider_Vertical .WebSlider_Slider:hover:before,
.WebSlider.Web_Enabled.WebCon_Focus .WebSlider_Vertical .WebSlider_Slider:before,
.WebSlider.Web_Enabled.WebCon_Focus .WebSlider_Horizontal .WebSlider_Slider:before, 
.WebSlider.Web_Enabled .WebSlider_Horizontal .WebSlider_Slider:hover:before{
    color: #83A8E0;
}
.WebSlider .WebSlider_Vertical .WebSlider_Slider:active:before,
.WebSlider.Web_Enabled .WebSlider_Horizontal .WebSlider_Slider:active:before{
    color: red;
}

.WebSlider .WebSlider_Vertical .WebSlider_Slider,
.WebSlider .WebSlider_Horizontal .WebSlider_Slider {
    height: 14px;
    width: 14px;
    background: #fff;
}

.WebSlider.WebCon_Focus .WebSlider_Horizontal .WebSlider_Slider, .WebSlider.Web_Enabled .WebSlider_Horizontal .WebSlider_Slider:hover{
    background-position: -17px -17px;
}
.WebSlider.WebCon_Focus .WebSlider_Vertical .WebSlider_Slider, .WebSlider.Web_Enabled .WebSlider_Vertical .WebSlider_Slider:hover{
    background-position: 0px -17px;
}


.WebSlider.Web_Disabled  .WebSlider_Horizontal .WebSlider_Slider{
    background-position: -17px -34px;
}
.WebSlider.Web_Disabled .WebSlider_Vertical .WebSlider_Slider{
    background-position: 0px -34px;
}

.WebSlider.Web_Disabled .WebSlider_Horizontal.WebSlider_Range .WebSlider_Slider,
.WebSlider.Web_Disabled .WebSlider_Vertical.WebSlider_Range .WebSlider_Slider{
    background-position: -51px -34px;
}

.WebSlider.Web_Disabled .WebSlider_Horizontal.WebSlider_Range .WebSlider_Slider.WebSlider_SliderRanged,
.WebSlider.Web_Disabled .WebSlider_Vertical.WebSlider_Range .WebSlider_Slider.WebSlider_SliderRanged{
    background-position: -34px -34px;
}


/* Labels */
.WebSlider .WebSlider_Horizontal .WebSlider_Labels{
    left: 2px;
    top: -21px;
}
.WebSlider .WebSlider_Vertical .WebSlider_Labels{
    left: -7px;
    top: 2px;
}

.WebSlider .WebSlider_Horizontal .WebSlider_LabelMarkerWrapper{
    height: 7px;
}
.WebSlider .WebSlider_Horizontal .WebSlider_LabelWrapper{
    height: 23px;
}

.WebSlider .WebSlider_Horizontal .WebSlider_LabelMarker{
    border-left: 1px solid #fff;
    height: 4px;
}

.WebSlider .WebSlider_Vertical .WebSlider_LabelMarker{
    border-top: 1px solid #fff;
    width: 4px;
    left: 3px;
}
.WebSlider.Web_Disabled .WebSlider_Horizontal .WebSlider_LabelMarker{
    border-left: 1px solid #C9C8C8;
}
.WebSlider.Web_Disabled .WebSlider_Vertical .WebSlider_LabelMarker{
    border-top: 1px solid #C9C8C8;
}


.WebSlider .WebSlider_Horizontal .WebSlider_LabelText{
    margin-top: 8px;
}
.WebSlider .WebSlider_Vertical .WebSlider_LabelText{
    margin-left: 2px;
    padding-left: 9px;
}
.WebSlider.Web_Disabled .WebSlider_LabelText{
    color: #A7A7A7;
}

.WebSlider.Web_Disabled .WebSlider_Vertical .WebSlider_LabelText:before{
    border-bottom: 1px solid #A7A7A7;
}
.WebSlider .WebSlider_Vertical .WebSlider_LabelText:before{
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 0px;
    width: 7px;
    height: 1px;
    border-bottom: 1px solid #004859;
}


/* - - - - - - - - - WebHorizontalLine - - - - - - - - - - */
.WebHorizontalLine > div.WebCon_Inner > div{
    padding: 13px 0px 0px;
}

.WebHorizontalLine hr {
    border-top: 1px solid #D6DBE0;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    margin: 0px;
}


/* - - - - - - WebGroup - - - - - - */
.WebGroup.WebGrp_HasBorder > .WebCon_Inner > div > .WebContainer{
    margin: 10px 3px 3px 3px;
    border: 1px solid #E6E6E6;
    -webkit-box-shadow:inset 0 0 1px 1px #fff;
    box-shadow:inset 0 0 1px 1px #fff;
}
.WebGroup.WebGrp_HasBorder > div.WebCon_Inner > div > div.WebContainer > div.WebCon_Sizer > .WebCon_Content {
    padding: 5px;
}

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

.WebGroup.WebGrp_HasCaption .WebGrp_Caption{
    color: #313F54;
    font-weight: bold;
    padding: 0px 4px 0;
    top: -9px;
    left: 12px;
}
.WebGroup > div > div > .WebGrp_ExpandBtn{
    top: -10px;
    right: 18px;
    width: 14px;
    height: 14px;
    background-color: inherit;
    border: 1px solid #E6E6E6   ;
    border-radius: 50%;
}
.WebGroup.Web_Enabled > div > div > .WebGrp_ExpandBtn:hover{
    color: #83A8E0;
}
.WebGroup.Web_Disabled > div > div > .WebGrp_ExpandBtn:before{
    opacity: 0.5;
}


.WebGroup.WebGrp_Expanded > div > div > .WebGrp_ExpandBtn:before{
    content: '-';
    position: absolute;
    top: -3px;
    left: 3px;
    font-size: 23px;
    line-height: 16px;
}
.WebGroup.WebGrp_Collapsed > div > div > .WebGrp_ExpandBtn:before{
    content: '+';
    position: absolute;
    top: 0px;
    left: 3px;
    font-size: 15px;
    line-height: 16px;
    font-weight: bold;
}


/* - - - - - - Login Dialog Warning - - - - - - */
.Warning {
    font-style:italic;
    font-size: 11px;
}

/* - - - - - - - - - WebProgressBar - - - - - - - - - - */
.WebProgressBar .WebPB_Wrp {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E3E9EF;
    border-radius: 0;
    height: 26px;
    padding: 0;
}

.WebProgressBar .WebPB_Progress, .WebFileFrm .WebFile_ProgressBar {
    background-color: #83A8E0;
    -webkit-box-shadow:inset 0 0 0px 1px #83A8E0;
    box-shadow:inset 0 0 0px 1px #83A8E0;
}
.WebProgressBar .WebPB_Percentage{
    padding: 5px 0 0;
}

.WebFileFrm .WebFile_ProgressLabel {
    padding: 0;
}

/* - - - - - - - - - WebDropZone - - - - - - - - - - */
.WebDropZone {
    border: 1px dashed #7F7F7F;
    color: #7F7F7F;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
}

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

.WebSuggestions{
    border: 1px solid #BEBEBE;
    background-color: #FFFFFF;
    border-radius: 0px;
    
    padding: 0px;
    margin: 2px 0 0;
    -webkit-box-shadow:none;
    box-shadow: 0 0px 11px -5px rgba(0, 0, 0, 0.71);
}

.WebSuggestions .WebSug_Suggestion{
    line-height: 20px;
}
.WebSuggestions .WebSug_Suggestion:hover,
.WebSuggestions .WebSug_Suggestion:focus{
    background: #313F54;
    color: #FFFFFF;
}
.WebSuggestions .WebSug_Suggestion td{
    padding: 3px 5px;
}
.WebSuggestions .WebSug_Suggestion b{
    font-weight: bold;
}

.WebSuggestions .WebSug_Selected,
.WebSuggestions .WebSug_Selected:hover,
.WebSuggestions .WebSug_Selected:focus{
    background-color: #83A8E0;
    color: #000000;
}

.WebSuggestions.WebSug_Loading{
    min-height: 22px;
    
}
.WebSuggestions.WebSug_Loading:after{
    content: '';
    height: 20px;
    width: 20px;
    top: 1px;
    right: 1px;
    
    display: block;
    position: absolute;
    background: #FFFFFF url('LoadingSmall.gif') no-repeat right 2px;
    border-radius: 10px;
}

/* - - - - - - WebFileUploadForm - - - - - - */
.WebFileFrm .WebFrm_Wrapper {
    padding: 5px 3px;
}

.WebFileFrm .WebFrm_Wrapper {
    padding: 0px;
}

.WebFileFrm div.WebFile_Content{
    margin-right: 26px;
    height: 26px;
}
.WebFileFrm div.WebFile_Details{
    padding: 7px 1px 0px 7px;
}
.WebFileFrm.Web_Disabled div.WebFile_Content{
    color: #8A868A;
}
.WebFileFrm .WebFile_Progress{
    height: 26px;
}
.WebFileFrm .WebFile_ProgressLabel{
    padding: 5px 1px 1px 1px;
}

.WebFileFrm .WebFile_Working{
    width: 100%;
    height: 100%;
    background: transparent url('LoadingSmall.gif') no-repeat 2px center;
}

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

.WebMenuList.WebControl > .WebCon_Inner{
    border: 1px solid #D9D9D9;
    background: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.WebMenuList .WebML_Title{
    
}

.WebMenuList .WebML_Caption{
    font-weight: bold;
    padding: 10px 3px 5px;
    text-align: center;
    
}

.WebMenuList li{
    /* height: 42px; */
    border: 1px solid transparent;
}
.WebMenuList li.Web_Enabled:hover, .WebMenuList li.Web_Enabled:focus, .WebMenuList li.Web_Enabled:active, .WebMenuList li.WebML_Item.WebML_Back:hover{
    /*border: 1px solid #ADB967;*/
	color: #fff;
    background-color: #83a8e0;
    -webkit-box-shadow:inset 0 1px 0 0 #fff;
    box-shadow:inset 0 1px 0 0 #fff;
}

.WebMenuList li:first-child{
}

.WebMenuList li.WebMenuItem > div{

}
.WebMenuList li.WebML_Item.Web_Enabled:hover a,
.WebMenuList li.WebML_Item.WebML_Back:hover a{
    color: #181818;
}

.WebMenuList .WebML_Back:before{
    content: '<';
    margin: 8px 16px 0px;
    font-size: 18px;
    position: absolute;
}

.WebMenuList .WebItm_HasSub:before {
    display: block;
    float: right;
    content: '>';
    margin: 9px 7px 0px;
    font-size: 17px;
}
.WebMenuList li a{
    margin-left: 5px;
    margin-top: 1px;
    padding: 10px;
    color: #181818;
}
.WebMenuList li.Web_Disabled a{
    color: #BABABA;
}
.WebMenuList li.WebML_Back{

}
.WebMenuList .WebML_Item.WebML_Back a{
    padding: 10px 5px;
    padding-left: 30px;
    font-weight: 600;
}

.WebMenuList .WebML_Divider{
    background-color: unset;
    height: auto;
    color: rgba(49,63,84, 0.7);
    font-size: 70%;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(49,63,84, 0.5);

    /* Menu specific */
    padding: 4px;
}

.WebContextMenu .WebMenuList .WebML_Divider {
    padding: 0px;
    padding-left: 4px;
}

.WebMenuList .WebML_Mnu{
    overflow: auto;
}
.WebMenuList.Web_Enabled .WebML_Mnu{
    -webkit-transition: all 0.25s ease-out; /* For Safari 3.1 to 6.0 */
    transition: all 0.25s ease-out;
}
.WebMenuList .WebMenuItem > div > span.WebItm_Icon {
    padding: 7px 0px 0px 5px;
}

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

.WebMenu_Mask{
    background-color: rgba(0, 0, 0, 0.8);
}

.WebFlPnl.Web_Enabled{
    transition: visibility 0s linear 0.3s, opacity 0.3s ease-in-out;
}
.WebFlPnl.WebFP_Visible{
    transition-delay:0s;
}
.WebFlPnl.WithArrow.WebFP_ArrowTop, .WebFlPnl.WebMenuButton_Arrow.WebFP_ArrowTop{
    padding-top: 15px;
    margin-top: -6px;
}
.WebFlPnl.WithArrow.WebFP_ArrowTop .WebFP_Arrow, .WebFlPnl.WebMenuButton_Arrow.WebFP_ArrowTop .WebFP_Arrow{
    display: block;
    position: absolute;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 15px solid #D9D9D9;
    margin-left: -12px;
    top: 0px;
}
.WebFlPnl.WithArrow.WebFP_ArrowTop .WebFP_Arrow:after, .WebFlPnl.WebMenuButton_Arrow.WebFP_ArrowTop .WebFP_Arrow:after{
    content: '';
    display: block;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 15px solid #FFFFFF;
    margin-top: 0px;
    position: absolute;
    margin-left: -12px;
    top: 1px;
}
.WebFlPnl.WithArrow.WebFP_ArrowBottom, .WebFlPnl.WebMenuButton_Arrow.WebFP_ArrowBottom{
    padding-bottom: 15px;
    margin-bottom: -6px;
}
.WebFlPnl.WithArrow.WebFP_ArrowBottom .WebFP_Arrow, .WebFlPnl.WebMenuButton_Arrow.WebFP_ArrowBottom .WebFP_Arrow{
    display: block;
    position: absolute;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #D9D9D9;
    margin-left: -12px;
    bottom: 0px;
}
.WebFlPnl.WithArrow.WebFP_ArrowBottom .WebFP_Arrow:after, .WebFlPnl.WebMenuButton_Arrow.WebFP_ArrowBottom .WebFP_Arrow:after{
    content: '';
    display: block;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #FFFFFF;
    margin-top: 0px;
    position: absolute;
    margin-left: -12px;
    bottom: 1px;
}
.WebFlPnl > .WebContainer{
    background-color: #FFFFFF;
}
.WebFlPnl.NoWitespace > .WebContainer > .WebCon_Sizer > .WebCon_Content{
    padding: 0px 0px 0px 0px;
}
.WebFlPnl.Shadow > .WebContainer{
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
}


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

.WebFlPnl.WebMBPanel{
    margin-top: -33px;
}

.WebMenuAnchor{
    height: 40px;
}

.WebMenuAnchor .WebCon_Inner > div{
    text-align: center;
}
.WebMenuAnchor a{
    text-decoration: none;
}
.WebMenuButton_Below.WebFlPnl{
    margin-top: 0px;
}

/* - - - - - - WebColorPicker - - - - - - */

.WebColorPicker .WebCP_Main{
    border: 1px solid #ffffff;
    background-color: #E6E6E6;
}

.WebColorPicker.Web_Enabled.WebCon_Focus .WebCP_Main{
    border: 1px solid #D9D9D9;
}

.WebColorPicker .WebCP_Picker{
    position: absolute;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.WebColorPicker .WebCP_Pointer{
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid RGBA(255, 255, 255, 1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.9);
}
.WebColorPicker .WebCP_Slide:before{
    position: absolute;
    content: '';
    height: 4px;
    width: 20px;
    border-radius: 2px;
}
.WebColorPicker .WebCP_Slide{
    height: 8px;
    width: 22px;
    border: 2px solid RGBA(255, 255, 255, 0.7);
    border-radius: 2px;
    margin-left: -3px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);

}
.WebColorPicker .WebCP_ColorBar{
    height: 50px;
    line-height: 50px;
}

.WebColorPicker .WebCP_ShowColorBar .WebCP_Picker{
    bottom: 52px;
    
}
.WebColorPicker .WebCP_Picker{
    margin: 8px 8px 8px 8px;
}
.WebColorPicker .WebCP_ShowPalette .WebCP_Picker{
    margin: 0px 8px 8px 8px;
}
.WebColorPicker .WebCP_ColorPalette{
    background-color: transparent;
    padding: 0px 8px;
}
.WebColorPicker .WebCP_Palette{
    border-spacing: 8px 8px;
    
    border-collapse: separate;
}
.WebColorPicker .WebCP_PalColor{
    height: 24px;
    border-radius: 2px;
}

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

.WebColorForm .WebCF_Box{
    
}
.WebColorForm .WebCF_ShowBox .WebCF_Box{
    width: 59px;
    height: 28px;
    margin-top: -4px;
    margin-left: -4px;
    border-right: 1px solid rgba(151,151,151, 0.4);
}
.WebColorForm .WebCF_ShowBox .WebFrm_PromptSpacer{
    margin-left: 62px;
}

.WebColorPicker.WebColorPicker_Form .WebCP_Main{
    border: 1px solid #E6E6E6;
}
.WebColorPicker.WebColorPicker_Form .WebCon_Inner{
    margin: 0px 0px;
}

/* - - - - - - - - - WebAccordionContainer - - - - - - - - */

.WebAccordion > .WebCon_Inner{
    border: solid #D9D9D9;
    border-width: 0px 1px 1px 1px;
}

.WebAccordion .WebAcCard{
    overflow: hidden;
    height: 0px;
}
.WebAccordion.WebAc_Rendered .WebAcCard{
    transition: height 0.7s, visibility 0s linear 0.8s;
    visibility: hidden;
}

.WebAccordion .WebTab_Btn{
	padding: 10px 10px 10px 14px;
    background-color: #F3F3F3;
    border-top: 0.5px solid #D9D9D9;
    color: #5C5C5C;
    outline: none;
}
.WebAccordion .WebTab_Btn.Web_Enabled.WebTab_Current{
    border-left: 2px solid transparent;
    color: #fff;
	background-color: #313F54;
}
.WebAccordion .WebTab_Btn.Web_Enabled:hover,
.WebAccordion .WebTab_Btn.Web_Enabled.WebTab_Focus{
    background-color: #83A8E0;
    color: #ffffff;
}

.WebAccordion .WebTab_Btn.Web_Disabled{
    color: #BABABA;
}

.WebAccordion.Web_Enabled .WebAcCard.WebAcCard_Visible{
    transition-delay: 0s;
}


/* --------------------------------- */
/* Styles for font icons             */
/* --------------------------------- */
@font-face {
    font-family: "dataflex-basic-v2";
    src:url("fonts/dataflex-basic-v2.eot");
    src:url("fonts/dataflex-basic-v2.eot?#iefix") format("embedded-opentype"),
    url("fonts/dataflex-basic-v2.woff") format("woff"),
    url("fonts/dataflex-basic-v2.ttf") format("truetype"),
    url("fonts/dataflex-basic-v2.svg#dataflex-basic-v2") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* GENERAL FONT ICON DECLARATION */
span.WebItm_Icon:before,
.WebMenuBar ul li ul li.WebItm_HasSub > div:before,
.WebForm .WebFrm_Prompt:before,
.WebFileFrm div.WebFile_Btn:before,
.WebWindow .WebWin_controls .WebWin_close:before,
.WebDatePicker .WebDP_BtnPrev:before,
.WebDatePicker .WebDP_BtnNext:before,
.WebDatePicker .WebDP_BtnMonth:after,
.WebDatePicker .WebDP_BtnYear:after,
.WebMsgBoxConfirm .WebLabel_content:before,
.WebMsgBoxInfo .WebMsgBox_Text .WebLabel_content:before,
.WebMsgBoxWarning .WebMsgBox_Text .WebLabel_content:before,
.WebMsgBoxError .WebMsgBox_Text .WebLabel_content:before,
.WebDatePicker .WebDP_Up:before, .WebDatePicker .WebDP_YearMnu .WebDP_Up.WebDP_UpDown:before,
.WebDatePicker .WebDP_Down:before, .WebDatePicker .WebDP_YearMnu .WebDP_Down.WebDP_DownDown:before,
.WebSlider  .WebSlider_Slider:before,
.WebGrid .WebList_Head .WebList_Sorted:before, 
.WebGrid .WebList_Head .WebList_SortedReverse:before, 
.WebList .WebList_Head .WebList_Sorted:before, 
.WebList .WebList_Head .WebList_SortedReverse:before,
.WebPanel > .WebPanel_DividerVertical:before,
.WebPanel > .WebPanel_DividerHorizontal:before,
.WebTreeView .WebTree_StartSub:before,
.WebTreeView .WebTree_EntrySub:before,
.WebTreeView .WebTree_StartEndSub:before,
.WebTreeView .WebTree_EndSub:before,
.WebTreeView .WebTree_NoIcon.WebTree_Icon:before,
.WebTreeView .WebTree_NoIcon.WebTree_Folder:before {
    font-family: "dataflex-basic-v2" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;  
    display: inline-block;
}

/* WebCommandBar FONT ICON STYLES - NORMAL STATE */
.WebMenuItem > div > span.WebItm_Icon:before{
    /* Toolbar Items */
    position: absolute;
    font-size: 20px;
}
.WebToolBar span.WebItm_Icon {
    color: #313F54;
}
.WebToolBar .WebClearMenuItem span.WebItm_Icon, 
.WebToolBar .WebClearAllMenuItem span.WebItm_Icon, 
.WebToolBar .WebSaveMenuItem span.WebItm_Icon, 
.WebToolBar .WebDeleteMenuItem span.WebItm_Icon{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/* WebCommandBar + WebFrm_Prompt FONT ICON STYLES - HOVER STATE */
.WebToolBar span.WebItm_Icon:hover:before,
.WebToolBar span.WebItm_Icon:focus:before,
.WebToolBar .WebMenuItem:hover a,
.WebToolBar .WebMenuItem:hover span{
    color: #83A8E0;
}

/* INDIVIDUAL ICONS */

.WebIcon_Clear:before,
.WebIcon_Clear button:before,
button.WebIcon_Clear:before,
.WebIcon_Clear > div > span.WebItm_Icon:before,
.WebClearMenuItem > div > span.WebItm_Icon:before {
    content: "&";
    font-size: 21px;
    margin: 0px 0 0 1px;
}

.WebIcon_ClearAll:before,
.WebIcon_ClearAll button:before,
button.WebIcon_ClearAll:before,
.WebIcon_ClearAll > div > span.WebItm_Icon:before,
.WebClearAllMenuItem > div > span.WebItm_Icon:before {
    content: "*"; 
    font-size: 21px;
    margin: 0px 0 0 1px;
}

.WebIcon_Prompt:before,
.WebIcon_Prompt button:before,
button.WebIcon_Prompt:before,
.WebIcon_Prompt > div > span.WebItm_Icon:before,
.WebPromptMenuItem > div > span.WebItm_Icon:before {
    content: "A"; 
    font-size: 20px;
    margin: 0px 0 0 0px;
}

.WebIcon_Find:before,
.WebIcon_Find button:before,
button.WebIcon_Find:before,
.WebIcon_Find > div > span.WebItm_Icon:before,
.WebFindMenuItem > div > span.WebItm_Icon:before {
    content: "r"; 
    font-size: 20px;
    margin: 0px 0 0px 0px;
}

.WebIcon_Next:before,
.WebIcon_Next button:before,
button.WebIcon_Next:before,
.WebIcon_Next > div > span.WebItm_Icon:before,
.WebNextMenuItem > div > span.WebItm_Icon:before {
    content: "q"; 
    font-size: 17px;
    margin: 2px 0 0 1px;
}

.WebIcon_Previous:before,
.WebIcon_Previous button:before,
button.WebIcon_Previous:before,
.WebIcon_Previous > div > span.WebItm_Icon:before,
.WebPreviousMenuItem > div > span.WebItm_Icon:before {
    content: "p"; 
    font-size: 17px;
    margin: 2px 3px 0 0px;
}

.WebIcon_Last:before,
.WebIcon_Last button:before,
button.WebIcon_Last:before,
.WebIcon_Last > div > span.WebItm_Icon:before,
.WebLastMenuItem > div > span.WebItm_Icon:before {
    content: "o"; 
    font-size: 17px;
    margin: 2px 0px 0 1px;
}

.WebIcon_First:before,
.WebIcon_First button:before,
button.WebIcon_First:before,
.WebIcon_First > div > span.WebItm_Icon:before,
.WebFirstMenuItem > div > span.WebItm_Icon:before {
    content: "n";
    font-size: 17px;
    margin: 2px 2px 0 0px;
}

.WebIcon_Save:before,
.WebIcon_Save button:before,
button.WebIcon_Save:before,
.WebIcon_Save > div > span.WebItm_Icon:before,
.WebSaveMenuItem > div > span.WebItm_Icon:before {
    content: "8"; 
    font-size: 20px;
    margin: 1px 0 0 0px;
}

.WebIcon_Delete:before,
.WebIcon_Delete button:before,
button.WebIcon_Delete:before,
.WebIcon_Delete > div > span.WebItm_Icon:before,
.WebDeleteMenuItem > div > span.WebItm_Icon:before {
    content: "4"; 
    font-size: 21px;
    margin: 0px 0 0 0px;
}

.WebLoginMenuItem > div > span.WebItm_Icon:before {
    content: "7"; 
    font-size: 16px;
    margin: 1px 0 0 1px;
}
.WebLogoutMenuItem > div > span.WebItm_Icon:before {
    content: "6"; 
    font-size: 16px;
    margin: 2px 0 0 1px;
}

/* MENU HAS SUB ARROW */
.WebMenuBar ul li ul li.WebItm_HasSub > div:before {
    content: "g";
    float: right;
    font-size: 27px;
    margin: -2px 0px 0px 0px;
}
/* PROMPT BUTTON */ 
.WebForm .WebFrm_Prompt:before{
    content: "A";
    font-size: 18px;
    padding: 2px 0px 0px 0px;
}
/* FILE UPLOAD */ 
.WebFileFrm div.WebFile_Btn:before {
    content: "Z";
    font-size: 21px;
    margin: 0px 0 0 -1px;
    position: absolute;
}
/* CALENDAR ICON */
.WebDateForm .WebFrm_Prompt:before{
    content: "2";
    font-size: 22px;
    padding: 0;
}

/* MODAL DIALOG CLOSE BUTTON */
.WebWindow .WebWin_controls .WebWin_close {
    background: none;
    height: 24px;
    width: 24px;
    margin: -5px 0 0 -20px;
    position: absolute;
    color: #fff;
}
.WebWindow .WebWin_controls .WebWin_close:hover:before{
    color: #83A8E0;
}
.WebWindow .WebWin_controls .WebWin_close:before{
    content: "y"; 
    font-size: 16px;
    padding: 5px 0 0 4px;
    color: #FFFFFF;
    text-shadow: 1px 1px 0px #000;
}

/* DATEPICKER ICONS */
.WebDatePicker .WebDP_BtnPrev {
    margin: 0 12px 0 0;
}

.WebDatePicker .WebDP_BtnPrev:before,
.WebDatePicker .WebDP_BtnNext:before,
.WebDatePicker .WebDP_BtnMonth:after,
.WebDatePicker .WebDP_BtnYear:after  {
    color: #ffffff;
    font-size: 17px;
    height: 20px;
    padding: 4px 0px 2px 1px;
    width: 20px;
    text-shadow: 1px 1px 0 #000;
}

.WebDatePicker .WebDP_BtnPrev:before {
    content: "l";
}
.WebDatePicker .WebDP_BtnNext:before {
    content: "k";
}
.WebDatePicker .WebDP_BtnMonth{
    margin: 0;
}
.WebDatePicker .WebDP_BtnYear {
    margin: 0;
}
.WebDatePicker .WebDP_BtnMonth:after,
.WebDatePicker .WebDP_BtnYear:after  {
    content: "i";
}

.WebDatePicker.Web_Enabled .WebDP_BtnPrev:hover:before, .WebDatePicker.Web_Enabled .WebDP_BtnPrev:focus:before,
.WebDatePicker.Web_Enabled .WebDP_BtnNext:hover:before, .WebDatePicker.Web_Enabled .WebDP_BtnNext:focus:before,
.WebDatePicker.Web_Enabled .WebDP_BtnMonth:hover:after, .WebDatePicker.Web_Enabled .WebDP_BtnMonth:focus:after,
.WebDatePicker.Web_Enabled .WebDP_BtnYear:hover:after, .WebDatePicker.Web_Enabled .WebDP_BtnYear:focus:after{
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;    
    /* border: 1px solid #83A8E0; */
    color: #83A8E0;
    text-shadow: 1px 1px 0 #000;
}

.WebDP_BtnMonth span {
    display: inline-block;
    margin: 3px 3px 0;
    vertical-align: top;
}
.WebDP_BtnYear span {
    display: inline-block;
    margin: 3px 3px 0 8px;
    vertical-align: top;
}

/* WEBPANEL DIVIDER */
.WebPanel > .WebPanel_DividerVertical:before,
.WebPanel > .WebPanel_DividerHorizontal:before {
    text-shadow: 1px 1px 1px #fff;
    font-size: 28px;
    color: #3D3D3D;
}

/* SLIDER */
.WebSlider .WebSlider_Horizontal.WebSlider_NoRange .WebSlider_Slider:before{
    content: "!";
}
.WebSlider .WebSlider_Vertical.WebSlider_NoRange .WebSlider_Slider:before {
    content: "9";
}
.WebSlider .WebSlider_Horizontal.WebSlider_Range .WebSlider_Slider:before,
.WebSlider .WebSlider_Vertical.WebSlider_Range .WebSlider_Slider:before{
    content: "$";
}
.WebSlider .WebSlider_Horizontal.WebSlider_Range .WebSlider_SliderRanged:before,
.WebSlider .WebSlider_Vertical.WebSlider_Range .WebSlider_SliderRanged:before {
    content: "%";
}

/* WEBGRID AND WEBLIST */
.WebList .WebList_Head .WebList_SortedReverse:before,
.WebGrid .WebList_Head .WebList_SortedReverse:before {
    content: "i";
}
.WebGrid .WebList_Head .WebList_Sorted:before,
.WebList .WebList_Head .WebList_Sorted:before{
    content: "j";
}

.WebList .WebList_Moving, .WebGrid .WebList_Moving {
    background-color: rgb(234,240,246);
}

/* DATAPICKER */
.WebDatePicker .WebDP_Up:before,
.WebDatePicker .WebDP_Down:before  {
    font-size: 16px;
    padding: 0 0 0 6px;
    margin: 0;
}

.WebDatePicker .WebDP_Up:before{
    content: "j";
}
.WebDatePicker .WebDP_Down:before {
    content: "i";
}

/* TREE VIEW */
.WebTreeView .WebTree_Collapsed .WebTree_StartSub:before,
.WebTreeView .WebTree_Collapsed .WebTree_EndSub:before,
.WebTreeView .WebTree_Collapsed .WebTree_EntrySub:before,
.WebTreeView .WebTree_Collapsed .WebTree_StartEndSub:before,
.WebTreeView .WebTree_Expanded .WebTree_StartSub:before,
.WebTreeView .WebTree_Expanded .WebTree_EndSub:before,
.WebTreeView .WebTree_Expanded .WebTree_EntrySub:before,
.WebTreeView .WebTree_Expanded .WebTree_StartEndSub:before {
    padding: 3px 0 0 3px;
    font-size: 22px;
    color:#313F54;
}
.WebTreeView .WebTree_Collapsed .WebTree_StartSub:before,
.WebTreeView .WebTree_Collapsed .WebTree_EndSub:before,
.WebTreeView .WebTree_Collapsed .WebTree_EntrySub:before,
.WebTreeView .WebTree_Collapsed .WebTree_StartEndSub:before {
    content: "R";
}
.WebTreeView .WebTree_Expanded .WebTree_StartSub:before,
.WebTreeView .WebTree_Expanded .WebTree_EndSub:before,
.WebTreeView .WebTree_Expanded .WebTree_EntrySub:before,
.WebTreeView .WebTree_Expanded .WebTree_StartEndSub:before {
    content: "S";
}
.WebTreeView .WebTree_Collapsed  .WebTree_NoIcon.WebTree_Icon:before,
.WebTreeView .WebTree_Expanded .WebTree_NoIcon.WebTree_Icon:before {
    content: "F"; /* CAUSES THE MENU ANIMATION TO MALFUNCTION*/
    font-size: 21px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.WebTreeView .WebTree_Collapsed.WebTree_Selected .WebTree_Icon:before,
.WebTreeView .WebTree_Expanded.WebTree_Selected .WebTree_Icon:before {
    color: #83A8E0;
}
.WebTreeView  .WebTree_Collapsed .WebTree_NoIcon.WebTree_Folder:before,
.WebTreeView .WebTree_Expanded .WebTree_NoIcon.WebTree_Folder:before {
    font-size: 23px;
    color: #FFE47E;
    text-shadow: 1px 1px 1px #c6932e;
    position: absolute;
    left: 0px;
    top: 0px;
}
.WebTreeView  .WebTree_Collapsed .WebTree_NoIcon.WebTree_Folder:before {
    content: "O";
}
.WebTreeView .WebTree_Expanded .WebTree_NoIcon.WebTree_Folder:before {
    content: "P";
}

/* MESSAGEBOX ICONS */
.WebMsgBoxConfirm .WebMsgBox_Text .WebLabel_content:before,
.WebMsgBoxInfo .WebMsgBox_Text .WebLabel_content:before,
.WebMsgBoxWarning .WebMsgBox_Text .WebLabel_content:before,
.WebMsgBoxError .WebMsgBox_Text .WebLabel_content:before  {
    width: 52px;
    height: 52px;
    display: block;
    position: absolute;
    margin: 0px 15px 0 -65px;
}
.WebMsgBoxConfirm .WebMsgBox_Text .WebLabel_content:before {
    content: "J";
    font-size: 55px;
    color: #313F54;
    text-shadow: 1px 1px 1px #fff;
}
.WebMsgBoxInfo .WebMsgBox_Text .WebLabel_content:before {
    content: "K";
    font-size: 55px;
    color: #313F54;
    text-shadow: 1px 1px 1px #fff;
}
.WebMsgBoxWarning .WebMsgBox_Text .WebLabel_content:before {
    content: "L";
    font-size: 55px;
    color: #FF9900;
    text-shadow: 1px 1px 1px #fff;
}
.WebMsgBoxError .WebMsgBox_Text .WebLabel_content:before {
    content: "I";
    font-size: 55px;
    color: #C80606;
    text-shadow: 1px 1px 1px #fff;
}

.WebTagsForm .WebTgf_Tag {
    background-color: #313F54;
    color: white;
}

.WebTagsForm .WebTgf_Focus {
    background-color: #83A8E0 !important;
}

.df-ModeTablet .WebTagsForm .WebFrm_Prompt:before {
    top: -25px;
 }
 
 .WebTagsForm .WebFrm_Prompt:before {
    top: -25px;
    content: "i";
    font-size: 32px;
    position: relative;
    left: -8px;
 }

 .WebTagsForm .WebFrm_Prompt {
    max-height: 0;
 }

.WebTagsForm .WebTgf_CloseTag {
    color: #B72025;
}

.Sugg_ControlSuggestion {
    color: #5C5C5C;
    background-color: #E6E6E6;
}

.WebTagsForm .WebDynFrm {
    padding: 2.45px 0 2.45px 4px !important;
}