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

/* Root css variables */
:root {
    /* Main Color = Blue */
    --df-MainDark: #005899;
    --df-MainRegular: #0072C6;
    --df-MainLight: #348ee6;

    /* Error Color = Red */
    --df-ErrorDark: #971519;
    --df-ErrorRegular: #B72025;

    /* Warning Color = Yellow */
    --df-WarningDark: #E2961C;
    --df-WarningRegular: #F4A11E;

    /* Highlight Color = Yellow */
    --df-Highlight: #F4A11E;

    /* Grayscale from darkest to lightest */
    --df-Grayscale1: #181818;
    --df-Grayscale2: #5C5C5C;
    --df-Grayscale3: #8E8A87;
    --df-Grayscale4: #BABABA;
    --df-Grayscale5: #D9D9D9;
    --df-Grayscale6: #E6E6E6;
    --df-Grayscale7: #F3F3F3;
    --df-Grayscale8: #FFFFFF;
}
/* 
    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;
}

.WebToolBar.WebNoTransition ul li ul,
.WebMenuBar.WebNoTransition ul li ul {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* - - - - - - 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;
    right: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    opacity: .0;   
}

.WebApp_DragMask::backdrop{
    background-color: transparent;
}

.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;
}

.WebVerticalAlign_Top {
    vertical-align: top !important;
}

.WebVerticalAlign_Bottom {
    vertical-align: bottom !important;
}

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

.WebApp .WebApp_ViewRegion{
    
}

.WebViewPort{
    height: 100%;
}


/* - - - - - - WebView - - - - - -  */ 
.Web_VwCenter .WebInlineView > .WebContainer > .WebCon_Sizer {
    margin-left:auto;
    margin-right:auto
}
.Web_VwRight .WebInlineView > .WebContainer > .WebCon_Sizer {
    margin-left:auto;
}


.WebWindow.WebView{
    margin: 0px;
}

.WebView label.WebWin_title{
    display: block;
}


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

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

.WebContainer .WebCon_Content.WebCon_GridLayout {
    display: grid;
    box-sizing: border-box;
}


.WebContainer.WebScroll,
.WebGroup.WebScroll > div > div > div.WebContainer,
.WebDynCon.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,
.WebContainer .WebCon_Main{
    background-color: inherit;
}

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

.WebDynCon.WebControl > .WebCon_Inner {
    margin: 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;
}
.WebContainer .WebCon_Inner,
.WebControl .WebCon_Inner{
    background-color: inherit;
    box-sizing: border-box;
}

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

/* Grid specific */
.WebContainer .WebCon_Content.WebCon_GridLayout > .WebControl.Web_FillHeight.Web_JS_Sizing{
    position: relative;
}
.WebContainer .WebCon_Content.WebCon_GridLayout > .WebControl.Web_FillHeight.Web_JS_Sizing > .WebCon_Inner{
    position: absolute;
    left: 0px;
    right: 0px;
}

.WebCon_Content.WebCon_GridLayout {
    min-height: inherit;
}

.WebContainer .WebCon_Content.WebCon_GridLayout > .WebControl {
    grid-auto-flow: column;
}

/* Attempt at fixing labels universally */

.WebControl .WebCon_Inner {
    display: grid;
    grid-template-areas: "control";
    grid-template-columns: minmax(0, 1fr);
}

.WebControl .WebCon_Inner > div{
    grid-area: control;
}

.WebControl .WebCon_Inner.WebCon_TopLabel { 
    grid-template-areas: "label"
                         "control";
    grid-template-rows: max-content auto;
}

.WebControl .WebCon_Inner.WebCon_LeftLabel {
    grid-template-areas: "label control";
    grid-template-columns: 130px minmax(0, 1fr);
}
.WebControl .WebCon_Inner.WebCon_RightLabel {
    grid-template-areas: "control label";
    grid-template-columns: minmax(0, 1fr) 130px;
}

.WebCon_Inner.WebCon_LeftLabel > * {
    align-self: start;
}

/* Generic styling for pbFillHeight controls in grid. Will need specific cases for things like List and whatnot */
.WebContainer .WebCon_Content.WebCon_GridLayout > .WebControl.Web_FillHeight {
    align-self: stretch;
    display: grid;
}

