/* admin.css */
/* ------------------------------------- */
html {
    height: 100%;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background: transparent;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#top-header {
    padding: 0 20px;
    min-height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #eee;
}

    #top-header a {
        text-decoration: none;
    }

    #top-header .header-title {
        display: inline-block;
        font-size: 1.2em;
        vertical-align: middle;
        color: #4c4e54;
        margin-bottom: 0;
    }

    #top-header > a,
    #top-header > button {
        display: inline-block;
        float: right;
        margin-top: 14px;
        margin-left: 8px;
        vertical-align: middle;
    }

        #top-header > a.btn-circle {
            width: 30px;
            height: 30px;
        }

            #top-header > a.btn-circle.gray {
                background-color: #ccc;
                color: #000;
            }

                #top-header > a.btn-circle.gray:hover {
                    background-color: #b4b4b4;
                }

    #top-header .header-login p {
        display: inline-block;
        margin: 3px;
    }

.nav-side-menu .header-login {
    display: none;
}

.operationMessage {
    position: fixed;
    z-index: 999;
    bottom: 20px;
    right: 20px;
}

    .operationMessage .alert {
        margin: 0;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
        border-left-width: 12px;
    }

    .operationMessage.modal-message {
        margin: 0;
    }

.loading-screen * {
    vertical-align: middle;
}

.iframe-fullscreen {
    width: 100%;
    height: calc(100vh - 90px);
}

.tooltip-inner.left {
    text-align: left;
}

.dialog-section-head {
    font-size: 115%;
    color: #808080;
    margin: 20px 0 5px 0;
}

.dialog-main-icon {
    display: block;
    float: left;
    margin: 5px 12px 30px 0;
    font-size: 250%;
}

form > .dialog-section-head:first-child {
    margin-top: 0;
}

.no-margin {
    margin: 0;
}

#pagetitle-div h3 {
    margin: 0 0 15px 0;
}

a.breadcrumb,
#detials-title {
    display: inline-block;
}

a.breadcrumb {
    margin-bottom: 0;
}

#overview-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 990;
}

.warning-desc {
    color: #da9900;
}

.danger-desc {
    color: #ff6347;
}

.inline-warning-desc {
    padding: 6px 0px;
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0;
    -o-flex: 1 0 0;
    flex: 1 0 0;
}

.panel-log-in-out {
    display: none;
}

.hidden {
    display: none !important;
}

