body {	
	background: #F0F7FF; /*@edem WD-3120: remove important from the background color */
	font-size: 12px;
	font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #707478;
	height: 100%;
	transition: background 0.4s; /* DO NOT REMOVE - on mobile making for standard menu background effect */
}

/* JL 26.7.2016 WD-3295 - DO NOT REMOVE */
body.wd-body-inactive {
	overflow: hidden !important; /* remove scrolling from layout when menu is shown in mobile */
	background: var(--element-background) !important; 
}

.wd-capitalize {
	text-transform: capitalize;
}

body > #page-container > #header {   
	margin-top: 0;
	margin-bottom: 0;
    border: 1px solid var(--gray-2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: var(--element-background);
    z-index: 65000;  	/* An index higher than this of the ShowProgressInfo, for the pull-down of the header, to be accessible. */
    height: 55px; 		/* LN: needed to set the same height as it is on release branch */
    display: block;
    position: fixed;
    width: 100%;
}
body > #page-container > #wd-sidebar {
  position: fixed;
  height: 100%;
  z-index: 1010; /*  JL 27.7.2016 WD-3295 on desktop must be less that #header !!! */
}
body > #page-container > #layoutMain {
	position: relative;
  margin-left: 220px; /* WD-6319 Must have margin to give place for menu */
  padding-top: 75px;
  min-height: 50px;
  transition: margin 0.4s, opacity 0.4s;   
}
body  #page-container.wd-sidebar-minified > #layoutMain {
	margin-left: 60px;
}

body > #page-container > #layoutMain.wd-cm-full-screen {
	margin-left: 0;
}

.content {	
	padding: 20px 15px;
}

@media (max-width: 768px) {
	.content {	
		padding: 20px 10px;
	}
}

.content.content-full-width {
	padding: 0;
}

.content.content-full-width .page-header {
	margin: 20px;
}

.content.content-full-width .breadcrumb {
	margin: 0 20px 0 0;
}

.content.content-inverse-mode .breadcrumb a, .content.content-inverse-mode .page-header,
	.content.content-inverse-mode h1, .content.content-inverse-mode h2,
	.content.content-inverse-mode h3, .content.content-inverse-mode h4,
	.content.content-inverse-mode h5, .content.content-inverse-mode h6 {
	color: var(--color);
}

.content.content-full-width .breadcrumb, .content.content-full-width .page-header
	{
	position: relative;
	z-index: 10;
}

.content.content-full-width .breadcrumb {
	z-index: 20;
}

/* JL 21.7.2016 Placing of header menu and content */

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
	font-size: 60%;
	font-weight: 300;
	color: #7c7f83;
}

a {
	color: var(--info-color-dark);
	transition: color 100ms ease-in-out;
	-o-transition: color 100ms ease-in-out;
	-ms-transition: color 100ms ease-in-out;
	-moz-transition: color 100ms ease-in-out;
	-webkit-transition: color 100ms ease-in-out;
}

ul {
	list-style-type: none;
}

.showSystemMessagesHtmlDoc ul {
 list-style-type: disc !important;
}

a:focus {
	outline: 0
}
a:hover {
	text-decoration: none;
}

.hoverTesting:hover a, .hoverTesting:focus a{
	color: var(--error-color);
}

.navbar .navbar-expand-sm {
	height: 55px;
}
 /* LN: this is already styled on custom.css
.navbar-toggler {
.navbar-toggle {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 0;
	padding: 10px;
	border: none;
	display: block;	
}
*/

.navbar-expand-sm .navbar-nav .nav-link {
	line-height: 20px;
	padding: 15px;
	/* height: 53px; LN: instead of setting a specific height we can change the padding so the dropdown has no space on top */
}

.navbar-nav>li>.dropdown-menu {
	margin-top: 0;
	border-top: 1px solid var(--gray-1);
	border: 1px;
}

.navbar-light .nav-link {
	color: #585663;
}

.nav-link:focus, .nav-link:hover {
	opacity: .6;
	filter: alpha(opacity = 60);
}

.navbar-nav>.show>a, .navbar-nav>.show>a:focus, .navbar-nav>.show>a:hover {
	background: none;
	color: #333;
	opacity: 1;
	filter: alpha(opacity = 100);
}


@keyframes expand {
	from {
		width: 200px;
	}

	to {
		width: 300px;
	}
}

@-webkit-keyframes expand {
	from {
		width: 200px;
	}

	to {
		width: 300px;
	}
}


.dropdown-menu.media-list .media-heading {
	font-weight: 600;
}

/** HK 19.7.2017 WD-4911
 *  START Css styles for notification/bell icon in header
 */
 
#wd-notificationItem {
	padding: 7px;
	position: relative;	
	font-size: 16px;
	/* top: 12px;  LN:conflicts with align-items-center for parent */
	border-radius: 50%;
	position: relative;	
	font-size: 16px;
	display: table;
	transition: background-color .4s;
	cursor: pointer;
}

/* Class wd-active is added when there exists notifications */
#wd-notificationItem.wd-active {
	margin-right: 5px;
}

#wd-notificationItem:hover {
	background-color: var(--gray-1);
}