.WebContainer .WebCon_Content.WebCon_GridLayout > .WebControl.Web_FillHeight > .WebCon_Inner {
    align-self: stretch;
}
.WebContainer .WebCon_Content.WebCon_GridLayout > .WebControl.Web_FillHeight > .WebCon_Inner > div {
    height: 100%;
}

/*
    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{
    display: block;
    user-select: none;
    white-space: pre-wrap;
    box-sizing: border-box;

    grid-area: label;
}

/* .WebControl > div.WebCon_HasLabel > div{
}

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

.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 */
}

/* Floating labels for WebControls (currently only works on WebForm and WebEdit) */

div.WebCon_TopLabel.WebCon_FloatEnabled > label.WebCon_Float {
    opacity: 1;
    transform: translate(0px, 0px);
    transition: 0.3s;
    font-weight: normal;
    margin-bottom: 0px;
    font-size: 12px;
}

div.WebCon_TopLabel.WebCon_FloatEnabled > label {
    transform: translate(5px, 30px);
}

div.WebCon_TopLabel.WebCon_FloatEnabled > label.WebCon_Unfloat {
    transform: translate(5px, 30px);
    transition: 0.3s;
    font-size: 14px;
    cursor: text;
}

.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: transparent;
}
.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: transparent;
}
.WebForm.Web_Disabled > div > div {
    
}

.WebControl.Web_FillHeight .WebFrm_Wrapper,
.WebForm.Web_FillHeight .WebFrm_Wrapper .WebFrm_PromptSpacer,
.WebForm.Web_FillHeight .WebFrm_Wrapper input{
    height: 100%;
    box-sizing: border-box;
}

.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;
}
.WebButton button{
    box-sizing: border-box;
}
.WebButton.WebControl.Web_FillHeight button{
    height: 100%;
    
}

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

.WebLabel .WebLabel_content{
    overflow: hidden;
    padding: 3px;
    
}

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

/* - - - - - - WebCombo - - - - - - */
.WebCombo select{
    width: 100%;  
    background-color: transparent;
}
.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.Web_FillHeight .WebFrm_Wrapper textarea{
    height: 100%;
    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_NativeTableWrp{
    overflow-x: scroll;
}

.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_BodyWrp, .WebGrid .WebList_BodyWrp{
    position: relative;
}

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

/* 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_NativeWrp, .WebGrid .WebList_NativeWrp{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    position: relative;
    touch-action: pan-y;
}

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

.WebList .WebList_Scroll, .WebGrid .WebList_Scroll{
    position: absolute;
    overflow-y: scroll;
    outline: none;
    scrollbar-gutter: stable;
    right: 0px;
    top: 0px;
    bottom: 0px;
    box-sizing: border-box;
}
.df-mozilla .WebList .WebList_Scroll, .WebGrid .WebList_Scroll{
    min-width: 10px;
    background-color:  #F0F0F0;
}
.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.WebEditable{
    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_Caption{
    display: none;
    
}

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

.WebTabPage{
    height: 100%;
}

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

.WebCardContainer{
    background-color: inherit;
}

.WebCardContainer > .WebCon_Inner > div{
    position: relative;
    background-color: inherit;
}

.WebCardContainer .WebCC_Body{
    background-color: inherit;
}
.WebCardContainer.WebCC_HasCaption > div > div > .WebCC_Caption{
    display: block;
}
.WebCardContainer > div > div > .WebCC_Caption{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: inherit;
}

.WebCardContainer .WebCC_Head{
    display: none;
}

div.WebCardContainer > div.WebCon_Inner{
    margin: 0px;
    background-color: inherit;
}

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;
}

.WebCC_Swipable > .WebContainer{
    overflow-x: visible;
}

/* - - - - - - 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;
}

.WebMenuBar ul>li>div,
.WebToolBar ul>li>div {
    display: flex;
    flex-direction: row;
}

.WebMenuBar ul>li>div {
    align-items: baseline;
}

/*
    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; */
}

.WebItm_CheckBox {
    cursor: pointer;
}

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

.WebContextMenu .WebContainer .WebCon_Content {
    padding: 0px;
}