/* Bootstrap collapsible menu */
/* ------------------------------------- */
.nav-side-menu {
    overflow: auto;
    font-weight: 200;
    background-color: #2b333d;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
    left: 0;
    padding: 0;
    width: 240px;
}

    .nav-side-menu .brand {
        line-height: 50px;
        display: block;
        font-size: 14px;
    }

        .nav-side-menu .brand h3 {
            color: #fff;
            margin: 15px;
            overflow: hidden;
            line-height: 1.15em;
            max-height: 2.3em; /* clip after two lines */
            max-width: 500px;
        }

            .nav-side-menu .brand h3 a {
                text-decoration: none;
                color: #fff;
            }

    .nav-side-menu .toggle-btn {
        display: none;
    }

    .nav-side-menu ul,
    .nav-side-menu li {
        list-style: none;
        padding: 0px;
        margin: 0px;
        line-height: 35px;
        cursor: pointer;
    }

    .nav-side-menu li {
        padding: 0;
        border-left: 3px solid #2b333d;
        border-bottom: 1px solid #2b333d;
        transition: all 0.25s ease;
        line-height: 3em;
    }

        .nav-side-menu li:first-child {
            border-top: 2px solid #181c20;
        }

        .nav-side-menu li.account-controls {
            display: none;
        }

        #themeButtonGroup label {
            background: #3f4b59;
            color: #fff;
            border-color: #191e24;
            font-size: 100%;
        }
        #themeButtonGroup label.active {
            background-color: #2a323c;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.7) !important;
        }        

        .nav-side-menu ul .arrow:before,
        .nav-side-menu li .arrow:before {
            font-family: FontAwesome;
            content: "\f078";
            display: inline-block;
            padding-left: 15px;
            padding-right: 15px;
            vertical-align: middle;
            float: right;
        }

    .nav-side-menu ul li:not(.collapsed) .arrow:before {
        transform: rotate(180deg);
    }

    .nav-side-menu ul .menu-active,
    .nav-side-menu li .menu-active {
        border-left: 3px solid #f93;
        background-color: #181c20;
    }

    .nav-side-menu ul .sub-menu li.menu-active,
    .nav-side-menu li .sub-menu li.menu-active {
        color: #d19b3d;
    }

        .nav-side-menu ul .sub-menu li.menu-active a,
        .nav-side-menu li .sub-menu li.menu-active a {
            color: #d19b3d;
        }

    .nav-side-menu ul .sub-menu li,
    .nav-side-menu li .sub-menu li {
        background-color: #181c20;
        border: none;
        border-bottom: 1px solid #2b333d;
        margin-left: 0px;
        line-height: 2.5em;
    }

        .nav-side-menu ul .sub-menu li:hover,
        .nav-side-menu li .sub-menu li:hover {
            background-color: #020203;
        }

        .nav-side-menu ul .sub-menu li a:before,
        .nav-side-menu li .sub-menu li a:before {
            font-family: FontAwesome;
            content: "\f105";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            color: #666;
        }

        .nav-side-menu ul .sub-menu li a i {
            display: none;
        }

    .nav-side-menu li.light {
        display: block;
        background-color: #4f5b69;
        border-color: #4f5b69;
    }

        .nav-side-menu li.light a i {
            color: #fff;
        }

        .nav-side-menu li.light:hover {
            background-color: #7c8b9c;
            border-left-color: #fff;
        }

            .nav-side-menu li.light:hover a,
            .nav-side-menu li.light:hover a i {
                color: #000 !important;
                transition: all 0.25s ease;
            }

    .nav-side-menu li a {
        display: block;
        text-decoration: none;
        color: #fff;
    }

        .nav-side-menu li a i {
            padding-left: 10px;
            width: 20px;
            padding-right: 23px;
            color: #428bca;
            transition: all 0.25s ease;
        }

    .nav-side-menu li:hover {
        border-left: 3px solid #fff;
        background-color: #4f5b69;
        transition: all 0.25s ease;
    }

        .nav-side-menu li:hover a i {
            color: #fff;
            transition: all 0.25s ease;
        }

    .nav-side-menu li.highlighted a {
        background-color: #0069d9;
    }

        .nav-side-menu li.highlighted a i {
            color: #fff;
        }

    .nav-side-menu li.highlighted:hover a {
        background-color: #007bff;
    }

#feedBackButton {
    position: fixed;
    bottom: 0;
    right: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 10;
}


/* DataTables extra styles */
/* ------------------------------------- */
table .cell-nowrap {
    white-space: nowrap;
}

table .cell-truncate {
    max-width: 35vw;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table td.cell-monospace {
    font-family: monospace;
}

table td.cell-small {
    font-size: 75%;
    color: #808080;
}

/* Override the column sort icons style.
    Vertical centered in their cell.
*/
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    display: block;
    opacity: 0.3;
}

.dataTables_length select.custom-select-sm {
    font-size: inherit;
    line-height: 100%;
}

#grid-data-toolbar select {
    vertical-align: middle;
}

/* Select extension: ensure selected rows are always highlighted */
table.dataTable.display tbody > tr.selected > td,
table.dataTable.display tbody > tr.selected > td {
    background-color: #428bca !important;
    color: #fff !important;
}

/* Remove padding for sorting control on the <th> of a checkbox column */
table.dataTable.table-condensed > thead > tr > th.dt-checkboxes-select-all {
    padding-right: 5px;
    min-width: 30px;
}

/* Override the default column sorting icons with Font Awesome glyphs */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
    font-family: FontAwesome;
    right: 0.5em !important;
    top: 0.2em;
    content: "\f0de" !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    font-family: FontAwesome;
    right: 0.5em;
    bottom: 0.2em !important;
    content: "\f0dd" !important;
}


