﻿/*****************************************
    SVG
*****************************************/
svg {
}
    svg .dbq-icon-color-1 {
        fill: #676767;
    }
    svg .dbq-icon-color-2 {
        fill: #dcdcdc;
    }
.logo svg .dbq-logo-color-1 {
    fill: #dcdcdc;
}
.logo svg .dbq-logo-color-2 {
    fill: #E6E6E6;
}
.logo svg .dbq-logo-color-3 {
    fill: #F2F2F2;
}
.logo svg .dbq-logo-color-4 {
    fill: #dcdcdc;
}
.logo svg .dbq-logo-color-5 {
    fill: #717171;
}
.logo svg .dbq-logo-color-6 {
    fill: #989898;
}

#content-wrapper #classlist-tree-grid .ui-iggrid-toolbar svg {
    fill: #FDFDFD;
}

#content-wrapper .input-group-addon {
    padding: 8px;
}
    #content-wrapper .input-group-addon svg {
        background: #1A1E23;
        fill: #495057;
    }

#content-wrapper .input-list-item-add-button svg {
    fill: #fff;
}

.dbqstdt-arrow svg:hover {
    fill: #fff;
}

/*****************************************
    breadcrumbs
*****************************************/
#dbq-document-class-list-breadcrumbs .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #dcdcdc;
}

/*****************************************
    button
*****************************************/
#content-wrapper .btn-primary {
    color: #fff;
}
    #content-wrapper .btn-primary.disabled, #content-wrapper .btn-primary:disabled {
        color: #fff;
        opacity: .65;
    }
#content-wrapper .ui-state-active, #content-wrapper .ui-widget-content .ui-state-active, #content-wrapper .ui-widget-header .ui-state-active {
    color: #fff;
    background-color: #3c414c;
    border-color: #3c414c;
}
.ui-iggrid .ui-ig-altrecord td.ui-state-active, .ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-active, .ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-active, .ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcellstop.ui-state-active, .ui-iggrid tbody .ui-iggrid-mergedcell.ui-state-active, .ui-iggrid tbody .ui-iggrid-mergedcellstop.ui-state-active, .ui-iggrid td.ui-state-active, .ui-iggrid th.ui-iggrid-rowselector-class.ui-state-active {
    background: #1A1E23;
}
#content-wrapper .btn-secondary {
    background: #3c414c;
    color: #fff;
}
#content-wrapper .btn-danger {
    background: #e23530;
    color: #fff;
}