.WebContextMenu .WebMenuList li.WebMenuItem > div {
    padding: 3px;
}

.WebContextMenu .WebMenuList .WebML_NoScollRoot .WebML_Mnu.WebML_Root {
    overflow-y:auto;
}

.WebContextMenu .WebML_ShowIcons .WebToolBar >div > span.WebItm_Icon, 
.WebContextMenu .WebML_ShowIcons .WebMenuItem >div > span.WebItm_Icon {
    height: unset;
    width: 20px;
}

.WebContextMenu .WebML_ShowIcons .WebMenuItem > div > span.WebItm_Icon {
    padding: 0px;
}

/* - - - - - - 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 */
    user-select: none;
    background-color: #000000;
    margin: 0px;
    padding: 0px;
    max-width: none;
    max-height: none;
    border: none;
    overflow: hidden;
}
.WebWindow.Web_Moving{
    opacity: 0;
}
.WebWindow.Web_Resizing{
    opacity: 0.4;
}

.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;
}

.WebControl.WebImage > .WebCon_Inner > div {
    display: grid;
}

.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;
}

/* - - - - - - - - - WebDrawing - - - - - - - - - - */
.WebDrawing-wrp-inner{
    position: relative;
}

.WebDrawing-zoom-buttons{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
}

.WebDrawing-btn-zoom{
    width: 100%;
    height: 30px;
    margin-bottom: 2px;
}

/* - - - - - - - - - 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;  
    display: none; 
}

.WebProgressBar .WebPB_Wrp.WebPB_ShowPercentage .WebPB_Percentage{
    display: block;
}

/* - - - - - - 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-x: auto;
    overflow-y: 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;
    overflow-x: hidden;
}
.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;
}
.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{

}
.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;
}

.WebAccordion > div > div > .WebAC_Caption{
    display: none;   
}
/* - - - - - - - - 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);
}


/* - - - - - - - - - WebSelectionForm and WebTagsForm- - - - - - - - - */
.WebSuggestions {
    overflow: hidden;
}

.WebSuggestions table {
    width: 100%;
    table-layout: fixed;
}

