body {
    background: var(--background);
    font-size: 12px;
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--gray-4);
    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(--background) !important;
}

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

body {
    /* AV: I am adding this value so we can manipulate the header size consistently */
    --header-size: 55px;
}

/* We are applying inset values if supported for mobile apps */
@supports (border-top: env(safe-area-inset-top)) {
    
    body > #page-container > #header.header {
        border-top: env(safe-area-inset-top) solid var(--app-header-background); /* AV: Set border-top to draw the same color of the header to the safe area top inset */
        top: 0px; /* AV: I set a top 0 to start rendering from outside the inset area */
        height: calc(env(safe-area-inset-top) + var(--header-size)); /* With this I will allow the border to take space along the content from 0 to the inset area + header height */
    }

    /* 
        We need to use the initial values to not break the desktop open side menu in mobile
        idk why we support it, but its broken without this. 
    */
    body.wd-body-inactive > #page-container > #header.header {
        top: initial;
        border-top: 0px;
        height: var(--header-size);
    }
    
    /* 
        This takes the side bar open and makes it take the top area correctly
    */
    #wd-sidebar.cbp-spmenu-open {
        border-top: env(safe-area-inset-top) solid var(--app-header-background);
        height: calc(env(safe-area-inset-top) + var(--header-size));
    }
}

body>#page-container>#header {
    margin-top: 0;
    margin-bottom: 0;
    border: 1px solid transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: var(--app-header-background);
    z-index: 67000;
    /* An index higher than this of the AppProgressInfo, for the pull-down of the header, to be accessible. */
    height: var(--header-size);
    /* 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;
}

body>#page-container>#layoutMain {
    position: relative;
    margin-left: 220px;
    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: var(--gray-6);
}

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

.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: var(--gray-8);
}

.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: var(--paper-background);
    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;
}

#wd-themeToggleItem {
    padding: 8px;
    border-radius: 50%;
    font-size: 16px;
    position: relative;
    cursor: pointer;
}

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

#sun-icon, #moon-icon {
    width: 16px;
    height: 16px;
    display: none;
    vertical-align: middle;
}

#wd-notificationItem {
    padding: 8px;
    position: relative;
    font-size: 16px;
    border-radius: 50%;
    position: relative;
    font-size: 16px;
    display: table;
    transition: background-color .4s;
    cursor: pointer;
}

.nav-user .helpIcon {
    margin: -5px 3px 0 0;
    float: left;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    vertical-align: middle;
    border-style: none;
}

.helpIcon {
    padding-left: 8px;
    font-size: 24px;
}

/* Class wd-active is added when there exists notifications */
#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;
}

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

#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 3px 0 0;
    float: left;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px
}

.wd-person-image-green {
    /*overriding navbar-user in case of switching user since the border will make the picture smaller*/
    height: 36px !important;
    width: 36px !important;
    border: 4px solid var(--success-color) !important;
}

.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: var(--paper-background);
}

.footer {
    margin: 0 25px 0 245px;
    border-top: 1px solid var(--info-color-light);
    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: var(--primary-color-dark);
}

.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(--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: var(--header-background);
}

.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: var(--color);
}

.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: var(--color);
    background: var(--gray-1);
    border-color: var(--paper-border-color-hover);
}

.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: 8px;
}

.navbar-nav>li>a.nav-link:focus,
.navbar-nav>li>a.nav-link:hover {
    color: var(--color);
    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-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: var(--color);
}

.nav-tabs.nav-tabs-inverse {
    background: var(--color);
}

.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(--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(--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: var(--gray-3); 
    color: var(--color-gray);
}

.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(--background)
}

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

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

.switch-user-chooser>.wd-form-inline>.card .card-body {
    padding: 0px;
}

.switch-user-chooser>.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(--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: var(--header-foreground);
}


.card-inverse>.card-header {
    background: var(--header-background);
    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: var(--primary-color-light);
}

.card-warning>.card-header {
    background: var(--color-ochre);
}

.card-danger>.card-header {
    background: var(--secondary-color);
}

.card-primary>.card-header {
    background: var(--color-blue)
}

.card-info>.card-header {
    background: var(--primary-color);
}

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

.label.label-default {
    background: var(--paper-background);
}

.label.label-danger {
    background: var(--error-color)
}

.label.label-warning {
    background: var(--warning-color)
}

.label.label-success {
    background: var(--success-color)
}

.label.label-info {
    background: var(--info-color)
}

.label.label-primary {
    background: var(--primary-color)
}

.label.label-inverse {
    background: var(--color)
}

@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: var(--color);
    text-decoration: none
}

.media-list.media-list-with-divider>li+li {
    border-top: 1px solid var(--gray-1);
    padding-top: 20px
}

.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(--background);
}

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

.table-row-clickable.hover>tbody>tr:hover {
    cursor: pointer;
}

.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: var(--gray-3);
    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: var(--info-color);
    border-color: var(--info-color-light);
}

.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: var(--success-color);
    border-color: var(--success-color-light);
}

.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: var(--error-color-light);
    border-color: var(--error-color);
}

.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: var(--warning-color-light); 
    border-color: var(--warning-color); 
}

.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: var(--gray-2);
}

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

.well-sm {
    padding: 10px;
}

.well-lg {
    padding: 30px;
}

.jumbotron {
    background: var(--paper-background);
}

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

li.list-group-item,
li.list-group-item.active,
li.list-group-item.active:focus,
li.list-group-item.active:hover {
	align-items: center;
    border: none;
    background: transparent; 
}