/*****************************************
    Column
*****************************************/
.dbq-column {
}
.modal .dbq-column {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*****************************************
    dialog
*****************************************/
.dialog-header {
}
.dialog-title {
}

/*****************************************
    Modal
*****************************************/
.modal #document-topics .topic,
.modal .topic {
    background: #292f37;
}
.modal .dbq-form .topic {
    background: #1A1E23;
}
.alert-success, .alert-danger {
}
.alert {
    border-width: 2px;
}
.alert-danger {
    color: #D5473C;
    background-color: #422321;
    border-color: #D5473C;
    font-weight: 500;
}
.dbq-modal-header {
    padding: 20px 30px;
    color: #dcdcdc;
    background-color: #1A1E23;
    border: 0;
    border-bottom: 1px solid #292f37;
    font-weight: 600;
}
.modal-dialog main {
}
.modal-footer {
    background-color: #1A1E23;
    border: 0;
    border-top: 1px solid #292f37 !important;
}
.dbq-graph-full-screen-button {
    fill: #dcdcdc;
}
.topic .btn-default {
    background: #3c414c;
    border-color: #3c414c;
    color: #dcdcdc;
    color: #dcdcdc;
}
    .topic .btn-default:hover {
        background: #292f37;
        border-color: #292f37;
        color: #dcdcdc;
    }
.topic .modal-footer .btn-link {
    color: #5a5a5a;
    border: 0;
}
    .topic .modal-footer .btn-link:hover {
        color: #9D2828;
    }

.modal-content {
    background-color: #1A1E23;
    color: #FDFDFD;
}
.modal-dialog-loading {
    background-color: #0c0c0c !important;
}
#document-topics .element .property .button_list,
.dbq-form .element .property .button_list {
    border: 2px solid #3c414c;
}
#document-topics .element .property .dbq-label-disabled + .button_list,
.dbq-form .element .property .dbq-label-disabled + .button_list {
    border: 2px solid #26292f;
}
form[data-view-mode="View"] #document-topics .element .property .button_list,
form[data-view-mode="View"] #document-topics .element .property .button_list[data-read-only="true"],
form[data-view-mode="View"] .dbq-form .element .property .button_list,
form[data-view-mode="View"] .dbq-form .element .property .button_list[data-read-only="true"] {
    border: 2px solid #26292f;
}
.modal #document-topics .dbq-form-group-title + .flex-container.dbq-form-group,
.modal .dbq-form .dbq-form-group-title + .flex-container.dbq-form-group {
    border: 2px solid #3c414c;
}
.modal #document-topics .dbq-form-group-title.dbq-label-disabled + .flex-container.dbq-form-group,
.modal .dbq-form .dbq-form-group-title.dbq-label-disabled + .flex-container.dbq-form-group {
    border: 2px solid #26292f;
}

/*****************************************
    image upload / file upload
*****************************************/
.image-file-upload-input, .file-upload-input {
    /*background: #3c414c;*/
}
.input-group-btn svg, .file-upload-input svg {
    fill: #fff;
}
.image-file-upload-clear, .file-upload-clear {
    color: #fff;
    background: #bbb;
}
    .file-upload-clear svg {
        fill: #fff;
    }
    .image-file-upload-clear:hover, .file-upload-clear:hover {
        background: #000;
    }

.image-file-upload {
}
    .image-file-upload .image-file-upload-filename {
    }
    .image-file-upload .input-group-btn {
        background: #1A1E23;
    }
.image-file-upload-clear {
    border: 0;
}
    .image-file-upload-clear svg {
        fill: #5a5a5a;
    }
    .image-file-upload-clear:hover svg {
        fill: #fff;
    }

.file-upload,
.image-file-upload {
    background: 0 !important;
}
#document-topics .topic .image-file-upload-input, #document-topics .topic .file-upload-input, .file-upload-clear,
.dbq-form .image-file-upload-input, .dbq-form .file-upload-input, .file-upload-clear {
    background: #1A1E23 !important;
    border: 2px solid #3c414c !important;
    color: #0088FF !important;
    fill: #0088FF !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    /*opacity: 1;*/
}
    #document-topics .topic .image-file-upload-input svg, #document-topics .topic .file-upload-input svg, #document-topics .file-upload-clear svg,
    .dbq-form .image-file-upload-input svg, .dbq-form .file-upload-input svg, .dbq-form .file-upload-clear svg {
        fill: #0088FF;
    }
    #document-topics .topic .image-file-upload-input:hover svg, #document-topics .topic .file-upload-input:hover svg, #document-topics .file-upload-clear:hover svg,
    .dbq-form .image-file-upload-input:hover svg, .dbq-form .file-upload-input:hover svg, .dbq-form .file-upload-clear:hover svg {
        fill: #0088FF;
    }
    #document-topics .topic .image-file-upload-input:hover, #document-topics .topic .file-upload-input:hover,
    .dbq-form .image-file-upload-input:hover, .dbq-form .file-upload-input:hover {
        background: #0075DB !important;
        border: 2px solid #0075DB !important;
    }
        #document-topics .topic .image-file-upload-input:hover svg, #document-topics .topic .file-upload-input:hover svg,
        .dbq-form .image-file-upload-input:hover svg, .dbq-form .file-upload-input:hover svg {
            fill: #FFFFFF !important;
        }
        #document-topics .topic .image-file-upload-input:hover span, #document-topics .topic .file-upload-input:hover span,
        .dbq-form .image-file-upload-input:hover span, .dbq-form .file-upload-input:hover span {
            color: #FFFFFF !important;
        }
.dbq-form .file-upload-hover .image-file-upload-input,
.dbq-form .file-upload-hover .file-upload-input,
.file-upload-hover .file-upload-clear {
    border: 0 !important;
    border-left: 2px dashed #0075DB !important;
}
.dbq-form .file-upload-clear svg,
.dbq-form .file-upload-clear .file-upload-clear-title {
    color: #af342a !important;
    fill: #af342a !important;
}
.dbq-form .file-upload-clear:hover {
    background: #af342a !important;
    border-color: #af342a !important;
    border: 2px solid #af342a !important;
}
.dbq-form .file-upload-clear:hover svg,
.dbq-form .file-upload-clear:hover .file-upload-clear-title {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

#document-topics .dbq-has-download-button .btn-primary.file-download-button,
.dbq-form .dbq-has-download-button .btn-primary.file-download-button {
    border-left: 0 !important;
}
    #document-topics .dbq-has-download-button .btn-primary.file-download-button:hover,
    .dbq-form .dbq-has-download-button .btn-primary.file-download-button:hover {
        color: #FFFFFF !important;
        background: #0075DB !important;
        border: 2px solid #0075DB !important;
        border-left: 0 !important;
    }
        #document-topics .dbq-has-download-button .btn-primary.file-download-button:hover svg,
        .dbq-form .dbq-has-download-button .btn-primary.file-download-button:hover svg {
            fill: #FFFFFF !important;
        }

#document-topics .topic div[data-element-type="Header"]:first-of-type,
.dbq-form div[data-element-type="Header"]:first-of-type {
    border-top: 0;
}

.dbq-drawing-canvas {
    /*width: 100%; <-- not possible to set width 100%.. the canvas has an inline width attribute. This causes signatures to get out of shape */
    height: 200px;
    background: #1A1E23 !important;
    border: 2px solid #3c414c !important;
    box-sizing: unset;
}

/* ****************************** 
    File upload
****************************** */
#document-topics .btn-primary.file-download-button,
.dbq-form .btn-primary.file-download-button {
    background: #252a35 !important;
    border: 2px solid #26292f !important;
    color: #0088FF !important;
    fill: #0088FF !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
    #document-topics .btn-primary.file-download-button svg,
    .dbq-form .btn-primary.file-download-button svg {
        fill: #0088FF !important;
    }
    #document-topics .btn-primary.file-download-button:hover,
    .dbq-form .btn-primary.file-download-button:hover {
        background: #0075DB !important;
        border: 2px solid #0088FF !important;
        color: #FFFFFF !important;
    }
        #document-topics .btn-primary.file-download-button:hover svg,
        .dbq-form .btn-primary.file-download-button:hover svg {
            fill: #FFFFFF !important;
        }

.file-upload, .image-file-upload {  
}
    .file-upload.file-upload-hover input[type='text'],
    .image-file-upload.file-upload-hover input[type='text'] {
        /*background-color: #fffa6c;*/
    }
    .file-upload.file-upload-hover .file-upload-input, .file-upload.file-upload-hover .file-upload-clear,
    .image-file-upload.file-upload-hover .image-file-upload-input, .image-file-upload.file-upload-hover .image-file-upload-clear {
        /*background-color: #fffa6c;*/
    }

button.btn-default.image-file-upload-clear:enabled {
    color: #FFFFFF !important;
    border: 2px solid #3c414c !important;
    border-right: 0 !important;
}
    button.btn-default.image-file-upload-clear:enabled span.image-file-upload-input-title-clear {
        color: #af342a !important;
    }
    button.btn-default.image-file-upload-clear:enabled svg {
        fill: #af342a !important;
    }

.image-preview {
    background: #1A1E23 !important;
    border: 2px dashed #3c414c !important;
}
.dbq-has-image-preview .image-preview {
    border-bottom: 0 !important;
}
#document-topics .dbq-has-image-preview .image-file-upload input.form-control.image-file-upload-filename,
#document-topics .dbq-has-image-preview .input-group-btn button.image-file-upload-clear,
#document-topics .dbq-has-image-preview .input-group-btn div.image-file-upload-input,
.dbq-form .dbq-has-image-preview .image-file-upload input.form-control.image-file-upload-filename,
.dbq-form .dbq-has-image-preview .input-group-btn button.image-file-upload-clear,
.dbq-form .dbq-has-image-preview .input-group-btn div.image-file-upload-input {
    border-top: 2px dashed #3c414c !important;
}
    #document-topics .dbq-has-image-preview .input-group-btn button.image-file-upload-clear:hover,
    .dbq-form .dbq-has-image-preview .input-group-btn button.image-file-upload-clear:hover {
        border-top: 2px dashed #af342a !important;
    }
    #document-topics .dbq-has-image-preview .input-group-btn div.image-file-upload-input:hover,
    .dbq-form .dbq-has-image-preview .input-group-btn div.image-file-upload-input:hover {
        border-top: 2px dashed #0075DB !important;
    }

div.dbq-label-disabled + div.image-preview,
form[data-view-mode="View"] .image-preview {
    /*background: #26292f !important;*/
    border: 2px dashed #26292f !important;
}
    .image-preview img {
        opacity: 1;
    }
    .image-preview:hover img {
        opacity: 0.3;
    }
    .image-preview:hover .image-hover {
        opacity: 1;
    }
    .image-preview .image-hover {
        opacity: 0;
    }
    .image-preview:hover {
        background: rgb(21 25 31 / 80%);
    }
    /*.image-preview:hover img {
        opacity: 0 !important; <-- why should the image not be visible?
    }*/
    .image-preview .image-hover {
        fill: #0088FF;
    }

#document-topics .image-file-upload-clear,
.dbq-form .image-file-upload-clear {
}
    #document-topics .image-file-upload-clear:hover,
    .dbq-form .image-file-upload-clear:hover {
        background: #af342a !important;
        border: 2px solid #af342a !important;
        border-right: 0 !important;
    }
        #document-topics .image-file-upload-clear:hover span,
        .dbq-form .image-file-upload-clear:hover span {
            color: #fff !important;
        }
        #document-topics .image-file-upload-clear:hover svg,
        .dbq-form .image-file-upload-clear:hover svg {
            fill: #fff !important;
        }

#document-topics .image-file-upload.file-upload-hover .form-control,
.dbq-form .image-file-upload.file-upload-hover .form-control {
    border: 0 !important;
}
#document-topics .image-file-upload.file-upload-hover .image-file-upload-input,
#document-topics .image-file-upload.file-upload-hover .file-upload-input,
.dbq-form .image-file-upload.file-upload-hover .image-file-upload-input,
.dbq-form .image-file-upload.file-upload-hover .file-upload-input,
.image-file-upload.file-upload-hover .file-upload-clear,
.modal-content .image-file-upload.file-upload-hover button.btn-default.file-upload-clear,
.modal-content .file-upload.file-upload-hover button.btn-default.file-upload-clear {
    border: 0 !important;
    border-left: 2px dashed #0075DB !important;
}

.file-upload input[type=file], .image-file-upload input[type=file] {
	opacity: 0;
	filter: alpha(opacity=0);
}

.image-file-upload .input-group-btn {
    border-radius: 0 10px 10px 0 !important;
}

/************************************************ 
    Helper classes.
*************************************************/
h3.tile-project-title {
}
span.tile-project-subtitle {
}
span.tile-project-attr-title {
    color: #808a9a;
}
span.tile-project-attr-description {
}

/************************************************ 
    Multiple select autocomplete
*************************************************/
.searchbox-container .input-group .input-group-btn button {
    border-left: 0;
    border: 0;
}
    .searchbox-container .input-group .input-group-btn button span {
        color: #444;
    }
    .searchbox-container .input-group .input-group-btn button.searchbox-container-remove {
        border-left: 0 !important;
    }
#document-topics input[data-is-searchbox="true"] + .searchbox-container.searchbox-clear-hidden .input-group input.form-control,
.dbq-form input[data-is-searchbox="true"] + .searchbox-container.searchbox-clear-hidden .input-group input.form-control {
}
.modal button.btn-default.searchbox-container-remove:enabled:hover {
    background: #0075DB !important;
    border: 2px solid #0088FF !important;
}
.modal button.btn-default.searchbox-container-remove:enabled:hover svg {
    fill: #FFFFFF !important;
}

.autocomplete-suggestions {
    border: 2px solid #3c414c; /*1px solid #dcdcdc;*/
    border-top: 0;
    background: #fff;
    -webkit-box-shadow: -1px 1px 3px rgba(0,0,0,.1);
    -moz-box-shadow: -1px 1px 3px rgba(0,0,0,.1);
    box-shadow: -1px 1px 3px rgba(0,0,0,.1);
}
.autocomplete-suggestion {
    color: #dcdcdc;
    background: #121416;
}
.autocomplete-suggestion b { 
    color: #1f8dd6; 
}
.autocomplete-suggestion.selected { 
    background: #f0f0f0; 
}


/************************************************ 
    Source Code Editor
*************************************************/
div[type='source-code-editor'] {
    border: 1px solid #eeeeee;
}
    div[type='source-code-editor'] .cm-keyword {
        color: #0000ff !important;
    }
    div[type='source-code-editor'] .cm-comment {
        color: #008000 !important;
    }
    div[type='source-code-editor'] .cm-string {
        color: #01957b !important;
    }
    div[type='source-code-editor'] .cm-builtin {
        color: #FFFFFF !important;
    }

    
/************************************************ 
    Graphs (Infragistics charts)
*************************************************/
.ui-chart-piechart-container {
    border: 0 none;
}
.graph-table th, .graph-table td {
    border: 1px solid #eee;
}

/************************************************ 
    Graphs (Infragistics charts: tooltip styling)
*************************************************/

.ui-chart-tooltip {
    border-color: transparent !important;
}
    .graph-tooltip label.header {
        color: #bbb;
    }
    .graph-tooltip label.content {
        color: #666;
    }

/*****************************************
    topic / document topic tabs
*****************************************/
#document-topic-tabs.nav-tabs {
    background: #1A1E23 !important;
    border-bottom: 1px solid #292f37 !important;
}
    #document-topic-tabs.nav-tabs > li.active {
        background: #3c414c !important;
    }
    /*#document-topic-tabs.nav-tabs > li.active > a::after, <-- moet in andere css (stylesheet-?.css) */
    #document-topic-tabs.nav-tabs > li:hover > a::after {
        background: #0c0c0c !important;
        border-bottom: 5px solid #0c0c0c !important;
    }
    #document-topic-tabs.nav-tabs > li:hover a::after {
        background: 0 !important;
        border-bottom: 0 !important;
    }
    #document-topic-tabs.nav-tabs.document-topic-tabs {
    }
        #document-topic-tabs.nav-tabs.document-topic-tabs > li > a {
            color: #FDFDFD !important;
        }
        #document-topic-tabs.nav-tabs.document-topic-tabs > li.active > a {
            color: #FDFDFD !important;
            background-color: #3c414c;
        }
        #document-topic-tabs.nav-tabs.document-topic-tabs > li.active:hover > a {
            color: #FDFDFD !important;
        }

