/*Both skins:*/

div.navigation {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}

    div.navigation.dbsearchform {
        width: auto;
    }

div.navigation-row {
    display: table-row;
    margin: 0;
    padding: 0;
}

div.navigation div.navigation-row div.showing-info {
    display: table-cell;
    width: 50%;
    text-align: left;
    margin: 0;
    padding: 5px 10px 5px 10px;
}

div.navigation div.navigation-row div.navigation-buttons {
    display: table-cell;
    width: 50%;
    text-align: right;
    margin: 0;
    padding: 5px 0 5px 10px;
}

div.navigation div.navigation-row div.navigation-buttons-container {
    display: block;
    text-align: right;
    margin: 0;
    padding: 0;
}

div.navigation div.navigation-row div.navigation-buttons span {
    border: none;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

div.navigation.dbsearchform div.navigation-row div.navigation-buttons,
div.navigation.dbsearchform div.navigation-row div.navigation-buttons-container {
    text-align: left;
}

div.navigation div.navigation-row div.navigation-buttons span.first,
div.navigation div.navigation-row div.navigation-buttons span.previous,
div.navigation div.navigation-row div.navigation-buttons span.next,
div.navigation div.navigation-row div.navigation-buttons span.last {
    color: #346cb0;
    font-size: 16px;
    display: inline-block;
}

div .navigation div.navigation-row div.navigation-buttons span.active {
    color: #346cb0;
    font-size: 16px;
    display: inline-block;
    background-color: rgb(0,0,255, 0.1);
}

div .navigation div.navigation-row div.navigation-buttons span.pagenumber {
    display: inline-block;
    padding: 0 4px;
}

    div.navigation div.navigation-row div.navigation-buttons span.first:hover,
    div.navigation div.navigation-row div.navigation-buttons span.previous:hover,
    div.navigation div.navigation-row div.navigation-buttons span.next:hover,
    div.navigation div.navigation-row div.navigation-buttons span.last:hover,
    div .navigation div.navigation-row div.navigation-buttons span.pagenumber:hover {
        background-color: rgb(127,127,127,0.1);
    }

div.navigation div.navigation-row div.navigation-buttons span.disabled {
    color: #aaa;
}

div.navigation div.navigation-row div.navigation-buttons span svg {
    fill: #000;
    stroke: #000;
    margin-top: 5px;
}

div.navigation div.navigation-row div.navigation-buttons span.disabled svg {
    fill: #aaa;
    stroke: #aaa;
}


span .parts-splitted {
    display: block;
    width: 100%;
}

    span.parts-splitted:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }

svg.svgicon.svg-icon.svg-icon-export {
    fill: #2E7D32;
    stroke: #2E7D32;
}

span.export-icon {
    position: absolute;
    right: -40px;
    top: -7px;
    cursor: pointer;
}

div.export-div {
    position: absolute;
    right: -140px;
    top: 40px;
    background-color: #ccc;
    color: black;
    z-index: 9999;
    padding: 10px;
    display: none;
    border-radius: 3px;
}

    div.export-div.visible {
        display: inline-block;
    }

    div.export-div ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        div.export-div ul li {
            margin: 0;
            padding: 0;
        }

            div.export-div ul li span.export-logo-and-text a {
                display: block;
                width: 100%;
                text-decoration: none;
                color: black;
                font-weight: bold;
            }

                div.export-div ul li span.export-logo-and-text a:hover {
                    background-color: #c0c0c0;
                }

.inter-active-isselected {
    display: block;
    text-align: center;
}

table.tbl-with-info-popup {
    margin-bottom: 400px;
}

svg.svgicon.svg-icon-gray {
    fill: #999999;
    stroke: #999999;
}

.info-popup {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    min-width: 600px;
    min-height: 200px;
    background-color: #fff;
    border: solid 2px black;
    border-radius: 5px;
    padding: 10px;
    color: #000;
    z-index: 9999;
}

    .info-popup * {
        color: black;
    }

    .info-popup table {
        width: 100%;
    }

        .info-popup table th {
            white-space: nowrap;
        }

    .info-popup.visible {
        display: inline-block;
    }

div.content-card {
    width: 100%;
    background-color: rgba(126, 126, 126, 0.2);
    padding: 10px;
    border-radius: 2px;
}

.right {
    text-align: right;
}


.link-btn {
    margin-right: 15px;
    padding-top: 4px;
}

