@charset 'UTF-8';

/* Color palet */
:root {
    /* Main Color = Blue */
    --df-MainDark: #005899;
    --df-MainRegular: #0072C6;
    --df-MainMedium: #1980cb;
    --df-MainLight: #348ee6;
    --df-MainLight2: #99c6e8;
    --df-MainLight3: #cce2f3;
    --df-MainLight4: #e5f0f9;

    /* 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: #EFEFEF;
    --df-Grayscale7: #F3F3F3;
    --df-Grayscale8: #FFFFFF;

    --df-BtnBackgroundColor: var(--df-MainLight);
    --df-BtnFocusColor: var(--df-MainRegular);
    --df-BtnBorderColor: transparent;
    --df-BtnBorderRadius: 3px;
    --df-BtnBorderStyle: solid;
    --df-BtnBorderWidth: 1px;
    --df-BtnHeight: 27px;
    --df-BtnTextColor: #ffffff;
    --df-CelBorderBottom: 0px;
    --df-CelBorderLeft: 0px;
    --df-CelBorderPadding: 6px 6px 6px 6px;
    --df-CelBorderRight: 0px;
    --df-CelBorderStyle: none;
    --df-CelBorderTop: 0px;
    --df-CelBorderWidth: 0px;
  
    --df-GrdBorderBottom: 0px;
    --df-GrdBorderLeft: 0px;
    --df-GrdBorderPadding: 0px 0px 0px 0px;
    --df-GrdBorderRight: 0px;
    --df-GrdBorderStyle:  none;
    --df-GrdBorderTop:  0px;
    --df-GrdBorderWidth: 0px;
    --df-RowBorderBottom: 1px;
    --df-RowBorderLeft: 0px;
    --df-RowBorderPadding: 0px 0px 0px 0px;
    --df-RowBorderRight: 0px;
    --df-RowBorderStyle: solid;
    --df-RowBorderTop: 0px;
    --df-RowBorderWidth: 1px;

    --df-MobListRowPadding: 10px 5px 10px 5px;

    --df-CtrBackgroundColor: #ffffff;
    --df-CtrBorderStyle: solid;
    --df-CtrBorderColor: var(--df-Grayscale4);
    --df-CtrBorderDisabledColor: var(--df-Grayscale6);
    --df-CtrBorderRadius: 2px;

    --df-CtrBorderLeft: 1px;
    --df-CtrBorderRight: 1px;
    --df-CtrBorderTop: 1px;
    --df-CtrBorderBottom: 1px;

    --df-FrmBackgroundColor: #ffffff;
    --df-FrmBorderStyle: solid;
    --df-FrmBorderColor: var(--df-Grayscale4);
    --df-FrmBorderDisabledColor: var(--df-Grayscale5);
    --df-FrmBorderRadius: 2px;

    --df-FrmBorderBottom: 1px;
    --df-FrmBorderLeft: 0px;
    --df-FrmBorderRight: 0px;
    --df-FrmBorderTop: 0px;
    --df-Tablet-FrmBorderBottomWidth: 2px;

    --df-CtrHeight: 23px;
    --df-CtrTextColor: #181818;

    --df-TxtFont: robotoregular, Arial, Helvetica, sans-serif;
    --df-TxtSize: 14px;
    
    --df-TltFont: var(--df-TxtFont);
    --df-TltSize: 0.9rem;
    
    --df-DtaFont: var(--df-TxtFont);
    --df-DtaSize: 0.9rem;
    

}

@font-face {
    font-family: 'robotoregular';
    src: url('Fonts/Roboto-Regular-webfont.eot');
    src: url('Fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Fonts/Roboto-Regular-webfont.woff') format('woff'), url('Fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('Fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 1;
    }
    20% {
        transform: scale(25, 1);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(40, 1);
    }
}

/* - - - - - - 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,
.WebApp {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-size: var(--df-TxtSize);
    font-family: var(--df-TxtFont);
    color: var(--df-Grayscale1);
    line-height: normal;
}

body.df-mobile {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-size: var(--df-TxtSize);
    font-family: var(--df-TxtFont);
    color: var(--df-Grayscale1);
}

/* Disable selection effects for all other elements than input */

::selection {
    color: inherit;
    background: inherit;
}

/* text selection */

input::selection,
.WebDynFrm::selection,
textarea::selection {
    color: var(--df-Grayscale8);
    background: var(--df-MainRegular);
}

a:link {
    color: var(--df-MainRegular);
}

/* unvisited link */

a:visited {
    color: var(--df-MainDark);
}

/* visited link */

a:hover {
    color: var(--df-WarningRegular);
}

/* mouse over link */

a:active {
    color: var(--df-MainDark);
}

/* selected link */

/* - - - - - - WebApp - - - - - - */

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

/* Whitespace arround a view that is only available on larger devices */

.WebInlineView > div.WebContainer {
    padding: 20px 20px;
}

.df-ModeTablet .WebInlineView>div>div.WebCon_Sizer>div>div>.WebCon_Content {
    padding: 0px 0px;
}

.df-ModeDesktop .WebInlineView>div.WebContainer {
    padding: 20px 10px;
}

.df-ModeTablet .WebInlineView>div.WebContainer {
    padding: 0px 0px;
} 

.WebApp.WebContainer {
    background-color: var(--df-Grayscale6);
}

/* - - - - - - WebPanel - - - - - - */

.WebPanel>.WebPanel_DividerVertical {
    background: var(--df-MainRegular);
    width: 7px;
    height: 80px;
    margin: auto auto;
}

.WebPanel>.WebPanel_DividerVertical:hover {
    background: var(--df-MainLight);
}

.WebPanel>.WebPanel_DividerVertical:active {
    background: var(--df-MainLight);
}

.WebPanel_divider_ghost {
    background-color: transparent;
    border-right: 1px dotted var(--df-Grayscale5);
    width: 1px;
}

.WebPanel>.WebPanel_DividerHorizontal {
    background: var(--df-MainRegular);
    width: 80px;
    height: 7px;
    margin: auto auto;
    border-right: 2px solid var(--df-Grayscale8);
    border-left: 2px solid var(--df-Grayscale8);
}

.WebPanel_DividerVertical_Ghost {
    border-left: 1px dotted var(--df-Grayscale5);
}

.WebPanel_DividerHorizontal_Ghost {
    border-top: 1px dotted var(--df-Grayscale5);
}

/* Panel directly under webapp */

.WebApp>.WebCon_Sizer>.WebCon_Main>.WebContainer {
    margin-right: 15px;
}

/* - - - - - - WebContainer - - - - - -  */

/* Margins inside the container */

.WebContainer .WebCon_Content {
    padding: 4px 2px;
}

/* - - - - - - WebView - - - - - -  */

.WebInlineView label.WebWin_title {
    padding: 17px 0px 10px 5px;
    margin: 0px 0px 0px 0px;
    color: var(--df-Grayscale2);
    display: block;
    font-size: 170%;
    /*font-weight: 700;*/
    line-height: 24px;
}

/*
This sets the background color for views & panels
*/

.WebContainer{
    background-color: inherit;
}
.WebInlineView > div > div > div > .WebCon_ContentWrp{
    background-color: var(--df-Grayscale6);
}
/* - - - - - - WebControl - - - - - - */

.WebControl > .WebCon_Inner {
    margin: 2px 5px;
    /*  Less height on input fields for desktop */
    min-height: 29px;
}
.df-ModeTablet .WebControl > .WebCon_Inner{
    min-height: 46px;
}

.MobileList.WebList>.WebCon_Inner {
    margin: 0;
}

.WebControl .WebCon_Inner.WebCon_LeftLabel{
    grid-template-columns: 128px minmax(0, 1fr);
}
.WebControl .WebCon_Inner.WebCon_RightLabel {
    grid-template-columns: minmax(0, 1fr) 128px;
}

/*
    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 {
    padding: 5px 2px 0 0;
    user-select: none;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.54);
}

.WebControl>div.WebCon_TopLabel>label {
    padding-bottom: 1px;
    
    min-height: 31px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.54);
}

/* Material theme size override from 12px */
div.WebCon_TopLabel.WebCon_FloatEnabled > label.WebCon_Float {
    font-size: 11px;
}

/* This defines the border used arround the WebForm, WebCombo & WebEdit */

.WebControl .WebFrm_Wrapper{
    padding: 2px;
    transition: border 0.5s, box-shadow 0.5s;

    border-top: var(--df-FrmBorderTop);
    border-right: var(--df-FrmBorderRight);
    border-bottom: var(--df-FrmBorderBottom);
    border-left: var(--df-FrmBorderLeft);
    border-style: var(--df-FrmBorderStyle);
    border-color: var(--df-FrmBorderColor);
    border-radius: var(--df-FrmBorderRadius);
    
    background-color: var(--df-FrmBackgroundColor);
    padding-left: calc(var(--df-FrmBorderRadius) / 2);
}
.WebTreeView .WebTree_Body {
    padding: 2px;
    transition: border 0.5s, box-shadow 0.5s;

    border-top: var(--df-CtrBorderTop);
    border-right: var(--df-CtrBorderRight);
    border-bottom: var(--df-CtrBorderBottom);
    border-left: var(--df-CtrBorderLeft);
    border-style: var(--df-CtrBorderStyle);
    border-color: var(--df-CtrBorderColor);
    border-radius: var(--df-CtrBorderRadius);
 
    background-color: var(--df-CtrBackgroundColor);
    padding-left: calc(var(--df-CtrBorderRadius) / 2);
}

.WebControl.Web_Disabled>div>div>.WebFrm_Wrapper {
    border-color: var(--df-FrmBorderDisabledColor);
}

.WebTreeView.Web_Disabled .WebTree_Body{
    border-color: var(--df-CtrBorderDisabledColor);
}

.WebControl.Web_Enabled.WebCon_Focus>div>div>.WebFrm_Wrapper,
.WebTreeView.WebCon_Focus .WebTree_Body {
    border-color: var(--df-MainLight);
}

.WebControl.WebError div>div>div.WebFrm_Wrapper,
.WebControl.WebError.WebCon_Focus div>div>div.WebFrm_Wrapper {
    border-color: var(--df-ErrorRegular);
}

.WebControl.Web_Disabled>div>div>.WebFrm_Wrapper {
    background-color: inherit;
    
}

.WebControl.Web_Disabled>div>div>.WebFrm_Wrapper,
.WebControl.Web_Disabled input,
.WebControl.Web_Disabled .WebDynFrm,
.WebControl.Web_Disabled textarea,
.WebControl.Web_Disabled select {
    color: var(--df-Grayscale1);
    opacity: 1;
}

.WebControl>div>div>.WebFrm_Wrapper{
    transition: background-color 300ms ease-in-out;
}

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

.WebForm input,
.WebForm .WebDynFrm {
    background-color: transparent;
    height: var(--df-CtrHeight);
    padding: 0px 5px 2px;
    font-family: var(--df-DtaFont);
    font-size: var(--df-DtaSize);
    color: var(--df-CtrTextColor);
    /* font-size: 90%; */
    transition: padding 300ms ease-in-out;
}

.WebForm.Web_Disabled input,
.WebForm.Web_Disabled .WebDynFrm {
    padding: 0;
}

.WebForm .WebFrm_Prompt {
    width: 24px;
    height: 23px;
}

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

.WebForm .WebFrm_Wrapper {
    padding: 2px 2px;
}

.WebForm .WebFrm_PromptSpacer {}

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

.WebForm.Web_ReadOnly input,
.WebForm.Web_ReadOnly .WebDynFrm,
.WebEdit.Web_ReadOnly textarea {
    color: var(--df-Grayscale3);
}

/* - - - - - - WebButton - - - - - - */

.WebButton button,
.WebGrid .WebList_Body .WebList_Row button,
.WebList .WebList_Body .WebList_Row button {
    background-color: var(--df-BtnBackgroundColor);
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--df-BtnTextColor);
    
    border-style: var(--df-BtnBorderStyle);
    border-width: var(--df-BtnBorderWidth);
    border-color: var(--df-BtnBorderColor);
    min-height: var(--df-BtnHeight);
    border-radius: var(--df-BtnBorderRadius);
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.5s, color 0.5s;
    font-size: 16px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    font-family: var(--df-TxtFont);
    font-size: var(--df-TxtSize);
}

.WebGrid .WebList_Body .WebList_Row button,
.WebList .WebList_Body .WebList_Row button {
    margin: 0px 4px 0px 0px;
}
  
  /* Ripple magic */
.WebButton button{
    position: relative;
    overflow: hidden;
}
  
.WebButton button:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 5px;
    height: 100%;
    background: rgba(0, 0, 0, .05);
    opacity: 0;
    border-radius: 20%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}
  

  
.WebButton.Web_Hit button::after {
    animation: ripple 1s ease-out;
}
  
.WebUploadBtn .WebFUB_Wrp {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

.LoginView .WebButton button {
    min-height: 50px;
}

.WebButton.Web_Enabled button:hover,
.WebButton.Web_Enabled button:focus,
.WebGrid .WebList_Body .WebList_Row button:hover,
.WebList .WebList_Body .WebList_Row button:hover {
    outline: none;
    background-color: var(--df-BtnFocusColor);
    border: 1px solid transparent;
    color: var(--df-BtnTextColor);
    
    border-style: var(--df-BtnBorderStyle);
    border-width: var(--df-BtnBorderWidth);
    border-color: var(--df-BtnBorderColor);
}

.WebButton.Web_Enabled button:active,
.WebGrid .WebList_Body .WebList_Row button:active,
.WebList .WebList_Body .WebList_Row button:active {
    border: 1px solid transparent;
}

.WebButton.Web_Disabled button {
    background-color: var(--df-Grayscale7);
    color: var(--df-Grayscale3);
    cursor: default;
}

.WebButton.Transparent button {
    background-color: inherit;
}

.WebButton.Transparent.Web_Enabled button:hover,
.WebButton.Transparent.Web_Enabled button:focus {
    background-color: inherit;
    opacity: 0.8;
}


.WebMsgBox .WebButton button,
.WebButton.AsAnchor button {
    background: none;
    background-color: transparent;
    color: var(--df-MainLight);
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: none;
    text-decoration: none;
    border: none;
    padding: 10px;
}

.WebMsgBox .WebButton.Web_Enabled button:focus,
.WebButton.AsAnchor.Web_Enabled button:focus,
.WebMsgBox .WebButton button:hover,
.WebButton.AsAnchor button:hover {
    background: none;
    color: var(--df-MainLight2);
    border: none;
    background-color: transparent;
}

.WebMsgBox .WebButton,
.WebButton.AsAnchor {
    padding: 0px;
    margin-top: 2px;
}


/* - - - - - - WebLabel - - - - - - */

.WebLabel .WebLabel_content {
    line-height: 24px;
}

.df-mobile .WebLabel .WebLabel_content {
    padding: 0px 0px 10px 0px;
    font-weight: 400;
    font-size: 14px;
}

/* - - - - - - WebCombo - - - - - - */

.WebCombo select {
    display: inline;
    border: none;
    padding: 0px 5px 2px;
    
    background: none;
    height: var(--df-CtrHeight);

    font-family: var(--df-DtaFont);
    font-size: var(--df-DtaSize);
    color: var(--df-CtrTextColor);
}
.df-webkit .WebCombo select {
    padding: 0px 1px 2px; /* Correct extra pixels added by WebKit inside Select */    
}
.WebCombo .WebFrm_Wrapper {
    min-height: 23px;
} 

/* - - - - - - WebCheckbox - - - - - - */

.WebCheckbox input,
.WebRadio input {
    position: absolute;
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    outline: 0;
    opacity: 0;
}

.WebCheckbox .WebCheckbox_Caption,
.WebRadio .WebRadio_Caption {
    padding: 4px 2px 0px 0px;
    display: block;
    margin-left: 40px;
    height: auto;
    
    font-family: var(--df-DtaFont);
    font-size: var(--df-DtaSize);
    color: var(--df-CtrTextColor); 
}

.df-ModeTablet .WebCheckbox .WebCheckbox_Caption,
.df-ModeTablet .WebRadio .WebRadio_Caption {
    padding-top: 12px;
}

.WebCheckbox .WebCB_Fake {
    display: block;
    position: relative;
    float: left;
}

/* Standard style for styled checkbox */

.WebCheckbox .WebCB_Fake {
    width: 30px;
    height: 29px;
}

.WebCheckbox .WebCB_Fake:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 6px;
    width: 15px;
    height: 15px;
    border: 2px solid var(--df-Grayscale4);
    border-radius: 3px;
    display: block;
    transition: border 0.5s, box-shadow 0.5s;
}
.df-ModeTablet .WebCheckbox .WebCB_Fake:before {
    top: 12px;
}

