/*-----------------------------------------------------------------------------------------------------------------------------------------------------
Images
-----------------------------------------------------------------------------------------------------------------------------------------------------*/

.imgCatalog{
    background-image: url('../../Images/Catalog_64.png');
}

.imgUP{
    background-image: url('../../Images/UP_64_Red.png');
}

.imgUC{
    background-image: url('../../Images/UC_64_Red.png');
}

.imgNT{
    background-image: url('../../Images/NT_64_Red.png');
}

.imgStore{
    background-image: url('../../Images/Store_64.png');
}

.imgWarehouse{
    background-image: url('../../Images/Warehouse_64.png');
}

.imgPromotionPrice{
    background-image: url('../../Images/PriceTag_64.png');
}

#background {
	background-color: rgba(255,255,255, 1.0);/*If the default background doesn't exist aswell...*/
	position: fixed;
	z-index: -1;
	/*background: url(../../../Images/LoginBackground.jpg);*/
	background-size: cover;
	
	/*If using an image, apply blur!*/
	/*-webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);*/
}

.WSNLoginbackground {
	/*background-color: rgba(255,255,255, 1.0);*//*If the default background doesn't exist aswell...*/
	/*position: fixed;*/
	z-index: -1;
	background: url(../../../Images/LoginBackground.jpg);
	background-size: cover;
	
	/*If using an image, apply blur!*/
	/*-webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);*/
}

.WSNLoginGroup {
	margin-top: 50px;
	/*margin-bottom: 50px;*/
	padding-bottom:50px;
	background-color: rgba(255,255,255,1.0);
	position: absolute;
	/*transform: translateY(20%);*/
	top: 50%;
	box-shadow: 4px 4px 20px 0px black;
}
.WSNLoginGroup
,.WSNLoginGroup > div.WebCon_Inner
,.WSNLoginGroup > div.WebCon_Inner > div
,.WSNLoginGroup > div.WebCon_Inner > div > div.WebContainer {
	border-radius: 20px !important;
}

.WebApp > .WebCon_Sizer, .WebApp.WebContainer {
	background: transparent;
	background-size: cover;
}

.SideBar,
.SideBar .WebContainer .WebCon_Inner,

.WebCon_ContentWrp > .WebCon_Main > .WebPanel,
.WebControl .WebGroup:not(.NaviGroup),
.TilesGroup:not(.NaviGroup) > .WebCon_Inner{
	/*Make it transparent so we can see the background*/

	background: transparent !important;
	border: 0;
	color: #000000;
}

.SideBar .WebContainer,
.WebFlPnl > .WebContainer > .WebCon_Sizer .WebContainer {
	background: rgba(230,230,230,0.4);
	border: 0;
	color: #000000;
}

.GroupDashboard > .WebCon_Inner {
	background: transparent;
}
.GroupDashboard > .WebCon_Inner .WebCon_Content,
.GroupDashboard > .WebCon_Inner .WebContainer > .WebCon_Sizer {
	background: transparent;
}
.WebGroup.GroupDashboard.WebGrp_HasCaption .WebContainer {
	margin-top: 18px !important;
}
.TilesGroupNew .Tile .WebHtml_Wrp {
	max-width: 150px !important;
	margin: auto;
	
}
.TilesGroupNew .Tile .WebCon_Sizer {
	height: 150px !important;
}
.TilesGroupNew .Tile .Tile_Icon {
	font-size: 36px;
	position: absolute;
	width: 100%;
}
.TilesGroupNew .Tile .Tile_Title:not(.TileNoIcon) b{
	font-size: 18px !important;
	font-weight: bold !important;
}
.TilesGroupNew .Tile .Tile_Title.TileNoIcon b{
	font-size: 22px !important;
	font-weight: bold !important;
}

.SideBar .WebMenuItem:hover,
.SideBar li.WebML_Item.WebML_Back:hover {
	background: rgba(38,38,38,0.3);
	color: rgba(0,157,255,1.0);
}
.SideBar li.WebML_Item.WebML_Back:hover a {
	color: rgba(0,157,255,1.0);
}
.SideBar .WebMenuItem, .SideBar .WebMenuItem > div > span.WebItm_Icon:before, .SideBar .WebMenuList li.WebItm_HasSub:Before {
	color: #000000;
}
.SideBar .WebML_Caption {
	color: #999999;
}
/*Set "Vorige" to black*/
.SideBar li.WebML_Item.WebML_Back a,
.SideBar li.WebML_Item.WebML_Back:before  {
	color: #000000;
}


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

.Dashboard {
	background: linear-gradient(335deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 10%, rgba(255,255,255,1) 66%, rgba(255,255,255,1) 100%), url('../../../Images/Dashboard.jpg');
	background-size: cover;
	background-position: center, bottom;
	background-repeat: no-repeat, no-repeat;
}


.Dashboard .WebContainer .WebCon_Sizer{
	/*background-color: rgba(235,239,242,1.0);*/
}
.WebInlineView > .WebContainer {
	/*background-color: rgba(235,239,242,1.0);*/
}

.GroupDashboard {
	/*background: rgba(44, 44, 48, 0.9);*/
	/*border: 1px solid #000000;*/
	/*margin-bottom: 10px;*/
}

.GroupDashboard .WebCon_Inner{
	margin-top: 15px !important;
	/*margin-bottom: 10px !important;*/
}

.GroupDashboard label {
	/*color: red !important;*/
	/*font-weight: bold !important;*/
	top: 0px !important;
	background: transparent !important;
}

.GroupDashboard .WebGrp_Caption {
	/*border-bottom: 1px solid #000000;*/
	left: 0 !important;
	padding: 0 !important;
	width: 100%;
	color: #999999;
	/*background: rgba(44, 44, 48, 0.9) !important;*/

}

.GroupDashboard .WebGrp_Caption:before {
	/*Add spaces for "padding" ... */
	content: "\00a0\00a0\00a0";
}

.GroupDashboard.GroupIcon_cube > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f1b2" !important;
	position: absolute;
	right: 10px;
}

.GroupDashboard.GroupIcon_industry > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f275" !important;
	position: absolute;
	right: 10px;
}

.GroupDashboard.GroupIcon_arrow-circle-o-up > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f01b" !important;
	position: absolute;
	right: 10px;
}

.GroupDashboard.GroupIcon_shopping-cart > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f07a" !important;
	position: absolute;
	right: 10px;
}

.GroupDashboard.GroupIcon_users > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f0c0" !important;
	position: absolute;
	right: 10px;
}

.GroupDashboard.GroupIcon_bell > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f0f3" !important;
	position: absolute;
	right: 10px;
}

.GroupDashboard.GroupIcon_calendar > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f073" !important;
	position: absolute;
	right: 10px;
}

.GroupDashboard.GroupIcon_truck > .WebCon_Inner > div > .WebGrp_Caption:after {
	font-family: 'FontAwesome' !important;
	font-size: 18px;
    content: "\f0d1" !important;
	position: absolute;
	right: 10px;
}

.ViewLabelText .WebLabel_content,
.df-mobile .WebLabel.ViewLabelText .WebLabel_content {
	color: rgb(147, 193, 62);
	font-size: 30px !important;
	font-weight: bold;
	line-height: 30px;
}

.df-mobile .WebLabel.ViewLabelText .WebLabel_content {
	font-size: 20px !important;
}


.WebApp > .WebCon_Sizer > .WebCon_Main > .WebApp_ViewRegion > .WebView {
	/*background-color: rgba(232,232,232,0.8) !important;*/
}

.ViewOptionRow {
	/*background-color: rgba(232,232,232,0.4) !important;*/
}