div.comment-component {
    display: block;
    white-space: nowrap;
    width: 100%;
    min-height: 20px;
    cursor: text;
    padding: 0 3px;
}

    div.comment-component span.comment {
        display: block;
    }

    div.comment-component span.comment-input-form {
        display: none;
    }

        div.comment-component span.comment-input-form form {
            margin: 0;
            padding: 0;
            display: inline-block;
        }

    div .comment-component.show-input span.comment {
        display: none;
    }

    div.comment-component.show-input span.comment-input-form {
        display: block;
    }

form .InlineSingleLineForm {
    margin: 0;
    padding: 0;
}

div.dropdown-menu.filter-dropdown-menu {
    padding: 0;
    margin-top: 3px;
    margin-left: -120px;
}

span.firstcolumn div.dropdown-menu.filter-dropdown-menu {
    margin-left: -70px;
}

i.table-filter {
    cursor: pointer;
}

    i.table-filter.clicked-filter {
        /*background-color: red;*/
    }

table tr td.modallink {
    width: 5px !important;
    max-width: 5px !important;
}

.visible-in-modal-only {
    display: none;
}

div.inline-form-from-database {
    max-width: 800px;
}

    div.inline-form-from-database label {
        line-height: 1em;
        margin-top: 1px;
        margin-bottom: 4px;
    }

    div.inline-form-from-database span.formheader {
        display: block;
        margin-bottom: 10px;
    }

div .dashboard-component {
    display: inline-block;
    width: 450px;
    height: auto;
    min-height: 200px;
    background-color: rgba(153, 153, 153, 0.2);
    border: solid #999999 2px;
    border-radius: 10px;
    padding: 10px;
    color: #000;
}

    div.dashboard-component span.dashboard-component-filter {
        display: block;
    }

        div.dashboard-component span.dashboard-component-filter span.selected-criteria,
        div.dashboard-component span.dashboard-component-filter > a {
            display: inline-block;
            padding: 1px 5px;
            border-radius: 5px;
            margin: 0 5px;
            text-decoration: none;
        }

        div.dashboard-component span.dashboard-component-filter > a {
            background-color: rgba(25, 100, 250, 0.5);
            color: #fff;
        }

            div.dashboard-component span.dashboard-component-filter > a:hover {
                background-color: rgba(25, 100, 250, 0.9);
                color: #fff;
            }

        div.dashboard-component span.dashboard-component-filter span.selected-criteria {
            background-color: rgba(25, 100, 250, 1);
            color: #fff;
        }

    div .dashboard-component table.dashboard-component-table {
        border-collapse: collapse;
    }

        div .dashboard-component table.dashboard-component-table tbody tr {
            border-bottom: 1px solid #e4e5e6;
            border-top: 1px solid #e4e5e6;
        }

            div .dashboard-component table.dashboard-component-table tbody tr.danger {
                background-color: #ff0000;
                color: #ffffff;
            }

                div .dashboard-component table.dashboard-component-table tbody tr.danger td a {
                    color: #ffffff;
                    text-decoration: none;
                }

                    div
                    .dashboard-component
                    table.dashboard-component-table
                    tbody
                    tr.danger
                    td
                    a:hover {
                        color: #ffffff;
                        text-decoration: none;
                    }

            div.dashboard-component table.dashboard-component-table thead tr th,
            div.dashboard-component table.dashboard-component-table tbody tr td {
                padding: 1px 5px;
            }

            div.dashboard-component table.dashboard-component-table tbody tr:hover {
                background-color: rgba(153, 153, 153, 0.3);
            }

            div.dashboard-component table.dashboard-component-table tbody tr td:hover {
                background-color: rgba(136, 136, 136, 0.4);
            }

th.number,
td.number {
    text-align: right;
}

span.highlight {
    background-color: #33ee11;
    color: #000000;
    font-weight: bold;
    padding: 0 1px;
}

td.success {
    color: green;
    font-weight: bold;
}

form.reset-password-form {
    width: 350px;
}

div.opgroups select optgroup {
    color: black;
}