#wd-notificationItem > .wd-bell {
	color: var(--color); 
	display: table-cell;
	position: relative;	
}

#wd-notificationItem.wd-active .wd-bell {
	animation: wd-bellRotation 10s infinite;
	-webkit-animation: wd-bellRotation 10s infinite;
}

/* Animations for the bell icon */
@keyframes wd-bellRotation {	
	
	0% { -webkit-transform: rotateZ(0); }

	89% { -webkit-transform: rotateZ(0); }
	90% { -webkit-transform: rotateZ(20deg); }
	91% { -webkit-transform: rotateZ(-18deg); }
	92% { -webkit-transform: rotateZ(16deg); }
	93% { -webkit-transform: rotateZ(-14deg); }
	94% { -webkit-transform: rotateZ(12deg); }
	95% { -webkit-transform: rotateZ(-10deg); }
	96% { -webkit-transform: rotateZ(8deg); }
	97% { -webkit-transform: rotateZ(-6deg); }
	98% { -webkit-transform: rotateZ(4deg); }
	99% { -webkit-transform: rotateZ(-2deg); }
	100% { -webkit-transform: rotateZ(0deg); }
}

@-webkit-keyframes wd-bellRotation {	
	
	0% { -webkit-transform: rotateZ(0); }

	89% { -webkit-transform: rotateZ(0); }
	90% { -webkit-transform: rotateZ(20deg); }
	91% { -webkit-transform: rotateZ(-18deg); }
	92% { -webkit-transform: rotateZ(16deg); }
	93% { -webkit-transform: rotateZ(-14deg); }
	94% { -webkit-transform: rotateZ(12deg); }
	95% { -webkit-transform: rotateZ(-10deg); }
	96% { -webkit-transform: rotateZ(8deg); }
	97% { -webkit-transform: rotateZ(-6deg); }
	98% { -webkit-transform: rotateZ(4deg); }
	99% { -webkit-transform: rotateZ(-2deg); }
	100% { -webkit-transform: rotateZ(0deg); }
}

#wd-notificationItem.wd-active:hover .wd-bell {
	animation: none;
}

#wd-notificationItem > .wd-todobadge {
	border-radius: 3px;
	padding: 1px 3px;
	opacity: 0;
	position: absolute;
	top: -5px;
	left: 15px;
	background-color: var(--error-color);
	color: white;
	font-size: 11px;
	font-weight: 500;
	line-height: normal; /* IE 11 not supporting initial value */ 
	line-height: initial;
	z-index: 1;
	visibility:visible;
	transition: opacity .4s;
}

#wd-notificationItem.wd-active > .wd-todobadge {
	opacity: 1;
}

/* END Css styles for notification icon in header*/ 


.navbar-user img {
	margin: -5px 10px 0 0;
	float: left;
	width: 30px;
	height: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px
}

.navbar-light .navbar-nav .show .dropdown-menu>li>a {
	color: var(--gray-8)
}

.page-header {
	margin: 0 0 10px!important; /* JL: why it was 20px. it was too much?*/
	border: none !important;
	padding: 0 !important;
	font-size: 24px !important;
	line-height: 28px !important
}

.page-header .wd-custom-image {
	display:inline-block;
	width:70px;
}
.page-header .wd-custom-image > img {
	max-width:100%
}

.breadcrumb {
	margin: 0 !important;
	padding: 0 !important;
	background: 0 0 !important;
}

.breadcrumb>li {
	line-height: 28px;
}

.breadcrumb>li a {
	color: #333;
}

.footer {
	margin: 0 25px 0 245px;
	border-top: 1px solid #CAD0D6;
	padding: 10px 0;
	z-index: 1020;
	line-height: 20px;
}


select {
  min-width: 75px;
}

select[multiple].form-control {
	border-color: var(--gray-1);
	height: auto;
}


.dropdown-menu {
	border: none;
	-webkit-box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2);
	box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2);
	font-size: 12px;
	
}