.topic .form-control {
    background-color: #111213 !important;
    border-color: #111213 !important;
    color: #FDFDFD !important;
}

div[data-element-type="Header"] span {
    color: #dcdcdc; /* can't have important..! must be possible to override in CMS (title: escalatie -> in tijsens) */
}

.form-inline .form-control {
    /*border: 2px solid #3c414c;*/
    border: 0;
    background: #1A1E23;
}

#document-topics .topic .input-list-item-add-button svg, #document-topics .topic .input-list-item-remove-button svg,
.dbq-form .input-list-item-add-button svg, .dbq-form .input-list-item-remove-button svg {
    fill: #fff;
}
#document-topics div[data-topic-name="Form"] table,
.dbq-form div[data-topic-name="Form"] table {
    /*background: #1A1E23; <-- can't add background here.. in WSP (and possibly more) you will get a background in datetimepicker*/
}

.form-inline .form-control {
    /*border: 2px solid #3c414c;*/
    border: 0;
    background: #1A1E23;
}

.input-list[data-show-index-numbers='true'] .input-list-item .input-list-item-index-background {
    background: 0;
}
    .input-list[data-show-index-numbers='true'] .input-list-item .input-list-item-index-background .input-list-item-index {
        color: #a7aab2;
    }

/************************ 
    Custom checkbox (cr)
    https://bootsnipp.com/snippets/featured/animated-radios-amp-checkboxes-nojs
*************************/
.checkbox label input[type="checkbox"] + .cr > .cr-icon {
    opacity: 0;
}
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
    opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + .cr {
    opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + .cr {
    cursor: not-allowed;
}


/************************ 
    Input lists
*************************/
.input-list {
    background: #26292f; /*#191b20; <- #26292f*/ /*#2f343c*/
}
/*form[data-view-mode="View"] .input-list {
    background: #1A1E23;
}
form[data-view-mode="View"] .input-list-item {
    border-bottom: 1px solid #26292f;
}
form[data-view-mode="View"] div[data-sort-direction="0"] .input-list-content {
    background: #191b20;*/ /* #26292f <-- should be more specific, this disabled color should not be added everywhere */
    /*border: 2px solid #26292f;
}*/
form[data-view-mode="View"] .input-list[data-sort-direction="0"] .input-list-item-add {
    border: 2px solid #26292f;
}
div[data-sort-direction="0"][data-has-visible-add-button="true"] .input-list-content {
    border: 2px solid #3c414c;
}
div[data-sort-direction="1"][data-has-visible-add-button="true"] .input-list-content {
    border: 2px solid #3c414c;
}
form[data-view-mode="View"] div[data-sort-direction="1"][data-has-visible-add-button="true"] .input-list-content {
    border: 2px solid #26292f;
}
div[data-sort-direction="0"][data-has-visible-add-button="false"] .input-list-content,
div[data-sort-direction="1"][data-has-visible-add-button="false"] .input-list-content {
}

.input-list[data-show-index-numbers='true'] .input-list-item {
    border-bottom: 1px solid #3c414c;
}
    .input-list[data-show-index-numbers='true'] .input-list-item:first-of-type {
    }
    .input-list[data-show-index-numbers='true'] .input-list-item:last-of-type {
        border: 0;
    }

.input-list[data-show-index-numbers='true'] .input-list-item .input-list-item-index-background {
    border: 0;
    border-right: 1px solid #3c414c;
}
form[data-view-mode="View"] .input-list[data-show-index-numbers='true'] .input-list-item .input-list-item-index-background {
    border-right: 1px solid #26292f;
}

.input-list-item[data-is-read-only='true'] {
}
    .input-list-item[data-is-read-only='true'] .input-list-item-remove-button {
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }
    .input-list-item[data-is-read-only='true'] .form-control {
        background-color: #eee;
    }

.input-list[data-sort-direction="0"] .input-list-item-add {
    background: #26292f;
    border: 2px solid #3c414c;
    border-top: 0;
}
    .input-list[data-sort-direction="0"] .input-list-item:last-of-type {
    }
.input-list[data-sort-direction="1"] .input-list-item-add {
    background: #26292f;
    border: 2px solid #3c414c;
    border-bottom: 0;
}
    .input-list[data-sort-direction="1"] .input-list-item:last-of-type {
        border: 0;
    }

form[data-view-mode="View"] .input-list[data-sort-direction="0"] .input-list-item-add,
form[data-view-mode="View"] .input-list[data-sort-direction="1"] .input-list-item-add {
    border: 2px solid #26292f !important;
}

#document-topics .input-list-item-add button.input-list-item-add-button,
#document-topics button.input-list-item-remove-button,
.dbq-form .input-list-item-add button.input-list-item-add-button,
.dbq-form button.input-list-item-remove-button {
    border: 0 !important;
    background: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
    #document-topics .input-list-item-add button.input-list-item-add-button span,
    .dbq-form .input-list-item-add button.input-list-item-add-button span {
        color: #0088FF !important;
    }
    #document-topics .input-list-item-add button.input-list-item-add-button svg,
    .dbq-form .input-list-item-add button.input-list-item-add-button svg {
        fill: #0088FF !important;
    }

#document-topics .input-list-item,
.dbq-form .input-list-item {
    border-bottom: 1px solid #3c4150;
}
    #document-topics .input-list-item:last-of-type,
    .dbq-form .input-list-item:last-of-type {
        border-bottom: 0;
    }

.input-list-item {
}
    .input-list-item:last-child {
        border-bottom: 0;
    }

.input-list-item {
    border-bottom: 1px solid #3c414c;
}
    .input-list-item:last-child {
        border-bottom: 0;
    }


/*****************************************
    pop over
*****************************************/
.popover {
    background-color: #121416;
    border: 1px solid #121416;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.popover-header {
    background-color: #1A1E23;
    border-bottom: 1px solid #121416;
    color: #dcdcdc;
}
.popover-body {
    color: #dcdcdc;
    background: #1A1E23;
}
.popover .close {
    color: #dcdcdc;
    text-shadow: none !important;
    opacity: 1;
}

/*****************************************
    multiple select
*****************************************/
/* this is for tags section in Modal (relatiebeheer) */
.multiple-select-selectmulti {
    border: 2px solid #3c414c;
}
.multiple-select-selectmulti svg {
    fill: #0088FF;
}
.multiple-select-selectmulti button:hover svg {
    fill: #FDFDFD;
}
.multiple-select-selectmulti strong {
    background: #1A1E23;
    border: 0;
    border-bottom: 2px solid #3c414c;
    color: #FDFDFD;
}
.multiple-select-selectmulti > div:first-of-type strong {
    border-right: 2px solid #3c414c;
}
.multiple-select-selectmulti > div:last-of-type strong {
    border-left: 2px solid #3c414c;
}
.multiple-select-selectmulti option {
    background: #1A1E23 !important;
    color: #FDFDFD;
}
#document-topics .multiple-select-selectmulti .btn,
.dbq-form .multiple-select-selectmulti .btn {
    background: #1A1E23;
    border: 0;
    border-bottom: 2px solid #3c414c;
}
    #document-topics .multiple-select-selectmulti .btn svg,
    .dbq-form .multiple-select-selectmulti .btn svg {
        fill: #0088FF;
    }
    #document-topics .multiple-select-selectmulti .btn:hover,
    .dbq-form .multiple-select-selectmulti .btn:hover {
        background: #0088FF;
    }
        #document-topics .multiple-select-selectmulti .btn:hover svg,
        .dbq-form .multiple-select-selectmulti .btn:hover svg {
            fill: #FFFFFF !important;
        }
#document-topics .multiple-select-selectmulti select.form-control,
.dbq-form .multiple-select-selectmulti select.form-control {
    border: 0 !important;
}
#document-topics .multiple-select-selectmulti > div:first-of-type select.form-control,
.dbq-form .multiple-select-selectmulti > div:first-of-type select.form-control {
    border-right: 2px solid #3c414c !important;
}
#document-topics .multiple-select-selectmulti > div:last-of-type select.form-control,
.dbq-form .multiple-select-selectmulti > div:last-of-type select.form-control {
    border-left: 2px solid #3c414c !important;
}
#document-topics .multiple-select-selectmulti select.form-control option,
.dbq-form .multiple-select-selectmulti select.form-control option {
    background: #1A1E23 !important;
    border-bottom: 1px solid #3c414c;
    color: #FDFDFD !important;
}
    #document-topics .multiple-select-selectmulti select.form-control option:checked,
    .dbq-form .multiple-select-selectmulti select.form-control option:checked {
        background: #FFFFFF !important;
        /*box-shadow: 0 0 10px 100px #FFFFFF inset; <-- when deselect the selectbox, the box-shadow will stay but the font color doesnt change */
        color: #000000 !important;
    }
    #document-topics .multiple-select-selectmulti select.form-control option:hover,
    .dbq-form .multiple-select-selectmulti select.form-control option:hover {
        background: #0075DB !important;
        color: #FFFFFF !important;
    }
/*.dbq-form .multiple-select-selectmulti select.form-control:focus option:checked {
    color: #FFFFFF !important;
    box-shadow: 0 0 10px 100px #FFFFFF inset !important;
}*/

/*****************************************
    Placeholder
*****************************************/
/*#content ::-webkit-input-placeholder, .dbq-form input::-webkit-input-placeholder {
    color: #0088FF !important;
    opacity: 0.7 !important;
}
#content ::-moz-placeholder, .dbq-form input::-moz-placeholder {
    color: #0088FF !important;
    opacity: 0.7 !important;
}
#content :-ms-input-placeholder, .dbq-form input:-ms-input-placeholder {
    color: #0088FF !important;
    opacity: 0.7 !important;
}
#content :-moz-placeholder, .dbq-form input:-moz-placeholder {
    color: #0088FF !important;
    opacity: 0.7 !important;
}*/

/*****************************************
    element graph
*****************************************/
.element-graph .dbq-graph-full-screen {
    background: #1A1E23;
}
.element-graph .dbq-graph-toolbar button,
.element-graph .dbq-graph-toolbar button:active,
.element-graph .dbq-graph-toolbar button:focus {
    outline: 0 !important;
}

.modal .element-graph {
    border: 2px solid #282c38 !important;
}

/*****************************************
    RUMM / CIRDAX
*****************************************/
.action-button.raised {
    cursor: pointer;
}
.dbq-application-rumm .action-button.raised a[data-action-name="gotonexttopic"] span {
    display: none;
}

/*****************************************
    Main menu
*****************************************/
#side_navigation h3 {
    color: #445668;
}

/************************************************ 
    Document Display Mode: Compact
*************************************************/
.xl-document[data-document-display-mode='Compact'] .dbq-form .multiple-select-selectmulti[data-is-read-only="true"],
.xl-document[data-document-display-mode='Compact'] .dbq-form .input-list {
    background: #1A1E23;
    color: #fff;
    fill: #fff;
}

/* ****************************** 
    Multi select dropdown menu
****************************** */
.multiple-select-rule-single-tree .dbq-select-type-dropdown-tree ul.dropdown-menu {
    background-color: #121416;
    border: 0;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.18);
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,0.18);
    box-shadow: 0 6px 12px rgba(0,0,0,0.18);
}
.multiple-select-rule-single-tree .dbq-select-type-dropdown-tree ul.dropdown-menu li a {
    color: #FDFDFD50 !important;
}
    .multiple-select-rule-single-tree .dbq-select-type-dropdown-tree ul.dropdown-menu li a:hover {
        color: #FDFDFD50 !important;
    }
    .multiple-select-rule-single-tree .dbq-select-type-dropdown-tree ul.dropdown-menu li[data-is-selectable="true"] a {
        color: #dcdcdc !important;
    }
        .multiple-select-rule-single-tree .dbq-select-type-dropdown-tree ul.dropdown-menu li[data-is-selectable="true"] a:hover {
            color: #0088FF !important;
        }
    .multiple-select-rule-single-tree .dbq-select-type-dropdown-tree ul.dropdown-menu svg {
        fill: #dcdcdc !important;
    }
        .multiple-select-rule-single-tree .dbq-select-type-dropdown-tree ul.dropdown-menu svg:hover {
            fill: #0088FF !important;
        }