/*Draw a background for all views except dashboard and LoginView*/
/*.df-ModeDesktop .WebApp > .WebCon_Sizer > .WebCon_Main > .WebApp_ViewRegion > .WebView:not(.Dashboard):not(.LoginView) > .WebContainer > .WebCon_Sizer {
	background-color: rgba(230,230,230,0.0);*/

	/*Also move it down a bit*/
	/*margin-top: 11px;
	margin-bottom: 11px;
	margin-right: 20px !important;*/
/*}*/
/*If on mobile, no mrgin-top!!*/
/*.df-mobile .WebApp > .WebCon_Sizer > .WebCon_Main > .WebApp_ViewRegion > .WebView:not(.Dashboard):not(.LoginView) > .WebContainer > .WebCon_Sizer {
	background-color: rgba(230,230,230,0.0);*/
	
	/*Also move it down a bit*/
	/*margin-top: 0;
	margin-bottom: 0;
	margin-right: 0px !important;
}*/

/*Now we exclude the search bar, WebList/WebGrid, LoginBackground*/
.WebApp > .WebCon_Sizer > .WebCon_Main > .WebApp_ViewRegion .SNWebFormClear,
.WebApp > .WebCon_Sizer > .WebCon_Main > .WebApp_ViewRegion .WebCon_Inner .WebCon_ContentWrp .WebList,
.WebApp.LoginBackground > .WebCon_Sizer > .WebCon_Main > .WebApp_ViewRegion .WebContainer > .WebCon_Sizer {
	background-color: transparent !important;
}

/*WebMenuButton*/
.WebMenuButton button {
	background-color: transparent;
}

/*Search bar*/
.SNWebFormClear .WebCon_Inner .WebFrm_Wrapper {
	background: rgba(255,255,255, 1.0);
	border: 0;
	border-radius: 5px;
}

.SNWebFormClear .WebCon_Inner .WebFrm_Wrapper input{
	color: #000000;
}

.WebIcon, .WebList_Row button, .WebColBtn > button, .WebButtonIcon{
	color: #000000;
}

/**Header panel*/
.HeaderPanel > .WebCon_Sizer > .WebCon_Main > div {
	background-color: #fff !important;
}
.HeaderPanel > .WebCon_Sizer > .WebCon_Main {
	background-color: #fff !important;
}

/*Make the action panel transparent and the list items semi transparent*/
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul{
	background-color: transparent;
}
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul > .WebMenuItem{
	background-color: #434A4A !important;
	color: #FFFFFF !important;
}