.dropdown-menu>li>a {
	padding: 5px 15px;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
	background: var(--gray-1);
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover
	{
	background: #348fe2;
}

.dropdown-menu .divider {
	border-color: var(--gray-1);
}

.dropdown-menu.media-list {
	max-width: 280px;
	padding: 0;
}

.dropdown-menu.media-list p {
	text-overflow: ellipsis;
	overflow: hidden;
}

.dropdown-menu.media-list .dropdown-header {
	padding: 10px 20px !important;
	background: var(--element-background)
}

.dropdown-menu.media-list>.media {
	margin-top: 0;
	border-top: 1px solid var(--gray-1);
	border-bottom: 1px solid var(--gray-1);
	margin-bottom: -1px
}

.dropdown-menu.media-list>.media>a {
	display: block;
	padding: 10px 20px !important;
}

.dropdown-menu.media-list>.media .media-object {
	margin-right: 10px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	height: 36px;
	width: 36px;
	line-height: 36px;
	font-size: 14px;
	color: var(--color);
	text-align: center;
}

.dropdown-footer {
	padding: 10px 20px;
}

.dropdown-menu>li.dropdown-footer>a {
	padding: 0 !important;
	display: inline !important;
}

.dropdown-menu>li.dropdown-footer>a:focus, .dropdown-menu>li.dropdown-footer>a:hover
	{
	background: none !important;
	text-decoration: underline !important;
}

.label {
	font-size: 75%;
	font-weight: 600;
}

.pager li>a, .pager li>span, .pagination>li>a {
	border-color: var(--gray-1);
	color: #242a30
}

.pager.pager-without-border li>a, .pager.pager-without-border li>span,
	.pagination.pagination-without-border>li>a {
	border-color: var(--color)
}

.pager>.disabled>a, .pager>.disabled>span, .pagination>.disabled>a,
	.pagination>.disabled>a:focus, .pagination>.disabled>a:hover,
	.pagination>.disabled>span, .pagination>.disabled>span:focus,
	.pagination>.disabled>span:hover {
	opacity: .6;
	filter: alpha(opacity = 60);
	border-color: var(--gray-2);
}

.pagination>li>a {
	margin-left: 5px;
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	border-radius: 3px !important;
	color: #242a30;
}

.pagination>li:first-child>a {
	margin-left: 0;
}

.pagination-sm>li>a, .pagination-sm>li>span {
	font-size: 10px;
	margin-left: 4px;
}

.pagination-lg>li>a, .pagination-lg>li>span {
	font-size: 14px;
	margin-left: 6px;
}

.pager li>a:focus, .pager li>a:hover, .pager li>span:focus, .pager li>span:hover,
	.pagination>li>a:focus, .pagination>li>a:hover {
	color: #242a30;
	background: var(--gray-1);
	border-color: #d8dde1;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover,
	.pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover
	{
	background: var(--gray-9) !important;
	border-color: var(--gray-9) !important;
}

/* Bootstrap 4 changes */

.navbar-light .navbar-nav>li>a.nav-link {
	color: var(--gray-7);
	padding: 15px; /* LN: this padding is necessary so dropdown menu on right side of navbar is aligned with person name*/
}

.navbar-nav>li>a.nav-link:focus, .navbar-nav>li>a.nav-link:hover {
	color: var(--color);
	/* background: #fafafa; */
	opacity: .6;
	filter: alpha(opacity = 60)
}

/*LN: made path more specific to overwrite BS4 rules */
.navbar-light .navbar-nav .show>a.nav-link:focus, 
.navbar-light .navbar-nav .show>a.nav-link:hover {
	background: none;
	color: var(--color);
	opacity: 1;
	filter: alpha(opacity = 100);
}

/*.nav-tabs, .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus,
	.nav-tabs.nav-justified>.active>a:hover, .nav-tabs.nav-justified>li>a,
	.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover,
	.nav-tabs>li>a {
	border: none !important
}*/

.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus,
	.nav-tabs.nav-justified>.active>a:hover, .nav-tabs>li.active>a,
	.nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
	color: #242a30
}
/*
.nav-tabs {
	background: #c1ccd1;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0
}
*/
.nav-tabs.nav-tabs-inverse {
	background: #242a30
}

.nav-tabs.nav-justified>li>a {
	-webkit-border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}

.nav-tabs.nav-tabs-inverse>li.active>a, .nav-tabs.nav-tabs-inverse>li.active>a:focus,
	.nav-tabs.nav-tabs-inverse>li.active>a:hover {
	background: var(--element-background)
}

.nav-tabs.nav-tabs-inverse>li>a:focus, .nav-tabs.nav-tabs-inverse>li>a:hover
	{
	color: var(--color);
	background: 0 0;
}

.nav-tabs.nav-justified>li, .nav-tabs>li {
	margin-bottom: 0;
}

.nav-tabs>li>a {
	margin-right: 5px;
	line-height: 20px;
}

.tab-content {
	margin-bottom: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 15px;
	background: var(--element-background);
}

.nav-tabs+.tab-content {
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}

.card-title a {
	display: block
}

.card-title>a:focus, .card-title>a:hover {
	text-decoration: none
}

.row > .col-12 > .card.wd-recordset-panel {
	margin-bottom: 0;
}

.card {
	margin-bottom: 20px;
	border: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.card.card-no-rounded-corner .card-body, .card.card-no-rounded-corner .card-footer,
	.card.card-no-rounded-corner .card-header {
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important
}

.card .card-header {
	border: none;
	padding: 10px 15px;
}

.card-transparent .card-header {
	border: none;
	background-color: transparent;
}
/* JL 15.06.2016 WD-2470 Put borders around expandable cards
 * - Find from sibling because other way I can affect whole application
 */ 
.card .card-header ~ .card-body {
	border: 1px solid var(--gray-2);
}
.card .card-header ~ .card-body > .table-responsive {
	border: 1px transparent;
}

.card  .card-body > a.btn {
	margin-top: 10px; /*JL 1.12.2016 WD-3917 button not be attached directly to other elements */
	margin-bottom: 10px; /* JL 1.12.2016 WD-3917 button not be attached directly to other elements */
}

.card-header+.slimScrollDiv, .card-header+.table {
	border-top: 1px solid var(--gray-1);
}

.card-header-btn {
	float: right;
}

.card-header-btn>a {
	margin-left: 8px;
}

.card-header .btn-group .btn {
	margin-top: -7px;
}

.card-header .btn-group .btn.btn-md {
	margin-top: -5px;
}

.card-header .btn-group .btn.btn-sm {
	margin-top: -1px;
}

.card-header .label.pull-left, .card-header .label.float-right {
	line-height: 15px;
}

.card-header .progress.pull-left, .card-header .progress.float-right
	{
	width: 40%;
	min-width: 120px;
}

.card-header+.alert {
	margin-bottom: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0
}

.card-with-tabs .card-header {
	background: #c1ccd1 !important;
	color: #333 !important
}

.card-header .nav-tabs {
	margin-top: -10px;
	margin-right: -15px
}

.card-header .nav-tabs>li>a {
	padding: 10px 15px;
	line-height: 20px
}

.card-title {
	line-height: 20px;
	font-size: 12px
}

.card-title .accordion-toggle {
	margin: -10px -15px;
	padding: 10px 15px
}

.card-title .float-right {
	line-height: 20px
}

.card-toolbar {
	border-top: 1px solid var(--gray-1);
	border-bottom: 1px solid var(--gray-1);
	padding: 10px 15px;
	background: var(--element-background)
}

.card-toolbar+.form-control {
	margin: -1px 0 0;
	border-right: none;
	border-left: none
}

.form-control+.card-footer {
	border-top: none
}

.switchUserChooser > .wd-form-inline > .card .card-body {
	padding: 0px;
}

.switchUserChooser > .wd-form-inline > .card {
	margin-bottom: 0px;
}

.card-body {
	/* JL: overrides 15px from boostrap, but not important, 
	 * in datatables we override it once again for paginator */
	padding: 10px;	
}

.card-body.no-border {
	border: none !important
}

.card-body.no-padding, .card-body.card-form, .card-body.card-full-width,
	.card-body.card-table {
	padding: 0 !important
}

.card-body.with-table>.table {
	border: 0;
	margin: 0
}

.card-body.with-table>.table tr:last-child td, .card-body.with-table>.table tr:last-child th
	{
	border-bottom: 0
}

.card-default>.card-header+.card-collapse .card-body {
	border-top: 1px solid var(--gray-1)
}

.card-footer {
	background: var(--element-background);
	border-top: 1px solid var(--gray-1)
}

.card .tab-content {
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px
}

.card-default>.card-header {
	background: var(--gray-0)
}

.card-info>.card-header, .card-inverse>.card-header,
	.card-primary>.card-header, .card-success>.card-header,
	.card-warning>.card-header {
	color: white;
}


.card-inverse>.card-header {
	background: #3d464d;
	border: 1px solid var(--gray-2);
}
.card.card-inverse> .card-header + .card-body {
	border-top:0px; /* on card inverse we use header and thats why we do not need border-top. because we already have it from the header */
}
.card-success>.card-header {
	background: #3fb1d3
}

.card-warning>.card-header {
	background: #c47d15
}

.card-danger>.card-header {
	background: #cc4946
}

.card-primary>.card-header {
	background: #2a72b5
}

.card-info>.card-header {
	background: #3a92ab
}

.card.card-loading .card-body .card-loader {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--element-background);
	opacity: .9;
	filter: alpha(opacity = 90);
	animation: fadeIn .2s;
	-webkit-animation: fadeIn .2s;
	z-index: 1020
}

.label.label-default {
	background: #b6c2c9
}
.label.label-danger {
	background: #ff5b57
}
.label.label-warning {
	background: var(--warning-color)
}
.label.label-success {
	background: #00acac
}
.label.label-info {
	background: #49b6d6
}
.label.label-primary {
	background: #348fe2
}
.label.label-inverse {
	background: #2d353c
}

@keyframes fadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

.media .media-object {
	width: 128px
}

.media.media-lg .media-object {
	width: 256px
}

.media.media-sm .media-object {
	width: 64px
}

.media.media-xs .media-object {
	width: 32px
}

.media>.pull-left {
	margin-right: 15px
}

.media>.float-right {
	margin-left: 15px
}

.media a.media-heading:focus, .media a.media-heading:hover, .media a:focus,
	.media a:focus .media-heading, .media a:hover, .media a:hover .media-heading
	{
	color: #242a30;
	text-decoration: none
}

.media-list.media-list-with-divider>li+li {
	border-top: 1px solid var(--gray-1);
	padding-top: 20px
}
/*    WD-2658
.table {
	border-color: var(--gray-2);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px
}

.table>thead>tr>th {
	color: #242a30;
	font-weight: 600;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
	.table>thead>tr>td, .table>thead>tr>th {
	border-color: var(--gray-2);
	
}
*/
.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th,
	.table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th,
	.table-condensed>thead>tr>td, .table-condensed>thead>tr>th {
	padding: 7px 15px
}

/** changes ggruber 29.7.2015 for SimpleDataList / DataTables */
.table-striped>tbody>tr:nth-of-type(odd) { /* JL 21.12.2016 instead of nth-child using nth-of-type */
	background: var(--gray-0);
}
.table-striped>tbody>tr:nth-of-type(even) { /* JL 21.12.2016 instead of nth-child using nth-of-type */
	background: var(--element-background);
}

.table-nostriped tbody tr:nth-of-type(odd) {
  background-color:transparent;
}

.table-row-clickable.hover>tbody>tr:hover {
	cursor: pointer;
}
/*    WD-2658
table.hover>tbody>tr:hover {
	background: #ecdec7;
}
*/
/** changes end */

.table.table-dark>tbody>tr>td, .table.table-dark>tbody>tr>th,
	.table.table-dark>tfoot>tr>td, .table.table-dark>tfoot>tr>th,
	.table.table-dark>thead>tr>td, .table.table-dark>thead>tr>th {
	border-color: #999 !important;
	border-color: rgba(0, 0, 0, .2) !important
}

.table.table-dark, .table.table-dark>tbody>tr>th, .table.table-dark>tfoot>tr>th,
	.table.table-dark>thead>tr>th {
	color: var(--color)
}

.table>tbody>tr.table-info>td, .table>tbody>tr.table-info>th, .table>tbody>tr>td.table-info,
	.table>tbody>tr>th.table-info, .table>tfoot>tr.table-info>td, .table>tfoot>tr.table-info>th,
	.table>tfoot>tr>td.table-info, .table>tfoot>tr>th.table-info, .table>thead>tr.table-info>td,
	.table>thead>tr.table-info>th, .table>thead>tr>td.table-info, .table>thead>tr>th.table-info
	{
	background: #dbf0f7;
	border-color: #b6e2ef
}

.table>tbody>tr.table-success>td, .table>tbody>tr.table-success>th, .table>tbody>tr>td.table-success,
	.table>tbody>tr>th.table-success, .table>tfoot>tr.table-success>td, .table>tfoot>tr.table-success>th,
	.table>tfoot>tr>td.table-success, .table>tfoot>tr>th.table-success, .table>thead>tr.table-success>td,
	.table>thead>tr.table-success>th, .table>thead>tr>td.table-success, .table>thead>tr>th.table-success
	{
	background: #cee;
	border-color: #99dede
}

.table>tbody>tr.table-danger>td, .table>tbody>tr.table-danger>th, .table>tbody>tr>td.table-danger,
	.table>tbody>tr>th.table-danger, .table>tfoot>tr.table-danger>td, .table>tfoot>tr.table-danger>th,
	.table>tfoot>tr>td.table-danger, .table>tfoot>tr>th.table-danger, .table>thead>tr.table-danger>td,
	.table>thead>tr.table-danger>th, .table>thead>tr>td.table-danger, .table>thead>tr>th.table-danger
	{
	background: #ffdedd;
	border-color: #ffbdbc
}

.table>tbody>tr.table-warning>td, .table>tbody>tr.table-warning>th, .table>tbody>tr>td.table-warning,
	.table>tbody>tr>th.table-warning, .table>tfoot>tr.table-warning>td, .table>tfoot>tr.table-warning>th,
	.table>tfoot>tr>td.table-warning, .table>tfoot>tr>th.table-warning, .table>thead>tr.table-warning>td,
	.table>thead>tr.table-warning>th, .table>thead>tr>td.table-warning, .table>thead>tr>th.table-warning
	{
	background: #fdebd1;
	border-color: #fbd7a3
}

.table>tbody>tr.table-active>td, .table>tbody>tr.table-active>th, .table>tbody>tr>td.table-active,
	.table>tbody>tr>th.table-active, .table>tfoot>tr.table-active>td, .table>tfoot>tr.table-active>th,
	.table>tfoot>tr>td.table-active, .table>tfoot>tr>th.table-active, .table>thead>tr.table-active>td,
	.table>thead>tr.table-active>th, .table>thead>tr>td.table-active, .table>thead>tr>th.table-active
	{
	background: var(--gray-0);
	border-color: #e2e7e9;
}

.well {
	padding: 15px;
	background:var(--element-background);
	box-shadow: none;
	-webkit-box-shadow: none;
}

.well-sm {
	padding: 10px;
}

.well-lg {
	padding: 30px;
}

.jumbotron {
	background: #f0f3f4;
}

.jumbotron .h1, .jumbotron h1 {
	font-size: 56px;
}

.jumbotron p {
	font-size: 18px;
}

.row {
	margin: 0;
}
.row:empty {
	display:none;
}

.row > .col-12 {
    padding: 0;

}

.row>[class*=col-] {
	padding: 0;
}

.row > .left-side, .row > .right-side {
	padding: 0 10px;
}

a.list-group-item.active, a.list-group-item.active:focus, a.list-group-item.active:hover
	{
	background: #348fe2
}

.p-0 {
	padding: 0 !important
}

.f-s-14 {
	font-size: 14px !important
}
.f-s-16 {
	font-size: 16px !important
}

.text-center {
	text-align: center !important
}

.text-left {
	text-align: left !important
}

.text-right {
	text-align: right !important
}

.pull-left {
	float: left !important
}

.float-right {
	float: right !important
}

.vertical-box {
	display: table;
	width: 100%
}

.vertical-box .vertical-column {
	display: table-cell;
	vertical-align: top
}

.card-expand .vertical-box {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0
}

.card-expand .vertical-box .vertical-column {
	display: table-cell;
	width: 100%
}

.no-rounded-corner {
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important
}

.rounded-corner {
	-webkit-border-radius: 50% !important;
	-moz-border-radius: 50% !important;
	border-radius: 50% !important
}

.no-box-shadow {
	-webkit-box-shadow: none !important;
	box-shadow: none !important
}

.bg-silver {
	background: #f0f3f4 !important
}

.bg-red {
	background: #ff5b57 !important
}

.bg-orange {
	background: var(--warning-color) !important
}

.bg-green {
	background: #00acac !important
}

.bg-blue {
	background: #348fe2 !important
}

.bg-purple {
	background: #727cb6 !important
}

.animated {
	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.fade {
	opacity: 0;
	filter: alpha(opacity = 0);
	-webkit-transition: opacity .3s linear;
	transition: opacity .3s linear
}

.fade.in {
	filter: alpha(opacity = 100)
}

.slimScrollBar {
	width: 5px !important;
	right: 0 !important
}

.datepicker table tr td.today, .datepicker table tr td.today.disabled,
	.datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover
	{
	background: var(--gray-1) !important
}

.datepicker table tr td span.active.active, .datepicker table tr td.active.active,
	.datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:active,
	.datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover,
	.datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover:active,
	.datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active.disabled:hover:hover,
	.datepicker table tr td.active:active, .datepicker table tr td.active:focus,
	.datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active,
	.datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:focus,
	.datepicker table tr td.active:hover:hover, .show .dropdown-toggle.datepicker table tr td.active,
	.show .dropdown-toggle.datepicker table tr td.active.disabled, .show .dropdown-toggle.datepicker table tr td.active.disabled:hover,
	.show .dropdown-toggle.datepicker table tr td.active:hover {
	background: #348fe2 !important;
	color: var(--background) !important
}

.datepicker {
	min-width: 250px !important;
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	border-radius: 3px !important
}

.datepicker.dropdown-menu {
	min-width: 250px;
	border: 1px solid var(--gray-2) !important;
	-webkit-box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2) !important;
	-moz-box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2) !important
}