.dbq-select-view-button, .dbq-select-add-button {
    color: #0088FF;
    fill: #0088FF;
    border-color: #3c414c;
    border-width: 2px;
    border-left: 0 !important;
    border-left-width: 0 !important;
    /* background: #1A1E23;<-- should have no background, sometimes its in an input-list */
}
    .dbq-select-view-button:hover, .dbq-select-add-button:hover {
        color: #FFFFFF;
        fill: #FFFFFF;
        border-color: #0088FF;
        border-left: 0;
        background: #0088FF;
    }
    .dbq-select-view-button svg, .dbq-select-add-button svg {
        width: 20px;
        height: 20px;
        fill: #0088FF;
    }
        .dbq-select-view-button:hover svg, .dbq-select-add-button:hover svg {
            fill: #FFFFFF;
        }

/* view/add button next to disabled select */
.form-control:disabled + .input-group-append .dbq-select-view-button,
.form-control:disabled + .input-group-append .dbq-select-add-button {
    border-color: #26292f;
}
    .form-control:disabled + .input-group-append .dbq-select-view-button:hover,
    .form-control:disabled + .input-group-append .dbq-select-add-button:hover {
        border-color: #0088FF;
    }

.dbq-select-view-button {
    background: #1A1E23;
}

/* table insde data-element-type="InputProperty" (mail) */
.modal #document-topics .row[data-element-type="InputProperty"] table
.modal .dbq-form .row[data-element-type="InputProperty"] table {
    border: 2px solid #3c414c !important;
}
.modal #document-topics .row[data-element-type="InputProperty"] .datepicker table,
.modal .dbq-form .row[data-element-type="InputProperty"] .datepicker table {
    border: 0 !important;
}
form[data-view-mode="View"] .modal #document-topics .row[data-element-type="InputProperty"] table,
form[data-view-mode="View"] .modal .dbq-form .row[data-element-type="InputProperty"] table {
    border: 2px solid #26292f !important;
}