table.table-clip-text tr td {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.btn-danger.btn-red {
    background-color: red;
    border: red;
}

    .btn-danger.btn-red:not(:disabled):not(.disabled).active:focus,
    .btn-danger.btn-red:not(:disabled):not(.disabled):active:focus,
    .show > .btn-danger.btn-red.dropdown-toggle:focus,
    .btn-danger.btn-red:active,
    .btn-danger.btn-red:focus,
    .btn-danger.btn-red:hover {
        background-color: #aa0000;
        border: #aa0000;
    }

span.paragraph-header {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
}

table.table-userinfo {
    border-collapse: collapse;
    margin-bottom: 20px;
}

    table.table-userinfo > thead {
        /*background-color: red;*/
    }

        table.table-userinfo > thead > tr {
            /*background-color: green;*/
        }

            table.table-userinfo > thead > tr > th {
                padding: 0px 5px;
                white-space: nowrap;
            }

    table.table-userinfo > body {
        /*background-color: blue;*/
    }

    table.table-userinfo > tbody > tr {
        /*background-color: purple;*/
    }

        table.table-userinfo > tbody > tr > td {
            padding: 0px 5px;
        }

td.center {
    text-align: center;
}

.switcher-control-ebbefos .switcher-input:checked + .switcher-indicator,
.switcher-control-ebbefos .switcher-input:checked + .switcher-indicator:before {
    border-color: #09f537;
}

.switcher-control-ebbefos .switcher-input:checked + .switcher-indicator {
    background-color: #09f537;
}

.switcher-control-ebbefos .switcher-label-on {
    color: #09f537;
}

a.btn {
    height: 2.2em;
}

td.fail,
td.error {
    color: red;
    font-weight: bold;
}

.dataTable.nowrap td.wordwrap,
td.wordwrap {
    white-space: normal;
}

div.three-view ul {
    list-style-type: none;
    list-style-image: none;
}

    div.three-view ul li i.three-arrow-down:before,
    div.three-view ul li i.three-open:before {
        content: "\25BC";
        font-style: normal;
    }

    div.three-view ul li i.three-arrow-right:before,
    div.three-view ul li i.three-closed:before {
        content: "\25B6";
        font-style: normal;
    }

    div.three-view ul li i.three-arrow-left:before {
        content: "\25C0";
        font-style: normal;
    }

    div.three-view ul li i.three-arrow-up:before {
        content: "\25B2";
        font-style: normal;
    }

a.expandlink {
    padding: 0 5px;
    height: 22px;
    margin-left: 6px;
}

a.expandlinkinline {
    text-decoration: none;
    color: #000;
}

span.warning-icon {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

svg.svgicon.svg-icon-red {
    stroke: red;
}

svg.svgicon.svg-icon-cross-in-circle circle {
    stroke-width: 7;
    fill: transparent;
}

svg.svgicon.svg-icon-cross-in-circle line {
    stroke-width: 13;
    stroke-linecap: round;
}

/*light skin only*/
svg.svgicon {
    fill: #30619f;
    stroke: #30619f;
}

span.database-table-info {
    color: #4a7bb8;
}

span.database-columntype-info {
    color: #4a7bb8;
    margin-left: 10px;
}

    span.database-columntype-info.number {
        color: red;
    }

    span.database-columntype-info.date {
        color: #009900;
    }

svg.number {
    fill: red;
    stroke: red;
}

svg.date {
    fill: #009900;
    stroke: #009900;
}

svg.svgicon.svg-icon-warning {
    fill: #f6c301;
    stroke: #f6c301;
}

svg.svgicon.svg-icon-alert {
    fill: red;
    stroke: red;
}

@media (min-width: 992px) {
    .top-bar-brand {
        width: 16.5rem;
    }

    .app-aside-expand-md {
        top: 3.5rem;
        width: 16.5rem;
        z-index: 6;
    }

    .app-aside {
        max-width: 16.5rem;
    }

        .app-aside + .app-main {
            padding-left: 240px;
        }
}

/* Modal styles */
#searchtableModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    top: 5%; /* Start closer to the top of the screen */
    margin-top: 0; /* Remove any margin-top if it's set */
    max-height: 95%; /* Set a maximum height */
    overflow-y: auto; /* Enable vertical scrolling within the modal */
}

    .modal-content span.close {
        position: absolute;
        top: 0;
        right: 10px;
        color: #330000;
        font-size: 28pt;
        font-weight: bold;
    }

        .modal-content span.close:hover,
        .modal-content span.close:focus {
            color: #220000;
            text-decoration: none;
            cursor: pointer;
        }

#modalText table {
    margin-top: 15px;
    width: 100%;
    border-collapse: collapse;
}

#modalText td {
    padding: 4px;
    border: 1px solid #ddd;
    width: 99%;
}

#modalText th {
    text-align: left;
    background-color: #f2f2f2;
    width: auto;
    padding: 4px;
    white-space: nowrap;
    color: #000;
}

#modalText tr:hover,
#modalText tr:hover td {
    background-color: #ddd;
    color: #000;
}

#searchtable thead tr th {
    white-space: nowrap;
}

#searchtable tbody tr:hover {
    background-color: rgba(128, 128, 128, 0.2);
}

    #searchtable tbody tr:hover td:hover {
        background-color: rgba(128, 128, 128, 0.3);
    }

label.htmltable-rowcount {
    position: relative;
    display: inline-block;
    width: auto;
}

span.htmltable-rowcount {
    position: absolute;
    top: 8px;
    right: 10px;
    text-align: right;
}