.datepicker-dropdown:before {
	border-bottom-color: #ddd !important
}

.datepicker-dropdown.datepicker-orient-bottom:before {
	border-top-color: #ddd !important
}

.datepicker table {
	width: 100%
}

.input-daterange .input-group-append {
	background: #d6d8dd !important;
	border: none !important;
	text-shadow: none !important
}

.bootstrap-timepicker .bootstrap-timepicker-widget.dropdown-menu+.form-control
	{
	-webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px
}

.bootstrap-timepicker-widget table td input {
	-webkit-border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	border-radius: 4px !important
}

.bootstrap-timepicker-widget.dropdown-menu.show {
	border: 1px solid var(--gray-2) !important;
	max-width: 200px
}

.bootstrap-timepicker-widget table td a:focus,
	.bootstrap-timepicker-widget table td a:hover {
	background: #348fe2 !important;
	border: none !important;
	color: var(--color)
}

.ui-widget {
	font-family: 'Open Sans';
	font-size: 12px
}

.ui-autocomplete {
	padding: 5px 0 !important;
	-webkit-box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2) !important;
	box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .2) !important;
	border: 1px solid var(--gray-2) !important
}

.ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus,
	.ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus,
	.ui-widget-header .ui-state-hover {
	border: none !important;
	background: #348fe2 !important;
	color: #fff !important;
	margin: 0 !important;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important
}