/*****************************************
    Multiple Select (Select single)
*****************************************/
.property select.form-control {
    background-color: #FFFFFF !important;
    border: 2px solid #3c414c !important;
}

/* ************************************************************
******************** Tables ********************
************************************************************ */
.ui-iggrid .ui-widget-header, .ui-iggrid th, .ui-iggrid th.ui-state-default {
    background: #1A1E23;
    color: #616161;
}
#classlist .document-class-list-tree tr {
    color: #FFFFFF !important;
}
.ui-iggrid table th {
    background: #0c0c0c;
    color: #616161;
    border-right: 0;
    border-bottom: 1px solid #3c414c !important;
}
    .ui-iggrid table th:last-of-type {
        border: 0 !important;
        border-bottom: 1px solid #3c414c !important;
    }
.ui-iggrid tr {
    background: 0;
    color: #8B8B8B;
}
    .ui-iggrid tr.ui-ig-altrecord {
        background: 0;
        color: #8B8B8B;
    }

    .ui-iggrid tr#classlist .document-class-list-tree tr:hover {
        background: #0088FF;
        color: #FFFFFF;
    }
        .ui-iggrid tr#classlist .document-class-list-tree tr:hover .row-button {
            background: #0088FF;
            color: #FFFFFF !important;
        }

/* Alle border prefill, infragistics voegt over borders toe die voor verschuivingen zorgen.. */
div[data-is-multiselect="true"] .ui-iggrid .ui-iggrid-table > tbody > tr > td {
    border-top: 1px solid #FFFFFF !important;
    border-right: 0 !important;
    border-bottom: 1px solid #F0EFF4 !important;
    border-left: 0 !important;
    background: #FFFFFF !important;
}
    div[data-is-multiselect="true"] .ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-active {
        border-top: 1px solid #292f37 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #292f37 !important;
        border-left: 0 !important;
        background: #292f37 !important;
    }
    div[data-is-multiselect="true"] .ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-hover {
        border-top: 1px solid #0088FF !important;
        border-right: 0 !important;
        border-bottom: 1px solid #0088FF !important;
        border-left: 0 !important;
        background: #0088FF !important;
    }