/* Small browsers only */
/* ------------------------------------- */
@media (max-width: 767px) {
    .content {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        -o-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .nav-side-menu {
        position: relative;
        height: auto;
        position: relative;
        height: auto;
        width: 100%;
    }

        .nav-side-menu .toggle-btn {
            display: block;
            cursor: pointer;
            float: right;
            margin: 12px 12px 0 12px;
            padding: 3px;
            color: #fff;
            width: 40px;
            text-align: center;
        }

        .nav-side-menu .brand {
            text-align: left !important;
            font-size: 16px;
            padding-left: 20px;
            line-height: 50px !important;
        }

            .nav-side-menu .brand h3 {
                line-height: 1.15em;
                max-height: 1.15em; /* clip after one line */
                max-width: 600px;
                margin-right: 60px; /* leave room for menu button */
                margin-left: 0;
            }

    #top-header {
        display: none;
    }

    .panel-log-in-out,
    .nav-side-menu li.account-controls {
        display: block;
    }

    table .cell-nowrap {
        white-space: normal; /* allow datatable cell wrapping on small screens to fit maximal information */
    }
}

/* Large browsers only */
/* ------------------------------------- */
@media (min-width: 768px) {
    .nav-side-menu .menu-list .menu-content {
        display: block;
    }

    .content {
        position: absolute;
        left: 240px;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

.error,
.has-error .control-label,
.has-error .help-block,
.has-error .form-control-feedback {
    color: #ff0039;
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
    line-height: 1.428571429 !important;
    border-radius: 15px !important;
}

#profileDialog .list-group-item {
    padding: 5px 15px;
    border: 0px;
}

.list-group-item dl {
    border-spacing: 0;
    display: table;
    table-layout: fixed;
    margin: 0;
    width: 100%;
    height: 34px;
}

    .list-group-item dl > dt {
        color: #707070;
        display: table-cell;
        font-weight: normal;
        text-align: right;
        width: 140px;
        vertical-align: middle;
    }

    .list-group-item dl > dd {
        display: table-cell;
        padding-left: 10px;
        vertical-align: middle;
    }

.editable {
    display: inline-block;
    min-width: 50px;
    min-height: 16px;
}

    .editable .edit {
        margin: 0px 5px;
        display: none;
    }

    .editable:hover {
        background: #f2f5ff;
        border-radius: 5px;
        padding: 2px 4px;
    }

        .editable:hover .edit {
            display: inline;
        }

form.input-editor label.error {
    display: none !important;
}

.input-editor {
    position: relative;
}

    .input-editor .btn-options {
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 100;
        margin-top: 1px;
    }

.btn-options .ok, .btn-options .cancel {
    padding: 1px 6px;
    border-radius: 2px;
}

/* Time Zone select2-enhanced dropdown */
/* ------------------------------------- */

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .select2-container--default .select2-selection--single:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),0px 0px 8px rgba(102,175,233,0.6);
        box-shadow: inset 0 1px 1px rgba(102, 175, 233, .6),0px 0px 8px rgba(102,175,233,0.6);
    }

.select2-container, .select2-selection, .select2-selection__rendered, .select2-selection__arrow {
    color: #555 !important;
    line-height: 1.42857143 !important;
    font-size: 14px !important;
    height: 34px !important;
}