/*Rounding of the top corners of the first element and bottom corners of the last element*/
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul {
	border-radius: 5px;
}
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul > .WebMenuItem:first-of-type{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul > .WebMenuItem:last-of-type{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/*Make the save & delete menu items *pop out*/
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul > .WebSaveMenuItem.Web_Enabled,
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul > .WebDeleteMenuItem.Web_Enabled,
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul > .WebEraseMenuItem.Web_Enabled{
	background-color: #1e2020 !important;
	color: #FFFFFF !important;
}
.HeaderPanel.WebPanel .WebActionBar.WebToolBar .WebTlb_SubItems > ul > .WebMenuItem.Web_Enabled:hover{
	background-color: #FFF !important;
	color: #000 !important;
}

/*WebMenuItem icon colors*/
.HeaderPanel.WebPanel .WebActionBar.WebToolBar span.WebItm_Icon:before {
	color: #FFF;
}
.WebToolBar .WebMenuItem.Web_Enabled:hover span.WebItm_Icon:before {
	color: #000;
}

/*Make the "Back" button on mobile transparent aswell*/
.HeaderPanel.WebPanel .WebContainer .WebControl.WebButton button {
	background-color: transparent;
}

.DarkerRowColor {
	background-color: rgba(0,0,0, 0.2) !important;
}

/*Transparency for enabled forms/edits*/
.WebForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper, .WebEdit.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper,
.SNWebFormClear.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper,
.WebCombo.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper, .WebCombo.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper option {
	background-color: rgba(255,255,255,1.0) !important;
	/*border: 2px solid rgba(52,152,219, 0.7);*/
	/*We would set this to 0 but we don't want layout shifts when we select a control and then add a border.*/
	border: 2px solid #E6E6E6;
	color: #333333 !important;
	border-radius: 5px;
}

.WebForm.GreenForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper, .WebEdit.GreenForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper,
.SNWebFormClear.GreenForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper,
.WebCombo.GreenForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper, .WebCombo.GreenForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper option {
	background-color: #44AC34 !important;
	/*border: 2px solid rgba(52,152,219, 0.7);*/
	/*We would set this to 0 but we don't want layout shifts when we select a control and then add a border.*/
	border: 2px solid #E6E6E6;
	color: #fff !important;
	border-radius: 5px;
}

.WebForm.RedForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper, .WebEdit.RedForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper,
.SNWebFormClear.RedForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper,
.WebCombo.RedForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper, .WebCombo.RedForm.Web_Enabled:not(.Web_ReadOnly) .WebFrm_Wrapper option {
	background-color: rgb(226, 64, 64) !important;
	/*border: 2px solid rgba(52,152,219, 0.7);*/
	/*We would set this to 0 but we don't want layout shifts when we select a control and then add a border.*/
	border: 2px solid #E6E6E6;
	color: #fff !important;
	border-radius: 5px;
}

/*Orange border when control has the focus*/
.WebForm.Web_Enabled:not(.Web_ReadOnly).WebCon_Focus .WebFrm_Wrapper, .WebEdit.Web_Enabled:not(.Web_ReadOnly).WebCon_Focus .WebFrm_Wrapper,
.SNWebFormClear.Web_Enabled:not(.Web_ReadOnly).WebCon_Focus .WebFrm_Wrapper,
.WebCombo.Web_Enabled:not(.Web_ReadOnly).WebCon_Focus .WebFrm_Wrapper, .WebCombo.Web_Enabled:not(.Web_ReadOnly).WebCon_Focus .WebFrm_Wrapper option {
	border: 2px solid rgb(147, 193, 62);
}

/*Transparency for disabled forms/edits*/
.WebForm.Web_Disabled .WebFrm_Wrapper, .WebEdit.Web_Disabled .WebFrm_Wrapper, .WebCombo.Web_Disabled .WebFrm_Wrapper,
.WebForm.Web_ReadOnly .WebFrm_Wrapper, .WebEdit.Web_ReadOnly .WebFrm_Wrapper, .WebCombo.Web_ReadOnly .WebFrm_Wrapper,
.SNWebFormClear.Web_Disabled .WebFrm_Wrapper {
	background-color: transparent !important;
	border: 0 !important;
	background-color: rgba(0,0,0,0.1) !important;
	border-radius: 5px;
}
.WebForm.Web_Disabled .WebFrm_Wrapper input, .WebEdit.Web_Disabled .WebFrm_Wrapper input, .WebCombo.Web_Disabled .WebFrm_Wrapper input,
.WebForm.Web_ReadOnly .WebFrm_Wrapper input, .WebEdit.Web_ReadOnly .WebFrm_Wrapper input, .WebCombo.Web_ReadOnly .WebFrm_Wrapper input,
.SNWebFormClear.Web_Disabled .WebFrm_Wrapper input {
	color: #000 !important;
}
/*Disable the black border on an input that is set to readonly when selected*/
.WebControl.Web_ReadOnly.WebCon_Focus > div > div > .WebFrm_Wrapper{
	border: 1px solid #E6E6E6;
	border-radius: 5px;
}
/*For the combos*/
.WebCombo > .WebCon_Inner > div, .WebCombo .WebFrm_Wrapper > select {
	background-color: transparent;
}
/*Text color inside a list/grid row*/
.MobileList.WebList .WebList_Body .WebList_Row td.RowDetail {
	color: #333333;
}
.WebList th,.WebGrid th {
	background-color: #434A4A !important;
	color: #FFF;
}
.WebList_Head,.WebGrid_Head {
	background-color: #434A4A !important;
}

/*Recent AK/VK*/
.LatestActivityGroup {
	margin-bottom: 10px;
}
.LatestActivityGroup.WebGrp_HasCaption > .WebCon_Inner > div > .WebContainer {
	border: 0;
}
.LatestActivityGroup label {
	top: 0px !important;
	background-color: #434A4A !important;
}

.LatestActivityGroup .WebGrp_Caption {
	left: 0 !important;
	padding: 0 !important;
	width: 100%;
	margin-top: -12px !important;
}

.LatestActivity .WebCon_Inner {
	background-color: transparent !important;
	margin-top: 5px !important;
	margin-left: -25px !important;
}
.LatestActivity ul > li {
	color: #000000 !important;
}
.LatestActivity ul > li:hover {
	color: rgba(52,152,219,1.0) !important;
}
.LatestActivity ul > li > div {
	display: inline-block;
}



.FilterInActive .WebLabel_content{
	border-radius: 7px;
	text-align: center;
	vertical-align: middle;
	margin: -2px;
}
.FilterButton button{
	min-height: unset;
	padding-top:2px;
	padding-bottom:2px;
	border-radius: 0px !important;
	height: 42px;
}

.FilterButton .WebCon_Inner{
	/*margin-left: 0px;*/
	margin-top: 0px;
    margin-bottom: 10px;
}

.FilterButton.FilterInActive button {
	color: #FFF !important;
    background-color: #A8AAAA !important;
}
.FilterButton.FilterActive button {
	color: #FFF !important;
    background-color: #a9cd65!important;
}

.FilterButton.FilterInActive button:hover {
	background-color: #7F8080 !important;
}

.FilterButton.FilterActive button:hover {
	background-color: #AAA !important;
}

.FilterButton.FilterInActive_TabButtonMode button {
	color: #FFF !important;
    background-color: #A8AAAA !important;
}
.FilterButton.FilterActive_TabButtonMode button {
	color: #FFF !important;
    background-color: #3e8dc1!important;
}

.FilterButton.FilterInActive_TabButtonMode button:hover {
	background-color: #7F8080 !important;
}

.FilterButton.FilterActive_TabButtonMode button:hover {
	background-color: #AAA !important;
}

/* Searhc Form */
.SearchForm .WebCon_Inner{
	margin-top: 0px;
    margin-bottom: 10px;
	margin-right: 3px;
}

/* Thmbnail scroller */
.mTSButton{
	background-color: rgba(0,0,0,.6) !important;
	-moz-border-radius: 48px; -webkit-border-radius: 48px; border-radius: 48px;
}
.mTSButtonLeft{ left: 5px !important; }
.mTSButtonRight{ right: 5px !important; }

.GrayBorderThumbs {
    border-top: 1px solid rgb(199, 199, 199);
	border-bottom: 1px solid rgb(199, 199, 199);
}

/*------------------------------------------------------------------------------------------------------
HTMLBOX
-----------------------------------------------------------------------------------------------------------*/
.WebHtmlBox cite, .WebHtmlBox em,  .WebHtmlBox var, .WebHtmlBox address, .WebHtmlBox dfn{
    font-style: italic;
}
.WebHtmlBox strong{
    font-weight: bold;
}
.WebHtmlBox tt, .WebHtmlBox code, .WebHtmlBox kbd, .WebHtmlBox samp {
    font-family: monospace;
}
.WebHtmlBox.Web_Disabled, .WebHtmlBox.Web_Disabled a{ /*Makes that nothing is clickable inside webhtmlbox, if this is disabled*/
	pointer-events: none;
	/*color: #8E8A87;*/
}
/*EDIT: We want to be able to click on it if it's disabled. We don't want the tab order to go over it but if clicked it should still execute*/

.WebHtmlBox .WebHtml_Wrp a {
	color: #000000;
}

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

.WebBreadcrumb .WebCrumbs_Horiz{
    height: 38px;
	padding-top: 5px;
}
.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs {
    background-color: #FFFFFF;
    border: none;
    height: 38px;
}

/*
    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: 38px;
    box-sizing: border-box;
    background-color: #434a4a;
    
    font-size: 13px;
    line-height: 16px;
}  

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


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

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li div.WebCrumb_Caption {
    padding: 12px 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: #434a4a;
    color: #ff9716;
    font-size: 14px;
    position: relative;
    text-decoration: none;
    outline: none;  /* stop Chrome painting a focus rectangle on the div when it is clicked */
	font-weight: bold;
}

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

.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li > div.WebCrumb_Arrow:before{
    content: '';
    position: absolute;
    right: -25px;
    top: 0px;
    border-top: 0px solid transparent;
    border-bottom: 38px solid transparent;
    border-left: 24px solid #FFFFFF;
} 
.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li > div.WebCrumb_Arrow:after{
    content: '';
    position: absolute;
    right: -24px;
    top: 0px;
    border-top: 0px solid transparent;
    border-bottom: 38px solid transparent;
    border-left: 24px solid #434a4a;
}

/* 
    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) {
	background-color: #FFFFFF;
    text-shadow: none;
}


.WebBreadcrumb .WebCrumbs_Horiz ul.WebCrumbs li:nth-last-child(1) div {
    background-color: #FFFFFF;
    text-shadow: none;
	color: rgb(147, 193, 62);
    font-size: 30px;
    font-weight: bold;
    line-height: 22px;
}

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

.WebControl.LightGreenBackground input {
	background-color: rgba(0, 255, 0, 0.4);
}

.WebControl.LightRedBackground input {
	background-color: rgba(255, 0, 0, 0.4);
}
/*-----------------------------------------------------------------------------------------
 Also in a webgrid a columnbutton will not get a blue background, but a transparent just like in a weblist
 -----------------------------------------------------------------------------------------*/
.WebGrid .WebList_Body .WebList_Row .WebButtonIcon,
.WebGrid .WebList_Body .WebList_Row .WebButtonIcon:hover {
    background: transparent;
    border: none;
}

/*-----------------------------------------------------------------------------------------
 If a weblist/webgrid is disabled but selected, show the blue color and not the disabled color
 -----------------------------------------------------------------------------------------*/
.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebCol.Web_Disabled input,
.WebList .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebCol.Web_Disabled input,
.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebCol.Web_Disabled,
.WebList .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebCol.Web_Disabled{
    color: #275DAD;
}

/*------------------------------------------------------------------------------------------------------------
Weblist: when you hover the weblist make item-background grey
---------------------------------------------------------------------------------------------------------------*/

.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected
, .WebList .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected
{
	border-left: 2px solid #3e8dc1 !important;
}
.WebList_Row.WebList_Row.WebList_RowOdd
,.WebGrid .WebList_Row.WebList_Row.WebList_RowOdd
{
    /*background-color: rgba(28, 67, 125,0.07) !important;*/
	background-color: rgba(239,239,239,0.8);
	/*background-color: rgba(203,221,247,0.3);*/
	color: #333333;
}

.WebList_Row.WebList_Row.WebList_RowEven
,.WebGrid .WebList_Row.WebList_Row.WebList_RowEven
{
	background-color: rgba(255,255,255,0.8);
	color: #333333;
}

.WebList.FotoElementWillaert .WebList_Row.WebList_Row:not(.WebList_RowEmpty).WebList_RowOdd
,.WebGrid.FotoElementWillaert .WebList_Row:not(.WebList_RowEmpty).WebList_Row.WebList_RowOdd
,.WebList.FotoElementWillaert .WebList_Row.WebList_Row:not(.WebList_RowEmpty).WebList_RowEven
,.WebGrid.FotoElementWillaert .WebList_Row:not(.WebList_RowEmpty).WebList_Row.WebList_RowEven
{
	border-bottom: 3px solid #ffffff !important;
    background-color: #434a4a;
    width: 96%;
    border-left: 0px;
}

.WebList.FotoElementWillaert .WebList_Row.WebList_Row:not(.WebList_RowEmpty).WebList_RowOdd:after
,.WebGrid.FotoElementWillaert .WebList_Row:not(.WebList_RowEmpty).WebList_Row.WebList_RowOdd:after
,.WebList.FotoElementWillaert .WebList_Row.WebList_Row:not(.WebList_RowEmpty).WebList_RowEven:after
,.WebGrid.FotoElementWillaert .WebList_Row:not(.WebList_RowEmpty).WebList_Row.WebList_RowEven:after
{
	content: '';
    position: absolute;
    right: -60px;
    top: 0px;
    border-top: 0px solid transparent;
    border-bottom: 84px solid transparent;
    border-left: 60px solid #434a4a;
}

.FotoElementWillaert .WebList_Row.WebList_Row:not(.WebList_RowEmpty):hover {
	background-color: #434a4a !important;
}

.WebList.FotoElementWillaert .WebList_Row.WebList_Row.WebList_RowEmpty.WebList_RowOdd
,.WebGrid.FotoElementWillaert .WebList_Row.WebList_RowEmpty.WebList_Row.WebList_RowOdd
,.WebList.FotoElementWillaert .WebList_Row.WebList_Row.WebList_RowEmpty.WebList_RowEven
,.WebGrid.FotoElementWillaert .WebList_Row.WebList_RowEmpty.WebList_Row.WebList_RowEven
{
	background-color: #FFFFFF !important;
	/*width: 100%;*/
}

.FotoElementWillaert .IconInGrid img {
	border: 2px solid #93c13e;
    max-height: 64px;
    max-width: 100%;
}

.WebGrid.FotoElementWillaert .WebList_TableWrp td.Web_Disabled, 
.WebList.FotoElementWillaert .WebList_TableWrp td.Web_Disabled {
color: #93c13e;
}

.WebGrid.FotoElementWillaert .WebList_Body .WebList_Row td {
	padding-right: 5px;
}

.WebList_Row.WebList_Row:not(.WebList_RowEmpty):hover{
    background-color: #A8AAAA !important;
	/*color: #FFF !important; */
}
.WebList_Row.WebList_Row:not(.WebList_RowEmpty):hover td.RowDetail:not(.RedCell):not(.GreenCell):not(.DarkGreenCell):not(.OrangeCell):not(.BrownCell){
    background-color: #A8AAAA !important;
	/*color: #FFF !important; */
}
.WebList_Row.WebList_Row:not(.WebList_RowEmpty):hover td.WebColBtn button:before {
	/*background-color: #FFF !important;*/
	/*color: #FFF !important; */
}

/*When hovering above a row, make the icons white and draw a white circle around them
except for the square & icon*/
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected .WebButtonIcon,
.WebList_Body .WebList_Row:hover .WebButtonIcon { /* if you hover over a row, make icons white*/
	color: #FFFFFF !important;
}
/*set the color of the remaining buttons*/
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):before,
.WebList_Body .WebList_Row:hover td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):before { 
    color: #FFFFFF !important;
}
/*draw a circle around the buttons*/
.WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction),
.WebList_Body .WebList_Row td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction) { 
	border-radius: 50% !important;
	/* border: 1px solid #FFF !important; */
	/*background-color: #303434;*/
	height: 30px !important;
	width: 30px !important;
	margin-left: -4px !important;
	margin-top: 1px !important;
}
/* .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction),
.WebList_Body .WebList_Row td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction) { 
	border-radius: 50% !important;
} */