/*
    active state after click on view-button
*/
.btn-outline-primary:not(:disabled):not(.disabled).active, 
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.show > .btn-outline-primary.dropdown-toggle {
    background: #0088FF !important;
    border: 2px solid #004ad4 !important;
}













/* ###################$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

    NEW OVERRIDES -> need to be structered

###################$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */



/*****************************************
    Multiple select
*****************************************/
/* this is for tags section in Modal (relatiebeheer) */
#document-topics .multiple-select-selectmulti,
.dbq-form .multiple-select-selectmulti {
    border: 2px solid #3c414c;
}
#document-topics .multiple-select-selectmulti svg,
.dbq-form .multiple-select-selectmulti svg {
    fill: #5a5a5a;
}
#document-topics .multiple-select-selectmulti button:hover svg,
.dbq-form .multiple-select-selectmulti button:hover svg {
    fill: #FFFFFF;
}
/*#document-topics div[data-document-property-code="OrganisationUserSecurityObjects"] svg:hover,
.dbq-form div[data-document-property-code="OrganisationUserSecurityObjects"] svg:hover {
    fill: #FFFFFF;
}*/
#document-topics .multiple-select-selectmulti strong,
.dbq-form .multiple-select-selectmulti strong {
    background: #26292f;
    border: 0;
    border-bottom: 2px solid #3c414c;
    color: #FFFFFF;
}
#document-topics .multiple-select-selectmulti > div:first-of-type strong,
.dbq-form .multiple-select-selectmulti > div:first-of-type strong {
    border-right: 2px solid #3c414c;
}
#document-topics .multiple-select-selectmulti > div:last-of-type strong,
.dbq-form .multiple-select-selectmulti > div:last-of-type strong {
    border-left: 2px solid #3c414c;
}
#document-topics .multiple-select-selectmulti option,
.dbq-form .multiple-select-selectmulti option {
    background: #1a1e23;
    color: #FFFFFF;
}
#document-topics .multiple-select-selectmulti select.form-control,
.dbq-form .multiple-select-selectmulti select.form-control {
    border: 0;
}
#document-topics .multiple-select-selectmulti > div:first-of-type select.form-control,
.dbq-form .multiple-select-selectmulti > div:first-of-type select.form-control {
    border-right: 2px solid #3c414c;
}
#document-topics .multiple-select-selectmulti > div:last-of-type select.form-control,
.dbq-form .multiple-select-selectmulti > div:last-of-type select.form-control {
    border-left: 2px solid #3c414c;
}
#document-topics .multiple-select-selectmulti select.form-control option,
.dbq-form .multiple-select-selectmulti select.form-control option {
    background: #1a1e23;
    border-bottom: 2px solid #3c414c;
    color: #FFFFFF;
}
    #document-topics .multiple-select-selectmulti select.form-control option:checked,
    .dbq-form .multiple-select-selectmulti select.form-control option:checked {
        background: #1a1e23;
        color: #FFFFFF;
    }
    #document-topics .multiple-select-selectmulti select.form-control option:hover,
    .dbq-form .multiple-select-selectmulti select.form-control option:hover {
        background: #1a1e23;
        color: #FFFFFF;
    }