.select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.loading-spinner {
    position: fixed;
    display: block;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

    .loading-spinner i {
        color: #ccc;
    }

/* Bootstrap form customizations */
/* ------------------------------------- */

form fieldset {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 20px;
}

    form fieldset > legend {
        width: inherit;
        padding: 0 8px;
        border-bottom: none;
        margin-bottom: 10px;
        font-size: 1.3em;
        color: #428bca;
    }

    form fieldset .fieldset-desc {
        margin: 0 0 20px 0;
    }

form .control-label {
    font-weight: normal;
}

.form-control.inline {
    display: inline-block;
}

.form-control.small {
    width: 12vw;
    min-width: 60px;
    max-width: 200px;
}

.form-control.medium {
    width: 25vw;
    min-width: 60px;
    max-width: 350px;
}

.form-control.large {
    width: 50vw;
    min-width: 60px;
    max-width: 800px;
}

.form-control.right-align {
    text-align: right;
}

.form-title {
    background-color: #e5e5e5;
    background: linear-gradient(to bottom, #d8d8d8 10%, #eaeaea);
    padding: 10px 20px;
    margin: -20px -15px 18px -15px;
    font-size: 110%;
    font-style: oblique;
    color: #666;
}

fieldset .note {
    margin-bottom: 15px;
}

.note.important {
    color: #d19b3d;
}

.is-invalid {
    border-color: #dc3545;
}

/*Style for the table buttons*/
.btn-edit, .btn-delete, .btn-view {
    padding: 1px 6px;
}

/* Bootstrap 4 Overrides */
/* ------------------------------------- */
.nav-side-menu {
    font-size: 0.85em;
}

#main {
    font-size: 0.9em;
    margin-top: 20px;
    padding-bottom: 50px;
}

h1, h2, h3 {
    line-height: 1em;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.6em;
}

.table td,
.table th {
    padding: 4px 8px;
}

.table .cell-nowrap {
    white-space: nowrap;
}

.table button {
    font-size: 0.9em;
}

.card-title {
    font-size: 1.1em;
    margin: 0;
}

button.close {
    font-size: 1.3rem;
    line-height: 0.9rem;
}

.text-primary a {
    color: #039;
}

.card.border-primary .card-header {
    background-color: #007bff;
    color: #fff;
}

.card.border-info {
    border-color: #a1cfd8 !important;
}

    .card.border-info .card-header {
        background-color: #d9edf7;
        color: #31708f;
    }

.input-border-color {
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-default {
    border: 1px solid #ced4da;
}

.btn-delete, .btn-edit, .btn-view {
    padding: 1px 6px;
}

form label {
    font-weight: 700;
}

/* Popovers */
.popover.confirmation {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px 0px;
}

    .popover.confirmation .popover-header {
        background-color: transparent;
        border-color: #faebcc;
    }

    .popover.confirmation.bs-popover-right > .arrow:after {
        border-right-color: #fcf8e3;
    }

    .popover.confirmation.bs-popover-left > .arrow:after {
        border-left-color: #fcf8e3;
    }

/* Bootstrap Multiselect Overrides */
/* ------------------------------------- */
.multiselect.dropdown-toggle {
    background-color: inherit;
    color: #495057;
}

.multiselect-container li a {
    color: inherit;
}

.multiselect-container li.active,
.multiselect-container li.active a {
    background-color: #007bff;
    color: #fff;
}

.multiselect-container li:not(.active):hover {
    background-color: #ececec;
}

.multiselect-container.dropdown-menu > li > a > label {
    padding: 2px 20px;
}

/*System version*/
#system-version {
    color: #999fa7;
    font-size: 0.75rem;
    position: fixed;
    left: 10px;
    bottom: 10px;
    pointer-events: none;
}

#themeSelect {
    float: right;
    margin-top: 14px;
    margin-left: 8px;
}


/* #region theme-light */
.theme-light body,
body.theme-light{
    color: #000;
    background-color: #fff;
}
/* #endregion theme-light */


/* #region theme-dark */
/* admin.css */
/* ------------------------------------- */
.theme-dark body,
body.theme-dark{
    color: #ccc;
    background-color: #1a1a1a;
}

.theme-dark *::-webkit-scrollbar {
    width: 12px;
    background-color: #000;
}

.theme-dark *::-webkit-scrollbar-track {
    background-color: #000;
}

.theme-dark *::-webkit-scrollbar-thumb {
    background-color: hsla(240, 2%, 30%, 1);
}

.theme-dark a {
    color: #60b9e2;
}

.theme-dark a:hover {
    color: #8ed7f9;
}

.theme-dark #top-header {
    background-color: inherit;
    border-bottom-color:#363638;
}
    .theme-dark #top-header .header-title {
        color: #fff;
    }
            .theme-dark #top-header > a.btn-circle.gray {
                background-color: #ccc;
                color: #1a1a1a;
            }
                .theme-dark #top-header > a.btn-circle.gray:hover {
                    background-color: #bbb;
                }

    .theme-dark .operationMessage .alert {
        box-shadow: none;
    }

.theme-dark .dialog-section-head {
    color: #808080;/*TODO: change*/
}

.theme-dark #overview-mask {
    background-color: inherit;
}

/* Bootstrap collapsible menu */
/* ------------------------------------- */
.theme-dark .nav-side-menu {
    border-right: 1px solid #363638;
}
/* DataTables extra styles */
/* ------------------------------------- */
.theme-dark table td.cell-small {
    color: #808080;
}