/*
.WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):before,
.WebList_Body .WebList_Row td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):before {
	color: #FFF !important;
}*/
/*hover*/
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction),
.WebList_Body .WebList_Row:hover td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction) { 
	background-color: #303434;
}
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):before,
.WebList_Body .WebList_Row:hover td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):before {
	color: #FFF !important;
}

.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction),
.WebList_Body .WebList_Row:hover td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction) { 
	margin-top: 1px !important;
}
/*When hovering over a button in an already hovered row, make the bg darker*/
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):hover,
.WebList_Body .WebList_Row:hover td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):hover { 
    background-color: #FFF;
}
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):hover:before,
.WebList_Body .WebList_Row:hover td:not(.WebIcon_square-o):not(.WebIcon_check-square) .WebButtonIcon:not(.ButtonNoAction):hover:before { 
    color: #303434 !important;
}
/*for the ButtonNoAction, don't change color when hovering*/
.WebList_Body .WebList_Row:not(.WebList_Selected) .ButtonNoAction:hover:before {
    color: #303434 !important; 
}
.WebList_Body .WebList_Row.WebList_Selected .ButtonNoAction:hover:before {
    color: #FFF !important; 
}
/*Only color the checkbox white if the user hovers over it, not when hovering over the row only, square*/
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td.WebIcon_square-o .WebButtonIcon:hover:before,
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td.WebIcon_check-square .WebButtonIcon:hover:before,
.WebList_Body .WebList_Row:hover td.WebIcon_square-o .WebButtonIcon:hover:before,
.WebList_Body .WebList_Row:hover td.WebIcon_check-square .WebButtonIcon:hover:before { 
    color: #FFFFFF !important;
}
/*Exclude square checkboxes from been given a colored background*/
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td.WebIcon_square-o .WebButtonIcon:hover,
.WebList_Body.WebList_ShowSelected .WebList_Row:hover.WebList_Selected td.WebIcon_check-square .WebButtonIcon:hover,
.WebList_Body .WebList_Row:hover td.WebIcon_square-o .WebButtonIcon:hover,
.WebList_Body .WebList_Row:hover td.WebIcon_check-square .WebButtonIcon:hover { 
	background: transparent !important;
}

/*------------------------------------------------------------------------------------------------------------
WebGrid: Selected item colors
---------------------------------------------------------------------------------------------------------------*/
.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected,
.WebList .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected {
    /*border-left: 3px solid rgb(0, 114, 198);*/     
	background-color: rgba(147, 193, 62, 0.8);
}
.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebCol:not(.WebColInput),
.WebList .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebCol:not(.WebColInput),
.WebGrid .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebColCombo,
.WebList .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebColCombo{
	/* color: #FFF !important;  */
}

/*For use when selecting multiple lines and keep the selected color*/
.WebGrid .WebList_Body .WebList_Row.WebList_SelectedMultiple, .WebList .WebList_Body .WebList_Row.WebList_SelectedMultiple {
    border-left: 3px solid rgb(0, 114, 198);
    /* color: rgba(51,153,255,0.25); */
	background-color: rgba(88,174,233,0.8);
}
.WebGrid .WebList_Body .WebList_Row,
.WebList .WebList_Body .WebList_Row {
	color: #333333;
}

.WebView:not(.Dashboard) .WebGroup:not(.NaviGroup).WebGrp_HasCaption > .WebCon_Inner > div > .WebContainer {
	background-color: transparent;
	border-top: 0;
	border-left: 0;
	border-bottom: 0;
	border-right: 0;
}