.tooltip-inner {
    text-align: left;
    max-width: 350px;
    width: 350px;
}

/* ------------------------- */
/* ------- HtmlTable ------- */
/* -------   Start   ------- */
/* ------------------------- */

div.htmltablecontainer {
    background-color: rgb(157, 157, 157, 0.1);
    padding: 5px;
    width: calc(100% - 3px);
    overflow: scroll;
    height: calc(100vh - 170px);
}

@media (min-width: 576px) {
    div.htmltablecontainer {
        width: calc(100% + 10px);
    }
}

@media (min-width: 992px) {
    div.htmltablecontainer {
        width: calc(100% + 28px);
    }
}

@media (max-width: 400px) {
    div.htmltablecontainer {
        display: none;
    }
}

div.htmltablecontainer div#table-searchbox-container {
    display: block;
    position: relative;
    width: 250px;
    margin: 10px;
}

    div.htmltablecontainer div#table-searchbox-container input#tablesearch {
        background-color: rgb(157, 157, 157, 0.2);
    }

span#rowcount {
    display: inline-block;
    position: absolute !important;
    right: 20px;
    top: 8px;
}

div.htmltablecontainer div#table-searchbox-container span#rowcount {
    display: inline-block;
    position: absolute !important;
    right: 10px;
    top: 8px;
}

div.htmltablecontainer table.htmltable tr th,
div.htmltablecontainer table.htmltable tr th {
    padding: 0 4px;
}

    div.htmltablecontainer table.htmltable tr th.rownumber,
    div.htmltablecontainer table.htmltable tr td.rownumber {
        text-align: right;
    }

    div.htmltablecontainer table.htmltable tr th.number,
    div.htmltablecontainer table.htmltable tr td.number,
    div.htmltablecontainer table.htmltable tr th.right,
    div.htmltablecontainer table.htmltable tr td.right {
        text-align: right;
    }

    div.htmltablecontainer table.htmltable tr th.center,
    div.htmltablecontainer table.htmltable tr td.center {
        text-align: center;
    }

    div.htmltablecontainer table.htmltable tr th.left,
    div.htmltablecontainer table.htmltable tr td.left {
        text-align: left;
    }

/* ------------------------- */
/* ------- HtmlTable ------- */
/* -------   End   ------- */
/* ------------------------- */

.surveillance-warning {
    color: #f7a200;
    font-weight: 500;
}

.surveillance-danger {
    color: #ff0000;
    font-weight: bold;
}

.hidden {
    display: none;
}

button.btn-ebbefos {
    margin-right: 10px;
}

input.input-ebbefos-number {
    width: 200px;
}

div.modal-content table tbody tr th,
div.modal-content table tbody tr:hover td {
    color: #000;
}

.table-button-primary {
    width: 80%;
    margin-right: 15px;
    margin-left: 15px;
    height: 25px;
    padding: 5px;
    text-align: center;
    background-color: #0b5cb3;
    color: white;
    border: none;
    border-radius: 4px;
}

.table-button-secondary {
    width: 50%;
    margin-right: 50px;
    margin-left: 10px;
    height: 25px;
    padding: 5px;
    text-align: center;
    background-color: #777d8f;
    color: white;
    border: none;
    border-radius: 4px;
}

svg.svg-icon-filter {
    fill: none;
    stroke: black;
}

svg.svg-icon-filter-filled {
    fill: black;
    stroke: black;
}

span.selectedfilter {
    display: block;
    background-color: #00A28A;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 3px;
}

svg.svgicon.svg-icon.orderby-icon {
    fill: none;
    stroke: black;
}

    svg.svgicon.svg-icon.orderby-icon path {
        stroke-width: 6;
        stroke-linejoin: round
    }

        svg.svgicon.svg-icon.orderby-icon path.up {
            stroke: black;
            fill: black;
        }

        svg.svgicon.svg-icon.orderby-icon path.down {
            stroke: black;
            fill: black;
        }

    svg.svgicon.svg-icon.orderby-icon.down path.down {
        stroke: #346CB0;
        fill: #346CB0;
    }

    svg.svgicon.svg-icon.orderby-icon.down path.up {
        stroke: none;
        fill: none;
    }

    svg.svgicon.svg-icon.orderby-icon.up path.up {
        stroke: #346CB0;
        fill: #346CB0;
    }

    svg.svgicon.svg-icon.orderby-icon.up path.down {
        stroke: none;
        fill: none;
    }