/* Select extension: ensure selected rows are always highlighted */
.theme-dark table.dataTable.display tbody > tr.selected > td,
.theme-dark table.dataTable.display tbody > tr.selected > td {
    background-color: #224f77 !important;
    color: #fff !important;
}

.theme-dark .error,
.theme-dark .has-error .control-label,
.theme-dark .has-error .help-block,
.theme-dark .has-error .form-control-feedback {
    color: #ff0039;
    border-color: #a94442;
}

.theme-dark .list-group-item {
    background-color: inherit;
}
    .theme-dark .list-group-item dl > dt {
        color: #fff;
    }

    .theme-dark .editable:hover {
        background: #363638;
    }

/* Time Zone select2-enhanced dropdown */
/* ------------------------------------- */
.theme-dark .select2-dropdown {
    border-color: #363638;
}

.theme-dark .select2-container--default .select2-selection--single {
    background-color: #363638;
    border-color: #060606;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075);
}

    .theme-dark .select2-container--default .select2-selection--single:focus {
        border-color: #66afe9;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),0px 0px 8px rgba(102,175,233,0.6);
        box-shadow: inset 0 1px 1px rgba(102, 175, 233, .6),0px 0px 8px rgba(102,175,233,0.6);
    }

.theme-dark .select2-container,
.theme-dark .select2-selection,
.theme-dark .select2-selection__rendered,
.theme-dark .select2-selection__arrow {
    color: #ccc !important;
}

.theme-dark .select2-search__field {
    color: #ccc;
}

.theme-dark .select2-dropdown {
    background-color: #1a1a1a;
}
.theme-dark .select2-search__field {
    background-color: #4b4b4b;
}
.theme-dark .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #4b4b4b;
}
    .theme-dark .loading-spinner i {
        color: #ccc;
    }

/* Bootstrap button */
/* ------------------------------------- */
.theme-dark .btn-link {
    color: #60b9e2;
}

.theme-dark .btn-link:hover {
    color: #8ed7f9;
}

.theme-dark .btn-default {
    background-color: #97979b;
}

    .theme-dark .btn-group .btn-default:not(.active) {
        background-color: #363638;
    }

.theme-dark .btn-primary {
    color: #fff;
}
.theme-dark .btn-primary:hover {
    color: #fff;
}

.theme-dark .close {
    color: #ccc;
    text-shadow: #4b4b4b;
}

.theme-dark .close:not(:disabled):not(.disabled):focus,
.theme-dark .close:not(:disabled):not(.disabled):hover {
    color: #fff;
}

.theme-dark a.btn-success,
.theme-dark a.btn-danger {
    color: #fff;
}

/* Bootstrap modal */
/* ------------------------------------- */
.theme-dark .modal-header {
    border-bottom-color: #363638;
}
.theme-dark .modal-content {
    background-color: #1a1a1a;
    color: inherit;
}
.theme-dark .modal-footer {
    border-top-color: #363638;
}

/* Bootstrap card */
/* ------------------------------------- */
.theme-dark .card {
    background-color: #242426;
    border-color: #363638;
}

.theme-dark .card-header {
    border-bottom-color: #363638;
    background-color: #2d2d2f;
}

/* Bootstrap form customizations */
/* ------------------------------------- */

.theme-dark form fieldset {
    border-color: #363638;
}

    .theme-dark form fieldset > legend {
        color: #428bca;
    }

.theme-dark .form-title {
    background: none;
    background-color: #2d2d2f;
    color: #acacac;
}

.theme-dark .form-control,
.theme-dark .form-control-sm {
    background-color: #363638;
    color: #ccc;
    border-color: #060606;
}

.theme-dark .form-control:focus,
.theme-dark .form-control-sm:focus {
    background-color: #4b4b4e;
    border-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),0px 0px 8px rgba(102,175,233,0.6);
    box-shadow: inset 0 1px 1px rgba(102, 175, 233, .6),0px 0px 8px rgba(102,175,233,0.6);
}

    .theme-dark .form-control:focus::placeholder,
    .theme-dark .form-control-sm:focus::placeholder {
        color: #a0a0a0;
    }

.theme-dark .input-group-append > span {
    background-color: #4b4b4b;
    border-color: #060606;
    color: #ccc;
}

.theme-dark .custom-select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23ccc' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
}

.theme-dark .note.important {
    color: #d19b3d;
}