.ui-menu .ui-menu-item a {
	padding: 5px 10px
}


body .bootstrap-select .btn:focus {
	outline: 0 !important
}

.bwizard-steps {
	margin-bottom:20px;
	padding: 0;
	font-size: 14px;
	border-radius: 3px;
	overflow: hidden;
	display: table !important;
	width: 100%;
	/* height: 40px; necessary to keep the li elements big enough to fit badge and link */
}

.bwizard-steps .active {
	color: var(--color);
}

.bwizard-steps li:after, .bwizard-steps li:before {
	border: none !important;

}
.bwizard-steps li:before {
	position: absolute;
	left: 0;
	top: 0;
	height: 0;
	width: 0;
	border-bottom: 20px inset transparent;
	border-left: 20px solid var(--gray-2);
	border-top: 20px inset transparent;
	content: ""
}

.bwizard-steps li:after {
	position: absolute;
	right: -20px;
	top: 0;
	height: 0;
	width: 0;
	border-bottom: 20px inset transparent;
	border-left: 20px solid var(--gray-2);
	border-top: 20px inset transparent;
	content: "";
	z-index: 2
}

.bwizard-steps > li {
	margin-right: 5px;
	border: none;
	padding: 10px; /* because of Bootstrap 4 the padding needed to be defined for li element instead of child a */
	float: none;
	display: table-cell;
	line-height: 20px;
	background: var(--gray-0);
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
	position:relative;
	list-style: none;
	zoom: 1;
}
.bwizard-steps > li:not(:last-child) {
	border-right: 1px solid var(--gray-2)
}