svg.svgicon.svg-icon.orderby-icon-up {
    fill: none;
    stroke: black;
    position: absolute;
    right: 3px;
    top: 0;
    cursor: pointer;
}

    svg.svgicon.svg-icon.orderby-icon-up path {
        stroke-width: 6;
        stroke-linejoin: round
    }

        svg.svgicon.svg-icon.orderby-icon-up path.up {
            stroke: black;
            fill: black;
        }

            svg.svgicon.svg-icon.orderby-icon-up path.up:hover {
                stroke: #990000;
                fill: #990000;
            }

    svg.svgicon.svg-icon.orderby-icon-up.selected path.up {
        stroke: #346CB0;
        fill: #346CB0;
    }

        svg.svgicon.svg-icon.orderby-icon-up.selected path.up:hover {
            stroke: #990000;
            fill: #990000;
        }

svg.svgicon.svg-icon.orderby-icon-down {
    fill: none;
    stroke: black;
    position: absolute;
    right: 3px;
    top: 10px;
    cursor: pointer;
}

    svg.svgicon.svg-icon.orderby-icon-down path {
        stroke-width: 6;
        stroke-linejoin: round
    }

        svg.svgicon.svg-icon.orderby-icon-down path.down {
            stroke: black;
            fill: black;
        }

            svg.svgicon.svg-icon.orderby-icon-down path.down:hover {
                stroke: #990000;
                fill: #990000;
            }

    svg.svgicon.svg-icon.orderby-icon-down.selected path.down {
        stroke: #346CB0;
        fill: #346CB0;
    }

        svg.svgicon.svg-icon.orderby-icon-down.selected path.down:hover {
            stroke: #990000;
            fill: #990000;
        }

th.filterable.sortable {
    white-space: nowrap;
    position: relative;
    padding-right: 20px;
}

th > span.table-header {
    display: block;
    width: 100%;
    position: relative;
    background-color: transparent;
}

    th > span.table-header.sortable {
        padding-right: 20px;
    }

    th > span.table-header.hasfilter {
        padding-right: 20px;
    }

        th > span.table-header.hasfilter.sortable {
            padding-right: 40px;
        }

    th > span.table-header span.table-header-orderby {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 2px;
    }

    th > span.table-header.hasfilter span.table-header-filter {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
    }

    th > span.table-header.hasfilter.sortable span.table-header-filter {
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 0;
    }

    th > span.table-header span.table-header-orderby a.orderby-descending-link-with-icon {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 9px;
    }

    th > span.table-header span.table-header-orderby a.orderby-ascending-link-with-icon {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
    }

        th > span.table-header span.table-header-orderby a.orderby-descending-link-with-icon svg,
        th > span.table-header span.table-header-orderby a.orderby-ascending-link-with-icon svg {
            fill: black;
            stroke: black;
        }

            th > span.table-header span.table-header-orderby a.orderby-descending-link-with-icon svg.selected,
            th > span.table-header span.table-header-orderby a.orderby-ascending-link-with-icon svg.selected {
                fill: #346CB0;
                stroke: #346CB0;
            }

        th > span.table-header span.table-header-orderby a.orderby-descending-link-with-icon:hover svg,
        th > span.table-header span.table-header-orderby a.orderby-ascending-link-with-icon:hover svg {
            fill: #663300;
            stroke: #663300;
            cursor: pointer;
        }

.btn.btn-primary.btn-filter-item {
    display: block;
    margin-bottom: 3px;
    text-align: left;
    position: relative;
    padding-right: 25px;
}

    .btn.btn-primary.btn-filter-item.selected {
        background-color: #043C80;
    }

        .btn.btn-primary.btn-filter-item.selected:hover {
            background-color: #001C60;
        }

span.remove-cross {
    position: absolute;
    right: 2px;
    top: 5px;
    margin-right: 3px;
    border: solid 2px white;
    color: white;
    width: 22px;
    text-align: center;
    border-radius: 3px;
    padding: 0;
    font-weight: bold;
    font-size: 0.8em;
}

table.onboarding-flows thead tr th,
table.onboarding-flows tbody tr td {
    padding: 0 3px;
}

div.page-inner table.checklist {
    display: table;
    width: auto;
    min-width: 500px;
    border-collapse: collapse;
    border: solid 2px #346CB0;
}

    div.page-inner table.checklist thead tr th {
        border-bottom: solid 2px #346CB0;
    }

    div.page-inner table.checklist tr th,
    div.page-inner table.checklist tr td {
        border: none;
        border-bottom: solid 1px #346CB0;
        padding: 2px 5px;
    }

    div.page-inner table.checklist tbody tr:hover {
        background-color: rgb(200, 200, 200, 0.2);
    }

    div.page-inner table.checklist tr th:hover,
    div.page-inner table.checklist tr td:hover {
        background-color: rgb(200, 200, 200, 0.4);
    }

    div.page-inner table.checklist th.stepnumber,
    div.page-inner table.checklist td.stepnumber {
        text-align: right;
    }