.WebCheckbox input:checked+.WebCB_Fake:before {
    background: var(--df-MainLight);
    border: 2px solid var(--df-MainLight);
}

.WebCheckbox.WebCon_Focus .WebCB_Fake:before,
.WebRadio.WebCon_Focus .WebR_Fake:before {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.WebCheckbox.Web_Disabled input:checked+.WebCB_Fake:before,
.WebCheckbox.Web_Disabled .WebCB_Fake:before {
    background: rgba(0,0,0,0.07);
    border: 2px solid transparent;
}

.WebCheckbox .WebCB_Fake:after,
.WebRadio .WebR_Fake:after {
    font-family: "material-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

.WebCheckbox input:checked+.WebCB_Fake:after {
    content: '&';
    font-size: 22px;
    position: absolute;
    top: 1px;
    left: 7px;
}

.WebCheckbox input:checked+.WebCB_Fake:after {
    top: 8px;
    left: 12px;
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    border: solid var(--df-Grayscale8);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.df-ModeTablet .WebCheckbox input:checked+.WebCB_Fake:after {
    top: 15px;
}

.WebCheckbox.Web_Disabled input:checked+.WebCB_Fake:after {
    border: solid var(--df-Grayscale4);
    border-width: 0 2px 2px 0;
}

/* FlipSwitch style for styled checkbox */

.WebCheckbox.FlipSwitch .WebCheckbox_Caption {
    margin-left: 69px;
}

.WebCheckbox.FlipSwitch .WebCB_Fake {
    padding: 2px;
    width: 45px;
    height: 18px;
    border-radius: 40px;
    transition: background 0.4s;
    position: relative;
    border: none;
    top: 2px;
}
.df-ModeTablet .WebCheckbox.FlipSwitch .WebCB_Fake{
    top: 9px;
}

.WebCheckbox.FlipSwitch.WebCon_Focus.Web_Enabled .WebCB_Fake {
    background-color: var(--df-MainRegular);
}

.WebCheckbox.FlipSwitch.WebCon_Focus input:checked+.WebCB_Fake,
.WebCheckbox.FlipSwitch.WebCon_Focus.Web_Enabled .WebCB_Fake {
    background-color: var(--df-Grayscale5);
}

.WebCheckbox.FlipSwitch.WebCon_Focus.Web_Enabled .WebCB_Fake:before {
    box-shadow: none;
    border: none;
}

.WebCheckbox.FlipSwitch .WebCB_Fake:before,
.WebCheckbox.FlipSwitch .WebCB_Fake:after {
    display: block;
    position: absolute;
    content: "";
}

.WebCheckbox.FlipSwitch input:checked+.WebCB_Fake:before {
    content: "";
    margin: 0px 0px 0px 0px;
    background: var(--df-MainLight2);
}

.WebCheckbox.FlipSwitch .WebCB_Fake:before {
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    width: auto;
    height: auto;
    background-color: rgba(0,0,0,0.05);
    border-radius: 40px;
    border: none;
    transition: background 200ms;
}

.WebCheckbox.FlipSwitch input:checked+.WebCB_Fake:after,
.WebCheckbox.FlipSwitch .WebCB_Fake:after {
    top: -1px;
    left: 1px;
    bottom: -1px;
    width: 24px;
    height: auto;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.21);
    background-color: var(--df-Grayscale8);
    border-radius: 32px;
    transition: margin 200ms, background 200ms;
}
.WebCheckbox.Web_Disabled.FlipSwitch input:checked+.WebCB_Fake:after,
.WebCheckbox.Web_Disabled.FlipSwitch .WebCB_Fake:after {
    background-color: var(--df-Grayscale4);
}

.WebCheckbox.FlipSwitch input:checked+.WebCB_Fake:before {
    background: var(--df-MainLight2);
    border: none;
}

.WebCheckbox.FlipSwitch.Web_Disabled input:checked+.WebCB_Fake:before,
.WebCheckbox.FlipSwitch.Web_Disabled .WebCB_Fake:before {
    background-color: rgba(0, 0, 0, 0.05);
}

.WebCheckbox.FlipSwitch input:checked+.WebCB_Fake:after {
    margin-left: 25px;
    background-color: #8ce196;
}

.WebCheckbox.FlipSwitch input:checked+.WebCB_Fake:after {
    background-color: var(--df-MainLight);
    transform: none;
    border: none;
}

/* - - - - - - - WebColumnCheckbox - - - - - - */

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

.WebCheckboxColumn .WebCB_Fake {
    margin-top: -7px;
    height: 24px;
    display: inline-flex;
    float: none;
    vertical-align: middle;
}

.WebCheckboxColumn.FlipSwitch .WebCB_Fake {
    margin-top: -2px;
}

.WebColCheckbox .WebCheckbox input {
    opacity: 0;
    width: 0;
    height: 0;
    position: initial;
    float: left;
}

.df-ie .WebCheckboxColumn>.WebCon_Inner>div>input {
    margin: 0px 2px 0;
}

.MobileList .WebControl.WebCheckboxColumn > .WebCon_Inner{
    min-height: 20px;
}

.WebControl.WebCheckboxColumn.Web_Disabled input {
opacity: 0;
}
/* - - - - - - - WebRadio - - - - - - */

.WebRadio .WebR_Fake {
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 30px;
}

.WebRadio .WebR_Fake:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--df-Grayscale4);
    border-radius: 100%;
    display: block;
    transition: border 0.5s, box-shadow 0.5s;
}
.df-ModeTablet .WebRadio .WebR_Fake:before{
    top: 10px;
}

.WebRadio input:checked+.WebR_Fake:before {
    background-color: var(--df-MainLight);
    border: 2px solid var(--df-MainLight);
}

.WebRadio.Web_Enabled.WebCon_Focus .WebR_Fake:after {
    background: var(--df-MainRegular);
}

.WebRadio.Web_Disabled .WebR_Fake:before {
    background-color: var(--df-Grayscale7);
}

.WebRadio .WebR_Fake:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 5px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    display: block;
    transition: background-color 200ms;
    background-color: transparent;
}
.df-ModeTablet .WebRadio .WebR_Fake:after{
    top: 11px;
}

.WebRadio input:checked+.WebR_Fake:after {
    top: 6px;
    left: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--df-MainLight);
    border: 2px solid var(--df-Grayscale8);
}
.df-ModeTablet .WebRadio input:checked+.WebR_Fake:after{
    top: 13px;
}

.WebRadio.Web_Disabled input:checked+.WebR_Fake:after {
    background-color: var(--df-Grayscale4);
}

.WebRadio.Web_Disabled .WebR_Fake:before,
.WebRadio.Web_Disabled input:checked+.WebR_Fake:before {
    background-color: var(--df-Grayscale6);
    border-color: var(--df-Grayscale5);
}

/* - - - - - - WebEdit - - - - - - */

.WebEdit div.WebFrm_Wrapper {
    background-color: var(--df-CtrBackgroundColor);
}

.WebEdit textarea {
    background-color: transparent;
    
    font-family: var(--df-DtaFont);
    font-size: var(--df-DtaSize);
    color: var(--df-CtrTextColor);
    
    padding-top: calc(var(--df-CtrBorderRadius) / 2);
    padding-left: calc(var(--df-CtrBorderRadius) / 2);
}

/* - - - - - - WebGrid & WebList - - - - - - */

/*
    The grid & list share their basic styles.
    */

/*
    Add some dinstance between the grid and other controls.
    */

.WebGrid.WebControl>.WebCon_Inner,
.WebList.WebControl>.WebCon_Inner {}

.WebControl.WebGrid .WebCon_Inner {
    padding: 10px 0px 0px 0px;
}

.WebControl.WebGrid .WebCon_Inner .WebList_BodyWrp .WebCon_Inner {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Body */

.WebGrid .WebList_BodyWrp,
.WebList .WebList_BodyWrp {
    background-color: var(--df-Grayscale8);
}

.WebGrid .WebList_Body,
.WebList .WebList_Body {}

.WebGrid .WebList_Body .WebList_Row,
.WebList .WebList_Body .WebList_Row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 2px solid transparent;
    border-collapse: separate;
    background-color: var(--df-Grayscale8);
    font-family: var(--df-DtaFont);
    font-size: var(--df-DtaSize);
    
    border: var(--df-RowBorderWidth) var(--df-RowBorderStyle) rgba(0, 0, 0, 0.1);
    border-width: var(--df-RowBorderTop) var(--df-RowBorderRight) var(--df-RowBorderBottom) var(--df-RowBorderLeft);
    padding: var(--df-RowBorderPadding);
}

.WebList_Row{
    overflow: hidden;
    position: relative;
}
  
.WebList .WebList_Row::after {
    content: '';
    position: absolute;
    top: 0%;
    left: 50%;
    width: 5%;
    height: 100%;
    background: rgba(0, 0, 0, .05);
    opacity: 0;
    border-radius: 20%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
    display: none;
}
  
.WebList .WebList_Row.Web_Hit::after {
    display: block;
    animation: ripple 1s ease-out;
}


.WebGrid .WebList_Body .WebList_RowOdd,
.WebList .WebList_Body .WebList_RowOdd {}

.WebGrid .WebList_Body .WebList_Row td,
.WebList .WebList_Body .WebList_Row td {
    padding: 6px 6px 6px;
    height: 17px;
    vertical-align: middle;
    
    border: var(--df-CelBorderWidth) var(--df-CelBorderStyle) rgba(0, 0, 0, 0.1);
    border-width: var(--df-CelBorderTop) var(--df-CelBorderRight) var(--df-CelBorderBottom) var(--df-CelBorderLeft);
    padding: var(--df-CelBorderPadding);
}

/* 
    .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: var(--df-Grayscale3);
}

.WebGrid.Web_Disabled .WebList_Head .WebList_ColCap,
.WebList.Web_Disabled .WebList_Head .WebList_ColCap {
    color: var(--df-Grayscale3);
}

/* Header */

.WebList_Focus {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
    
    border: var(--df-GrdBorderWidth) var(--df-GrdBorderStyle) rgba(0, 0, 0, 0.1);
    border-width: var(--df-GrdBorderTop) var(--df-GrdBorderRight) var(--df-GrdBorderBottom) var(--df-GrdBorderLeft);
    padding: var(--df-GrdBorderPadding);
}

.WebWindow .WebList_Focus {
    box-shadow: none;
}

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

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

.WebGrid .WebList_Head,
.WebList .WebList_Head {
    background: var(--df-Grayscale8);
    border-bottom: 1px solid var(--df-Grayscale6);
    /*border-bottom: none;*/
    color: var(--df-Grayscale4);
    font-weight: 700;
}

.WebGrid .WebList_Footer,
.WebList .WebList_Footer {
    background: var(--df-Grayscale8);
    color: #b0b0b0;
    font-weight: 700;
}

.WebGrid .WebList_FooterWrp.WebList_BodyWrp, .WebList .WebList_FooterWrp.WebList_BodyWrp {
    background: var(--df-Grayscale8);
    border: none;
}

.WebGrid .WebList_Footer.WebList_Body .WebList_Row, .WebList .WebList_Footer.WebList_Body .WebList_Row {
    background: var(--df-Grayscale8);
    border: none;
}

.WebGrid.WebControl>.WebCon_Inner,
.WebList.WebControl>.WebCon_Inner .WebList .WebList_Head {
    /*margin: 10px 0px 0px 0px;*/
}

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

.WebGrid .WebList_Head .WebList_ColCap,
.WebList .WebList_Head .WebList_ColCap {
    overflow: hidden;
    white-space: break-spaces;
    padding: 10px 4px 6px;
    font-weight: normal;
    text-decoration: none;
}

/*
    This is the separator that is shown when resizing columns.
    */

.WebGrid .WebList_ColResizer,
.WebList .WebList_ColResizer {
    border-left: 1px dotted var(--df-Grayscale4);
}

.WebGrid .WebList_Head .WebList_Sorted,
.WebGrid .WebList_Head .WebList_SortedReverse,
.WebList .WebList_Head .WebList_Sorted,
.WebList .WebList_Head .WebList_SortedReverse {
    /*font-weight: 600;*/
}

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

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

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

.WebGrid > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected,
.WebList > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected,
.WebGrid > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected,
.WebList > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected {

    background-color: var(--df-MainLight3);
    border-left: 1px solid var(--df-MainLight);
}



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

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

.WebList .WebList_Body .WebList_Row.WebList_Selected:hover {}

.WebList .WebList_Body .WebList_Row.WebList_Selected:hover td {}

.WebList .WebList_Body .WebList_Row.WebList_Selected td {}

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

.WebList_SwipeBtn {
    background-color: var(--df-MainRegular);
    text-align: center;
    transition: background-color 200ms;
    color: var(--df-Grayscale8);
    padding: 0px 16px;
}

.WebList_SwipeBtn.Highlight {
    background-color: var(--df-Highlight);
}

.WebList_SwipeBtn.Danger {
    background-color: var(--df-ErrorRegular);
}

.WebList_SwipeBtn.Highlight.WebCon_Active {
    background-color: var(--df-WarningDark);
}

.WebList_SwipeBtn.Danger.WebCon_Active {
    background-color: var(--df-ErrorDark);
}

.WebList_SwipeBtn.WebCon_Active {
    background-color: var(--df-MainDark);
}

.WebList_SwipeBtn:before {
    display: block;
    height: 21px;
    width: 100%;
    font-size: 19px;
}

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

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

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

.WebGrid_EditCell .WebForm input {
    height: 21px;
    padding: 1px 4px 1px 4px;
}

.df-ie8 .WebGrid_EditCell .WebForm input {
    height: 17px;
}

.WebGrid_EditCell .WebControl .WebFrm_Wrapper {
    padding: 1px 1px 1px;
    margin: 0px;
    background-color: var(--df-Grayscale8);
    border-bottom: 1px solid var(--df-Grayscale4);
    margin-bottom: -1px;
}

.WebGrid_EditCell .WebControl .WebFrm_Wrapper:focus {
    border-bottom: 1px solid var(--df-Grayscale4);
}

.WebGrid_EditCell .WebCombo select {
    height: 23px;
    padding: 0px 4px 2px;
}
.df-webkit .WebCombo select {
    padding: 0px 1px 2px; /* Correct extra pixels added by WebKit inside Select */
}

.WebGrid_EditCell .WebCombo .WebFrm_Wrapper {
    height: 24px;
}

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

.WebGrid_EditCell .WebForm .WebFrm_Prompt {
    height: 21px;
}

.WebGrid .WebList_Body .WebList_Row td.WebCol.WebGrid_EditCell .WebFrm_Prompt:before,
.WebGrid .WebList_Body .WebList_Row td.WebColCombo.WebGrid_EditCell .WebFrm_Prompt:before {
    top: 1px;
    font-size: 18px;
}

.WebColLink.Web_Disabled a {
    color: var(--df-Grayscale3);
}


.WebGrid.SubList .WebList_Body .WebList_Row,
.WebList.SubList .WebList_Body .WebList_Row {
    background-color: var(--df-MainLight4);
}
.WebList.SubList > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected,
.WebGrid.SubList > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected,
.WebGrid.SubList > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected,
.WebList.SubList > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected{
    background-color: var(--df-MainLight4);
    border-left: 1px solid var(--df-MainLight);
}


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