.bwizard-steps li:focus, .bwizard-steps li:hover {
	background: var(--gray-2) !important
}

.bwizard-steps.clickable li:focus:not(.active ) a, .bwizard-steps.clickable li:hover:not(.active ) a {
	color: var(--gray-9) !important
}

.bwizard-steps li small {
	font-size: 11px !important;
	color: var(--gray-8) !important;
	display: block !important;
	line-height: 14px !important
}

.bwizard-steps > li > a {	
	/* display: block; This is not needed anymore and in fact makes the li element too big*/
	text-decoration: none !important;
	padding-left: 26px; /* 36px need to have enought place for number which is absolute; */
	display: block; /* LN: this is necessary so the link can be clickable anywhere in the list-group-item */
	color: var(--gray-9);
}

.bwizard-steps li.active small {
	color: #b2e6e6 !important
}

.bwizard-steps > li > .badge {
	border: none;
	padding: 0;
	text-align: center;
	width: 23px;
	height: 23px;
	line-height: 23px;
	font-size: 14px;
	border-radius:50%;
	overflow: hidden;
	display: inline-block;
	background: var(--gray-5) !important;
	color: var(--gray-0);
	position:absolute;
	left: 7px;
	top: 9px;
}
.bwizard-steps .active a {
	color: white;
}
.bwizard-steps li.active, .bwizard-steps li.active:focus, .bwizard-steps li.active:hover {
	background: var(--info-color) !important
}