form[data-view-mode="View"] #document-topics .btn.dbq-select-view-button,
form[data-view-mode="Delete"] #document-topics .btn.dbq-select-view-button,
form[data-view-mode="View"] .dbq-form .btn.dbq-select-view-button,
form[data-view-mode="Delete"] .dbq-form .btn.dbq-select-view-button {
    background: #26292f;
}
.btn-outline-primary.dbq-select-view-button svg,
.btn-outline-primary.dbq-select-add-button svg {
    fill: #0088FF;
}
form[data-view-mode="View"] #document-topics .topic .dbq-form-group-title p,
.modal form[data-view-mode="View"] #document-topics .row.dbq-form-group-title[data-element-type="Text"] p,
form[data-view-mode="View"] .dbq-form .dbq-form-group-title p,
.modal form[data-view-mode="View"] .dbq-form .row.dbq-form-group-title[data-element-type="Text"] p {
    background: #26292f;
    border: 2px solid #26292f;
}


/* ****************************** 
    UI-Igrid styles
****************************** */
/* 
    General
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item.ui-state-default,
.ui-iggrid-pagedropdowncontainer, .ui-iggrid-pagedropdowncontainer .ui-state-default {
    border: 0 !important;
    background: 0 !important;
    background-color: none !important;
    cursor: pointer;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled,
.ui-iggrid .ui-iggrid-paging .ui-igedit-input {
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-paging .ui-igedit-input {
    color: #FFFFFF !important;
}

/* 
    Normal
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimg,
.ui-iggrid-pagedropdowncontainer .ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default {
    border: 2px solid #3c414c !important;
    background-color: #FFFFFF !important;
    opacity: 1 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimg,
.ui-iggrid-pagedropdowncontainer .ui-state-default .ui-icon:before {
    color: #0088ff !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel {
    color: #0088ff !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled {
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled {
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled {
    border-left: 0 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled {
    border-right: 0 !important;
}
/*
    Disabled
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled {
    /*opacity: .35 !important;*/
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
    color: #FDFDFD !important;
    opacity: 1 !important;
}

/*
    Normal Hover
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging ul.ui-iggrid-pagelist li.ui-iggrid-page.ui-state-default:hover {
    background: #0088ff !important;
    border: 2px solid #004ad4 !important;
}
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-paging ul.ui-iggrid-pagelist li.ui-iggrid-page.ui-state-default:hover a {
        color: #FFFFFF !important;
    }
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimg {

}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimg,
.ui-iggrid-pagedropdowncontainer:hover .ui-state-default {
    background: #0088ff !important;
    border: 2px solid #004ad4 !important;
    color: #FFFFFF !important;
}
    .ui-iggrid-pagedropdowncontainer:hover .ui-state-default .ui-igedit-input,
    .ui-iggrid-pagedropdowncontainer:hover .ui-state-default .ui-icon:before {
        color: #FFFFFF !important;
    }
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabel {
    border-left: 0 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabel {
    border-right: 0 !important;
}
/*
    Disabled hover
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled {
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-paging .ui-igedit-input {
    color: #0088ff !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled {
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpageimgdisabled.ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpageimgdisabled.ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimgdisabled.ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimgdisabled.ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabeldisabled.ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabeldisabled.ui-iggrid-nextpagelabel {
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimgdisabled {
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
    color: #FDFDFD !important;
}

.ui-iggrid-pagedropdowncontainer:hover .ui-igedit-button-common {
    background: 0 !important; /*#0088ff */
    border: 0 !important; /* #0088ff */
}
    .ui-iggrid-pagedropdowncontainer:hover .ui-state-hover.ui-state-default .ui-icon {
        color: #ffffff;
    }
    .ui-iggrid .ui-iggrid-footer .ui-state-default.ui-igedit-button-common {
        border: 0 !important;
    }