.list-group-item.active {
    z-index: 0 !important; /* Overriding Bootstrap*/
}

a.list-group-item.active,
a.list-group-item.active:focus,
a.list-group-item.active:hover {
    background: var(--primary-color-dark);
}

.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: var(--paper-background) !important; 
}

.bg-red {
    background: var(--error-color) !important;
} 

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

.bg-green {
    background: var(--color-green) !important; 
}

.bg-blue {
    background: var(--primary-color-dark) !important; 
}

.bg-purple {
    background: var(--color-purple) !important;
}

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


.slimScrollBar {
    width: 6px !important;
    right: 0 !important;
    background-color: var(--gray-5) !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: var(--primary-color-dark) !important;
    color: var(--app-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: var(--gray-1) !important
}

.datepicker-dropdown.datepicker-orient-bottom:before {
    border-top-color: var(--gray-1) !important
}

.datepicker table {
    width: 100%
}

.input-daterange .input-group-append {
    background: var(--gray-2) !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: var(--primary-color-dark) !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: var(--primary-color) !important;
    color: var(--primary-contrast) !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
}
.ui-menu .ui-menu-item-wrapper {
    color: var(--highlight-text-contrast);
}


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

.bwizard-steps {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
}

.bwizard-steps li {
    text-align: left;
    flex-grow: 1;
    display: flex; 
    flex-direction: row;  
    position: relative;
}

.bwizard-steps li .badge {
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: var(--gray-1);
    color: var(--gray-3);
    border-radius: 50%;
    z-index: 2;
    display: flex; 
	align-items: center;
    justify-content: center; 
    font-size: 12px;
}

.bwizard-steps li[data-step].active {
    font-weight: bold;
}

.bwizard-steps li:first-child::before {
    content: none;
}

.bwizard-steps li:not(:last-child)::after {    
    position: absolute;
}


.bwizard-steps li.active .badge,
.bwizard-steps li.active::after {
    background: var(--primary-color); 
	color: var(--white);
}

.bwizard-steps li.active a {
    color: var(--primary-color);
    white-space: nowrap;
}

.bwizard-steps li a {
	margin: 8px; 
	font-size: 14px; 
    color: var(--disabled-field-color);
    text-decoration: none;
    display: block;
    font-weight: bold; 
    white-space: nowrap; 
    
}

.bwizard-steps .active a {
    color: white;
}

.bwizard-steps li.active,
.bwizard-steps li.active:focus,
.bwizard-steps li.active:hover {
    background: transparent;
}

.bwizard-steps li.completed a {
    color: var(--primary-color);
}

.bwizard-steps li.active a,
.bwizard-steps li.completed a {
    font-weight: bold;
}

.bwizard-steps li::after {
    content: "";
    height: 2px;
    background: var(--gray-1);
    flex-grow: 1;
    margin: 0 8px;
}

.bwizard-steps li:last-child::after {
    display: none; 
}

.bwizard-steps li span {
    padding: 0 10px; 
}

.bwizard-steps li.active:not(:last-child) .stepperHorizontalLine { 
    min-width: 28px;
	display: inline-flex;
	border: 1px solid var(--primary-color);
	width: 100%;
}

.bwizard-steps li:not(:last-child) .stepperHorizontalLine { 
	display: inline-flex;
    border: 1px solid var(--disabled-field-color);
    width: 100%;
}

@media (max-width: 1048px) {
    .bwizard-steps>li {
        width: 100%;
    }

	.bwizard-steps>li:not(:last-child):after {
        display: none; 
    }
    
    .bwizard-steps li.active:not(:last-child) .stepperHorizontalLine,
    .bwizard-steps li:not(:last-child) .stepperHorizontalLine { 
    	border: none;
    }
}


.external-event {
    padding: 15px !important;
    margin-bottom: 5px !important;
    color: var(--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: var(--color) !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: var(--color)
}

.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(--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: var(--header-background) !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: var(--color)
}

.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: var(--primary-color);
    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
}

.img-fluid {
    padding: 10px;
}

.list-group-item {
    padding: 4px 8px;
}

.table-responsive {
    width: 100%;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 10px 10px 0px 10px;
}

.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: var(--gray-7);
    background: var(--background);
    color: var(--info-color-dark);
}

.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(--background);
    }

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

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

/* WD-15642 Content is inside i */
.wd-dialog-window-for-page i.fa {
    width: auto;
    white-space: nowrap;
    font-family: inherit;
}

.wd-dialog-window-for-page i.fa::before {
    font-family: 'FontAwesome';
}

/* 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 {
	display: flex;
	flex-direction: row;
    overflow: auto; 
}

/* Mobile NavBar CSS */
@media (max-width : 768px) {
    #wd-themeToggleItem {
        padding: 4px;
    }

    #wd-notificationItem {
        padding: 4px;
    }

    .helpBook {
        padding: 8px 4px 8px 8px;
    }

    .navbar-user img {
        margin: 4px;
    }

    .navbar-light .navbar-nav>li>a.nav-link {
        padding: 4px;
    }
    
     .bwizard-steps-border {
        overflow-x: scroll; 
    }

    .bwizard-steps li {
        padding: 0 10px; 
        flex-grow: 0; 
    }
       
}

#formAssistant.steps {
    overflow-x: auto; 
    white-space: nowrap; 
}

.bwizard-step {
    display: inline-block;
}


/** style of message showing - no content here */
.wd-panel-empty-message {
    color: var(--gray-5);
}