.bwizard-steps li.active .badge {
	background: var(--gray-7) !important;
}

@media (max-width: 1048px){
	.bwizard-steps > li {
		float: left;
		width: 100%;
		border-right: 0 !important;	
	}
	
	.bwizard-steps > li:not(:last-child){
		border-bottom: 2px solid var(--gray-2);
	}
}


.external-event {
	padding: 15px !important;
	margin-bottom: 5px !important;
	color: var(--element-background) !important;
	color: rgba(255, 255, 255, .7) !important;
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	border-radius: 3px !important
}

.calendar-event .external-event h5 {
	color: var(--color) !important;
	margin: 0 0 5px !important
}

.calendar-event .external-event p {
	margin: 0 !important;
	line-height: 16px !important;
	font-weight: 300 !important
}

.fc-content {
	clear: none !important
}

.fc-state-highlight {
	background: var(--gray-0) !important
}

.fc-widget-content, .fc-widget-header {
	border-color: var(--gray-2) !important
}

.fc-widget-header {
	color: #242a30 !important;
	font-weight: 600 !important;
	padding: 3px 15px !important
}

.fc-grid .fc-day-number {
	padding: 3px 5px !important
}

.fc-content .fc-event {
	border: none !important;
	padding: 5px !important;
	text-align: center !important;
	background: #2d353c
}

.fc-event-time {
	font-size: 14px !important;
	margin-right: 5px !important
}

.fc-event .fc-event-title {
	font-size: 14px !important;
	display: block !important
}

.fc-event .fc-event-title small {
	display: block !important;
	font-size: 12px !important;
	font-weight: 300 !important;
	line-height: 16px !important;
	color: var(--gray-2) !important;
	color: rgba(255, 255, 255, .8) !important
}

.fc-event .fc-event-icons {
	font-size: 18px !important;
	display: block !important
}

.fc-event-container a:focus, .fc-event-container a:hover {
	color: var(--color) !important;
	text-decoration: underline !important
}

.fc-state-default {
	background: var(--element-background) !important;
	border: 1px solid var(--gray-2) !important;
	line-height: 1.42857143 !important;
	padding: 6px 12px !important;
	color: var(--color) !important;
	font-weight: 400 !important;
	height: auto !important
}

.fc-header .fc-button {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	margin-bottom: 15px !important
}

.fc-header .fc-button:not(.fc-state-disabled ):focus, .fc-header .fc-button:not(.fc-state-disabled ):hover {
	background: var(--gray-1) !important
}

.fc-header .fc-button.fc-state-active, .fc-header .fc-button.fc-state-down
	{
	background: var(--gray-1) !important;
	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important;
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important
}

.fc-text-arrow {
	font-size: 14px !important;
	line-height: 16px !important
}

.fc-header-title h2 {
	line-height: 31px !important;
	font-size: 24px !important
}


.legend>table tr td {
	padding: 4px 0 5px !important
}

.legend>div {
	border-radius: 4px !important;
	background: #000 !important
}

.legend>table tr td.legendLabel {
	padding-right: 10px !important;
	color: var(--color)
}

.legend>table tr+tr td {
	padding-top: 0 !important
}

.legendLabel, .tickLabel {
	font-size: 11px !important
}

.datepicker-full-width .datepicker-inline {
	width: 100%
}

.media-messaging .media:first-child {
	padding-top: 0
}

.media-messaging .media:last-child {
	padding-bottom: 0
}

.media-messaging .media {
	padding: 15px
}

.media-messaging .media p {
	margin: 0
}

.media-messaging .media+.media {
	margin-top: 0;
	padding-top: 15px
}

.todolist {
	list-style-type: none;
	margin: 0;
	padding: 0
}