.WebSuggestions .WebSug_Suggestion td{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.WebSuggestions .WebSug_Content {
    overflow-x: hidden;
    overflow-y: auto;
}

.WebTagsForm .WebFrm_PromptSpacer {
    width: 100%;
}

.WebTagsForm .WebDynFrm {
    max-width: max-content;
    display: inline-block;
    vertical-align: middle;
    word-break: break-all;
    height: auto;
}

.WebTagsForm .WebDynFrm[contenteditable=false] {
    height: 1.2em !important;
}

.WebTagsForm .WebDynFrm:focus {
    outline: none;
}

.WebTagsForm .WebTgf_Tag {
    height: auto;
    width: auto;

    border-radius: 5px;
    display: inline-block;
    text-align: left;
    margin: 2px;
    padding: 2px;
    max-width: 98%;
}

.WebTagsForm .WebTgf_Tag * {
    text-align: left;
    vertical-align: middle;
}

.WebTagsForm .WebTgf_CloseTag {
    cursor: pointer;
    display: block;
    text-align: center;
    height: 100%;
    width: 18px;
    border-radius: 5px;
    font-weight: bold;
    float: right;
}

.WebTagsForm .WebTgf_CloseTag:hover {
    cursor: pointer;
    font-weight: bold;
}

.WebBaseSelectionForm.WebSuggestions .WebSug_Content {
    display: block;
}

.WebBaseSelectionForm.WebSuggestions .WebSug_Suggestions {
    overflow-y: scroll;
}

.WebTagsForm .WebTgf_Text {
    overflow: hidden;
    display: inline-block;
    max-width: inherit;
}

.WebTagsForm .WebTgf_Placeholder {
    color: #999;
    opacity: 1;
}

/** Drag & Drop **/

.DfDragDrop_PlaceHolder {
    /* background: rgba(4,0,255,0.4) !important;  */
    /* border: 1px dashed blue; */
    background: #DAE7F8 !important;
}

.WebCon_DropZone {
    outline: #3E90E1 2px solid;
    z-index: 500;
    position: relative;
}
  
.WebCon_DragHover,
.WebPanel.WebCon_DragHover > div.WebCon_Sizer > div.WebCon_Content,
.WebCon_DragHover > div.WebCon_Inner,
.WebCon_DragHover > div.WebCon_Inner > div > div.WebContainer {
    /* background: rgba(4,0,255,0.4);  */
    /* border: 1px dashed blue; */
    background: #DAE7F8;
}

  
.WebList_DropPlaceHolder {
    height: 50px;
    width: 100%;    
}


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

.WebMenuItem.WebMenuGroupingSelector,
li.WebMenuItem.WebMenuGroupingSelector:hover
{
    cursor: default;
}

.WebGrpSel_IconSortAsc{
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st%7Bfill:none%3Bstroke-width:2.6667%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:5.3333%3B%7D%3C/style%3E%3Cpolyline class='st' style='stroke:%239D9B9B%3B' points='24 10.8 16 2.8 8 10.8 '/%3E%3Cpolyline class='st' style='stroke:%23000000' points='24 21.2 16 29.2 8 21.2 '/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 20px;
    width: 20px;
}

.WebGrpSel_IconSortDesc{
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st%7Bfill:none%3Bstroke-width:2.6667%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:5.3333%3B%7D%3C/style%3E%3Cpolyline class='st' style='stroke:%23000000' points='24 10.8 16 2.8 8 10.8 '/%3E%3Cpolyline class='st' style='stroke:%239D9B9B%3B' points='24 21.2 16 29.2 8 21.2 '/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    display: inline-block;
    background-size: cover;
    height: 20px;
    width: 20px;
}


.WebGrpSel_IconRemove {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 20px;
    width: 20px;
}

.WebGrpSel_IconReaarrange {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    display: inline-block;
    background-size: cover;
    height: 20px;
    width: 20px;
    cursor: ns-resize;
}


.WebGrpSel_Head {
    display: inline-flex;
    flex-direction: row;
}

.WebGrpSel_Group  {
    display: flex;
    flex-direction: row;
}

.WebGrpSel_GroupSelect {
    width: 75%;
}

.WebGrpSel_Action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.WebGrpSel_Chip {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-content: center;
    place-self: center;
}

.WebGrpSel_Add_Button {
    display: inline-flex;
    background: none;
    border: none;
    outline: inherit;
    cursor: pointer;
}

.WebGrpSel_DropDown.Web_Hidden{
    display: none;
}

.WebGrpSel_DropDown{
    position: fixed;
    flex-direction: column;
    height: auto;
}

.WebGrpSel_DropDown > .Web_Item{
    display: block;
    cursor: pointer;
}

.WebList_GroupHeader {
    display: flex;
    overflow: auto;
    flex-direction: row;
    width: auto;
    overflow: hidden;
}

.WebList_GroupHeader.Web_Level0{
    margin-top: 20px;
}
.WebList_GroupHeader.Web_Level0.Web_First{
    margin-top: 0px;
}
.WebList_GroupHeader.Web_Level1{
    padding-left: 8px;
}
.WebList_Body .WebList_Row.Web_Level1 td:first-child {
    padding-left: 8px;
}


.WebList_GroupHeader.Web_Level2{
    padding-left: 16px;
}
.WebList_Body .WebList_Row.Web_Level2 td:first-child {
    padding-left: 16px;
}

.WebList_GroupHeader.Web_Level3{
    padding-left: 24px;
}
.WebList_Body .WebList_Row.Web_Level3 td:first-child {
    padding-left: 24px;
}

.WebList_GroupHeader.Web_Level4{
    padding-left: 32px;
}
.WebList_Body .WebList_Row.Web_Level4 td:first-child {
    padding-left: 32px;
}

.WebList_Body .WebList_Row.Web_Level5 td:first-child {
    padding-left: 40px;
}

.WebList_GroupHeader .WebList_GroupHeader_Name{
    order: 2;
}
.WebList_GroupHeader .WebList_GroupHeader_Name::after{
    content: ':';
}
.WebList_GroupHeader .WebList_GroupHeader_Item{
    flex-grow: 1;
    order: 3;
}
.WebList_GroupHeader .WebList_GroupHeader_Total{
    align-self: flex-end;
    order: 4;
}
.WebList_GroupHeader .WebList_GroupHeader_Items{
    align-self: flex-end;
    order: 5;
    
}
.WebList_GroupHeader_ToggleBtn{
    align-self: flex-start;
    order: 1;
    
    cursor: pointer;
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
    
}

.WebList_GroupHeader_IconExpand:before{
    content: "\02C3";
}
.WebList_GroupHeader_IconCollapse:before{
    content: "\02C5";
}
.WebList_GroupHeader_ToggleBtn > i{
    font-style: normal;
}

/* - - - - - - Icons - - - - - - - */

.WebCon_Icon {
    display: inline-block;
}

.WebCon_Icon:before {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* - - - - - - Widget Container - - - - - - - */
.WebCon_WebWidgetContainer_GridOverlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
.WebCon_WebWidgetContainer_GridOverlay.dragging * {
    cursor: grabbing;
}

.WebCon_WebWidgetContainer_GridOverlay {
    position: absolute;
}

.WebWidgetContainer .WebCon_Icon {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.WebCon_WebWidgetContainer_Edit_Wrp {
    position: absolute;
    /* right: 15px; */
    z-index: 901;
    padding: 2px;
    background-color: rgba(255, 255, 255, 0.9);
    /* width: 20px; */
    display: flex;
    justify-self: flex-end;
}

.WebCon_WebWidgetContainer_Toggle_Edit_Btn:before {
    content: ' ';
    color: #000;
    cursor: pointer;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.WebCon_WebWidgetContainer_Edit_Menu {
    display: flex;
    justify-content: space-around;
}

.WebCon_WebWidgetContainer_Edit_Menu > span {
    display: inline-flex;
    padding: 0px 6px;
    font-size: 16px;
}

.WebCon_WebWidgetContainer_Save_Edits_Btn:before {
    content: ' ';
    color: #000;
    cursor: pointer;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm0 96c0-17.7 14.3-32 32-32l192 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32L96 224c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.WebCon_WebWidgetContainer_Cancel_Edits_Btn:before {
    content: ' ';
    color: #000;
    cursor: pointer;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.WebCon_WebWidgetContainer_Reset_Configuration_Btn:before {
    content: ' ';
    color: #000;
    cursor: pointer;
    
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M420.1 57.6c7.1 5.9 9.6 15.7 6.8 24.5l-17.8 55.8c5.1 6.6 9.9 13.7 14.2 21.1 4.3 7.4 8 15.1 11.2 22.8l57.2 12.5c9.1 1.9 16.3 9 17.8 18.1 2.1 12.5 3.2 25 3.5 37.6v9.4c-.2 12.8-1.4 25.5-3.6 38.1-1.5 9.2-8.8 16.2-17.8 18.1l-57.1 12.5c-6.5 15.6-15 30.5-25.4 44l17.7 55.7c2.8 8.9.4 18.6-6.9 24.5-10.8 8.9-22.5 17-35.1 24.3-12.6 7.2-25.5 13.3-38.6 18.2-8.7 3.3-18.4.6-24.7-6.3l-39.4-43.2c-16.9 2.3-34.1 2.2-50.8 0L192 488.5c-6.2 6.8-16 9.6-24.6 6.4-11.9-4.4-23.5-9.7-34.7-16l-8.1-4.7c-10.8-6.5-21.1-13.7-30.8-21.8-7.1-5.9-9.6-15.7-6.8-24.5l17.8-55.8c-5.2-6.7-9.9-13.8-14.2-21.2-4.3-7.4-8-15.1-11.2-22.8l-57.2-12.5c-9.1-1.9-16.3-9-17.8-18.1-2.1-12.5-3.2-25-3.5-37.6v-9.4c.2-12.8 1.4-25.5 3.6-38.1 1.5-9.2 8.8-16.2 17.8-18.1l57.1-12.5c6.5-15.6 15-30.5 25.4-44L87.1 82.1c-2.8-8.9-.4-18.6 6.9-24.5 10.8-9 22.4-17.1 35-24.4s25.5-13.3 38.6-18.2c8.7-3.3 18.4-.6 24.7 6.3l39.4 43.2c16.9-2.3 34.1-2.2 50.8 0l39.4-43.2c6.2-6.8 16-9.6 24.6-6.4 11.9 4.4 23.5 9.7 34.7 16l8.1 4.7c10.8 6.5 21.1 13.7 30.8 21.8Z"/><path d="M192.2 206h26.2c9.2 0 16.7 7.5 16.7 16.7s-7.5 16.7-16.7 16.7h-66.7c-9.2 0-16.7-7.5-16.7-16.7V156c0-9.2 7.5-16.7 16.7-16.7s16.7 7.5 16.7 16.7v26.7l9.2-9.2c45.6-45.6 119.5-45.6 165.1 0 45.6 45.6 45.6 119.5 0 165.1s-119.5 45.6-165.1 0c-6.5-6.5-6.5-17.1 0-23.6s17.1-6.5 23.6 0c32.6 32.6 85.4 32.6 118 0 32.6-32.6 32.6-85.4 0-118-32.6-32.6-85.4-32.6-118 0l-9 9Z" style="fill:%23fff"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}
/* - - - - - - Widget - - - - - - */

.WebGroup.WebWidget {
    position: relative;
}

.WebCon_WebWidget_Edit_Box {
    position: absolute;
    top: 11px;
    left: 4px;
    cursor: grab;

    display: flex;
    flex-flow: column;
    justify-content: space-between;
    background: rgba(50, 50, 50, 0.1);
    border: 1px solid #a2a2a2;
    margin: 0;
	padding: 0;
	font: inherit;
	vertical-align: baseline;
    
    line-height: 16px;
    font-size: 12px;
    font-family: Arial, Helvetica, 'Trebuchet MS', sans-serif;
}

.WebCon_WebWidget_Function_Btn {
    cursor: pointer;
}

.WebCon_WebWidget_Function_Btn:before {
    font-weight: bold;
}

.WebCon_WebWidget_Top_Btns_Wrp {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 3px;
}

.WebCon_WebWidget_Edit_Btns_Wrp {
    display: flex;
}

.WebCon_WebWidget_Edit_Btns_Wrp > span {
    margin-right: 5px;
}

.WebCon_WebWidget_Bottom_Btns_Wrp {
    display: flex;
    justify-content: flex-end;
}

.WebCon_WebWidget_Drag_Indicator {
    margin-left: 5px;
}

.WebCon_WebWidget_Drag_Indicator:before{
    content: ' ';
    color: #000;
    cursor: pointer;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 266.5 992.1"><!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709) --><g><g id="Laag_1"><g id="Laag_1-2" data-name="Laag_1"><path d="M64,360c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM64,200c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM120,96c0-30.9-25.1-56-56-56S8,65.1,8,96s25.1,56,56,56,56-25.1,56-56Z"/><path d="M202,360c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM202,200c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM258,96c0-30.9-25.1-56-56-56s-56,25.1-56,56,25.1,56,56,56,56-25.1,56-56Z"/></g><g id="Laag_1-3" data-name="Laag_1"><path d="M64,835c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM64,675c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM120,571c0-30.9-25.1-56-56-56s-56,25.1-56,56,25.1,56,56,56,56-25.1,56-56Z"/><path d="M202,835c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM202,675c-30.9,0-56,25.1-56,56s25.1,56,56,56,56-25.1,56-56-25.1-56-56-56ZM258,571c0-30.9-25.1-56-56-56s-56,25.1-56,56,25.1,56,56,56,56-25.1,56-56Z"/></g></g></g></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.WebCon_WebWidget_Edit_Btn:before {
    content: ' ';
    color: #000;
    cursor: pointer;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.WebCon_WebWidget_Remove_Btn:before {
    content: ' ';
    color: #000;
    cursor: pointer;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.WebCon_WebWidget_ResizeHandle_Wrp {
    margin-right: 5px;
}

.WebCon_WebWidget_ResizeHandle_Wrp,
.WebCon_WebWidget_ResizeHandle_Wrp > .WebCon_WebWidget_Function_Btn.WebCon_WebWidget_ResizeHandle {
    cursor: nwse-resize;
}

.WebCon_WebWidget_ResizeHandle:before {
    content: ' ';
    color: #000;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 384 512"><!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709) --><g><g id="Laag_1"><g id="Group_10"><path d="M60.7,416.1c-7.4,0-14.7-2.8-20.3-8.4-11.2-11.2-11.2-29.4,0-40.7L303,104.3c11.2-11.2,29.4-11.2,40.7,0,11.2,11.2,11.2,29.4,0,40.7L81,407.7c-5.6,5.6-13,8.4-20.3,8.4Z"/><path d="M213.9,416.1c-7.4,0-14.7-2.8-20.3-8.4-11.2-11.2-11.2-29.4,0-40.7l109.4-109.4c11.2-11.2,29.4-11.2,40.7,0,11.2,11.2,11.2,29.4,0,40.7l-109.4,109.4c-5.6,5.6-13,8.4-20.3,8.4Z"/></g></g></g></svg>');
    background-repeat: no-repeat;
    background-size: 25px 50px;
    background-position: center;
}

/* - - - - - - - - - WebWidgetPalette - - - - - - - - - */
.WebWidgetPalette.WebList .WebList_BodyWrp{
    background-color: transparent;
    border: none;
}
.WebWidgetPalette.WebList .WebList_Body .WebList_Row {
    margin: 4px 0px;
    padding-left: 20px;
    border: 1px solid var(--df-Grayscale4);
}

.WebWidgetPalette .WebList_Row[draggable]{
    cursor: grab;
}

.WebWidgetPalette.WebList .WebList_Row td.RowCaption{
    font-weight: bold;
    font-size: medium;
    height: auto;
    padding: 3px 3px 1px 4px;
}
.WebWidgetPalette.WebList .WebList_Row td.RowDetail{
    font-size:small;
    height: auto;
    padding: 1px 3px 3px 4px;
}

.WebWidgetPalette .WebList_Row::before{
    content: " ";
    position: absolute;
    height: 100%;
    width: 20px;
    left: 0px;
    background-color: var(--df-MainRegular);
    background-image: url('data:image/svg+xml,<svg width="400px" fill="%23fff" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><path d="m686.21 137.14v-0.137l68.572 0.137h-68.573zm0 1508.6c75.566 0 137.14 61.577 137.14 137.14s-61.577 137.14-137.14 137.14c-75.702 0-137.14-61.577-137.14-137.14s61.44-137.14 137.14-137.14zm548.57 0c75.566 0 137.14 61.577 137.14 137.14s-61.577 137.14-137.14 137.14c-75.703 0-137.14-61.577-137.14-137.14s61.44-137.14 137.14-137.14zm-548.57-548.57c75.566 0 137.14 61.577 137.14 137.14 0 75.565-61.577 137.14-137.14 137.14-75.702 0-137.14-61.578-137.14-137.14 0-75.566 61.44-137.14 137.14-137.14zm548.57 0c75.566 0 137.14 61.577 137.14 137.14 0 75.565-61.577 137.14-137.14 137.14-75.703 0-137.14-61.578-137.14-137.14 0-75.566 61.44-137.14 137.14-137.14zm-548.57-548.57c75.566 0 137.14 61.578 137.14 137.14 0 75.566-61.577 137.14-137.14 137.14-75.702 0-137.14-61.577-137.14-137.14 0-75.565 61.44-137.14 137.14-137.14zm548.57 0c75.566 0 137.14 61.578 137.14 137.14 0 75.566-61.577 137.14-137.14 137.14-75.703 0-137.14-61.577-137.14-137.14 0-75.565 61.44-137.14 137.14-137.14zm-548.57-548.57c75.566 0 137.14 61.577 137.14 137.14s-61.577 137.14-137.14 137.14c-75.702 0-137.14-61.577-137.14-137.14s61.441-137.14 137.14-137.14zm548.5 0c75.566 0 137.14 61.577 137.14 137.14s-61.577 137.14-137.14 137.14c-75.565 0-137.14-61.577-137.14-137.14s61.58-137.14 137.14-137.14z"/></svg>');
    background-repeat: no-repeat;
    background-size: 25px 50px;
    background-position: center;
}