/* Different ui-iggrid, next time note where this is for.. */
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #FDFDFD;
}
.ui-igcombo-listitemholder li.ui-state-default, .ui-igedit-dropdown .ui-igedit-listitem.ui-state-default, .ui-igedit-list .ui-igedit-listitem.ui-state-default, .ui-iggrid-columnmoving-dropdown-list li.ui-state-default, .ui-iggrid-featurechooser-list li.ui-state-default, .ui-iggrid-filterddlist li.ui-state-default, .ui-iggrid-hiding-dropdown-list li.ui-state-default {
    color: #FDFDFD;
    background-color: #121416;
    border: 1px solid #3c414c;
}
.ui-igedit-dropdown, .ui-iggrid-featurechooser-dropdown-dialog, .ui-iggrid-filterdd, .ui-widget.ui-widget-content.ui-igpivot-filterdropdown, .ui-widget.ui-widget-content.ui-igpivot-metadatadropdown {
    background: #3c414c;
    border: 1px solid #3c414c;
}
    .ui-igedit-dropdown::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        background: #3c414c;
    }
    .ui-igedit-dropdown::-webkit-scrollbar-thumb {
        background-color: #0088ff;
        border: 2px solid #3c414c;
    }
    .ui-igcombo-listitemholder li.ui-state-active, .ui-igcombo-listitemholder li.ui-state-active a, .ui-igcombo-listitemholder li.ui-state-highlight, .ui-igcombo-listitemholder li.ui-state-highlight a, .ui-igedit-dropdown .ui-igedit-listitem.ui-state-highlight, .ui-igedit-list .ui-igedit-listitem.ui-state-highlight, .ui-iggrid-columnmoving-dropdown-list li.ui-state-active, .ui-iggrid-columnmoving-dropdown-list.ui-state-active a, .ui-iggrid-featurechooser-list li.ui-state-active, .ui-iggrid-featurechooser-list.ui-state-active a, .ui-iggrid-filterddlist li.ui-state-active, .ui-iggrid-filterddlistitem.ui-state-active a, .ui-iggrid-hiding-dropdown-list li.ui-state-active, .ui-iggrid-hiding-dropdown-list.ui-state-active a {
        border: 2px solid #3c414c;
        background-color: #0088ff;
        color: #FFFFFF;
    }
.ui-igedit-listitem.ui-state-hover + .ui-igedit-listitem.ui-igedit-listitemselected {
    border: 2px solid #3c414c;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-default.ui-state-hover {
    background-color: #0088ff; /* This is for pagination DROPDOWN option hover */
    color: #FFFFFF;
    border-top-color: #3c414c; /* Infragistics sets this on transparant.. */
}

.ui-iggrid, .ui-iggrid .ui-iggrid-content, .ui-iggrid .ui-iggrid-headertable, .ui-iggrid .ui-widget-content, .ui-iggrid-scrolldiv table {
    border: 0 !important;
}

/* ****************************** 
    Bulk changes
****************************** */
div[data-is-multiselect="true"] .document-class-list-tree tr[aria-selected="true"] td.ui-state-active {
    background: #3c414c !important;
    background-color: #3c414c !important;
    color: #595F6E !important;
    border-color: #3c414c !important;
}
    div[data-is-multiselect="true"] .document-class-list-tree tr[aria-selected="true"] td.ui-state-active.ui-state-hover {
        background: #0088ff !important;
        background-color: #0088ff !important;
        color: #FFFFFF !important;
        border: 0 !important;
    }

    div[data-is-multiselect="true"] .document-class-list-tree tr[aria-selected="true"] td.ui-state-active svg {
        fill: #FDFDFD !important;
    }
    .document-class-list-tree tr[aria-selected="true"] td.ui-state-active.ui-state-hover svg {
        fill: #ffffff !important;
    }
        .document-class-list-tree tr[aria-selected="true"] td.ui-state-active.ui-state-hover svg:hover {
            fill: #001335 !important;
        }

/* the hover */
.ui-iggrid-pagesizedropdown:hover {
    border-color: #004ad4 !important;
    background-color: #0088ff !important;
    color: #FFFFFF !important;
}

.ui-state-hover span.row-button:hover svg,
.ui-iggrid .ui-iggrid-tablebody td span.row-button:hover svg {
    fill: #001335 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-state-active {
    border: 0 !important;
    background-color: #3c414c !important;
    color: #FFFFFF !important;
}
.ui-iggrid .ui-ig-altrecord td.ui-state-active, .ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-active, .ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-active, .ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcellstop.ui-state-active, .ui-iggrid tbody .ui-iggrid-mergedcell.ui-state-active, .ui-iggrid tbody .ui-iggrid-mergedcellstop.ui-state-active, .ui-iggrid td.ui-state-active, .ui-iggrid th.ui-iggrid-rowselector-class.ui-state-active {
    background: #FFF;
    color: #43464c;
    border-color: #f5f5f5;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item.ui-state-hover {
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-page.ui-iggrid-page-hover {
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border: 2px solid #0088ff !important;
    background-color: #FFFFFF !important;
}
.ui-iggrid .ui-iggrid-footer .ui-state-default a {
    color: #0088ff !important;
}
.ui-iggrid-paging .ui-state-active a:link {
    color: #FDFDFD !important;
}

/*****************************************
    Infragistics override
*****************************************/
.document-class-list-tree tr[aria-selected="true"] td.ui-state-active {
    border-color: #FFF;
}
.ui-iggrid-toolbar .form-control {
    background: #FFF !important;
    background-color: #FFF !important;
    border-color: #3c414c !important;
    color: #FDFDFD !important;
}
    .ui-iggrid-toolbar .form-control:focus {
        color: #FDFDFD;
        background-color: #fff;
        border-color: #0088ff !important;
        outline: 0;
        /*box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);*/
        -webkit-box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        -moz-box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        /*-webkit-box-shadow: 0px 3px 5px rgba(0,24,62,0.1);
        -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.1);
        box-shadow: 0px 3px 5px rgba(0,24,62,0.1);*/
    }
.ui-iggrid-paging-item .ui-state-hover {
    border: 0 !important;
    background: 0 !important;
}
.ui-state-focus, .ui-widget-content .ui-state-focus {
    border: 0 !important;
}
.ui-iggrid .ui-iggrid-toolbar, .ui-iggrid .ui-iggrid-footer {
    background-color: transparent !important;
    border-bottom: 0 !important;
}
.ui-iggrid .ui-iggrid-table > tbody > tr > td:first-child, .ui-iggrid .ui-iggrid-tablebody > tr > td:first-child {
    border-left: 0 !important;
}
.ui-iggrid .ui-iggrid-table>tbody>tr:first-child, .ui-iggrid .ui-iggrid-tablebody>tr:first-child {
    border-top: 1px solid black;
}
.ui-iggrid .ui-iggrid-table>tbody>tr>td:last-child, .ui-iggrid .ui-iggrid-tablebody>tr>td:last-child {
    border-right: 0 !important;
}

.ui-iggrid .ui-iggrid-scrolldiv {
    border-bottom: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}