.WebGroup.WebGrp_HasCaption.WebGrp_Collapsible .WebGrp_Caption:after {
    /*display: inline-block;
    margin: 12px 30px 8px 20px;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #bababa;
    width: 100%;
	position: relative;
	display: inline-block;*/
}
/*
.WebGroup.WebGrp_HasCaption.WebGrp_Collapsible .WebGrp_Caption:before {
    display: inline-block;
    margin: 0 0 4px 0;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #bababa;
    width: 0px;
}*/
.WebGroup.WebGrp_HasCaption .WebContainer {
	margin-top: 30px !important;
}
.WebGroup:not(.WebGrp_Transparent):not(.CrookedDashboard).WebGrp_HasCaption .WebGrp_Caption {
	color: #FFF;
	/*width: 100%;*/
	right: 40px;
	display: flex !important;
	white-space: nowrap;
	background-color: rgb(48 52 52) !important;
    border-radius: 0px 5px 5px 0px;
    margin-top: -8px !important;
    line-height: 30px;
    margin-right: -25px;
    border-left: #FF9716 4px solid;
    box-shadow: 0px 4px 10px -5px #000000;
}

.WebGroup > div > div > .WebGrp_ExpandBtn {
	margin-top: -5px;
	border: 1px solid #FFF !important;
	color: #FFF !important;
	margin-right: -40px;
}

.WebGroup.Web_Enabled > div > div > .WebGrp_ExpandBtn:hover {
    background-color: #93c13e;
    color: #ffffff;
}

.WebCardContainer > div > div > .WebCC_LabelSpacer > label {
	color: #999999;
	margin-top: 9px;
}

.WebTabContainer .WebTbc_Head{
    /*background: #F3F3F3;*/
	background: rgba(66,73,73,1.0) !important; 
	color: #FFFFFF !important;
}

/*hover over disabled button*/
.WebButton.Web_Disabled button{
	background-color: rgba(0,0,0,0.1);
}
.WebButton.Web_Disabled button:hover, 
.WebButton.Web_Disabled button:focus{
    /*outline: none;
    background-color: rgba(255,255,255,1);*/
    /*border: 2px solid rgba(255,255,255,1);*/
}

.WebButtonIcon.ForceColor:before {
	color: #000000 !important;
}

/*Ripple effect*/
.WebButton:not(.WebMenuButton):not(.WebBack_Icon):not(.FilterButton) button:after,.Tile .WebCon_Sizer:after {
  /* Creates an empty element and positions it absolutelly */
  content: '';
  display: block;
  position: absolute;
  
  /* Makes it big enough to fit the button's width   */
  width: 800px;
  height: 800px;

  /* Pushes the top-left corner of the element to the center of the button  */
  top: 50%;
  left: 50%;
  
  /* Pulls the element with 50% of it's width to the left. 
     Same to the top. This centeres the element on the center of the button */
  margin-left: -400px;
  margin-top: -400px;
  
  /* Turns the square into a perfect circle
  */
  border-radius: 100%;
  
  /* Black as sin and transparent as FIFA
  */
  background: #fff;
  opacity: .6;
  
  /* Make it small
  */
  transform: scale(0);
}

/*cWebAccordionCard*/
.WebAccordion .WebAC_Body > .WebTab_Btn{
	padding: 10px 10px 10px 14px !important;
    background-color: rgb(147, 193, 62) !important;
    /* border-bottom: 0.2px solid rgb(127 160 66) !important; */
    border-left: 0px solid rgb(147 193 62) !important;
    outline: none !important;
    color: #fff;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 4px 10px -5px hsl(0deg 0% 0%);
    /*text-decoration: underline;*/
}
.WebAccordion:not(.AccordionInner1) .WebAC_Body > .WebTab_Btn:hover {
	background-color: #628c16 !important;
    border-top: 0.5px solid rgb(98 140 22) !important;
    /* border-left: 2px solid rgb(98 140 22) !important;*/
}
.WebAccordion.AccordionInner1 .WebAC_Body > .WebTab_Btn:hover {
	background-color: #303434 !important;
    border-top: 0.5px solid #303434 !important;
    border-left: 2px solid #303434 !important;
}

/*Background color for an inner webaccordioncard*/
.WebAcCard .WebAccordion .WebAC_Body > .WebAcCard .WebContainer {
	background-color: rgba(219,221,221,0.8);
}


.MagicButton > button {
	color: #000000 !important;
	background-color: transparent !important;
}

.TransparentWebButton button {
	background-color: transparent !important;
	color: #000 !important;
}

/*Special group for displaying "navigation" pages with info & buttons*/
.NaviGroup {
	background-color: #D9D9D9 !important;
	color: #000;
	border-radius: 10px !important;
	border: 0 !important;
}
.NaviGroup > .WebCon_Inner {
	border-radius: 5px !important;
}
.NaviGroup > .WebCon_Inner .WebCon_Sizer {
	min-height: inherit !important;
}
/*Tiles inside the NaviGroup*/
.NaviGroup > .WebCon_Inner .WebCon_Sizer .Tile .WebCon_Sizer{
	font-weight: bold;
}
.NaviGroup > .WebCon_Inner .WebCon_Sizer .Tile.Web_Enabled .WebCon_Sizer{
	background-color: #EFEFEF;
	color: #434A4A;
	font-weight: bold;
}
.NaviGroup.WebGrp_HasCaption > .WebCon_Inner label.WebGrp_Caption {
	background-color: transparent !important;
	color: #000;
	left: 0;
	margin-left: 5px;
	font-weight: bold;
	font-size: 22px;
}

.WebControl.WebGroup.WebGrp_HasCaption {
	margin-top: 5px;
}

.WebCon_ContentWrp > .WebCon_Main > .WebPanel {
	overflow-y: hidden;
}

.WebCardRightText {
	background-color: #fff;
	color: rgb(147, 193, 62);
	display: block;
	padding-left: 5px !important;
	padding-right: 5px !important;
	border-radius: 5px;
	font-weight: bold;
}

.WebList_ColHead:before {
	color: #FFF !important;
}