.theme-dark .is-invalid {
    border-color: #dc3545;
}

/* Bootstrap table */
/* ------------------------------------- */
.theme-dark .table-bordered,
.theme-dark .table-bordered td,
.theme-dark .table-bordered th {
    border-color:  #363638;
}
.theme-dark .table thead th {
    border-bottom-color: #363638;
}

/* Bootstrap nav */
/* ------------------------------------- */
.theme-dark .nav-tabs {
    border-bottom-color: #363638;
}
.theme-dark .nav-tabs .nav-link:focus,
.theme-dark .nav-tabs .nav-link:hover {
    border-color: #363638;
}
.theme-dark .nav-tabs .nav-link.active {
    background-color: #1a1a1a;
    color: #ccc;
    border-color: #363638;
    border-bottom-color: transparent;
}

/* Bootstrap 4 Overrides */
/* ------------------------------------- */
.theme-dark .text-primary a {
    color: #039;
}

.theme-dark .card.border-primary .card-header {
    background-color: #007bff;
    color: #fff;
}

.theme-dark .card.border-info {
    border-color: #3c515d !important;
}

    .theme-dark .card.border-info .card-header {
        background-color: #577484;
        color: #d9edf7;
    }

.theme-dark .input-border-color {
    color: #ccc;
    background-color: #363638;
    border: 1px solid #060606;
}

.theme-dark .btn-default {
    border-color: #363638;
}

.theme-dark .alert-success {
    background-color: #17331e;
    border-color: #1f4829;
    color: #97caa3;
}

/* Popovers */
.theme-dark .popover {
    background-color: #4b4b4b;
}

    .theme-dark .popover.bs-popover-right > .arrow:after {
        border-right-color: #4b4b4b;
    }

    .theme-dark .popover.bs-popover-left > .arrow:after {
        border-left-color: #4b4b4b;
    }

.theme-dark .popover.confirmation {
    color: #614d2a;
    background-color: #ccc390;
    border-color: #060606;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px 0px;
}

    .theme-dark .popover.confirmation .popover-header {
        background-color: transparent;
        border-color: #7d7a65;
    }

    .theme-dark .popover.confirmation.bs-popover-right > .arrow:after {
        border-right-color: #ccc390;
    }

    .theme-dark .popover.confirmation.bs-popover-left > .arrow:after {
        border-left-color: #ccc390;
    }

/* Bootstrap Multiselect Overrides */
/* ------------------------------------- */
.theme-dark .dropdown-menu {
    background-color: #4b4b4e;
    color: #ccc;
    box-shadow: 5px 4px 8px rgba(0,0,0,0.5);
}
.theme-dark .multiselect.dropdown-toggle {
    background-color: #363638;
    border-color: #060606;
    color: inherit;
}

.theme-dark .multiselect-container li.active,
.theme-dark .multiselect-container li.active a {
    background-color: #007bff;
    color: #fff;
}

.theme-dark .multiselect-container li:not(.active):hover {
    background-color: #3f4b59;
}

/* Bootstrap pagination */
/* ------------------------------------- */
.theme-dark .page-link {
    background-color: #1a1a1a;
    color: #ccc;
    border-color: #363638;
}

.theme-dark .page-link:hover {
    background-color: #363638;
    color: #ccc;
}

.theme-dark .page-item.active .page-link {
    background-color: #363638;
    border-color: #989898;
}

.theme-dark .page-item.disabled .page-link {
    background-color: #1a1a1a;
    color: #ccc;
    border-color: #363638;
    opacity: .6;
}

/* gijgo */
/* ------------------------------------- */
.theme-dark .gj-tree-bootstrap-4 ul.gj-list-bootstrap li {
    color: inherit;
}

.theme-dark .gj-tree-bootstrap-border ul.gj-list-bootstrap li {
    border-color: #363638;
}

/* chartjs */
/* ------------------------------------- */
.theme-dark label.active {
    background-color: #224f77;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7) !important;
}

/* #endregion theme dark */


@media (max-width: 768px) {
    #system-version {
        left: auto;
        right: 10px;
        position:absolute;
    }

    .toggle-btn ~ div#system-version {
        display: block;
    }

    .toggle-btn.collapsed ~ div#system-version {
        display: none;
    }
}