.todolist>li>a {
	display: block;
	color: var(--gray-9)
}

.todolist>li>a:focus, .todolist>li>a:hover {
	background: var(--gray-0);
	text-decoration: none
}

.todolist>li>a:focus .todolist-input i:before, .todolist>li>a:hover .todolist-input i:before
	{
	content: '\f14a';
	opacity: .4;
	color: #2d353c
}

.todolist>li.active>a .todolist-input i:before, .todolist>li.active>a:focus .todolist-input i:before,
	.todolist>li.active>a:hover .todolist-input i:before {
	content: '\f14a';
	color: #348fe2;
	opacity: 1
}

.todolist>li.active>a .todolist-title {
	text-decoration: line-through
}

.todolist>li {
	border-bottom: 1px solid var(--gray-2)
}

.todolist-input i {
	display: block;
	width: 14px;
	text-align: center
}

.todolist-input, .todolist-title {
	display: table-cell;
	padding: 10px
}

.todolist-title {
	padding-right: 15px
}

.todolist-input {
	text-align: center;
	font-size: 14px;
	border-right: 1px solid var(--gray-2);
	padding-left: 15px
}
/*
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
	cursor: auto !important;
}

table.dataTable thead .sorting { background: none !important; }
table.dataTable thead .sorting_asc { background: none !important; }
table.dataTable thead .sorting_desc { background: none !important; }
*/
#ct {
	
	padding: 22px 15px 15px;
	font-weight: bold;
	color: #348fe2
}
.img-fluid {	
	padding: 10px;
}

.list-group-item {
	padding: 5px 15px;
}

.table-responsive {
    width: 100%;  
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid var(--gray-2);    
    padding: 10px 10px 0px 10px; /* JL 5.12.2016 WD-3698 */
}

.switchUsersTableContainer {
	border: none;
}

.table-responsive.wd-tmpl-recordset {
	padding:10px;
}
.table-responsive.wd-match-summary {

}
.table-responsive.forms-columns2 {

}

/* for toggled push menu */

.cbp-spmenu-vertical {
	width: 220px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.cbp-spmenu-left.cbp-spmenu-open {
	left: 0px;
}

.cbp-spmenu-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
	padding-right: 0px !important; /* WD-2629 avoid jumping of page with scrollbar when pop up is shown */
}

.cbp-spmenu-push-toright {
	left: 220px;
}

.cbp-spmenu,
.cbp-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.calendar{
	
	padding: 5px;
}

.note.note-info {
	border-color: #587c89;
	background: #bce2ef;
	color: #31708f;
	
}

.note {
	
	margin-bottom: 20px;
	padding: 15px;
	border-left: 3px solid;
}


.width-sm {
	width: 400px !important
}

#calendar-container {
	
	padding:5px;
	margin:5 px
}


label.markedLabel {
	vertical-align:middle;
	display:inline;
	margin:0 5px 0 0;
}

.markedActions {
	vertical-align:middle;
	height:auto;
}

.moreinfo {
	background-color: var(--gray-0)
}


/** Validation markers */
.has-error {
	color: var(--required-color);
}

/** special variant of validation marker for c-forms double listbox */
div.forms-doubleList.has-error {
    border: var(--required-color);
    border-style: solid;
    border-width: 1px;
}

.tableWrapper{
	background-color: var(--gray-0);
}
.modal-content{
	background-color: var(--gray-0);
	overflow: hidden; /* JL 30.8.2016WD-3361 Content should be not bigger that modal-content. But oveflow:hidden is to see rounded corners */
}
span#client > div{
	/* margin-bottom:5px; this is making differences between elements on line, example: switch user */
	margin-right:3px;
	width:100%
}
td.nolink {
	padding:8px
}
tr.row1{
	background: var(--gray-0);
}
span#client > div{
	width: 100%;
}

/** ggruber 5.4.2017 - see square points for unordered list items inside an alert */
.alert > ul {
    list-style-type: square;
}

/** ggruber 22.10.2018 allow li's with disk layout in webdesk help popover */
div.popover-content ul {
    list-style-type: disc;
}

.wd-listtype-checkbox {
	display: table;
	margin-top: 5px !important;
}

.wd-listtype-checkbox div.checkbox {
	line-height: 24px;
	margin-top: 0px !important;
}

.wd-listtype-checkbox .wd-input-group-addon-btn-warning {
	display: table-cell;
}

/* arrows */

@media (min-width: 1048px) {

	.striped > div:nth-child(even) {
		background: var(--gray-0);
	}
	
	.striped-odd > div {
		background-color: var(--element-background);
	}
	
	.striped-odd > div:nth-child(odd) {
		background: var(--gray-0);
	}
}

.wd-dialog-window-for-page > div > #setupConfigActionSelector.chosen-select {
	height: 100%;
}

/* LN. the words were wrapping and form-row occupied too small space on internet explorer.
The padding is to align content with the labels */
.wd-page-po-setup-client .wd-form-inline > .card > .card-body > .form-inline > .wd-form-field-holder {
	padding-top: 7px;
	display: block;
	word-wrap: normal;
}
.bwizard-steps-border{
	border: 1px solid #ddd;
}