:not(td) > .WebForm .WebFrm_HasPrompt span.WebFrm_Prompt:before,
:not(td) > .SNWebFormClear .WebFrm_HasPrompt span.WebFrm_Prompt:before,
:not(td) > .SNWebFormPLus .WebFrm_HasPrompt span.WebFrm_Prompt:before,
:not(td) > .WebForm .WebFrm_HasClear span.WebFrm_Clear:before,
/*:not(td) > .SNWebFormClear .WebFrm_HasClear span.WebFrm_Clear:before,*/
:not(td) > .WebForm .WebFrm_HasPlus span.WebFrm_Plus:before,
:not(td) > .SNWebFormPlus .WebFrm_HasPlus span.WebFrm_Plus:before {
	background-color: #333 !important;
	line-height: 40px;
	margin-top: -10px;
	margin-left: -10px;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
	font-weight: bold !important;

	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
:not(td) > .WebForm .WebFrm_HasPrompt span.WebFrm_Prompt:hover:before,
:not(td) > .SNWebFormClear .WebFrm_HasPrompt span.WebFrm_Prompt:hover:before,
:not(td) > .SNWebFormPLus .WebFrm_HasPrompt span.WebFrm_Prompt:hover:before,
:not(td) > .WebForm .WebFrm_HasClear span.WebFrm_Clear:hover:before,
/*:not(td) > .SNWebFormClear .WebFrm_HasClear span.WebFrm_Clear:before,*/
:not(td) > .WebForm .WebFrm_HasPlus span.WebFrm_Plus:hover:before,
:not(td) > .SNWebFormPlus .WebFrm_HasPlus span.WebFrm_Plus:hover:before {
	background-color: #07526B !important;
	line-height: 40px;
	margin-top: -10px;
	margin-left: -10px;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
	font-weight: bold !important;

	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

/*This is a fix for usage in a grid*/
/*td > .WebForm .WebFrm_HasPrompt span.WebFrm_Prompt:before,*/
td > .SNWebFormClear .WebFrm_HasPrompt span.WebFrm_Prompt:before,
td > .SNWebFormPLus .WebFrm_HasPrompt span.WebFrm_Prompt:before,
td > .WebForm .WebFrm_HasClear span.WebFrm_Clear:before,
/*td > .SNWebFormClear .WebFrm_HasClear span.WebFrm_Clear:before,*/
td > .WebForm .WebFrm_HasPlus span.WebFrm_Plus:before,
td > .SNWebFormPlus .WebFrm_HasPlus span.WebFrm_Plus:before {
	background-color: #1C8099 !important;
	line-height: 36px;
	margin-top: -8px;
	margin-left: -10px;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
	border-radius: 3px;
}

/*.WebForm .WebFrm_HasPrompt span.WebFrm_Prompt:hover:before,*/
.SNWebFormClear .WebFrm_HasPrompt span.WebFrm_Prompt:hover:before,
.SNWebFormPlus .WebFrm_HasPrompt span.WebFrm_Prompt:hover:before,
.WebForm .WebFrm_HasClear span.WebFrm_Clear:hover:before,
/*.SNWebFormClear .WebFrm_HasClear span.WebFrm_Clear:hover:before,*/
.WebForm .WebFrm_HasPlus span.WebFrm_Plus:hover:before,
.SNWebFormPlus .WebFrm_HasPlus span.WebFrm_Plus:hover:before,
 {
	background-color: #333 !important;
	color: #fff;
}
.SNWebFormClear .WebFrm_HasClear span.WebFrm_Clear:hover:before {
	color: #000;
}

/*WebMsgBox styling*/
.WebWindow.WebMsgBox .WebWin_bottom_l {
    background-color: transparent;
}

.WebWindow.WebMsgBoxInfo .WebWin_header_c,
.WebWindow.WebMsgBoxConfirm .WebWin_header_c,
.WebWindow.WebMsgBoxWarning .WebWin_header_c,
.WebWindow .WebWin_header_c {
	background-color: #303434 ;
	padding-right: 0px;
}
.WebWindow.WebMsgBoxError .WebWin_header_c {
	background-color: #b72025;
}

.WebWindow .WebWin_top_l {
	height: 0px;
}
.WebWindow .WebWin_main_c
{
	background-color: #FFFFFF;
}

.WebWindow .WebWin_main_l {
    padding-left: 0px;
    background-color: #275DAD;
}

.WebWindow .WebWin_controls .WebWin_close {
    margin: 5px 0 0 -38px;
}

.WebWindow .WebWin_main_r
{
	padding-right: 0px;
	background-color: #FFFFFF;
}

.WebWindow .WebWin_header_r {
	background-color: #FFFFFF;
	padding: 10px 13px 0px 13px;
	box-shadow: 0px 17px 10px -18px #000000;
    z-index: 881 !important;
    position: relative;
}

.WebWindow .WebWin_header_c {
	
	border-left: #FF9716 4px solid;
	box-sizing: border-box;
}

/*.WebWindow .WebWin_title,*/
.WebWindow .WebWin_controls .WebWin_close:hover::before {
    color: #FF9716;
	-webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}
/*
.WebWindow.WebMsgBoxInfo  .WebWin_header_c ,
.WebWindow.WebMsgBoxConfirm  .WebWin_header_c ,
.WebWindow.WebMsgBoxError  .WebWin_header_c  , 
.WebWindow.WebMsgBoxWarning  .WebWin_header_c  {*/

.WebWindow.WebMsgBox .WebWin_header_c > .WebWin_title {
	color: #FFF;
}
.WebWindow.WebMsgBox .WebWin_main_c div.WebCon_Main {
	padding-bottom: 25px;

}

.WebWindow.WebMsgBox .WebWin_header_r {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	padding-right: 0px;
	margin-left: -1px;
	margin-right: -1px;
	margin-top: -1px;
}

.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: 5px;*/
}

.WebContainer.WebMsgBoxButtons,
.WebContainer.WebMsgBoxOneBtn,
.WebContainer.WebMsgBoxTwoButtons {
	margin-bottom: 10px;
}

.WebContainer.WebMsgBoxButtons .WebCon_Content .WebButton > .WebCon_Inner,
.WebContainer.WebMsgBoxTwoButtons .WebCon_Content .WebButton > .WebCon_Inner,
.WebContainer.WebMsgBoxOneBtn .WebCon_Content .WebButton > .WebCon_Inner {
	background-color: #434A4A;
	border-radius: 5px;
	margin: 5px;
}

.WebContainer.WebMsgBoxButtons .WebCon_Content .WebButton > .WebCon_Inner button,
.WebContainer.WebMsgBoxTwoButtons .WebCon_Content .WebButton > .WebCon_Inner button,
.WebContainer.WebMsgBoxOneBtn .WebCon_Content .WebButton > .WebCon_Inner button {
	color: #FFF;
	font-weight: bold;
}

/*-------------------------------------Loading dialog---------------------------------------*/
.WebWindow.WebMsgBoxProgress {
	visibility: hidden;
}
.WebWindow.WebMsgBoxProgress .WebWin_header_c {
    height: 0 !important;
    background-color: rgb(147, 193, 62);
}/*
.WebMsgBoxProgress .WebLabel_content {
	visibility: visible;
	color: #bababa;
	margin: 30px 0px 0px 0px !important;
}*/
.WebMsgBoxProgress .WebLabel_content:before {
    width: 70px;
    height: 70px;
    display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	margin: auto;
	/*animation: colorchange 5s infinite;*/
	visibility: visible;
	/*Fallback for IE/Edge...*/
	background: transparent url('../../Images/Ripple-1s-200px.gif') no-repeat center center !important;
	background-size: contain !important;
	-webkit-filter: unset;
	filter:  unset;
}
/*Firefox SVG support is good, use it.*/
@supports (-moz-appearance:meterbar) {
	.WebMsgBoxProgress .WebLabel_content:before {
		background: transparent url('../../Images/Ripple-1s-200px.svg') no-repeat center center !important;
		background-size: contain !important;
	}
}
/*Webkit (chrome/opera/android/safari) SVG support is good, use it.*/
.selector:not(*:root), .WebMsgBoxProgress .WebLabel_content:before {
	background: transparent url('../../Images/Ripple-1s-200px.svg') no-repeat center center !important;
	background-size: contain !important;
}

@keyframes colorchange
{
	0%   {filter: hue-rotate(0deg);}
	100% {filter: hue-rotate(360deg);}
}

.WebWindow.WebMsgBoxProgress  .WebContainer .WebCon_Content{
	margin:0;
	text-align: center;
	display: inline-block;
	margin-top: 50px;
	width: 100%;
}

.WebWindow.WebMsgBoxProgress  .WebContainer .WebCon_Content div.WebLabel_content{
	text-align: center !important;
}

.WebWindow.WebMsgBoxProgress {
	width: 300px;
	z-index: 920;
}

.WebMenuBar {
	background-color: #333;
}

.WebMenuBar.Web_Enabled ul.WebBarRoot > li:hover > div{
	background-color: rgba(255,255,255,0.3) !important;
}

.TilesGroupNew > .WebCon_Inner{
	background: rgba(220,220,220,0.1) !important;
	border: 0;
	color: #FFF;
}

.TilesGroupNew > .WebCon_Inner .Tile > .WebCon_Inner{
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

.WSNOrangeButton > .WebCon_Inner button {
	background-color: #F18828;
}

.WebButton.WSNOrangeButton.Web_Enabled > .WebCon_Inner > div > button:hover {
	background-color: #303434 !important;
}
/*Hover is only active on mobile once clicked*/
.df-mobile .WebButton.WSNOrangeButton.Web_Enabled > .WebCon_Inner > div > button:hover {
	background-color: #F18828 !important;
}

button.WSNOrangeColumnButton:before {
	color: #F18828 !important;
}

/*.WSNOrangeButton.Web_Enabled > .WebCon_Inner button:hover {
	background-color: #D3701D !important;
}*/

.WebButton.WSNBlueButton > .WebCon_Inner button {
	background-color: #1C8099;
}
.WebButton.WSNBlueButton.Web_Enabled > .WebCon_Inner > div > button:hover {
	background-color: #303434 !important;
}

.WebButton.WSNLightGreyButton > .WebCon_Inner button {
	background-color: #A8AAAA;
}
.WebButton.WSNLightGreyButton.Web_Enabled > .WebCon_Inner > div > button:hover {
	background-color: #303434 !important;
}

.WebButton.WSNGreenButton > .WebCon_Inner button {
	color: #fff;
	background-color: #44AC34;
}

.WebButton.WSNRedButton > .WebCon_Inner button {
	color: #fff;
	background-color: rgb(226, 64, 64);
}


/*.WSNBlueButton.Web_Enabled > .WebCon_Inner button:hover {
	bckground-color: #333 !important;
}*/

.WebButton button {
	border-radius: 5px;
}

.WebButton.Web_Enabled button:hover,
.WebGrid .WebList_Body .WebList_Row button:hover,
.WebList .WebList_Body .WebList_Row button:hover {
	background-color: #A8AAAA;
}
/*"Disable" the selection display of a button*/
.WebButton.Web_Enabled button:focus {
	background-color: #434a4a;
}

.CTransparentLabel1 label,
.WebGroup.WebGrp_HasCaption.CTransparentLabel1 label.WebGrp_Caption {
	background-color: transparent !important;
	color: #000;
	font-weight: bold;
	margin-top: 0px !important;
}
.WebGroup.WebGrp_HasCaption.CTransparentLabel1 {
	margin-top: -15px;
}
.CTransparentLabel1 .WebCon_Content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*Disable the hover color (for now)*/
.WebForm.Web_Enabled .WebFrm_Prompt:hover:before,
.WebFileFrm.Web_Enabled div.WebFile_Btn:hover:before {
	color: #fff !important;
}

/*-----------------------------------Datepicker styling--------------------------------------*/
.WebDP .WebDP_Head {
    background: #434A4A;
}
.WebDP .WebDP_MonthMnu, .WebDP .WebDP_YearMnu{
    border: 0;
    color: #181818;
}
.WebDP li.WebDP_Current,
.WebDP.Web_Enabled li.WebDP_Current:hover{
    background-color:  #434A4A;
    color: #FFFFFF;
}
.WebDP .WebDP_YearMnu .WebDP_Up.WebDP_UpDown,
.WebDP .WebDP_YearMnu .WebDP_Down.WebDP_DownDown{
	background: #fff;
	color: #434A4A;
}
.WebDP .WebDP_Footer{
    background: none repeat scroll 0 0 #434A4A;
    color: #FFFFFF;
}
.WebDP.Web_Enabled .WebDP_BtnToday:hover{
	background: #303434;
}
.WebDateForm_Picker{
    border: 0;
}

/*------------------------------------Breadcrumb (dropdown)-----------------------------------*/
.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs {
	background-color: #434A4A;
}
.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li div,
.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li:hover div {
	color: #FFF;
}
.WebBreadcrumb .WebCrumbs_DropDown ul.WebCrumbs li.WebCurrentCrumb div {
	color: #000;
	background-color: #fff;
	border-radius: 5px;
}
.WebBreadcrumb ul.WebCrumbs {
	border: 0 !important;
	border-radius: 5px !important;
}

/*-----------------------------------------Form suggestion-----------------------------------*/
.WebSuggestions .WebSug_Selected,
.WebSuggestions .WebSug_Selected:hover,
.WebSuggestions .WebSug_Selected:focus{
    background: none repeat scroll 0 0 #A8AAAA;
    color: #FFFFFF;
}


/*-------------------------------------Custom modal dialog styling----------------------------*/
.WebWindow.Web_Enabled.WSNModalDialog {
	border: white 8px solid;
    border-radius: 8px;
	border-left-width: 2px;
    border-right-width: 2px;
	z-index: 880 !important;
}

/*---------------------------Artik counter group------------------------------*/
.WSNGroupArtikCounters {
	background-color: #FFF;
	border-radius: 5px;
}
.WebGroup.WSNGroupArtikCounters.WebGrp_HasCaption label.WebGrp_Caption {
	background-color: transparent !important;
	color: #303434;
	font-weight: bold;
	display: block !important;
	text-align: center;
}
.WebGroup.WSNGroupArtikCounters .WebLabel .WebLabel_content {
	color: #303434;
	font-weight: bold;
}
/*This class is for just the number part of the counters*/
.WebGroup.WSNGroupArtikCounters .WebLabel.WSNGroupArtikCounter .WebLabel_content{
	color: #FFF;
	background-color: #303434;
	border-radius: 5px;
	line-height: 12px;
	display: inline-block;
	margin-top: 7px;
	font-weight: bold;
}
.df-ModeTabletLandscape .WebGroup.WSNGroupArtikCounters .WebLabel.WSNGroupArtikCounter .WebLabel_content{
	margin-top: unset;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
}

/*------------------------------Growls (add icon)-------------------------*/
.growl.growl-error .growl-title,
.growl.growl-notice .growl-title,
.growl.growl-warning .growl-title{
	font-size: 0px;
	display: inline-block
}
.growl .growl-message{
	font-weight: bold;
	display: inline;
	font-size: 14px;
}

.growl.growl-error .growl-title:before{
	font-family: 'FontAwesome' !important;
	font-size: 40px;
	content: "\f071" !important;
	vertical-align: middle;
	margin-right: 10px;
	font-weight: normal;
	display: inline-table;
}

.growl.growl-notice .growl-title:before{
	font-family: 'FontAwesome' !important;
	font-size: 40px;
	content: "\f058" !important;
	vertical-align: middle;
	margin-right: 10px;
	font-weight: normal;
	display: inline-table;
}

.growl.growl-warning .growl-title:before{
	font-family: 'FontAwesome' !important;
	font-size: 40px;
	content: "\f05a" !important;
	vertical-align: middle;
	margin-right: 10px;
	font-weight: normal;
	display: inline-table;
}

/*-------------------------Current tab--------------------------------*/
.WebTabContainer .WebTab_Btn.WebTab_Current,
.WebTabContainer .WebTab_Btn.WebTab_Current:hover{
    border-bottom: unset;
}
.WebTabContainer .WebTab_Btn.WebTab_Current span{
	background-color: #FFF;
	color: #000;
	border-radius: 100%;
	height: 24px;
	width: 24px;
	text-align: center;
	font-weight: bold;
}

/*-----------------------------------Icons in a list------------------------*/
/*Current selected row*/
.WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected .WebButtonIcon:before {
	color: #FFF;
}
/*Color of the other icons in the list*/
.WebButtonIcon:before {
	color: #303434;
}

/*--------------------------------FlipSwitch----------------------------------*/
.WebCheckbox.FlipSwitch input:checked + .WebCB_Fake {
	background-color: rgb(147, 193, 62);
	border: 1px solid rgb(147, 193, 62);
}
.WebCheckbox input:checked + .WebCB_Fake:before {
	background: rgb(147, 193, 62);
	border: 1px solid rgb(147, 193, 62);
}
.WebCheckbox.FlipSwitch input:checked + .WebCB_Fake:after {
	background-color: rgb(147, 193, 62);
	border: 1px solid rgb(147, 193, 62);
}

/*--------------------------Radio button-------------------------------------*/
.WebRadio input:checked + .WebR_Fake:before {
	background-color: rgb(147, 193, 62);
	border: 1px solid rgb(147, 193, 62);
}

.WebMenuList.WebControl > .WebCon_Inner {
	background-color: #1e2020;
}

/*Force the user to click the control, no selecting by clicking the label*/
.WebCheckbox .WebCheckbox_Caption,
.WebRadio .WebRadio_Caption {
	pointer-events: none !important;
}

/*Menu ">"*/
.WebMenuList li.WebItm_HasSub:before,
.WebMenuBar ul li ul li.WebItm_HasSub > div:before {
	color: #FFF;
}

/*Menu "<"*/
.WebMenuList .WebML_Back:before {
	color: #FFF;
}

.WebHtmlBox.Web_Disabled.WSNHtmlBoxEmail .WebHtml_Wrp {
	background-color: rgba(0,0,0,0.1);
	border: 0;
	border-radius: 5px;
}

.SupportMenuButton {
	padding-top: 5px;
	padding-bottom: 5px;
}
.SupportMenuButton:hover {
	background-color: initial !important;
}
.SupportMenuButton > div {
	margin-left: 15px;
	color: #333;
	background-color: #fff;
	text-align: center;
	border-radius: 5px;
}

.SupportMenuButton:hover > div {
	background-color: #b0b0b0 !important;
}
.SupportMenuButton span.WebItm_Icon {
	margin-left: -30px;
}
.SupportMenuButton span.WebItm_Icon:before {
	color: #333 !important;
}
.SupportMenuButton a {
	padding-left: 10px;
	font-weight: bold;
	margin-top: 3px !important;
}

.SupportMenuButton.RequestLicenseButton div{
	color: #FFF !important;
	background-color: rgb(147, 193, 62) !important;
}
.SupportMenuButton.RequestLicenseButton span.WebItm_Icon:before {
	color: #FFF !important;
}
.SupportMenuButton.RequestLicenseButton:hover > div {
	background-color: #b0b0b0 !important;
}

.VersionInfo {
	font-size: 11px;
	text-align: center;
}
.VersionInfo a {
	margin-left: -10px !important;
}

/* The animation code */
@keyframes FlashingRedColor {
    0% {color: #FFF;}
	50% {color: rgb(226, 64, 64);}
	100% {color: #FFF;}
}

.RedMenuIcon .WebItm_Icon:before {
	/*color: rgb(226, 64, 64) !important;*/
	animation-name: FlashingRedColor;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.WSNAlertRow {
	border: 3px solid rgba(0,0,0,0.4) !important;
	margin-bottom: 5px;
	border-radius: 5px;
	
}
.WSNAlertRow.WSNAlertRowRed,
.WSNAlertRow.WSNAlertRowRed td.RowDetail {
	background-color: rgba(206,87,87,1) !important;
	color: #FFF !important;
}
.WebProgressBar .WebPB_Wrp {
	border-radius: 5px !important;
}
.WebProgressBar .WebPB_Progress,
.WebFileFrm .WebFile_ProgressBar {
	background-color: rgb(147, 193, 62) !important;
	border-radius: 5px !important;
}

.dhx_cal_container {
	background-color: transparent !important;
}

.dhx_cal_event_clear {
	height: 17px !important;
	line-height: 17px !important;
	font-family: Arial,sans-serif !important;
}

.WebWindow.WebView {
	z-index: 881 !important;
}

.WebWindow_Mask {
	z-index: 880 !important;
}

.WebFlPnl.WebColorForm_FlPnl,
.WebDateForm_Picker,
.WebSuggestions {
    z-index: 882 !important;
}

.DashAgendaItem {
	width: 25%;
	float: left;
	text-align:center;
	cursor: pointer;
}
.DashAgendaItem span {
	font-size: 40px;
}
.DashAgendaItem p {
	font-size: 20px;
	text-align:center;
}

/* ------------------------- Lijsten op dashboard met nieuwe en bevestigde bestellingen ------------------------- */
.WebList.ListDashboard .WebList_Row:not(.WebList_RowEmpty) {
	border: 2px solid #837e7e;
	border-radius: 5px;
	margin-bottom: 4px;
}

.WebList.ListDashboard .WebList_Row.WebList_Row.WebList_RowOdd
,.WebGrid.ListDashboard  .WebList_Row.WebList_Row.WebList_RowOdd
{
    /*background-color: rgba(28, 67, 125,0.07) !important;*/
	background-color: rgba(239,239,239,0);
	/*background-color: rgba(203,221,247,0.3);*/
	color: #333333;
}

.WebList.ListDashboard .WebList_Row.WebList_Row.WebList_RowEven
,.WebGrid.ListDashboard  .WebList_Row.WebList_Row.WebList_RowEven
{
	background-color: rgba(255,255,255,0);
	color: #333333;
}

/* Lijst op dashboard bovenaan met nieuwe meldingen */
.GroupMeldingen {
	margin-top: 0px;
}

.WebGroup.WebControl.GroupMeldingen > .WebCon_Inner {
	min-height: 0 !important;
}

.WebList.ListMeldingen
,.WebGrid.ListMeldingen 
{
	margin-top: -32px;
}

.WebList.ListMeldingen .WebList_Row:not(.WebList_RowEmpty) {
	background-color: #d9edf7;
	border: 2px solid #837e7e;
	border-radius: 5px;
	margin-bottom: 4px;
}

.WebList.ListMeldingen .WebList_Row.WebList_Row.WebList_RowOdd
,.WebGrid.ListMeldingen  .WebList_Row.WebList_Row.WebList_RowOdd
{
	background-color: #d9edf7;
	color: #333333;
}

.WebList.ListMeldingen .WebList_Row.WebList_Row.WebList_RowEven
,.WebGrid.ListMeldingen  .WebList_Row.WebList_Row.WebList_RowEven
{
	background-color: #d9edf7;
	color: #333333;
}

.WebList.ListMeldingen .WebList_Row:first-of-type
,.WebGrid.ListMeldingen .WebList_Row:first-of-type {
	margin-top: 32px;
} 

.WebList.ListMeldingen .WebList_Row:last-of-type
,.WebGrid.ListMeldingen .WebList_Row:last-of-type {
	margin-bottom: 16px;
}

.WebList.ListMeldingen .WebList_Row td.WebColBtn
,.WebGrid.ListMeldingen .WebList_Row td.WebColBtn {
	vertical-align: top;
}

.WebList.ListMeldingen .WebList_Row td button
,.WebGrid.ListMeldingen .WebList_Row td button {
	margin-top: -4px;
}

.MobileList.WebList .WebList_Body .WebList_Row td.RowCaption, 
.MobileList.WebGrid .WebList_Body .WebList_Row td.RowCaption 
{
    font-size: 15px;
}

.ShowOveflow.WebGridWillaertStyle .WebList_Body .WebList_Row td.RowCaption:not(.HelperLineValue)
{
	white-space: unset !important;
}