div.page-inner table.onboarding-customer-info {
    border-collapse: collapse;
    border: solid 2px #346CB0;
    margin-bottom: 10px;
}

    div.page-inner table.onboarding-customer-info thead tr th,
    div.page-inner table.onboarding-customer-info tbody tr th,
    div.page-inner table.onboarding-customer-info tbody tr td {
        padding: 0 4px;
        border-bottom: solid 1px #346CB0;
    }

.nowrap {
    white-space: nowrap;
}

svg.svgicon.svg-icon.svg-icon-waiting {
    fill: #888800;
    stroke: #888800;
}

svg.svgicon.svg-icon.svg-icon-waiting-notification {
    fill: orange;
    stroke: orange;
}

div table.table.datatable tbody tr td button.table-button-primary.tr-highlighted-only {
    background-color: transparent;
    color: black;
}

div table.table.datatable tbody tr:hover td button.table-button-primary.tr-highlighted-only {
    background-color: #0b5cb3;
    color: white;
}

    div table.table.datatable tbody tr:hover td button.table-button-primary.tr-highlighted-only:hover {
        background-color: #0b3c93;
        color: white;
    }

.selectpicker-dropdown,
.selectpicker-dropdown option {
    color: black;
}

div.service-registration-modal label {
    margin-bottom: -3px;
}

div.service-registration-modal div.form-group {
    margin-bottom: 8px;
    padding-bottom: 0;
}

div.service-registration-modal span.select2-selection--multiple {
    min-height: 50px;
    background-color: #FFF;
}

input.filterinput {
    padding: 4px;
    font-size: 1.4em;
}

div.uploaded-files-container {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 10px;
    border: solid 2px #888;
    border-radius: 10px;
    background-color: transparent;
}

span.uploaded-file {
    display: inline-block;
    min-width: 200px;
    min-height: 100px;
    padding: 5px;
    border: solid 1px #888;
    border-radius: 5px;
    background-color: transparent;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
}

img.uploaded-image-as-icon {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
}

div.uploaded-files-container span.uploaded-file span.uploaded-file-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    width: 100%;
    height: 100px;
    text-align: center;
}

svg.faded circle {
    fill: rgb(50, 100, 200, 0.1);
}

span.info-icon {
    display: inline-block;
    position: relative;
}

    span.info-icon span.info-hover-content {
        display: none;
        position: absolute;
        top: 16px;
        right: 0;
        background-color: #fff;
        border: solid 2px black;
        border-radius: 5px;
        padding: 5px;
        width: 400px;
        z-index: 999;
        color: #000;
        text-align: left;
        vertical-align: top;
        overflow: hidden;
    }

    span.info-icon:hover span.info-hover-content {
        display: inline-block;
    }

    span.info-icon span.info-hover-content span.step-info-title {
        display: block;
        font-weight: bold;
    }

table.technical-info,
table.technical-info * {
    background-color: #fff !important;
    color: #000;
}

table.table-hover-blue tbody tr:hover
{
    background-color: cornflowerblue;
}

table.table-hover-red tbody tr:hover
{
    background-color: #B76BA3;
}


table.applicants,
table.bike-addons {
    border-collapse: collapse;
    width: auto;
}

    table.applicants th,
    table.applicants td,
    table.bike-addons th,
    table.bike-addons td {
        padding: 1px 3px;
    }

    table.applicants tbody tr:hover
    table.bike-addons tbody tr:hover {
        background-color: #ddd;
    }

    table.applicants tbody tr td:hover
    table.bike-addons tbody tr td:hover {
        background-color: #ccc;
    }