.WebMenuItem.WebMenuGroupingSelector,
li.WebMenuItem.WebMenuGroupingSelector:hover
{
    padding-left: 5px;
    background-color: var(--df-Grayscale8);
}

.WebGrpSel_Head {
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(163, 163, 163, 0.7);
}


.WebGrpSel_Fields{
    padding-top: 3px;
}


.WebGrpSel_Group.Web_Drag{
    background-color: var(--df-Grayscale4);
    opacity: 40%;
}

.WebGrpSel_GroupSelect {
    padding: 0.25rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: var(--df-Grayscale4);
    border-style: solid;
}

.WebGrpSel_Action {
    font-size: 0.75rem;
    line-height: 1rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    margin: 0.2em;
}

.WebGrpSel_Action :hover {
    background-color:  var(--df-Grayscale7);
}

.WebGrpSel_Chip {
    color: var(--df-Grayscale8);
    font-size: 0.75rem;
    line-height: 1rem;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border-radius: 0.125rem;


    background-color:  var(--df-Grayscale2);
}

.WebGrpSel_Add_Button {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 0.25rem;
    background: none;
    border: none;
    font: inherit;
    outline: inherit;
}

.WebGrpSel_Add_Button:hover {
    background-color: var(--df-Grayscale7);
}

.WebGrpSel_DropDown{
    background: var(--df-Grayscale8);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.WebGrpSel_DropDown > .Web_Item{
    display: block;
    padding: 0.25rem 0.5rem;
    color: var(--df-Grayscale1);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.WebGrpSel_DropDown > .Web_Item:hover{
    background-color: var(--df-Grayscale7);
}

.WebList_GroupHeader {
    padding: 6px;
    background-color: var(--df-MainLight3);
    color: var(--df-Grayscale8);
}

.WebList_GroupHeader.Web_Level0{
    background-color: var(--df-MainRegular);
}
.WebList_GroupHeader.Web_Level0.Web_First{
    margin-top: 0px;;
}
.WebList_GroupHeader.Web_Level1{
    background-color: var(--df-MainMedium);
}
.WebList_GroupHeader.Web_Level2{
    background-color: var(--df-MainLight2);
}
.WebList_GroupHeader.Web_Level3{
    background-color: var(--df-MainLight3);
}
.WebList_GroupHeader .WebList_GroupHeader_Item{
    padding-left: 4px;
}
.WebList_GroupHeader_ToggleBtn{
    color: var(--df-Grayscale8);
    padding-left: 3px;
    padding-right: 3px;
    
}
.WebList_GroupHeader_ToggleBtn:hover{
    color: var(--df-Highlight);
}

/* - - - - - - WebMultiSelectList - - - - -*/

.WebMultiSelectList.WebGrid .WebList_Row.WebList_MultiSelected, 
.WebMultiSelectList.WebList .WebList_Row.WebList_MultiSelected, 
.WebMultiSelectList.WebGrid .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebList .WebList_Row.WebList_Selected.WebList_MultiSelected {
    background-color: var(--df-Grayscale4);
}

.WebMultiSelectList.WebGrid > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebList > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebGrid > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebList > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected.WebList_MultiSelected {
    background-color: var(--df-Grayscale4);
}

.WebMultiSelectList.WebGrid.WebCon_Focus .WebList_Row.WebList_MultiSelected, 
.WebMultiSelectList.WebList.WebCon_Focus .WebList_Row.WebList_MultiSelected, 
.WebMultiSelectList.WebGrid.WebCon_Focus .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebList.WebCon_Focus .WebList_Row.WebList_Selected.WebList_MultiSelected,
.WebMultiSelectList.WebGrid.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebList.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebGrid.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected.WebList_MultiSelected, 
.WebMultiSelectList.WebList.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected.WebList_MultiSelected {
    background-color: #d9ecff;
}

.WebMultiSelectList.WebGrid > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected, 
.WebMultiSelectList.WebList > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected, 
.WebMultiSelectList.WebGrid > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected, 
.WebMultiSelectList.WebList > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected,
.WebMultiSelectList.WebGrid.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected, 
.WebMultiSelectList.WebList.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > .WebList_Row.WebList_Selected, 
.WebMultiSelectList.WebGrid.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected, 
.WebMultiSelectList.WebList.WebCon_Focus > div > div > div > div > .WebList_Body.WebList_ShowSelected > div > div > .WebList_Row.WebList_Selected {
    background-color: unset;
}

.WebMultiSelectList .WebCheckbox .WebMultiSelectList_SelectAllBox.WebCB_Fake:before {
    top: 5px;
    left: 8px;
}

.WebMultiSelectList .WebCheckbox .WebMultiSelectList_SelectAllBox.WebCB_Fake:after {
    top: 9px;
    left: 15px;
}

.df-ModeTablet .WebMultiSelectList .WebCheckbox input:checked+.WebCB_Fake:after {
    top: 10px;
}

.df-ModeTablet .WebMultiSelectList .WebCheckbox .WebCB_Fake::before {
    top: 6px;
}

/* - - - - - WebListExpPnl - - - - - */

.WebListExpPnl{
    background-color: var(--df-MainLight4);
}

.WebListExpPnl .WebButton button:hover {}

.WebListExpPnl .WebControl>.WebCon_Inner {
    margin: 0;
}

.WebListExpPnl.Web_Enabled {
    transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.WebListExpPnl .WebList_Focus {
    box-shadow: none;
}

/* - - - - - - WebTabContainer - - - - - - */

/*
Add some distance between the grid and other controls.
*/

.WebTabContainer.WebControl>.WebCon_Inner {
    margin: 20px 3px 3px 3px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
}

.WebTabContainer .WebTbc_Head,
.WebTabContainer .WebTbc_Body {
    background: var(--df-Grayscale8);
}

.WebTabContainer .WebTab_Btn {
    border-bottom: 3px solid transparent;
    padding: 7px 10px 3px 10px;
}

.WebTabContainer .WebTab_Btn.WebTab_Enabled.WebTab_Focus {
    background-color: var(--df-Grayscale6);
}

.WebTabContainer .WebTab_Btn span label {
    vertical-align: bottom;
    text-decoration: none;
    outline: 0;
    line-height: 24px;
    display: inline-block;
    text-transform: uppercase;
}

/*
    Focussed tab button
    */

.WebTabContainer .WebTab_Btn.Web_Enabled:hover,
.WebTabContainer .WebTab_Btn.Web_Enabled.WebTab_Focus {}

/*
    Current tab button
    */

.WebTabContainer .WebTab_Btn.WebTab_Current,
.WebTabContainer .WebTab_Btn.WebTab_Current:hover {
    border-bottom: 2px solid var(--df-MainMedium);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: var(--df-MainLight);
}

.WebTabContainer .WebTab_Btn.WebTab_Focus span label {
}

.WebTabContainer .WebTab_Btn.WebTab_Current.WebTab_Focus span label {
}

.WebTabContainer .WebTab_Btn.WebTab_Focus span label:hover {}

/*
    Focussed current tab button
    */

.WebTabContainer .WebTab_Btn.WebTab_Focus.WebTab_Current.Web_Enabled {}

.WebTabContainer .WebTbc_Body {
    padding: 0px 0px 0px 0px;
}

/* FOCUS STYLES */

.WebTabContainer.WebCon_Focus .WebTab_Btn.WebTab_Current {}

.WebTabContainer.WebCon_Focus .WebTbc_Head {}

.WebTabContainer.WebCon_Focus .WebTbc_Body {
    border-top: none;
}

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

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


.WebCardContainer > div > div > .WebCC_Caption{
    color: var(--df-Grayscale1);
    font-weight: bold;
    font-size: 120%;
    top: 13px;
    left: 13px;
    padding: 3px 6px 0px;
}
.WebCardContainer.WebCC_HasBorder > div > div > .WebCC_Caption{
    background-color: var(--df-Grayscale8);
}

.WebC_Swipe {
    box-shadow: 0px 0px 200px 40px rgba(0, 0, 0, 0.15);
}

.WebC_SwipeLeaving {
    box-shadow: 0px 0px 200px 40px rgba(0, 0, 0, 0);
}


.WebCardContainer {

}

.WebCardContainer.WebCC_HasBorder .WebCC_Body{
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
    background-color: var(--df-Grayscale8);
}

.WebCardContainer.WebCC_HasBorder > div > div > .WebCC_Body  > .WebCard > .WebCon_Sizer > .WebCon_Content{
    padding: 15px;
}
.WebCardContainer.WebCC_HasCaption > div > div > .WebCC_Body  > .WebCard > .WebCon_Sizer > .WebCon_Content{
    padding-top: 43px;
}

.WebCardContainer.WebCC_HasBorder > .WebCon_Inner {
    margin: 10px 5px 10px 5px;
}

/* --- Special style for showing bullets --- */

.WithBullets.WebCardContainer {
    position: relative;
}

.WithBullets.WebCardContainer>.WebCon_Inner > div {
    padding-bottom: 24px;
}

.WithBullets.WebCardContainer>div>div>.WebCC_Head {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0px;
}

.WithBullets.WebCardContainer>div>div>.WebCC_Head>.WebTab_Btn:focus {
    outline: none;
}

.WithBullets.WebCardContainer>div>div>.WebCC_Head>.WebTab_Btn {
    margin: 0px 5px;
    cursor: pointer;
    display: inline-block;
    padding: 6px;
    background-color: var(--df-Grayscale5);
    border-radius: 50%;
}

.WithBullets.WebCardContainer>div>div>.WebCC_Head>.WebTab_Btn.WebTab_Current {
    background-color: var(--df-Grayscale8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.WithBullets.WebCardContainer>div>div>.WebCC_Head>.WebTab_Btn>span {
    display: none;
}

/* - - - - - - WebMenuBar - - - - - - */

.WebMenuBar {
    background: var(--df-MainMedium);
    height: 40px;
    padding: 0px;
    margin: 0px;
}

.WebMenuBar ul li a {
    white-space: nowrap;
}

/*
    Level 0
    */

.WebMenuBar ul.WebBarRoot>li>div {
    padding: 0px;
}

.WebMenuBar.Web_Disabled ul.WebBarRoot>li,
.WebMenuBar ul.WebBarRoot>li.Web_Disabled {
    color: var(--df-Grayscale1);
}

.WebMenuBar ul.WebBarRoot>li {
    color: var(--df-Grayscale8);
    /* Set the color at the level where it is being set by the JS engine as well */
}

.WebMenuBar ul.WebBarRoot>li>div>a {
    color: inherit;
    padding: 10px 15px 10px 15px;
    display: block;
    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color-color .5s ease;
    -o-transition: background-color .5s ease;
    transition: background-color .5s ease;
}

/* 'Active' state also defined on WebItm_Expanded which is applied while the submenu is shown */

.WebMenuBar.Web_Enabled ul.WebBarRoot>li:hover>div,
.WebMenuBar ul.WebBarRoot>li.WebItm_Expanded>div {
    background-color: var(--df-MainDark);
    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color-color .5s ease;
    -o-transition: background-color .5s ease;
    transition: background-color .5s ease;
}

.WebMenuBar ul.WebBarRoot>li:hover,
.WebMenuBar ul.WebBarRoot>li.WebItm_Expanded {
    background-color: none;
}

.WebMenuBar ul.WebBarRoot>li:hover>div>a,
.WebMenuBar ul.WebBarRoot>li.WebItm_Expanded>div>a {}

/* Level 1 (shared with WebToolBar) */

.WebMenuBar ul li ul li.WebItm_HasSub > div {
    padding-right: 20px;
}

.WebToolBar ul li ul,
.WebMenuBar ul li ul {
    background-color: var(--df-Grayscale8);
    margin-top: -30px;
    margin-left: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    opacity: 0;
    display: block;
    visibility: hidden;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease-in-out;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.23);
}

.WebToolBar ul li.WebItm_Expanded>ul,
.WebMenuBar ul li.WebItm_Expanded>ul {
    transition-delay: 0s;
    opacity: 1.0;
    visibility: visible;
}

.WebMenuBar ul li ul {
    min-width: 223px;
    margin-top: 0px;
    margin-left: 0px;
}

.WebToolBar ul li ul li,
.WebMenuBar ul li ul li {
    height: 37px;
    line-height: 14px;
    padding-left: 0px;
    padding-right: 5px;
    color: var(--df-Grayscale1);
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

.WebToolBar ul li ul li.WebItm_BgnGroup,
.WebMenuBar ul li ul li.WebItm_BgnGroup {
    border-top: 1px solid var(--df-Grayscale5);
}

.WebToolBar ul li ul li:hover,
.WebToolBar ul li ul li.WebItm_HasSub:hover,
.WebMenuBar ul li ul li:hover,
.WebMenuBar ul li ul li.WebItm_HasSub:hover {
    background-color: var(--df-Grayscale7);
}

.WebToolBar ul li ul li:focus,
.WebToolBar ul li ul li:focus a,
.WebToolBar ul li ul li:active,
.WebToolBar ul li ul li:active a,
.WebToolBar ul li ul li.WebItm_HasSub:active,
.WebMenuBar ul li ul li:focus,
.WebMenuBar ul li ul li:focus a,
.WebMenuBar ul li ul li:active,
.WebMenuBar ul li ul li:active a,
.WebMenuBar ul li ul li.WebItm_HasSub:active {}

.WebToolBar ul li ul li>div,
.WebToolBar ul li ul li.Web_Disabled:hover>div,
.WebMenuBar ul li ul li>div,
.WebMenuBar ul li ul li.Web_Disabled:hover>div {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 3px 4px 4px 4px;
    /* overflow: hidden; */
}

.WebToolBar ul li ul li a,
.WebMenuBar ul li ul li a {
    display: block;
    margin: 8px 0 0 8px;
    /* overflow: hidden; */
}

.WebToolBar .WebTlb_SubItems li span.WebItm_Icon,
.WebToolBar li ul span.WebItm_Icon,
.WebMenuBar .WebMenuItem>div>span.WebItm_Icon {
    display: none;
}

.WebToolBar>div>span.WebItm_Icon,
.WebMenuItem>div>span.WebItm_Icon {
    height: 32px;
    width: 32px;
}

/* Level 2 */

.WebToolBar ul li ul li ul,
.WebMenuBar ul li ul li ul {
    margin: -34px 0px 0px 0px;
}

.WebMenuBar ul li.WebItm_HasSub ul li ul {
}
.WebMenuBar ul li ul li.WebItm_HasSub > div {
    padding-right: 20px;
}


/* - - - - - - WebMenuItem - - - - - - */

.WebMenuItem>div>a:visited,
.WebMenuItem>div>a:link,
.WebMenuItem>div>a:focus,
.WebMenuItem>div>a:active {
    color: inherit;
}

li.WebMenuItem.Web_Disabled>div {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

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

.WebCommandBar .WebCmd_ToolWrap {
    background: none repeat scroll 0 0 var(--df-MainLight);
    margin: 0;
    text-align: left;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.22);
    color: var(--df-Grayscale8);
}

.WebToolBar.WebTlb_Command {
    margin: 0px 10px;
}

.WebToolBar .WebMenuItem.Web_Enabled:hover span.WebItm_Icon,
.WebToolBar .WebMenuItem.Web_Enabled:focus span.WebItm_Icon {
}


.WebToolBar .WebTlb_SubItems span.WebItm_Icon {
    height: 30px;
}

.WebToolBar .WebMenuItem.Web_Enabled:hover span.WebItm_Icon:before {
    color: var(--df-Grayscale8);
}

.WebToolBar:focus {
    outline: none;
}

.WebToolBar {
    margin: 0;
    padding: 0;
    /*height: 42px;*/
    color: var(--df-Grayscale8);
}

/* Styles for running the toolbar as standalone */

.WebToolBar.WebTlb_Standalone ul.WebBarRoot>li>div>span.WebItm_Icon {
    border: none;
    border-radius: 0;
}

.WebToolBar.WebTlb_Standalone ul.WebBarRoot>li {
    color: var(--df-Grayscale8);
    padding: 7px 0px 0px 0px;
}

.WebToolBar.WebTlb_Standalone ul>li.Web_Enabled:active {
    background-color: transparent;
}

.WebToolBar.WebTlb_Standalone ul.WebBarRoot>li>div>a {
    text-shadow: none;
    padding: 7px 4px 0px 0px;
}

.WebToolBar.WebTlb_Standalone,
.WebToolBar.WebTlb_Standalone li,
.WebToolBar.WebTlb_Standalone>div.WebCon_Inner>div {
    height: 38px;
    /*jvh-fontsize 37px; */
}

.WebToolBar.WebTlb_Standalone ul>li>div {
    border: none;
    padding: 3px 3px;
}

/*
    Google chrome formats toolbar labels to low on middle.
    */

.df-webkit .WebToolBar ul.WebBarRoot>li>div>a {
    vertical-align: top;
}

.WebToolBar ul>li>div>a {
    vertical-align: middle;
    margin-left: 4px;
}

.WebCmd_ToolWrap .WebToolBar ul>li>div>a {
    padding: 5px 0 0;
    vertical-align: top;
}

.WebToolBar ul>li>div>a {
    display: inline-block;
}

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

.WebToolBar ul>li.Web_Enabled:hover {}

.WebToolBar ul>li.Web_Enabled:active {
    background-color: var(--df-MainDark);
    /*padding-bottom: 4px;*/
}

/*
    The first item in a new 'group'.
    */

.WebToolBar ul.WebBarRoot>li.WebItm_BgnGroup:before {
    content: '';
    width: 1px;
    margin-left: -2px;
    margin-top: 11px;
    height: 25px;
    background-color: var(--df-MainRegular);
    float: left;
}

.WebToolBar ul.WebBarRoot>li.WebItm_BgnGroup {
    padding-left: 2px;
}

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

.WebMenuList.WebControl>.WebCon_Inner {
    background: var(--df-Grayscale8);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.WebMenuList .WebML_Title {
    height: 45px;
}

.WebMenuList .WebML_Caption {
    color: var(--df-MainLight);
    font-size: 120%;
    text-transform: uppercase;
    /*font-weight: 600;*/
    padding: 10px 15px;
}

.WebMenuList li {
    /* height: 42px; */
}

.WebMenuList li:hover,
.WebMenuList li:focus,
.WebMenuList li:active {
    background: var(--df-Grayscale7);
}

.WebMenuList li:first-child {}

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

.WebMenuList li.WebML_Item.Web_Enabled:hover,
.WebMenuList li.WebML_Item.WebML_Back:hover {
    background-color: var(--df-Grayscale7);
}

.WebMenuList li.WebML_Item.Web_Enabled:hover a,
.WebMenuList li.WebML_Item.WebML_Back:hover a {
    color: var(--df-Grayscale1);
}

.WebMenuList li a {
    margin-left: 5px;
    margin-top: 1px;
    color: var(--df-Grayscale1);
}

.WebMenuList li.Web_Disabled a {
    color: var(--df-Grayscale4);
}

.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(163, 163, 163, 0.7);
    font-size: 70%;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(194, 194, 194, 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;
}

/* Dark List Menu Style */

.WebMenuList.Dark .WebML_Caption,
.WebMenuList.Dark .WebMenuItem,
.WebMenuList.Dark li a,
.WebMenuList.Dark .WebML_Back:before,
.WebMenuList.Dark li.WebML_Item.WebML_Back:hover a,
.WebMenuList.Dark li.WebItm_HasSub:before {
    color: var(--df-Grayscale1);
}

.WebMenuList.Dark .WebML_Title {
    height: 50px;
}

.WebMenuList.Dark.WebMenuList.WebControl>.WebCon_Inner {
    background: inherit;
    border: none;
}

.WebMenuList.Dark .WebMenuItem:hover,
.WebMenuList.Dark .WebMenuItem:focus,
.WebMenuList.Dark .WebMenuItem:active {
    background: var(--df-Grayscale7);
}

.WebMenuList.Dark li.WebML_Item.WebML_Back:hover {
    background-color: var(--df-Grayscale7);
}

/* - - - - - - WebWindow - - - - - - */

.WebWindow {
    background-color: transparent;
    box-shadow: 0 14px 34px 0 rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.WebWindow .WebContainer {
    background-color: var(--df-Grayscale8);
}

.WebWindow .WebWin_header {
    background: transparent;
    /*padding: 6px 10px 0 6px;*/
    border-radius: 2px 2px 0 0;
}

.WebWindow .WebWin_header .WebWin_header {
    padding: 0;
}

.WebWindow .WebWin_header_l {
    /*padding-left: 3px;*/
}

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

.WebWindow .WebWin_header_c {
    /*min-height: 40px;*/
    background-color: transparent;
}

.WebWindow .WebWin_title {
    padding: 23px 15px 5px 26px;
    color: var(--df-Grayscale8);
    /*font-size: 110%;*/
    /*font-weight: 600;*/
    font-size: 20px;
    color: var(--df-Grayscale1);
}

.WebWindow .WebWin_controls {}

.WebWindow .WebWin_main_l {
    padding-left: 2px;
    background-color: var(--df-Grayscale8);
}

.WebWindow .WebWin_main_r {
    padding-right: 2px;
    background-color: var(--df-Grayscale8);
    /*padding: 18px 10px 0 15px;*/
}

.WebWindow .WebWin_main_c {
    background: var(--df-Grayscale8);
    padding: 10px 20px 10px 20px;
    border-radius: 0 0 2px 2px;
}

.WebWindow .WebWin_bottom_l {
    height: 0px;
    padding-left: 2px;
    background-color: var(--df-Grayscale8);
}

.WebWindow .WebWin_bottom_r {
    height: 1px;
    padding-right: 2px;
}

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

.WebWindow .WebWin_bottom_c {
    height: 2px;
}

.WebWindow .WebWin_top_l {
    height: 2px;
    padding-left: 1px;
}

.WebWindow .WebWin_top_r {
    height: 2px;
    padding-right: 2px;
}

.WebWindow .WebWin_top_c {
    height: 2px;
}

.WebWindow_Mask {
    background-color: var(--df-Grayscale1);
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.WebWin_ghost {
    filter: alpha(opacity=80);
    opacity: 0.8;
}

/* - - - - - Message Box Dialogs - - - - - - */

.WebWindow.WebMsgBox .WebWin_top_l,
.WebWindow.WebMsgBox .WebWin_top_r,
.WebWindow.WebMsgBox .WebWin_header_r,
.WebWindow.WebMsgBox .WebWin_main_l,
.WebWindow.WebMsgBox .WebWin_main_r,
.WebWindow.WebMsgBox .WebWin_bottom_l,
.WebWindow.WebMsgBox .WebWin_bottom_r {
    border-radius: 2px;
}

.WebWindow.WebMsgBox .WebWin_header_c {
    min-height: 30px;
    background-color: var(--df-Grayscale8);
}

.WebWindow.WebMsgBox .WebWin_title {
    color: var(--df-Grayscale1);
    font-family: var(--df-TltFont);
    font-size: var(--df-TltSize);
    font-weight: 800;
    padding: 15px 15px 5px 10px;
}

.WebWindow.WebMsgBoxInfo .WebWin_title,
.WebWindow.WebMsgBoxConfirm .WebWin_title,
.WebWindow.WebMsgBoxError .WebWin_title,
.WebWindow.WebMsgBoxWarning .WebWin_title {
    padding: 25px 15px 5px 28px;
}

.WebWindow.WebMsgBox .WebWin_controls .WebWin_close {
    /* disable the close button */
    display: none;
}

.WebWindow.WebWin_Resizable.WebMsgBox .WebWin_resizer {
    /* hide the resizer */
    display: none;
}

/* Message Box Bottom Border Styles */

.WebWindow.WebMsgBox .WebWin_bottom_c,
.WebWindow.WebMsgBox .WebWin_bottom_l,
.WebWindow.WebMsgBox .WebWin_bottom_r {
    height: 4px;
    /*background-color: inherit;*/
    /*display: none;*/
}

.WebWindow.WebMsgBox .WebWin_bottom_l {
}

.WebWindow.WebMsgBoxInfo .WebWin_bottom_l,
.WebWindow.WebMsgBoxConfirm .WebWin_bottom_l {
}

.WebWindow.WebMsgBoxWarning .WebWin_bottom_l {
    background-color: var(--df-WarningRegular);
}

.WebWindow.WebMsgBoxError .WebWin_bottom_l {
    background-color: var(--df-ErrorRegular);
}

/* Message Box Button Styles */

.WebWindow.WebMsgBox .WebButton>.WebCon_Inner {
    margin: 0;
}

.WebWindow.WebMsgBox .WebContainer .WebCon_Content {
    padding: 0px 10px;
}

.WebWindow.WebMsgBoxInfo .WebContainer .WebCon_Content,
.WebWindow.WebMsgBoxConfirm .WebContainer .WebCon_Content,
.WebWindow.WebMsgBoxError .WebContainer .WebCon_Content,
.WebWindow.WebMsgBoxWarning .WebContainer .WebCon_Content {
    padding: 0px 3px;
}

.WebWindow.WebMsgBoxInfo .WebContainer.WebMsgBoxTwoButtons .WebCon_Content,
.WebWindow.WebMsgBoxConfirm .WebContainer.WebMsgBoxTwoButtons .WebCon_Content,
.WebWindow.WebMsgBoxError .WebContainer.WebMsgBoxTwoButtons .WebCon_Content,
.WebWindow.WebMsgBoxWarning .WebContainer.WebMsgBoxTwoButtons .WebCon_Content {
    padding: 0;
}

.WebWindow.WebMsgBoxInfo .WebContainer.WebMsgBoxButtons .WebCon_Content,
.WebWindow.WebMsgBoxConfirm .WebContainer.WebMsgBoxButtons .WebCon_Content,
.WebWindow.WebMsgBoxError .WebContainer.WebMsgBoxButtons .WebCon_Content,
.WebWindow.WebMsgBoxWarning .WebContainer.WebMsgBoxButtons .WebCon_Content {
    padding: 0 15px;
}

/* Message Box Button Border Styles */

.df-mobile .WebWindow.WebMsgBox .WebButton button {
    border-top: 1px solid var(--df-Grayscale5);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.df-mobile .WebWindow.WebMsgBox .WebMsgBoxTwoButtons .WebButton:first-child button {
    border-right: 1px solid var(--df-Grayscale5);
}

.WebWindow.WebMsgBox .WebPanel.WebMsgBoxOneBtn .WebCon_Content {
    padding: 0;
    margin: 0;
}

/* Message Box Button Color Styles */

.WebWindow.WebMsgBoxWarning .WebButton button {
    color: var(--df-WarningRegular);
}
.WebWindow.WebMsgBoxWarning .WebButton.Web_Enabled button:focus,
.WebWindow.WebMsgBoxWarning .WebButton.Web_Enabled button:hover,
.WebWindow.WebMsgBoxWarning .WebButton.Web_Enabled button:active {
    background: transparent;
    color: var(--df-WarningDark);
}

.WebWindow.WebMsgBoxError .WebButton button {
    color: var(--df-ErrorRegular);
}
.WebWindow.WebMsgBoxError .WebButton.Web_Enabled button:focus,
.WebWindow.WebMsgBoxError .WebButton.Web_Enabled button:hover,
.WebWindow.WebMsgBoxError .WebButton.Web_Enabled button:active {
    background: transparent;
    color: var(--df-ErrorDark);
}

.WebWindow.WebMsgBoxWarning .WebButton button,
.WebWindow.WebMsgBoxError .WebButton button,
.WebWindow.WebMsgBoxInfo .WebButton button{
    text-align: right;
}

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

.WebDP {
    min-width: 232px;
}

/* Header */

.WebDP .WebDP_Head {
    background: var(--df-Grayscale8);
    color: var(--df-Grayscale1);
    padding: 6px;
}

.WebDP .WebDP_MonthMnu,
.WebDP .WebDP_YearMnu {
    background: none repeat scroll 0 0 var(--df-Grayscale8);
    box-shadow: 0 4px 37px 0 rgba(0, 0, 0, 0.13);
    border-top: none;
    color: var(--df-Grayscale1);
    top: 39px;
    
}

.WebDP .WebDP_MonthMnu {
    left: 2px;
    padding: 9px 3px;
    border-radius: 3px;
}

.WebDP .WebDP_YearMnu {
    left: 24px;
}

.WebDP .WebDP_MonthMnu li,
.WebDP .WebDP_YearMnu li {
    padding: 3px 10px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.WebDP.Web_Enabled .WebDP_MonthMnu li:hover,
.WebDP.Web_Enabled .WebDP_YearMnu li:hover {
    background-color: var(--df-Grayscale7);
    color: var(--df-Grayscale1);
}

.WebDP .WebDP_MonthMnu li:active,
.WebDP .WebDP_YearMnu li:active {
    background-color: var(--df-Grayscale7);
    color: var(--df-Grayscale1);
}

.WebDP li.WebDP_Current,
.WebDP.Web_Enabled li.WebDP_Current:hover {
    color: var(--df-MainLight);
    font-weight: 700;
}

.WebDP .WebDP_Up,
.WebDP .WebDP_Down {
    height: 14px;
}

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

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

.WebDP .WebDP_YearMnu .WebDP_Up.WebDP_UpDown,
.WebDP .WebDP_YearMnu .WebDP_Down.WebDP_DownDown {
    background: var(--df-MainDark);
}

/*
    Body
    */

.WebDP .WebDP_Body {
    background-color: var(--df-Grayscale8);
    font-size: 80%;
}

.WebDP .WebDP_Body table {
    background-color: var(--df-Grayscale8);
}

.WebDP .WebDP_Body td {
    padding: 10px 3px 8px 1px;
    width: 30px;
    text-align: center;
}

.WebDP .WebDP_Body th {
    padding: 10px 5px;
    font-size: 120%;
    font-weight: 500;
}

.WebDP .WebDP_Body .WebDP_Day {
    color: var(--df-Grayscale1);
    border-bottom: 1px solid transparent;
}

.WebDP .WebDP_Body .WebDP_BodyHead .WebDP_WeekNr {
    color: var(--df-Grayscale8);
}

.WebDP .WebDP_Body .WebDP_WeekNr {
    color: var(--df-Grayscale4);
    font-size: 90%;
    padding: 0 4px 0 0;
    text-align: center;
    vertical-align: middle;
}

.WebDP .WebDP_Body .WebDP_Weekend {}

.WebDP .WebDP_Body .WebDP_Overflow {
    color: var(--df-Grayscale5);
    background: none;
}

.WebDP .WebDP_Body .WebDP_Today {
    background: var(--df-Grayscale4);
    color: var(--df-Grayscale8);
    border-radius: 50%;
}

.WebDP .WebDP_Body .WebDP_Selected {
    background: var(--df-MainLight);
    color: var(--df-Grayscale8);
    height: 16px;
    border-radius: 50%;
}

.WebDP .WebDP_Body .WebDP_Selected:before,
.WebDP .WebDP_Body .WebDP_Day:hover:before {
    content: '';
    position: absolute;
    display: block;
    height: 23px;
    margin-left: 0px;
    margin-top: -7px;
    width: 25px;
}

.WebDP.Web_Enabled .WebDP_Body .WebDP_Day:hover {
    border-bottom: 1px solid var(--df-MainLight);
}

.WebDP.Web_Enabled .WebDP_Body .WebDP_Day:active {
    background: var(--df-MainLight);
    color: var(--df-Grayscale8);
}

.WebDP.WebCon_Focus .WebDP_Body .WebDP_Selected {
    color: var(--df-Grayscale8);
}

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

.WebDP .WebDP_Body>div {
    width: 100%;
    margin-left: 0%;
}

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

.WebDP .WebDP_HideNext table {
    float: right;
}

.WebDP .WebDP_Body .WebDP_HidePrev {
    margin-left: 100%;
    width: 0%;
    display: block;
}

.WebDP .WebDP_Body .WebDP_HideNext {
    width: 0%;
    display: block;
}

/*
    Footer
    */

.WebDP .WebDP_Footer {
    background: var(--df-Grayscale8);
    color: var(--df-Grayscale1);
    text-align: center;
}

.WebDP .WebDP_BtnToday {
    padding: 7px 0;
    width: 100%;
}

.WebDP.Web_Enabled .WebDP_BtnToday:hover {
}

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

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

.WebDateForm_Picker {
    opacity: 0;
    -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;
    border-top: none;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.23);
}

.WebDateForm_Picker.WebDF_WrapVisible {
    opacity: 1;
}

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

.WebTreeView .WebTree_Body {
    padding: 5px 0 0;
}

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

.WebTreeView .WebTree_Loading {
    background: var(--df-Grayscale8) url('WebTreeView-LoadingBig.gif') no-repeat 10px 10px;
}

.WebTreeView .WebTree_Text {
    margin: 0;
    padding-bottom: 0px;
    padding-left: 5px;
    vertical-align: middle;
    color: var(--df-Grayscale2);
}

.WebTreeView .WebTree_Selected .WebTree_Text {
    color: var(--df-MainDark);
    text-decoration: underline;
    background: none;
    /*font-weight: 600;*/
}

.WebTreeView.WebCon_Focus .WebTree_Selected .WebTree_Text {
    background: none;
}

/*
    Expand / collapse animation
*/

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

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

.WebTreeView .WebTree_Item:before{
    position: absolute;
}

/*
    Icons
*/

.WebTreeView .WebTree_HasIcon {
    background-position: 3px 4px;
}

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

/* - - - - - - - - - WebImage - - - - - - - - - - */

.WebImage .WebImg_Box {
    background-color: var(--df-Grayscale7);
    border: 1px solid var(--df-Grayscale4);
}

/* - - - - - - - - - WebHtmlBox - - - - - - - - - - */

.WebHtmlBox .WebHtml_Box {
    border: 1px solid var(--df-Grayscale4);
    padding: 10px;
}

/* - - - - - - - - - WebDrawing - - - - - - - - - - */
.WebDrawing_Box{
    border: 1px solid var(--df-Grayscale4);
}

/* - - - - - - - - - WebSpacer - - - - - - - - - - */

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

.WebSpacer .WebSpacer_Spacer {
    height: 52px;
}

/* - - - - - - - - - WebHorizontalLine - - - - - - - - - - */

.WebHorizontalLine>div.WebCon_Inner>div {
    padding: 19px 0px 0px;
}

.WebHorizontalLine hr {
    height: 1px;
    background: var(--df-Grayscale5);
    border: none;
    margin: 0px;
}

/* - - - - - - - - - ShowMessageBox - - - - - - - - - */

.WebMsgBoxConfirm .WebLabel_content,
.WebMsgBoxError .WebLabel_content,
.WebMsgBoxInfo .WebLabel_content,
.WebMsgBoxWarning .WebLabel_content {
    /*margin-left: 6px;*/
    /* min-height: 70px; */
    color: var(--df-Grayscale2);
    /* margin-bottom: 20px; */
}

.WebWindow.WebMsgBoxProgress .WebLabel_content {
    margin: 30px 50px 0px 70px;
    min-height: 60px;
    overflow: visible;
}

.WebWindow.WebMsgBoxProgress .WebWin_header_c {
    height: 0;
    background-color: var(--df-Grayscale8);
}

.WebMsgBoxProgress .WebLabel_content:before {
    width: 52px;
    height: 52px;
    display: block;
    background: transparent url('LoadingBig.gif') no-repeat center center;
    position: absolute;
    margin: -15px 0px 0 -60px;
    content: '';
}

.WebWindow.WebMsgBoxProgress .WebContainer .WebCon_Content {
    padding: 0px;
}

.Warning .WebLabel_content {
    background: transparent;
    color: var(--df-ErrorRegular);
    line-height: 17px;
    padding: 0;
    margin: 0;
}

.Warning>.WebCon_Inner {
    min-height: 0px;
}

.LoginWarning .WebLabel_content {
    color: var(--df-ErrorRegular);
    line-height: 17px;
}

/* - - - - - - - - - WebInfoBalloon - - - - - - - - - - */

.WebInfoBalloon {
    background-color: var(--df-Grayscale7);
    color: var(--df-Grayscale1);
    text-decoration: none;
    padding: 10px;
    margin-top: 10px;
    line-height: 1.3em;
    font-weight: normal;
    /*font-family: 'Lato';*/
    font-size: 90%;
    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: 17px;
}

.WebInfoBalloon:before {
    margin-left: -1px;
    left: 0px;
    top: -17px;
}

.WebInfoBalloon_Top:before {
    border-width: 17px 23px 0 0;
    top: auto;
    bottom: -17px;
}

.WebInfoBalloon:after {
    border-color: var(--df-Grayscale7) transparent;
    border-style: solid;
    border-width: 0 10px 10px 8px;
    margin: 0;
    left: 10px;
    top: -8px;
}

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

/* - - - - - - - - - WebErrorTooltip - - - - - - - - - */

.WebErrorTooltip {
    background-color: var(--df-ErrorRegular);
    color: var(--df-Grayscale8);
    padding: 10px;
}

.WebErrorTooltip:after {
    border-color: var(--df-ErrorRegular) transparent;
}

/* - - - - - - - - - WebIFrame - - - - - - - - - */

.WebIFrame .WebIFrm_Box {
    border: 1px solid var(--df-Grayscale4);
}

/* - - - - - - - - - WebSlider - - - - - - - - - - */

.WebSlider .WebSlider_Wrapper {
    outline: none;
}

/* Bar */

.WebSlider .WebSlider_Horizontal .WebSlider_BarWrapper {
    height: 20px;
    padding-top: 6px;
}

.WebSlider .WebSlider_Vertical .WebSlider_BarWrapper {
    width: 20px;
    padding-left: 6px;
}

.WebSlider .WebSlider_Vertical {}

.WebSlider .WebSlider_Bar .WebSlider_InnerBar {
    background-color: var(--df-Grayscale5);
}

.WebSlider.Web_Disabled .WebSlider_Bar .WebSlider_InnerBar {
    background-color: var(--df-Grayscale5);
}

.WebSlider .WebSlider_Horizontal .WebSlider_Bar {
    height: 3px;
    padding: 0px 8px;
}

.WebSlider .WebSlider_Vertical .WebSlider_Bar {
    width: 3px;
    padding: 8px 0px;
}

.WebSlider .WebSlider_ShowRange,
.WebSlider .WebSlider_ShowRange:before {
    background: var(--df-MainLight);
}

/* .WebSlider .WebSlider_Horizontal.WebSlider_NoRange .WebSlider_ShowRange:before{
    content: '';
    position: absolute;
    margin-left: -5px;
    top: 0px;
    height: 3px;
    width: 5px;
    left: 0px;
    }
    .WebSlider .WebSlider_Vertical.WebSlider_NoRange .WebSlider_ShowRange:before{
    content: '';
    position: absolute;
    margin-top: -5px;
    left: 0px;
    height: 5px;
    width: 3px;
    }
    */

/* Slider */

.WebSlider .WebSlider_Horizontal .WebSlider_SliderWrapper {
    height: 15px
}

.WebSlider .WebSlider_Vertical .WebSlider_SliderWrapper {
    width: 15px;
}

.WebSlider .WebSlider_Slider {
    background: var(--df-MainLight);
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

.WebSlider .WebSlider_Horizontal .WebSlider_Slider {}

.WebSlider .WebSlider_Vertical .WebSlider_Slider {}

.WebSlider.WebCon_Focus .WebSlider_Horizontal .WebSlider_Slider,
.WebSlider.Web_Enabled .WebSlider_Horizontal .WebSlider_Slider:hover,
.WebSlider.WebCon_Focus .WebSlider_Vertical .WebSlider_Slider,
.WebSlider.Web_Enabled .WebSlider_Vertical .WebSlider_Slider:hover {
    background: var(--df-MainDark);
}

.WebSlider.Web_Disabled .WebSlider_Horizontal .WebSlider_Slider,
.WebSlider.Web_Disabled .WebSlider_Vertical .WebSlider_Slider {
    background: var(--df-Grayscale2);
}

/* Labels */

.WebSlider .WebSlider_Horizontal .WebSlider_Labels {
    left: -1px;
    top: -20px;
}

.WebSlider .WebSlider_Vertical .WebSlider_Labels {
    left: -14px;
    top: 0px;
}

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

.WebSlider .WebSlider_Horizontal .WebSlider_LabelWrapper {
    height: 20px;
}

.WebSlider .WebSlider_Vertical .WebSlider_LabelMarkerWrapper {
    width: 10px;
}

.WebSlider .WebSlider_Horizontal .WebSlider_LabelMarker {
    border-left: 2px solid var(--df-Grayscale1);
    height: 3px;
}

.WebSlider .WebSlider_Vertical .WebSlider_LabelMarker {
    border-top: 2px solid var(--df-Grayscale1);
    width: 3px;
}

.WebSlider.Web_Disabled .WebSlider_Horizontal .WebSlider_LabelMarker {
    border-left: 1px solid var(--df-Grayscale4);
}

.WebSlider.Web_Disabled .WebSlider_Vertical .WebSlider_LabelMarker {
    border-top: 1px solid var(--df-Grayscale4);
}

.WebSlider .WebSlider_Horizontal .WebSlider_LabelText {}

.WebSlider .WebSlider_Vertical .WebSlider_LabelText {
    margin-left: 4px;
}

.WebSlider.Web_Disabled .WebSlider_LabelText {
    color: var(--df-Grayscale3);
}

/* - - - - - - WebGroup - - - - - - */

.WebGroup.WebGrp_HasBorder > .WebCon_Inner{
    margin: 10px 5px 10px 5px;
}

.WebGroup.WebGrp_HasBorder>.WebCon_Inner>div>.WebContainer {
    border: none;
    margin: 0px;
}

.WebGroup.WebGrp_HasBorder>div.WebCon_Inner>div>div.WebContainer>div.WebCon_Sizer>.WebCon_Content {
    padding: 15px;
}

.WebGroup.WebGrp_HasCaption>div.WebCon_Inner>div>div.WebContainer>div.WebCon_Sizer>.WebCon_Content {
    /*padding: 10px;*/
    /*margin-top: 21px;*/
    padding-top: 43px;
    /*margin: 10px 0;*/
}

.WebGroup.WebGrp_HasBorder > .WebCon_Inner > div > .WebContainer{
    background-color: var(--df-Grayscale8);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
}

.WebGroup.WebGrp_HasCaption.WebGrp_HasBorder>.WebCon_Inner>div>.WebGrp_Caption {
    background-color: rgba(0, 0, 0, 0);
}
.WebGroup.WebGrp_HasCaption>.WebCon_Inner>div>.WebGrp_Caption {
    
    color: var(--df-Grayscale1);
    font-family: var(--df-TltFont);
    font-weight: bold;
    font-size: var(--df-TltSize);
    top: 13px;
    left: 13px;
    padding: 3px 6px 0px;
    margin-bottom: 10px;
}

.WebGroup>.WebCon_Inner {
}

.WebGroup.WebGrp_HasCaption>.WebCon_Inner {
    min-height: 54px;
}

.WebGroup>div>div>.WebGrp_ExpandBtn {
    top: 14px;
    right: 18px;
    width: 14px;
    height: 14px;
    background-color: inherit;
    border-radius: 50%;
    transition: background 0.5s, color 0.5s;
}

.WebGroup.Web_Enabled>div>div>.WebGrp_ExpandBtn:hover {
    color: var(--df-MainLight);
}

.WebGroup.Web_Disabled>div>div>.WebGrp_ExpandBtn {
    color: var(--df-Grayscale4);
}

.WebGroup.WebGrp_Expanded>div>div>.WebGrp_ExpandBtn:before {
    content: "\"";
    position: absolute;
    top: -1px;
    left: -6px;
    font-size: 23px;
    line-height: 16px;
}

.WebGroup.WebGrp_Collapsed>div>div>.WebGrp_ExpandBtn:before {
    content: "!";
    position: absolute;
    top: 2px;
    left: -6px;
    font-size: 23px;
    line-height: 16px;
    /*font-weight: bold;*/
}

/* - - - - - - WebProgressBar - - - - - - */
.WebProgressBar .WebPB_Wrp {
    background: var(--df-MainLight3);
    height: 5px;
    color: var(--df-Grayscale2);
    font-size: 80%;
    border-radius: 2px;
}
.df-ModeTablet .WebProgressBar .WebPB_Wrp.WebPB_ShowPercentage {
    height: 40px;
}

.WebProgressBar .WebPB_Wrp.WebPB_ShowPercentage{
    height: 28px;
}

.WebProgressBar .WebPB_Progress,
.WebFileFrm .WebFile_ProgressBar {
    background-color: var(--df-MainLight);
}

.WebProgressBar .WebPB_Percentage,
.WebFile_ProgressLabel {
    padding: 6px 0 0;
}

.df-ModeTablet .WebProgressBar .WebPB_Percentage,
.df-ModeTablet .WebFile_ProgressLabel {
    padding: 10px 0 0;
}

/* - - - - - - WebDropZone - - - - - - */

.WebDropZone {
    border: 4px dashed var(--df-MainDark);
}

.WebDropZone:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: none repeat scroll 0 0 rgba(0, 114, 198, 0.52);
}

.WebDropZone>div {
    color: var(--df-Grayscale1);
    font-size: 180%;
    /*font-family: 'Lato';*/
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: 0px 1px 1px var(--df-Grayscale8);
    margin-top: -8px;
}

/** Drag & Drop **/

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

.WebCon_DropZone {
    outline: var(--df-WarningRegular) 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: var(--df-Highlight);
}
  
.WebList_DropPlaceHolder {
    height: 50px;
    width: 100%;    
}

/* - - - - - - WebSuggestions - - - - - - */

.WebSuggestions {
    border: 1px solid var(--df-Grayscale4);
    border-top: none;
    background-color: var(--df-Grayscale8);
    border-radius: 0px;
    padding: 0px;
    -webkit-box-shadow: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /*font-family: 'Lato';*/
    font-size: 90%;
}

.WebSuggestions .WebSug_Suggestion {
    line-height: 20px;
}

.WebSuggestions .WebSug_Suggestion:hover,
.WebSuggestions .WebSug_Suggestion:focus {
    background: var(--df-Grayscale7);
    color: var(--df-Grayscale1);
}

.WebSuggestions .WebSug_Suggestion td {
    padding: 3px 5px;
}

.WebSuggestions .WebSug_Suggestion b {
    /*font-weight: 600;*/
}

.WebSuggestions .WebSug_Selected,
.WebSuggestions .WebSug_Selected:hover,
.WebSuggestions .WebSug_Selected:focus {
    background: none repeat scroll 0 0 var(--df-WarningRegular);
    color: var(--df-Grayscale8);
}

/* - - - - - - WebFileUploadForm - - - - - - */

.WebFileFrm div.WebFile_Btn {
    width: 24px;
    height: 24px;
}

.WebFileFrm.Web_Disabled div.WebFile_Btn {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.WebFileFrm .WebFrm_Wrapper {
    padding: 2px;
    height: 30px;
}

.WebFileFrm .WebFile_Progress {
    height: 23px;
}

.WebFileFrm .WebFile_ProgressLabel {
    color: var(--df-Grayscale2);
    /*font-family: 'Lato';*/
    font-size: 90%;
    padding: 5px 0px 0px;
}

.WebFileFrm div.WebFile_Details {
    padding: 5px 1px 0px 5px;
}

.WebFileFrm.Web_Disabled div.WebFile_Content {
    color: var(--df-Grayscale1);
    /*font-family: 'Lato';*/
    font-size: 90%;
    font-weight: 400;
}

.WebFileFrm div.WebFile_Content {
    margin-right: 24px;
}

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

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

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

.WebFlPnl.WebFP_FloatLeft {
    transition: visibility 0s linear 0.3s, opacity 0s linear 0.3s, width 0.3s ease-in-out;
}

.WebFlPnl.WebFP_FloatLeft.WebFP_Hidden {
    width: 0px;
}

.WebFlPnl.WebFP_FloatLeft.WebFP_Visible {
    transition-delay: 0s;
}

.WebApp {
    /* Put transition on margin left of webapp so that it squeezes */
    transition: margin-left 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.WebFlPnl.Web_Enabled {
    transition: visibility 0s linear 0.3s, opacity 0.3s ease-in-out;
}

.WebFlPnl.WebFP_Visible {
    transition-delay: 0s;
}

.WebFlPnl .WebContainer {
    background-color: var(--df-Grayscale8);
}

.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 var(--df-Grayscale5);
    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 var(--df-Grayscale8);
    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 var(--df-Grayscale5);
    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 var(--df-Grayscale8);
    margin-top: 0px;
    position: absolute;
    margin-left: -12px;
    bottom: 1px;
}

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

.WebMBPanel > .WebContainer,
.WebFlPnl.Shadow > .WebContainer {
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.23);
}

.WebFlPnl.Dark>.WebContainer {
    background-color:var(--df-Grayscale8);
}

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

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

.WebMenuAnchor {
    height: 40px;
}

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

.WebMenuAnchor a {
    text-decoration: none;
}

.WebMenuButton_Below.WebFlPnl {
    margin-top: 0px;
}

/* ===============================================
    - - - - - - - WebBreadCrumb - - - - - - - - - -
    =============================================== */

.WebBreadcrumb,
.WebBreadcrumb.WebControl > div.WebCon_Inner,
.df-ModeTablet .WebBreadcrumb.WebControl > div.WebCon_Inner {
    margin: 0px 0px 0px 0px;
    min-height: 36px;
}

.WebBreadcrumb .WebCrumbs_Body {
    overflow: hidden;
    outline: none;
    /* stop Chrome painting a focus rectangle on the div when it is clicked */
}

.WebBreadcrumb ul.WebCrumbs {
    border: 1px solid var(--df-Grayscale5);
}

/* - - - - WebBreadcrumb (Drop Down style) - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - 
    basic element structure:
    
    <div>Current View Caption</div>
    <ul>
    <li>
    <div class="WebCrumb_Circle"></div>
    <div class="WebCrumb_Caption">The caption</div>
    </li>
    ...
    </ul>
    */

/* Style the Caption div */

.WebBreadcrumb .WebCrumbs_DropDown {
    min-height: 44px;
}

.WebBreadcrumb .WebCrumbs_DropDown div.WebCrumb_Caption {
    padding: 18px 10px 15px 7px;
}

.WebBreadcrumb .WebCrumbs_DropDown div.WebCrumb_Caption {
    display: inline-block;
    background-color: inherit;
    color: var(--df-Grayscale8);
    outline: none;
    /* stop Chrome painting a focus rectangle on the div when it is selected */
}

/* Caption Text Hover */

.WebBreadcrumb .WebCrumbs_DropDown>div.WebCrumb_DropDownBtn:hover {
    color: var(--df-Grayscale8);
    -webkit-transition: 400ms linear 0s;
    -moz-transition: 400ms linear 0s;
    -o-transition: 400ms linear 0s;
    transition: 400ms linear 0s;
}

/* The Caption Arrow */

.WebBreadcrumb .WebCrumbs_DropDown>div.WebCrumb_Caption {
    padding-right: 15px;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    font-size: 115%;
}

.WebBreadcrumb .WebCrumbs_DropDown>div.WebCrumb_DropDownBtn:after {
    content: ' ';
    position: absolute;
    border-top-color: var(--df-Grayscale8);
    top: 27px;
    right: 0px;
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-top-color: var(--df-Grayscale8);
}

/* Style the drop down list wrapper */

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs {
    max-width: 246px;
    background-color: var(--df-Grayscale8);
    border: 1px solid var(--df-Grayscale5);
    margin-top: -30px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease-in-out;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs.WebCrumbs_Expanded {
    transition-delay: 0s;
    opacity: 1.0;
}


/* Style the Drop Down List Items */

.WebBreadcrumb.Web_Enabled .WebCrumbs_DropDown ul.WebCrumbs li {
    cursor: pointer;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li {
    height: 37px;
    line-height: 13px;
    font-weight: 400;
    padding: 0px 7px;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li:hover {}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li.WebCurrentCrumb {
    /*font-weight: 600;*/
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li.WebCurrentCrumb:hover {
    background-color: inherit;
    cursor: default;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li div,
.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li:hover div {
    color: var(--df-Grayscale1);
    background-color: transparent;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li div.WebCrumb_Caption {
    margin-left: 15px;
    margin-top: 1px;
    padding-top: 9px;
    display: block;
    line-height: 15px;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li.WebCurrentCrumb div {
    color: var(--df-MainRegular);
    cursor: default;
}

/* List Item Circles */

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li div:before {
    content: ' ';
    position: absolute;
    background: transparent;
    height: 34px;
    border-left: solid 3px var(--df-MainLight2);
    left: 14px;
    margin-top: 8px;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li div:after {
    content: ' ';
    position: absolute;
    background: var(--df-Grayscale8);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: solid 3px var(--df-MainLight2);
    left: 9px;
    margin-top: 2px;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li.WebCurrentCrumb div:before {
    border-left: none;
}

.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li.WebCurrentCrumb div:after {
    content: ' ';
    position: absolute;
    background: var(--df-MainLight);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: solid 2px var(--df-MainLight);
    left: 9px;
    margin-top: 0px;
}

/* - - - - WebBreadcrumb (Horizontal style)- - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - 
    basic element structure:
    
    <ul>
    <li>
    <div class="WebCrumb_Arrow>
    <div class="WebCrumb_Caption">The Caption</div>
    </div>
    </li>
    ...
    </ul>
    */

.WebBreadcrumb .WebCrumbs_Horiz.WebCrumbs_Hide {
    display: none;
}

.WebBreadcrumb .WebCrumbs_Horiz {
    height: 36px;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs {
    background-color: var(--df-MainRegular);
    border: none;
    height: 36px;
}

/*
    Basic Box-Sizing and styling is done here.
    */

.WebBreadcrumb.Web_Enabled .WebCrumbs_Horiz ul.WebCrumbs li {
    cursor: pointer;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li {
    display: table-cell;
    /* list items flow left to right in a table layout */
    white-space: nowrap;
    height: 34px;
    box-sizing: border-box;
    background-color: var(--df-MainMedium);
    font-size: 90%;
    line-height: 16px;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li.WebCurrentCrumb {
    cursor: default;
    background-color: transparent;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li div {
    height: 33px;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li div.WebCrumb_Caption {
    padding: 10px 10px 0px 10px;
    height: 26px;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li div.WebCrumb_Caption:first-child {
    padding-left: 15px;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li div {
    background-color: var(--df-MainMedium);
    color: var(--df-Grayscale8);
    position: relative;
    text-decoration: none;
    outline: none;
    /* stop Chrome painting a focus rectangle on the div when it is clicked */
}

/*
    Arrow is formed here: 
    The arrow head is done by using the border trick to create a triangular shape and we put two on top 
    of each other creating the visual effect of the border. This is done by inserting pseudo elements.
    */

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li>div.WebCrumb_Arrow {
    margin-right: 14px;
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li>div.WebCrumb_Arrow:before {
    content: '';
    position: absolute;
    right: -11px;
    top: 0px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 12px solid var(--df-MainDark);
}

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li>div.WebCrumb_Arrow:after {
    content: '';
    position: absolute;
    right: -10px;
    top: 1px;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 11px solid var(--df-MainMedium);
}

/* 
    To color the last item different we need to set the background color for the second last li as well. 
    We use nth-last-child here to select it, because not all browsers support it we use it to select the 
    last child as well so that on old browsers it will just show the origional color.
    */

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li:nth-last-child(2),
.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li:nth-last-child(1) div {
    color: var(--df-Grayscale8);
    background-color: var(--df-MainRegular);
    text-shadow: none;
}

/* Here is where we control hover text effects in the inner webcrumb caption <div> */

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li.WebCrumb_Item div.WebCrumb_Caption:hover {
    color: var(--df-MainLight3);
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}

/* Here is where we control text overflow in the inner webcrumb caption <div> */

.WebBreadcrumb .WebCrumb_Caption {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
}

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

.WebColorPicker .WebCP_Main {
    background-color: var(--df-Grayscale8);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
}

.WebColorPicker.Web_Enabled.WebCon_Focus .WebCP_Main {
    border: 1px solid var(--df-Grayscale5);
}

.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: 60px;
    height: 29px;
    margin-top: -3px;
    margin-left: -2px;
    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 var(--df-Grayscale6);
}

.WebColorPicker.WebColorPicker_Form .WebCon_Inner {
    margin: 0px 0px;
}

/* FONT FACE ICONS */

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

/* Declare the Icon Font to be used for various selectors */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* material-icons Font */

.WebButtonIcon:before,
.Tile .Tile_Icon:before,
.RecentList ul>li>div:before,
.WebTreeView .WebTree_Item:before,
.WebTreeView .WebTree_Entry:before,
.WebTreeView .WebTree_NoIcon.WebTree_Folder:before,
.WebTreeView .WebTree_NoIcon.WebTree_Icon: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,
.WebMsgBoxConfirm .WebLabel_content:before,
.WebMsgBoxInfo .WebLabel_content:before,
.WebMsgBoxWarning .WebLabel_content:before,
.WebMsgBoxError .WebLabel_content:before,
.WebDP .WebDP_Up:before,
.WebDP .WebDP_YearMnu .WebDP_Up.WebDP_UpDown:before,
.WebDP .WebDP_Down:before,
.WebDP .WebDP_YearMnu .WebDP_Down.WebDP_DownDown:before,
.WebDP .WebDP_BtnPrev:before,
.WebDP .WebDP_BtnNext:before,
.WebDP .WebDP_BtnMonth:after,
.WebDP .WebDP_BtnYear:after,
.WebWindow .WebWin_controls .WebWin_close:before,
.WebDateForm .WebFrm_Prompt:before,
.WebFileFrm div.WebFile_Btn:before,
.WebForm .WebFrm_Prompt:before,
.WebMenuList li.WebItm_HasSub:before,
.WebMenuBar ul li ul li.WebItm_HasSub>div:before,
span.WebItm_Icon:before,
.WebTlb_SubItems span.WebItm_Icon:before,
.WebButton.WebMenuButton button:before,
.WebButton button:before,
.WebMenuList .WebML_Back:before,
.WebGroup.WebGrp_Collapsed>div>div>.WebGrp_ExpandBtn:before,
.WebGroup.WebGrp_Expanded>div>div>.WebGrp_ExpandBtn:before,
.WebList_SwipeBtn:before {
    font-family: "material-icons" !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;
}

/* - - - - - - - - - - - - - - - - - */

/* General Icon Font Style Selectors */

/* - - - - - - - - - - - - - - - - - */

/* Menu Items, Menu Buttons, buttons, column buttons, tiles */

.WebMenuItem>div>span.WebItm_Icon:before {
    /* Toolbar Items */
    position: absolute;
    padding: 6px 0 0 5px;
    color: var(--df-MainDark);
    font-size: 16px;
}

.WebToolBar .WebTlb_SubItems span.WebItm_Icon:before {
    /* 3 vertical dots used for Action Dropdown */
    content: "\e014";
    font-size: 16px;
}

.WebButton.WebBack_Icon button:before {
    /* Title bar Back Button */
    content: "\e001";
    color: var(--df-MainDark);
    padding: 11px 0px 8px;
    font-size: 26px;
}

/* The following Font Icon classes can be used with the following controls:
    - WebButton
    - WebColumnButton
    - WebMenuItem
    - Tile (WebHTMLBox) */

.WebIcon_Print:before,
.WebIcon_Print button:before,
button.WebIcon_Print:before,
.WebIcon_Print>div>span.WebItm_Icon:before {
    /* Printer Icon */
    content: "\e009";
}

.WebIcon_Add:before,
.WebIcon_Add button:before,
button.WebIcon_Add:before,
.WebIcon_Add>div>span.WebItm_Icon:before {
    /* Pencil on page icon */
    content: "A";
}

.Tile span.WebItm_Icon:before {
    font-size: 48px;
}

.WebIcon_Info:before,
.WebIcon_Info button:before,
button.WebIcon_Info:before,
.WebIcon_Info>div>span.WebItm_Icon:before {
    /* Info icon */
    content: "M";
}

.WebIcon_Refresh:before,
.WebIcon_Refresh button:before,
button.WebIcon_Refresh:before,
.WebIcon_Refresh>div>span.WebItm_Icon:before {
    /* Info icon */
    content: "\e034";
    /*font-weight: 600 !important;*/
}

.WebIcon_Help:before,
.WebIcon_Help button:before,
button.WebIcon_Help:before,
.WebIcon_Help>div>span.WebItm_Icon:before {
    /* Help icon */
    content: "\e01d";
}

.WebIcon_Hamburger:before,
.WebIcon_Hamburger button:before,
button.WebIcon_Hamburger:before,
.WebIcon_Hamburger>div>span.WebItm_Icon:before {
    content: "P";
    font-size: 18px;
}

.WebIcon_Save:before,
.WebIcon_Save button:before,
button.WebIcon_Save:before,
.WebIcon_Save > div > span.WebItm_Icon:before,
.WebSaveMenuItem:before,
.WebSaveMenuItem button:before,
button.WebSaveMenuItem:before,
.WebSaveMenuItem>div>span.WebItm_Icon:before {
    /* Simple Tick (done) Icon */
    content: "\i";
    /*font-size: 26px;*/
    padding-top: 6px;
}

.WebToolBar:not(.WebActionBar) .WebSaveMenuItem>div>span.WebItm_Icon:before {
    font-size: 24px;
    padding: 2px 0px 0px 2px;
    /*font-weight: bold !important;*/
}

.WebIcon_Delete:before,
.WebIcon_Delete button:before,
button.WebIcon_Delete:before,
.WebIcon_Delete>div>span.WebItm_Icon:before {
    /* Trashcan Icon */
    content: "?";
}

.WebDeleteMenuItem:before,
.WebDeleteMenuItem button:before,
button.WebDeleteMenuItem:before,
.WebDeleteMenuItem>div>span.WebItm_Icon:before {
    /* Trashcan Icon */
    content: "?";
}

.WebIcon_Prompt:before,
.WebIcon_Prompt button:before,
button.WebIcon_Prompt:before,
.WebIcon_Prompt > div > span.WebItm_Icon:before,
.WebPromptMenuItem:before,
.WebPromptMenuItem button:before,
button.WebPromptMenuItem:before,
.WebPromptMenuItem>div>span.WebItm_Icon:before {
    /* Back Leaning Magnifying Glass Action Icon */
    content: "\O";
}

.WebToolBar:not(.WebActionBar) .WebPromptMenuItem>div>span.WebItm_Icon:before {
    font-size: 16px;
    padding: 7px 0 0 5px;
    font-weight: bold !important;
}

.WebIcon_Clear:before,
.WebIcon_Clear button:before,
button.WebIcon_Clear:before,
.WebIcon_Clear > div > span.WebItm_Icon:before,
.WebClearMenuItem:before,
.WebClearMenuItem button:before,
button.WebClearMenuItem:before,
.WebClearMenuItem>div>span.WebItm_Icon:before {
    /* New Document Action Icon */
    content: "^";
}

.WebToolBar:not(.WebActionBar) .WebClearMenuItem>div>span.WebItm_Icon:before {
    content: "^";
}

.WebIcon_ClearAll:before,
.WebIcon_ClearAll button:before,
button.WebIcon_ClearAll:before,
.WebIcon_ClearAll > div > span.WebItm_Icon:before,
.WebClearAllMenuItem:before,
.WebClearAllMenuItem button:before,
button.WebClearAllMenuItem:before,
.WebClearAllMenuItem>div>span.WebItm_Icon:before {
    /* "X" icon */
    content: "F";
}

.WebToolBar:not(.WebActionBar) .WebClearAllMenuItem>div>span.WebItm_Icon:before {
    /*content: "/";*/
    padding: 3px 0px 0px 1px;
    font-size: 24px;
}

.WebIcon_Last:before,
.WebIcon_Last button:before,
button.WebIcon_Last:before,
.WebIcon_Last > div > span.WebItm_Icon:before,
.WebLastMenuItem:before,
.WebLastMenuItem button:before,
button.WebLastMenuItem:before,
.WebLastMenuItem>div>span.WebItm_Icon:before {
    /* Find Last Icon */
    content: "}";
}

.WebToolBar:not(.WebActionBar) .WebLastMenuItem>div>span.WebItm_Icon:before {
    font-size: 18px;
    padding: 5px 0px 0px 5px;
}

.WebIcon_Next:before,
.WebIcon_Next button:before,
button.WebIcon_Next:before,
.WebIcon_Next > div > span.WebItm_Icon:before,
.WebNextMenuItem:before,
.WebNextMenuItem button:before,
button.WebNextMenuItem:before,
.WebNextMenuItem>div>span.WebItm_Icon:before {
    /* Find Next Icon */
    content: "4";
}

.WebToolBar:not(.WebActionBar) .WebNextMenuItem>div>span.WebItm_Icon:before {
    font-size: 29px;
    padding: 0px 0px 0px 0px;
}

.WebIcon_Find:before,
.WebIcon_Find button:before,
button.WebIcon_Find:before,
.WebIcon_Find>div>span.WebItm_Icon:before {
    /* Find icon */
    content: "\O";
}

.WebIcon_FindSalesP:before,
.WebIcon_FindSalesP button:before,
button.WebIcon_FindSalesP:before,
.WebIcon_FindSalesP>div>span.WebItm_Icon:before {
    /* Find icon */
    content: "\e00c";
}

.WebFindMenuItem:before,
.WebFindMenuItem button:before,
button.WebFindMenuItem:before,
.WebFindMenuItem>div>span.WebItm_Icon:before {
    /* Find EQ Icon */
    content: "D";
}

.WebToolBar:not(.WebActionBar) .WebFindMenuItem>div>span.WebItm_Icon:before {
    font-size: 27px;
    padding: 1px 0px 0px 1px;
}

.WebIcon_Previous:before,
.WebIcon_Previous button:before,
button.WebIcon_Previous:before,
.WebIcon_Previous > div > span.WebItm_Icon:before,
.WebPreviousMenuItem:before,
.WebPreviousMenuItem button:before,
button.WebPreviousMenuItem:before,
.WebPreviousMenuItem>div>span.WebItm_Icon:before {
    /* Find Previous Icon */
    content: "o";
}

.WebToolBar:not(.WebActionBar) .WebPreviousMenuItem>div>span.WebItm_Icon:before {
    font-size: 29px;
    padding: 0px 0px 0px 0px;
}

.WebIcon_First:before,
.WebIcon_First button:before,
button.WebIcon_First:before,
.WebIcon_First > div > span.WebItm_Icon:before,
.WebFirstMenuItem:before,
.WebFirstMenuItem button:before,
button.WebFirstMenuItem:before,
.WebFirstMenuItem>div>span.WebItm_Icon:before {
    /* Find First Icon */
    content: "{";
}

.WebToolBar:not(.WebActionBar) .WebFirstMenuItem>div>span.WebItm_Icon:before {
    font-size: 18px;
    padding: 5px 0px 0px 2px;
}

.WebIcon_Edit:before,
.WebIcon_Edit button:before,
button.WebIcon_Edit:before,
.WebIcon_Edit > div > span.WebItm_Icon:before,
.WebEditMenuItem:before,
.WebEditMenuItem button:before,
button.WebEditMenuItem:before,
.WebEditMenuItem>div>span.WebItm_Icon:before {
    /* Pencil on blank page Icon */
    content: "A";
}

/* --------------------------------------------- */

.WebMenuList li.WebItm_HasSub:before,
.WebMenuBar ul li ul li.WebItm_HasSub>div:before {
    /* Menu has sub menu Arrow Icon */
    content: "4";
    margin-top: 6px;
    font-size: 18px;
    color: var(--df-Grayscale1);
}
.WebMenuList li.WebItm_HasSub:before{
    float: right;
}
.WebMenuBar ul li ul li.WebItm_HasSub>div:before {
    position: absolute;
    right: 5px;
}

.WebMenuList .WebML_Back:before {
    content: 'o';
    left: 12px;
    margin-top: 12px;
    display: block;
    position: absolute;
    font-size: 18px;
    color: var(--df-Grayscale1);
}

.WebMenuList li.WebItm_HasSub:before {
    /* Menu has sub menu Arrow Icon */
    right: 12px;
    margin-top: 12px;
    display: block;
    position: absolute;
}

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

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

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

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

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

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

.WebMenuBar .WebItm_CheckBox {
    margin-top: 8px;
}

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

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

.WebContextMenu.WebContainer.WebFlPnl {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.24);
}

/* WebForm Prompt Buttons */

.WebForm .WebFrm_Prompt:before {
    /* Prompt button - backwards leaning magnifying glass */
    /*JvH - note there is no forward leaning magnifying glass icon in this font */
    content: "\O";
    padding: 0;
    color: var(--df-Grayscale4);
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 19px;
    transition: all 300ms ease-in-out;
    
    padding-top: calc(var(--df-CtrHeight) / 2 - 12px);
}

.WebFileFrm div.WebFile_Btn:before {
    /* File upload - paper clip */
    color: var(--df-Grayscale4);
    content: "v";
    font-size: 16px;
    padding: 0;
    position: absolute;
    top: 6px;
    left: 1px;
}

.WebDateForm .WebFrm_Prompt:before {
    /* Calendar Icon */
    content: "%";
    font-size: 18px;
    padding: 0;
    color: var(--df-Grayscale4);
    
    padding-top: calc(var(--df-CtrHeight) / 2 - 10px);
}

.WebColorForm .WebFrm_Prompt:before {
    /* Color palette */
    content: "4";
    font-size: 20px;
    padding: 0;
    color: var(--df-Grayscale4);
    font-weight: bold;
}

.WebForm.Web_Enabled .WebFrm_Prompt:hover:before,
.WebFileFrm.Web_Enabled div.WebFile_Btn:hover:before {
    color: var(--df-MainRegular);
}

/* Modal Dialog Close Button */

.WebWindow .WebWin_controls .WebWin_close {
    background: none;
    height: 30px;
    width: 30px;
    /*margin: 0px 0 0 -33px;*/
    position: absolute;
    top: 20px;
    right: 13px;
}

.WebWindow .WebWin_controls .WebWin_close:hover:before {}

.WebWindow .WebWin_controls .WebWin_close:before {
    content: ":";
    font-size: 18px;
    padding: 0px 0 0 6px;
    color: var(--df-Grayscale1);
}

/* Datepicker Icons */

.WebDP_Wrp {
    padding: 4px 10px 10px 10px;
    background-color: var(--df-Grayscale8);
    border-radius: 3px;
}

.WebDP .WebDP_BtnPrev {
    margin: 0px 20px 0px 0px;
}

.WebDP .WebDP_BtnPrev:before {
    color: var(--df-Grayscale1);
    content: "o";
    /*    height: 21px;
width: 21px;*/
    font-size: 18px;
    padding: 8px 2px 0px 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.WebDP .WebDP_BtnNext:before {
    color: var(--df-Grayscale1);
    content: "4";
    /*    height: 21px;
width: 21px;*/
    font-size: 18px;
    padding: 8px 0px 0px 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.WebDP .WebDP_BtnMonth,
.WebDP .WebDP_BtnYear {
    margin: 0;
}

.WebDP .WebDP_BtnYear:after,
.WebDP .WebDP_BtnMonth:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: var(--df-Grayscale1);
    content: "8";
    font-size: 18px;
    display: inline-block;
    line-height: 1;
    margin: 0 0 0 6px;
    padding: 8px 1px 0px 5px;
    height: 21px;
    width: 21px;
}

.WebDP.Web_Enabled .WebDP_BtnPrev:hover:before,
.WebDP.Web_Enabled .WebDP_BtnNext:hover:before,
.WebDP.Web_Enabled .WebDP_BtnMonth:hover:after,
.WebDP.Web_Enabled .WebDP_BtnYear:hover:after {
    color: var(--df-MainRegular);
    background: var(--df-Grayscale8);
}

.WebDP_BtnPrev:before,
.WebDP_BtnNext:before,
.WebDP_BtnMonth:after,
.WebDP_BtnYear:after {
    transition-duration: color 0.5s, background 0.5s;
}

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

.WebDP.Web_Enabled .WebDP .WebDP_Up:hover:before,
.WebDP.Web_Enabled .WebDP_YearMnu .WebDP_Up.WebDP_UpDown:hover:before,
.WebDP.Web_Enabled .WebDP .WebDP_Down:hover:before,
.WebDP.Web_Enabled .WebDP_YearMnu .WebDP_Down.WebDP_DownDown:hover:before {
    color: var(--df-MainDark);
}

.WebDP .WebDP_Up:before,
.WebDP .WebDP_Down:before {
    font-size: 17px;
    padding: 0 0 0 3px;
    margin: 0px 0 0 4px;
    color: var(--df-Grayscale2);
}

.WebDP .WebDP_Up:before {
    content: "\"";
}

.WebDP .WebDP_Down:before {
    content: "!";
}

.WebDP.Web_Enabled .WebDP .WebDP_YearMnu .WebDP_Up.WebDP_UpDown:hover:before,
.WebDP.Web_Enabled .WebDP .WebDP_YearMnu .WebDP_Down.WebDP_DownDown:hover:before {
    font-size: 17px;
    color: var(--df-Grayscale8);
    text-shadow: 0px 1px 0 var(--df-Grayscale2);
}

/* Treeview Icons */

.WebTreeView .WebTree_NoIcon.WebTree_Folder:before,
.WebTreeView .WebTree_NoIcon.WebTree_Folder:before,
.WebTreeView .WebTree_NoIcon.WebTree_Icon:before {
    font-size: 16px;
    color: var(--df-WarningRegular);
    position: absolute;
    left: 1px;
    top: 3px;
}

.WebTreeView .WebTree_NoIcon.WebTree_Folder:before {
    content: "\00e018";
}

.WebTreeView .WebTree_Collapsed .WebTree_StartSub.WebTree_Item:before,
.WebTreeView .WebTree_Collapsed .WebTree_EndSub.WebTree_Item:before,
.WebTreeView .WebTree_Collapsed .WebTree_EntrySub.WebTree_Item:before,
.WebTreeView .WebTree_Collapsed .WebTree_StartEndSub.WebTree_Item:before {
    content: "!";
    padding: 3px 0px 0px 3px;
}

.WebTreeView .WebTree_Expanded .WebTree_StartSub.WebTree_Item:before,
.WebTreeView .WebTree_Expanded .WebTree_EndSub.WebTree_Item:before,
.WebTreeView .WebTree_Expanded .WebTree_EntrySub.WebTree_Item:before,
.WebTreeView .WebTree_Expanded .WebTree_StartEndSub.WebTree_Item:before {
    content: '"';
    padding: 3px 0px 0px 3px;
}

.WebTreeView .WebTree_Expanded .WebTree_NoIcon.WebTree_Folder:before {
    content: "I";
}

.WebTreeView .WebTree_NoIcon.WebTree_Icon:before {
    content: "B";
    color: var(--df-Grayscale1);
    font-size: 16px;
    margin: -1px 0px 0px 0px;
}

.WebTreeView .WebTree_Selected .WebTree_NoIcon.WebTree_Icon:before {
    color: var(--df-MainDark);
    content: "^";
}

/* Grid & List Column Sorting Icons */

.WebList .WebList_Head .WebList_Sorted:before,
.WebGrid .WebList_Head .WebList_Sorted:before,
.WebList .WebList_Head .WebList_SortedReverse:before,
.WebGrid .WebList_Head .WebList_SortedReverse:before {
    float: right;
    font-size: 13px;
    padding: 13px 4px 0 0;
    color: var(--df-Grayscale2);
    text-shadow: 0px 1px 0 var(--df-Grayscale8);
}

.WebList .WebList_Head .WebList_Sorted:before,
.WebGrid .WebList_Head .WebList_Sorted:before {
    content: "!";
}

.WebList .WebList_Head .WebList_SortedReverse:before,
.WebGrid .WebList_Head .WebList_SortedReverse:before {
    content: "\"";
}

/* Style Settings for Font Icon Buttons */

.WebList .WebList_Body .WebList_Row .WebButtonIcon,
.WebList .WebList_Body .WebList_Row .WebButtonIcon:hover,
.WebGrid .WebList_Body .WebList_Row .WebButtonIcon,
.WebGrid .WebList_Body .WebList_Row .WebButtonIcon:hover {
    background: transparent;
    border: none;
    box-shadow: none;
}

.WebButtonIcon:before {
    color: var(--df-Grayscale4);
    font-size: 18px;
}

.WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebButtonIcon:hover:before,
.WebList_Body .WebList_Row .WebButtonIcon:hover:before {
    color: var(--df-WarningRegular);
}

.WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebButtonIcon:before {
    color: var(--df-MainRegular);
}

.WebButton button:before {
    margin-right: 8px;
    margin-left: 8px;
    vertical-align: top;
}

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

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

.WebAccordion>.WebCon_Inner {
    border-width: 0px 1px 1px 1px;*/
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
}

.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: 10px 10px 10px 14px;
    background-color: var(--df-Grayscale7);
    border-top: 0.5px solid var(--df-Grayscale5);
    color: var(--df-Grayscale2);
    outline: none;
}

.WebAccordion .WebTab_Btn.WebTab_Enabled:hover,
.WebAccordion .WebTab_Btn.WebTab_Enabled.WebTab_Focus {
    background-color: var(--df-Grayscale6);
}

.WebAccordion .WebTab_Btn.Web_Enabled.WebTab_Current {
    /*  border-left: 2px solid transparent;*/
    color: var(--df-Grayscale1);
    background-color: var(--df-Grayscale8);
    font-weight: bold;
    transition: 300ms ease-in-out background-color;
}

.WebAccordion .WebTab_Btn.WebTab_Disabled {
    color: var(--df-Grayscale4);
}

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

.WebAccordion .WebAcCard.WebAcCard_Visible {
    visibility: visible;
}

.WebAccordion .WebAcCard.WebAcCard_Visible .WebContainer {
    background-color: var(--df-Grayscale8);
    transition: 300ms ease-in-out background-color;
}

.WebAccordion .WebAcCard .WebContainer {
    padding-left: 8px;
    transition: 500ms ease-in-out background-color;
}

/* - - - - - - - - - - - - - - -
    Manually applied CSS Classes 
    - - - - - - - - - - - - - - - */

/* - - - - - - Mobile - - - - - - - */

/* Header Panel (Titlebar) */

.HeaderPanel {
    margin: 0px 0px 0px 0px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.22);
}

.HeaderPanel .WebContainer {
    background-color: var(--df-MainLight);
    /*padding: 6px 0px;*/
}

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

.HeaderPanel.WebPanel .WebContainer .WebControl.WebButton>div.WebCon_Inner {
    margin: 4px 5px 0px 4px;
}

.HeaderPanel.WebPanel .WebContainer .WebControl.WebMenuButton button:hover,
.HeaderPanel.WebPanel .WebContainer .WebControl.WebMenuButton button:focus,
.HeaderPanel.WebPanel .WebButton.Web_Enabled button:hover,
.HeaderPanel.WebPanel .WebButton.Web_Enabled button:focus {
    color: var(--df-MainDark);
    transition: color 0.5s;
    background-color: inherit;
}

.HeaderPanel.WebPanel .WebContainer .WebButton.WebMenuButton button:before {
    /* Title bar's hamburger menu (three stripes) */
    content: "P";
    font-size: 21px;
    padding: 14px 0 0 12px;
    vertical-align: baseline;
    margin: 0px 0px 0px 0px;
    color: var(--df-MainDark);
}

/* Regular Buttons in the header */

.HeaderPanel.WebPanel .WebContainer .WebControl.WebButton button {
    /* Trim back the button margin (it does not always fit */
    margin: 0px;
    padding: 0;
    line-height: 23px;
    box-shadow: none;
    background-color: transparent;
}

/* Action toolbar in the header */

.HeaderPanel.WebPanel .WebActionBar.WebToolBar span.WebItm_Icon:before {
    color: var(--df-MainDark);
}

.HeaderPanel.WebPanel .WebActionBar.WebToolbar ul.WebBarRoot li.WebMenuItem {
    height: 38px;
}

.HeaderPanel.WebPanel .WebToolBar .WebMenuItem:hover span.WebItm_Icon,
.HeaderPanel.WebPanel .WebToolBar .WebMenuItem:focus span.WebItm_Icon {
    background: transparent;
}

.HeaderPanel.WebPanel .WebActionBar.WebToolBar ul li ul {
    margin-top: -30px;
    margin-left: -12px;
}

.HeaderPanel.WebPanel .WebActionBar.WebToolBar ul.WebBarRoot li.WebMenuItem ul li {
    height: 37px;
}

.HeaderPanel.WebPanel .WebActionBar.WebToolBar ul.WebBarRoot li.WebMenuItem ul li {
    /* Make the font size the same as the breadcrumb dropdown list */
    font-size: 14px;
    /*jvh-fontsize inherit */
}

.HeaderPanel.WebPanel .WebActionBar .WebMenuItem>div>span.WebItm_Icon:before {
    /* Actionbar Icons */
    padding: 11px 0 0 0px;
}

.HeaderPanel.WebPanel .WebActionBar .WebMenuItem.WebSaveMenuItem>div>span.WebItm_Icon:before {
    /* Circled Tick (done) Icon */
    content: "\i";
    font-size: 26px;
    padding-top: 6px;
}

/* HeaderTab style for tab containers (only on mobile) */

.df-ModeMobile .HeaderTab.WebTabContainer>.WebCon_Inner {
    margin: 0;
}

.df-ModeMobile .HeaderTab.WebTabContainer>div>div>.WebTbc_Head {
    background: var(--df-MainRegular);
    margin: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.df-ModeMobile .HeaderTab.WebTabContainer>div>div>.WebTbc_Head:after,
.df-ModeMobile .HeaderTab.WebTabContainer>div>div>.WebTbc_Head:before {
    display: table-cell;
    content: ' ';
    width: 15px;
}

.df-ModeMobile .HeaderTab.WebTabContainer>div>div>.WebTbc_Head .WebTab_Btn span label {
    color: var(--df-Grayscale8);
}

.df-ModeMobile .HeaderTab.WebTabContainer>div>div>.WebTbc_Head .WebTab_Btn {
    display: table-cell;
    float: none;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
}

.df-ModeMobile .HeaderTab.WebTabContainer>div>div>.WebTbc_Head>div:last-child {
    display: none;
    /* The div clear:both ruines the table layout so it needs to be hidden (try not use again in the future) */
}

.HeaderTab.WebTabContainer>div>div>.WebTbc_Head {
    background: var(--df-Grayscale7);
    margin: 30px 0px 0px 0px;
    padding: 0;
}

.HeaderTab.WebTabContainer>div>div>.WebTbc_Head .WebTab_Btn span label {
    color: var(--df-Grayscale1);
}

/* Mobile styled selection lists */

.MobileList .WebList_Body .WebList_Row td {
    border-left: none;
    padding: 0px 4px;
    font-size: 14px;
    height: 14px;
    line-height: 16px;
}

.MobileList .WebList_Body .WebList_Row td.Web_Disabled {
    color: var(--df-Grayscale3);
}

.MobileList.WebList table.WebList_Row {
    padding: var(--df-MobListRowPadding);
}

.MobileList.WebList .WebList_Body .WebList_Row td.RowCaption,
.MobileList.WebGrid .WebList_Body .WebList_Row td.RowCaption {
    font-size: 18px;
    line-height: 19px;
    font-weight: 500;
    padding-bottom: 5px;
    vertical-align: top;
}

.MobileList.WebList .WebList_Body .WebList_Row td.RowDetail,
.MobileList.WebGrid .WebList_Body .WebList_Row td.RowDetail {
    color: var(--df-Grayscale3);
}

/* Column Image Round Style */

.ColImgRound span {
    border-radius: 50%;
    background-color: var(--df-Grayscale7);
}

/* Image Round Style */

.ImgRound img {
    border-radius: 50%;
}

/* Login View */

.LoginBackground.WebApp {
    background: var(--df-Grayscale7);
    /* Fallback on older browsers */
    background: linear-gradient(var(--df-Grayscale7) 21%, var(--df-Grayscale7) 100%);
    /* W3C */
}

.LoginBackground .WebContainer,
.LoginView.WebContainer {
    background: transparent;
}

.LoginView .WebForm input,
.LoginView .WebForm .WebDynFrm {
    height: 40px;
    padding: 0px 10px 2px;
}

.LoginView div.WebCon_TopLabel.WebCon_FloatEnabled > label.WebCon_Unfloat {
    font-size: 16px;
    transform: translate(5px, 40px);
}
.LoginBackground .WebInlineView > div > div > div > .WebCon_ContentWrp{
    background-color: inherit;
}
/* Label Classes  */

/* - - - - - - -  */

/* LabelTitle */

.LabelTitle.WebLabel .WebLabel_content {
    color: var(--df-Grayscale1);
    font-size: 20px;
    padding: 10px 0px 0px;
}

/* LabelDetail */

.LabelDetail.WebLabel .WebLabel_content {
    color: var(--df-Grayscale3);
    font-size: 14px;
    padding: 0px 0px 0px;
    line-height: normal;
}

.LabelCaption.WebControl>.WebCon_Inner {
    min-height: 0px;
}

/* LabelCaption */

.df-ModeMobile .LabelCaption.WebLabel {
    background: var(--df-MainRegular);
    color: var(--df-Grayscale8);
}

.df-ModeMobile .LabelCaption.WebControl>.WebCon_Inner {
    margin: 0px 15px 5px 15px;
}

.LabelCaption.WebLabel .WebLabel_content {
    font-size: 110%;
}

.df-ModeMobile .LabelCaption.WebLabel .WebLabel_content {
    padding: 0;
    font-weight: 400;
    font-size: 120%;
    padding: 0;
}

.df-ModeTablet .LabelCaption.WebLabel .WebLabel_content {
    font-size: 120%;
    padding: 5px 0px 0px 10px;
}

/* - - - - - - - - - - - - - - - - - - - - - */

/* Special CSS Classes used by the Dashboard */

/* - - - - - - - - - - - - - - - - - - - - - */

/* Tile Classes  */

/* - - - - - - - */

/* Basic Structure of a Tile Set
    - - - - - - -- - - - - - - - - 
    * The set of tiles must be wrapped in a WebGroup object with psCSSClass = "TilesGroup"
    * Each tile should be wrapped in an WebHTMLBox (or equivalent), with psCSSClass = "Tile"
    
    1. Tile with heading and subheading text, no image
    
    <div class="WebCon_Sizer">
    <div class="Tile_Title">Caption</div>
    <div class="Tile_Subtitle">Smaller caption</div>
    </div>
    
    2. Tile with image and caption under image
    
    <div class="WebCon_Sizer">
    <div class="Tile_Icon BtnIcon_XXXX"></div>
    <div class="Tile_TextUnderIcon">Small Caption</div>
    </div>
    
    */

/* TilesGroup */

/* - Apply to WebGroup control that contains the tiles */

.TilesGroup {
    margin-top: 38px;
}

.TilesGroup>.WebCon_Inner {
    padding: 3px 10px;
    background-color: transparent;
}

.df-ModeMobile .TilesGroup.WebGroup>.WebCon_Inner {
    padding: 0px;
}

.TilesGroup .WebControl>.WebCon_Inner {
    margin: 0;
}

/* Tile */

/* - Apply to the WebHtmlBox control that contains the Tile divs */

.Tile .WebCon_Sizer {
    height: 126px;
    background: var(--df-Grayscale8);
    color: var(--df-Grayscale1);
    /*Custom color*/
    margin: 5px;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
}

.Tile.LightAlternate .WebCon_Sizer {
}

.Tile.DarkAlternate .WebCon_Sizer {
}

.Tile.Dark .WebCon_Sizer {
}

.Tile .Tile_Title {
    display: block;
    font-size: 20px;
    text-align: center;
    position: relative;
    top: 42px;
    overflow: hidden;
}

.Tile .Tile_Subtitle {
    font-size: 13px;
    text-align: center;
    position: relative;
    top: 45px;
    color: var(--df-Grayscale1);
    overflow: hidden;
}

.Tile .Tile_Baseline {
    font-size: 13px;
    text-align: center;
    position: relative;
    top: 70px;
    color: rgba(255, 255, 255, 0.9);
}

/* Tile_Icon */

/* - Combine with BtnIcon_XXX classes */

.Tile .Tile_Icon {
    font-size: 60px;
    text-align: center;
    position: relative;
    top: 20px;
}

.Tile .Tile_Icon.WebIcon_Add{
    font-size: 46px;
    margin-bottom: 18px;
    top: 26px;
}

.Tile .Tile_TextUnderIcon {
    font-size: 13px;
    text-align: center;
    position: relative;
    top: 10px;
    color: var(--df-Grayscale2);
}

/* Latest Activity Group  */

/* - - - - - - - - - - -  */

.LatestActivity.WebGroup>.WebCon_Inner {
    padding: 0px 10px;
    background-color: transparent;
}

.df-ModeMobile .LatestActivity.WebGroup>.WebCon_Inner {
    padding: 0px 0px;
}

.LatestActivity .WebHtmlBox>div.WebCon_Inner {
    margin-top: 0;
    margin-bottom: 10px;
}

.LatestActivity ul {
    display: Block;
    /*overflow: hidden;*/
}

.LatestActivity ul>li {
    line-height: 14px;
    cursor: pointer;
    /*padding-bottom: 20px;*/
    padding: 13px 13px 13px 20px;
    color: var(--df-Grayscale1);
    background-color:var(--df-Grayscale8);
    border-radius: 2px;
    margin: 7px 0;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
}

.LatestActivity ul>li:hover,
.LatestActivity ul>li:hover>div.MinorText,
.LatestActivity ul>li:hover>div.FirstLine:after,
.LatestActivity ul>li:hover>div.FirstLine.FirstLine {
    border-color: var(--df-MainRegular);
    color: var(--df-MainRegular);
}

.LatestActivity ul>li>div {
    overflow: hidden;
    white-space: nowrap;
    /* margin-bottom: 2px; */
    margin-left: 22px;
    font-size: 15px;
    line-height: 18px;
    text-overflow: ellipsis;
}

.LatestActivity ul>li>div.FirstLine.FirstLine {
    font-size: 14px;
    color: var(--df-Grayscale3);
}

.LatestActivity ul>li>div.MainText {
    font-weight: 500;
}

.LatestActivity ul>li>div.MinorText {
    /* Light grey smaller text */
    font-size: 14px;
    color: var(--df-Grayscale3);
}

.LatestActivity ul>li>div.FirstLine:before {
    /* vertical left border */
    content: ' ';
    position: absolute;
    background: transparent;
    height: 80px;
    border-left: solid 3px var(--df-MainLight2);
    left: 26px;
    margin-top: 34px;
}

.LatestActivity ul>li:last-child>div.FirstLine:before {
    border: none;
}

.LatestActivity ul>li>div.FirstLine:after {
    /* circle symbol */
    content: ' ';
    position: absolute;
    background: var(--df-MainLight);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    /*border: solid 1px #8E8A87;*/
    left: 20px;
    margin-top: 20px;
}

.LatestActivity .WebHtml_Wrp {
    overflow: visible !important;
}

/* Recent List Group  */

/* - - - - - - - - -  */

.RecentList.WebGroup>.WebCon_Inner {
    padding: 0px 10px;
    background-color: transparent;
}

.df-ModeMobile .RecentList.WebGroup>.WebCon_Inner {
    padding: 0px 0px;
}

.RecentList .WebHtmlBox>div.WebCon_Inner {
    margin-top: 7px;
    margin-bottom: 10px;
}

.RecentList ul {
    display: Block;
    overflow: hidden;
    background-color:var(--df-Grayscale8);
    border-radius: 2px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
}

.RecentList ul>li {
    cursor: pointer;
    padding-top: 15px;
    color: var(--df-Grayscale1);
    font-size: 15px;
}

.RecentList ul>li:last-child {
    padding-bottom: 15px;
}

.RecentList ul>li:hover,
.RecentList ul>li:hover>div:before {
    border-color: var(--df-MainLight);
    color: var(--df-MainLight);
}

.RecentList ul>li>div {
    overflow: hidden;
    white-space: nowrap;
    margin-left: 10px;
}

.RecentList ul>li>div:before {
    /* Arrow Icon */
    content: "4";
    float: left;
    font-size: 14px;
    padding-top: 2px;
    padding-right: 8px;
    color: var(--df-Grayscale3);
}

.RecentList .WebHtml_Wrp {
    overflow-x: visible !important;
}

/* - - - - - - Mobile Style - - - - - - */

.df-ModeTablet .WebForm input,
.df-ModeTablet .WebForm .WebDynFrm,
.df-ModeTablet .WebCombo select {
    height: 40px;
}

.df-ModeTablet .WebForm .WebFrm_Prompt:before {
    top: 10px;
    left: -5px;
}

.df-ModeTablet .WebButton button {
    min-height: 40px;
}

/*   .df-ModeTablet .WebControl{
        padding: 0 5px;
    }*/

.df-ModeTablet .WebControl>div>label {
    padding: 13px 2px 0 0;
}

.df-ModeTablet .WebControl.Web_Enabled > div > div > .WebFrm_Wrapper {
    border-bottom-width: var(--df-Tablet-FrmBorderBottomWidth);
}

.df-ModeTablet .WebControl.MobileList>.WebCon_Inner {
    margin: 0;
}

.df-ModeTablet .HeaderPanel .WebControl>.WebCon_Inner {
    margin: 0px;
}

.df-ModeTablet .WebGrid .WebList_Body .WebList_Row td {
    height: 40px;
}

.df-ModeTablet .WebGrid .WebList_Body .WebList_Row td.WebCol.WebGrid_EditCell .WebFrm_Prompt:before,
.df-ModeTablet .WebGrid .WebList_Body .WebList_Row td.WebColCombo.WebGrid_EditCell .WebFrm_Prompt:before {
    top: 12px;
    left: 0
}

.df-ModeTablet .WebBreadcrumb .WebCrumbs_DropDown div.WebCrumb_Caption {
    /*padding: 14px 10px 9px 7px;*/
    padding: 18px 10px 15px 7px;
}

.WebTagsForm .WebTgf_Tag {
    background-color: var(--df-Grayscale3);
}

.WebTagsForm .WebTgf_Focus {
    background-color: var(--df-WarningRegular) !important;
}

.df-ModeTablet .WebTagsForm .WebFrm_Prompt:before {
    top: -34px;
 }
 
 .WebTagsForm .WebFrm_Prompt:before {
    top: -27px;
    content: "8";
    font-size: 32px;
    left: -5px;
 }

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

.WebTagsForm .WebTgf_CloseTag {
    color: var(--df-ErrorRegular);
}

.Sugg_ControlSuggestion {
    color: var(--df-Grayscale2);
    background-color: var(--df-Grayscale6);
}

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

.df-ModeTablet .WebTagsForm .WebDynFrm {
    padding: 10.67px 0 10.67px 4px !important;
}

/* Styling for required fields */
.Web_FieldRequired label::after{
    content: "*";
    color: var(--df-ErrorRegular);
}