div.buttons {
    display: block;
    padding-top: 20px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

div.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

div.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    border: solid 2px black;
    text-align: center;
}

    div.modal-content div.input {
        display: inline-block;
        text-align: left;
    }

        div.modal-content div.input label {
            display: block;
            margin: 2px 0 1px 0;
            text-align: left;
            font-weight: 500;
            cursor: pointer;
        }

            div.modal-content div.input label span.asterisk {
                color: red;
            }

        div.modal-content div.input input {
            width: 100%;
            padding: 4px 15px;
            margin: 0;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

            div.modal-content div.input input:focus,
            div.modal-content div.input input:focus-visible {
                border: 1px solid #75B9F0;
                outline: none;
                box-shadow: none;
            }

            div.modal-content div.input input.invalid {
                border: 1px solid #f2545b;
                outline: none;
            }

        div.modal-content div.input label input {
            width: auto;
            display: inline-block;
            margin-right: 10px;
        }

        div.modal-content div.input label.checkbox {
            cursor: pointer;
        }

        div.modal-content div.input span.invalid-messsage {
            display: block;
            text-align: left;
            color: #f2545b;
            font-weight: normal;
        }

        div.modal-content div.input span.empty-messsage {
            display: block;
            text-align: left;
            color: #f2545b;
            font-weight: normal;
        }

        div.modal-content div.input span.no-messsage {
            display: block;
            text-align: left;
            color: #f2545b;
            font-weight: normal;
        }

.hover-links a.hover-link {
    visibility: hidden;
}

.hover-links:hover a.hover-link {
    visibility: visible;
}

form {
    margin: 0;
    padding: 0;
}

div.accessory {
    margin: 0;
    padding: 20px 0 0 0;
}

    div.accessory label span {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }

span.recent-date-failed {
    color: #fff;
    background-color: red;
    display: block;
}

span.recent-date-succeeded {
    color: #fff;
    background-color: green;
    display: block;
}

.statstablesearch {
    padding: 8px;
    margin-bottom: 15px;
}

table.statstable thead tr th,
table.statstable tbody tr td {
    padding: 1px 4px;
    overflow-y: auto;
}

.hover-container {
    position: relative;
    display: inline-block;
}

.hover-content {
    display: none;
    position: absolute;
    z-index: 100;
    background: white;
    border: 2px solid #346cb0;
    padding: 8px;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
    top: 100%;
    left: 0;
    white-space: nowrap;
}

.hover-container:hover .hover-content {
    display: block;
}

.form-control.grayreadonly[read-only] {
    background-color: #eaeaea;
}

.palette1.color1 {
    background-color: #8F3FAF;
    color: #fff;
}

    .palette1.color1:hover {
        background-color: #9F4FBF;
        color: #fff;
    }

.palette1.color2 {
    background-color: #2C97DE;
    color: #fff;
}

    .palette1.color2:hover {
        background-color: #4CB7FE;
        color: #fff;
    }

.palette1.color3 {
    background-color: #00BD9C;
    color: #fff;
}

    .palette1.color3:hover {
        background-color: #20DDBC;
        color: #fff;
    }

.palette1.color4 {
    background-color: #b0d07e;
    color: #fff;
}

    .palette1.color4:hover {
        background-color: #D0F09e;
        color: #fff;
    }

.palette1.color5 {
    background-color: #a6858f;
    color: #fff;
}

    .palette1.color5:hover {
        background-color: #C6A5Af;
        color: #fff;
    }

.palette1.color6 {
    background-color: #964968;
    color: #fff;
}

    .palette1.color6:hover {
        background-color: #B66988;
        color: #fff;
    }

.palette1.color7 {
    background-color: #e49057;
    color: #fff;
}

    .palette1.color7:hover {
        background-color: #F4B077;
        color: #fff;
    }

.palette1.color8 {
    background-color: #5a3b96;
    color: #fff;
}

    .palette1.color8:hover {
        background-color: #7a5bB6;
        color: #fff;
    }

.palette1.color9 {
    background-color: #635d96;
    color: #fff;
}

    .palette1.color9:hover {
        background-color: #837dB6;
        color: #fff;
    }

.palette1.color10 {
    background-color: #f6c65e;
    color: #fff;
}

    .palette1.color10:hover {
        background-color: #f6E67e;
        color: #fff;
    }

.palette1.color11 {
    background-color: #2e44ae;
    color: #fff;
}

    .palette1.color11:hover {
        background-color: #4e64Ce;
        color: #fff;
    }

.palette1.color12 {
    background-color: #e687c5;
    color: #fff;
}

    .palette1.color12:hover {
        background-color: #F6A7E5;
        color: #fff;
    }

.palette1.color13 {
    background-color: #8056d4;
    color: #fff;
}

    .palette1.color13:hover {
        background-color: #A076f4;
        color: #fff;
    }

.palette1.color14 {
    background-color: #5069e4;
    color: #fff;
}

    .palette1.color14:hover {
        background-color: #7089F4;
        color: #fff;
    }

.palette1.color15 {
    background-color: #292f65;
    color: #fff;
}

    .palette1.color15:hover {
        background-color: #494f85;
        color: #fff;
    }

.palette1.color16 {
    background-color: #589ffc;
    color: #fff;
}

    .palette1.color16:hover {
        background-color: #78Bffc;
        color: #fff;
    }

.palette1.color17 {
    background-color: #c46833;
    color: #fff;
}

    .palette1.color17:hover {
        background-color: #E48853;
        color: #fff;
    }

.palette1.color18 {
    background-color: #1c5659;
    color: #fff;
}

    .palette1.color18:hover {
        background-color: #3c7679;
        color: #fff;
    }

.palette1.color19 {
    background-color: #a759b9;
    color: #fff;
}

    .palette1.color19:hover {
        background-color: #C779D9;
        color: #fff;
    }

.palette1.color20 {
    background-color: #66aa5d;
    color: #fff;
}

    .palette1.color20:hover {
        background-color: #86Ca7d;
        color: #fff;
    }

.palette1.color21 {
    background-color: #9a8fe0;
    color: #fff;
}

    .palette1.color21:hover {
        background-color: #BaAfF0;
        color: #fff;
    }

.palette1.color22 {
    background-color: #2a8379;
    color: #fff;
}

    .palette1.color22:hover {
        background-color: #4aA399;
        color: #fff;
    }

.palette1.color23 {
    background-color: #cf5d8b;
    color: #fff;
}

    .palette1.color23:hover {
        background-color: #Ef7dAb;
        color: #fff;
    }

.palette1.color24 {
    background-color: #dd867d;
    color: #fff;
}

    .palette1.color24:hover {
        background-color: #FdA69d;
        color: #fff;
    }

.palette1.color25 {
    background-color: #1b1d34;
    color: #fff;
}

    .palette1.color25:hover {
        background-color: #3b3d54;
        color: #fff;
    }

.palette1.color26 {
    background-color: #ffb482;
    color: #fff;
}

    .palette1.color26:hover {
        background-color: #FfD4A2;
        color: #fff;
    }

.palette1.color27 {
    background-color: #c4c7ee;
    color: #fff;
}

    .palette1.color27:hover {
        background-color: #E4E7Fe;
        color: #fff;
    }

.palette1.color28 {
    background-color: #cdbbab;
    color: #fff;
}

    .palette1.color28:hover {
        background-color: #EdDbCb;
        color: #fff;
    }

.palette1.color29 {
    background-color: #ffbae1;
    color: #fff;
}

    .palette1.color29:hover {
        background-color: #ffDaF1;
        color: #fff;
    }

.palette1.color30 {
    background-color: #b2696f;
    color: #fff;
}

    .palette1.color30:hover {
        background-color: #c2797f;
        color: #fff;
    }

.palette1.color31 {
    background-color: #7be1f6;
    color: #fff;
}

    .palette1.color31:hover {
        background-color: #8bf1ff;
        color: #fff;
    }

.palette1.color32 {
    background-color: #52b5ab;
    color: #fff;
}

    .palette1.color32:hover {
        background-color: #62c5bb;
        color: #fff;
    }

svg.svgicon.svg-icon.svg-icon-report2 {
    fill: transparent;
    stroke: #000;
    stroke-width: 1.8px;
    cursor: pointer;
}

    svg.svgicon.svg-icon.svg-icon-report2:hover {
        fill: #fff;
        stroke: #346CB0;
        stroke-width: 1.8px;
    }

div.report-modal-container {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

    div.report-modal-container div.report-modal {
        background-color: #fff;
        z-index: 9999;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }

        div.report-modal-container div.report-modal div,
        div.report-modal-container div.report-modal span {
            font-size: 0.9em;
            font-weight: normal;
            text-align: left;
            display: inline-block;
        }

        div.report-modal-container div.report-modal h2 {
            font-weight: bold;
            text-align: center;
            display: block;
        }

        div.report-modal-container div.report-modal div.input-groups {
            display: block;
            border: none;
            width: 100%;
        }
        div.report-modal-container div.report-modal div.input-group {
            display: block;
            border: none;
        }

            div.report-modal-container div.report-modal div.input-group div,
            div.report-modal-container div.report-modal div.input-group span {
                display: inline-block;
            }
            
            div.report-modal-container div.report-modal div.input-group label {
                display: inline-block;
                width: 100px;
                border: none;
                border-color: transparent;
                background-color: transparent;
                border-image-width: 0;
                border-image: none;
                border-radius: 0;
            }

        div.report-modal-container div.report-modal div.bidding-groups {
            display: block;
        }
            div.report-modal-container div.report-modal div.bidding-groups div.group-color {
                margin: 1px;
                display: block;
                cursor: pointer;
            }

            div.report-modal-container div.report-modal div.bidding-groups div.group-color svg {
                float: right;
                margin-top: 4px;
                margin-right: 5px;
            }

        div.report-modal-container div.report-modal h3 {
            font-weight: bold;
            text-align: left;
            display: block;
            font-size: 0.85em;
            margin-top: 10px;
        }

.bidding-group-name-column {
    padding: 0 7px;
}