#source-code-editor-demo-container {
    padding: 0;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/************************************************ 
    Developertools
*************************************************/
.dbq-developer-tools *:focus {
    outline: none;
}
.dbq-developer-tools button:focus {
    outline: none;
}

.dbq-developer-tools .dbqdt-clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.dbq-developer-tools {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500;
/*    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
    height: 100%;
}

    .dbq-developer-tools .row {
        height: 100%;
    }

.dbqdt-btn-text {
    margin-left: 3px;
}

.source-code-area .alert {
    margin: 10px !important;
    position: absolute;
    z-index: 999; /*1049*/
    right: 0;
    padding: .25rem .50rem !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
    .source-code-area .alert span {
        float: left;
    }
    .source-code-area .alert .validation-error-title {
        width: 90%;
        float: left;
        font-size: 14px;
        font-weight: 900;
    }
    .source-code-area .alert button.validation-error-close {
        padding: 0;
        margin: 0;
        width: 10%;
        float: left;
    }
        .source-code-area .alert button.validation-error-close svg {
            width: 20px;
            height: 20px;
            font-size: 12px;
            font-weight: 900;
            float: right;
        }

/************************************************
* Scrollbars
************************************************/
.dbq-developer-tools ::-webkit-scrollbar, .dbq-developer-tools ::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
}

/************************************************
* Scrollbar - Tool button bar (& search scrollbar)
************************************************/
.dbqdt-tool-buttons::-webkit-scrollbar, .dbq-developer-tools .dbqdt-tool-buttons::-webkit-scrollbar, .dbqdt-search-area::-webkit-scrollbar, .dbq-developer-tools .dbqdt-search-area::-webkit-scrollbar, .dbq-developer-tools .dbqdt-rule-info-compare::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

/************************************************
* Floating labels bootstrap
************************************************/
.dbqdt-form-label-group {
    position: relative;
    margin-bottom: 10px;
}

.dbqdt-form-label-group {
    position: relative;
    margin-bottom: 10px;
}
    .dbqdt-form-label-group input,
    .dbqdt-form-label-group label {
        height: 50px;
        padding: 14px 10px 16px;
        line-height: 20px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }
        .dbqdt-form-label-group input.dbqdt-switch-edit-input, .dbq-developer-tools .modal .dbqdt-form-label-group input.dbqdt-switch-edit-input,
        span.dbqdt-switch-edit-text, .dbq-developer-tools .modal span.dbqdt-switch-edit-text {
            /*float: left;*/
            height: 38px;
        }

    .dbqdt-form-label-group label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0; /* Override default `<label>` margin */
        line-height: 1.5;
        pointer-events: none;
        cursor: text; /* Match the input under the label */
        transition: all .1s ease-in-out;
    }
    .dbqdt-form-label-group input:not(:-moz-placeholder-shown) {
        /*padding-top: 1.25rem;
        padding-bottom: .25rem;*/
        padding-top: 29px;
        padding-bottom: 11px;
    }
    .dbqdt-form-label-group input:not(:-ms-input-placeholder) {
        /*padding-top: 1.25rem;
        padding-bottom: .25rem;*/
        padding-top: 29px;
        padding-bottom: 11px;
    }
    .dbqdt-form-label-group input:not(:placeholder-shown) {
        /*padding-top: 1.25rem;
        padding-bottom: .25rem;*/
        padding-top: 29px;
        padding-bottom: 11px;
    }
    .dbqdt-form-label-group input:not(:-moz-placeholder-shown) ~ label {
        /*padding-top: .25rem;
        padding-bottom: .25rem;*/
        padding-top: 3px;
        padding-bottom: 10px;
        font-size: 12px;
    }
    .dbqdt-form-label-group input:not(:-ms-input-placeholder) ~ label {
        /*padding-top: .25rem;
        padding-bottom: .25rem;*/
        padding-top: 3px;
        padding-bottom: 10px;
        font-size: 12px;
    }
    .dbqdt-form-label-group input:not(:placeholder-shown) ~ label {
        /*padding-top: .25rem;
        padding-bottom: .25rem;*/
        padding-top: 3px;
        padding-bottom: 10px;
        font-size: 12px;
    }

/* switch edit form */
.dbqdt-switch-edit {
    position: relative;
    vertical-align: top;
    width: 218px;
    height: 46px;
    padding: 2px 5px;
    margin: 0;
    cursor: pointer;
    box-sizing: content-box;
}
.dbqdt-switch-edit-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    z-index: 999; /*9999*/
    cursor: pointer;
}
.dbqdt-switch-edit-text {
    position: relative;
    display: block;
    height: inherit;
    font-size: 16px;
    line-height: 12px;
    font-weight: 500;
}
    .dbqdt-switch-edit-text:before, .dbqdt-switch-edit-text:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
        box-sizing: content-box;
    }
    .dbqdt-switch-edit-text:before {
        content: attr(data-off);
        right: 10px;
        color: #fff;
    }
    .dbqdt-switch-edit-text:after {
        content: attr(data-on);
        left: 16px;
        color: #fff;
        opacity: 0;
    }
.dbqdt-switch-edit-input:checked ~ .dbqdt-switch-edit-text {
    background: #202020;
}
    .dbqdt-switch-edit-input:checked ~ .dbqdt-switch-edit-text:before {
        opacity: 0;
    }
    .dbqdt-switch-edit-input:checked ~ .dbqdt-switch-edit-text:after {
        opacity: 1;
    }
.dbqdt-switch-edit-handle {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-align: center;
    padding: 8px 0;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 120px;
    height: 40px;
}
    .dbqdt-switch-edit-handle:before {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background: linear-gradient(to bottom, #eeeeee, #ccc);
        background-image: -webkit-linear-gradient(top, #eeeeee, #ccc);
        border-radius: 6px;
        /*box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);*/
    }
.dbqdt-switch-edit-input:checked ~ .dbqdt-switch-edit-handle {
    left: 93px;
}
.dbqdt-switch-edit-label, .dbqdt-switch-edit-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}


/* Fallback for Edge -------------------------------------------------- */
@supports (-ms-ime-align: auto) {
    .dbqdt-form-label-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

        .dbqdt-form-label-group label {
            position: static;
        }
}

/************************************************
* Windows
************************************************/
.dbq-developer-tools #dbqdt-windows-container {
    height: 100%;
    padding: 5px;
    float: left;
}
.dbqdt-windows-container-big {
    width: calc(100% - 61px);
}
.dbqdt-windows-container-small {
    width: calc(100% - 261px);
}

.dbq-developer-tools .dbqdt-window {
    float: left;
    margin: 5px;
    position: relative;
}

.dbq-developer-tools .dbqdt-window-1n {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.dbq-developer-tools .dbqdt-window-2h {
    width: calc(100% - 10px);
    height: calc(50% - 10px);
}

.dbq-developer-tools .dbqdt-window-2v {
    width: calc(50% - 10px);
    height: calc(100% - 10px);
}

.dbq-developer-tools .dbqdt-window-3v {
    width: calc(100% / 3 - 10px);
    height: calc(100% - 10px);
}

.dbq-developer-tools .dbqdt-window-4n {
    width: calc(50% - 10px);
    height: calc(50% - 10px);
}

.dbq-developer-tools .dbqdt-window-6n {
    width: calc(100% / 3 - 10px);
    height: calc(50% - 10px);
}

.dbq-developer-tools .dbqdt-window span.select-tool-text {
    font-size: 14px;
    font-weight: 500;
    width: 300px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.dbq-developer-tools .ui-resizable-s {
    bottom: 0 !important;
}

/************************************************
* Sidebar
************************************************/
#dbqdt-sidebar-container {
    width: 261px;
    height: 100%;
    padding: 0;
    float: left;
    overflow: auto;
}
#dbqdt-sidebar-container-folded {
    float: left;
    width: 61px;
    height: 100%;
    overflow: auto;
    padding-right: 0;
}
    #dbqdt-sidebar-container-folded svg {
        width: 40px !important;
        height: 40px !important;
        padding: 10px !important;
    }

.dbqdt-sidebar-minimize, .dbqdt-sidebar-maximize {
    text-align: left;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
}
.dbqdt-sidebar-minimize {
    width: 100%;
    padding: 15px 20px;
}
.dbqdt-sidebar-maximize {
    width: 100%;
    position: relative;
    padding: 20px;
    margin: 0;
    width: 60px;
    height: 60px;
}
    .dbqdt-sidebar-minimize svg, .dbqdt-sidebar-maximize svg {
        width: 20px;
        height: 20px;
        margin: 0 15px 0 0 !important;
        padding: 0 !important;
        float: left;
    }
    .dbqdt-sidebar-maximize svg {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .dbqdt-sidebar-minimize span, .dbqdt-sidebar-maximize span {
        margin: 3px 0;
        padding: 0;
        float: left;
    }

/* sidebar accordion */
.dbqdt-sidebar-accordion {
    transition: 0.4s;
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    margin-bottom: 5px;
}

.dbq-developer-tools .accordion-state {
    float: right;
    font-size: 14px;
    line-height: 14px !important;
    font-weight: 500;
    text-align: center;
    width: 20px;
    height: 20px;
    padding: 0;
}
    .dbq-developer-tools .accordion-state svg {
        /*width: 10px;
        height: 10px;*/
        float: left;
        width: 20px;
        height: 20px;
        padding: 3px;
    }
    .dbq-developer-tools button[data-toggle="collapse"] .accordion-state {
        line-height: 24px;
    }
.dbq-developer-tools button[data-toggle="collapse"].collapsed .accordion-state {
    line-height: 19px;
}
.dbq-developer-tools button[data-toggle="collapse"] .accordion-state svg {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display: block;
}
.dbq-developer-tools button[data-toggle="collapse"].collapsed .accordion-state svg {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: block;
}

#accordion-sidebar {
}
    #accordion-sidebar .card:last-of-type {
    }
        #accordion-sidebar .card .card-header button {
            text-decoration: none;
            text-align: left;
        }
            #accordion-sidebar .card .card-header button.collapsed {
                height: 50px;
            }

    #accordion-sidebar .card-header {
        padding: 0;
    }
    #accordion-sidebar .card-header:hover {
        color: red;
    }
    #accordion-sidebar .card-header .btn-link {
        font-weight: 600 !important;
        padding: 14px 20px !important;
    }

    #accordion-sidebar .card-body {
        padding: 0 10px 10px 10px;
    }
#accordion-text-3 .card-body {
    padding: 0;
}

.accordion-title {
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    padding: 3px 0;
    float: left;
}
/* sidebar icons */
#accordion-sidebar .card-body button {
    width: calc(100% / 6) !important; /*40px*/
    height: 40px !important;
    padding: 0;
    float: left;
}
    #accordion-sidebar .card-body button svg {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

#accordion-sidebar .card-body button.window-count-btn svg {
    width: 40px;
    height: 40px;
    padding: 10px;
}

.dbq-developer-tools #accordion-sidebar .card-body table {
    width: 100%;
}
    .dbq-developer-tools #accordion-sidebar .card-body table td svg {
        width: 50px;
        height: 50px;
        padding: 10px;
    }

.dbqdt-rule-info-name {
    font-size: 12px;
    font-weight: 500;
    width: auto;
    padding:0;
}

.dbqdt-rule-info-result {
}
    .dbqdt-rule-info-result input {
        font-size: 16px;
        font-weight: 300;
        text-align: left;
        width: 100%;
    }

/* active tools in sidebar */
.dbqdt-sidebar-active-tools{
    width:100%;
    float:left;
}

.dbqdt-table-active-tools-thead .dbqdt-table-active-tools-cell {
    font-size: 10px;
    font-weight: 500;
    padding: 5px 30px; /*5px 10px*/
}
.dbqdt-table-active-tools-tbody .dbqdt-table-active-tools-row {
    padding: 0 0 0 20px;
    cursor: pointer;
}

.dbqdt-table-active-tools-tbody .dbqdt-table-active-tools-cell {
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
.dbqdt-table-active-tools-tbody .dbqdt-no-tool-selected {
    padding: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
}
.dbqdt-table-active-tools-cell-tool {
    width: calc(100% - 75px);
}
    .dbqdt-table-active-tools-cell-tool:after {
        content: "";
        position: absolute;
        width: 30px;
        height: 50px;
        top: 0;
        right: 0;
    }
/*.dbqdt-table-active-tools-cell-tool input {
    width: 100%;
    padding: 16px 0 15px 15px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    cursor: pointer;
}
*/
/*.dbqdt-table-active-tools-cell-tool span {*/
.dbqdt-table-active-tools-tbody .dbqdt-table-active-tools-cell span.dbqdt-active-tools-text {
    float: left;
    width: 100%;
    padding: 15px 0 15px 15px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dbqdt-table-active-tools-cell-icon {
    width: 50px;
    height: 50px;
    padding:0;
    margin:0;
}
    .dbqdt-table-active-tools-cell-icon svg {
        width: 50px;
        height: 50px;
        padding: 15px;
    }
.dbqdt-table-active-tools-cell-window {
    width: 25px;
    padding: 18px 0 !important;
    text-align: left;
}

/************************************************
* folded sidebar
************************************************/
.dbqdt-sidebar-folded-tools {
    padding: 0;
}
    .dbqdt-sidebar-folded-tools button {
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 10px;
    }
        .dbqdt-sidebar-folded-tools button svg {
            width: 40px;
            height: 40px;
            padding: 10px;
        }
.dbqdt-sidebar-folded-windows {
    padding: 0;
}
    .dbqdt-sidebar-folded-windows button {
        padding: 0;
        margin: 10px;
        width: 40px;
        height: 40px;
    }
        .dbqdt-sidebar-folded-windows button.window-count-btn svg {
            width: 40px;
            height: 40px;
            padding: 10px;
        }
/************************************************
* single tool styling
************************************************/
/* topbar */
.dbqdt-tool-topbar {
    width: 100%;
    float: left;
}
    .dbqdt-tool-topbar .btn-close, .dbqdt-tool-topbar .btn-toggle-view {
        float: left;
        width: 30px;
        height: 30px;
        padding: 0 5px;
        line-height: 1;
    }
        .dbqdt-tool-topbar .btn-close svg,
        .dbqdt-tool-topbar .btn-toggle-view svg,
        .dbq-developer-tools .dbqdt-tool-topbar .btn-close svg {
            width: 20px;
            height: 20px;
            padding: 5px;
        }
.dbqdt-tool-topbar-wrapper {
    width: calc(100% - 30px);
    float: left;
    padding: 0;
}
    .dbqdt-tool-topbar-wrapper input {
        height: 30px;
        float: left;
        font-size: 12px;
        line-height: 20px;
        font-weight: 600;
        padding: 0 10px;
    }
        .dbqdt-tool-topbar-wrapper input.tool-name-100 {
            width: 100%;
        }
        .dbqdt-tool-topbar-wrapper input.tool-name-save {
            width: calc(100% - 60px);
        }
    .dbqdt-tool-topbar-wrapper button {
        width: 50px;
        height: 30px;
        float: left;
        padding: 3px 15px;
        margin: 0;
        text-align: center;
    }
    .dbqdt-tool-topbar-wrapper svg {
        width: 20px;
        height: 20px;
        float: left;
    }

.dbqdt-compare-input-area .dbqdt-tool-topbar {
    float: left;
}

/************************************************
* Rule finder
************************************************/
.dbqdt-rule-finder-container {
    height: 100%;
}

.dbqdt-rule-finder-search input {
    width: calc(100% / 3 - 102px);
}

.dbqdt-tool-buttons select {
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
}
.dbqdt-rule-finder-table {
    width: 100%;
    height: calc(100% - 80px);
    float: left;
    overflow: auto;
}
    .dbqdt-rule-finder-table table {
        margin-bottom: 0;
        /*border-collapse: separate;*/
    }
        .dbqdt-rule-finder-table table tr {
            cursor: pointer;
        }

.dbqdt-tool-buttons .dropdown {
    float: right;
}

td span.rule-timer-count {
    padding: 4px 5px 3px;
    font-weight: 600;
    float: left;
    line-height: 1;
}

.dbqdt-rule-finder-table table th {
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    position: sticky;
    top: 0;
    /*text-transform: uppercase;*/
    text-transform: capitalize;
    padding: 10px !important;
}
            .dbqdt-rule-finder-table table th:first-of-type {
                padding: 10px 10px;
            }
        .dbqdt-rule-finder-table table th svg {
            width: 20px;
            height: 20px;
        }

.dbqdt-rule-finder-table table td {
    font-size: 12px;
    line-height: 23px;
    font-weight: 500;
    padding: 5px 10px !important;
}
        .dbqdt-rule-finder-table table td:first-of-type {
            padding: 5px 10px !important;
        }
            .dbqdt-rule-finder-table table td span.rulePrio, .dbqdt-rule-timer-table-row td span.rulePrio, .dbqdt-row span.rulePrio { /*, .dbqdt-timer-trigger-table-container table td span.rulePrio*/
                padding: 4px 5px 3px;
                border-radius: 3px;
                font-weight: 600;
                float: left;
                line-height: 1;
            }

    .dbqdt-rule-finder-table table td span.ruleState, .dbqdt-row span.ruleState { /*, .dbqdt-timer-trigger-table-container table td span.ruleState*/
        padding: 6px 6px 5px;
        font-weight: 500;
        line-height: 12px;
        float: left;
    }

.dbq-developer-tools .table td, .dbq-developer-tools .table th {
    vertical-align: middle !important;
    white-space: nowrap;
}

/************************************************ 
* Add Rule Modal
************************************************/
.dbq-developer-tools .btn-primary,
.dbq-developer-tools .btn-primary:not(:disabled):not(.disabled).active,
.dbq-developer-tools .btn-primary:not(:disabled):not(.disabled):active,
.dbq-developer-tools .show > .btn-primary.dropdown-toggle {
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    padding: 3px 10px; /*12px 20px*/
}
.dbq-developer-tools .btn-secondary {
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    padding: 12px 20px;
}
.dbq-developer-tools .btn-link {
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    margin: 0;
    padding: 13px 20px;
}
    .dbq-developer-tools .btn-link:hover {
        text-decoration: none;
    }

#add-rule-modal {
}
    #add-rule-modal .modal-body .rule-manager-wrapper {
        width: 50%;
        float: left;
    }
    #add-rule-modal .modal-body .rule-type-wrapper {
        float: left;
        width: calc(50% - 10px) !important;
        margin: 0 0 10px 10px !important;
    }
        /*#add-rule-modal .modal-body .rule-manager-wrapper:first-of-type,
        #add-rule-modal .modal-body .rule-manager-wrapper:first-child,
        #add-rule-modal .modal-body .rule-manager-wrapper:nth-of-type(1) {
            width: calc(50% - 10px) !important;
            margin: 0 10px 10px 0 !important;
        }
        #add-rule-modal .modal-body div.rule-manager-wrapper:last-of-type {
            width: calc(50% - 10px) !important;
            margin: 0 0 10px 10px !important;
        }*/
    #add-rule-modal .rule-manager-wrapper label,
    #add-rule-modal .rule-type-wrapper label,
    .dbqdt-modal-select-wrapper label {
        width: 100%;
        margin-bottom: 0 !important;
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
    }
    .dbqdt-modal-normal-select-wrapper label {
        font-size: 12px;
        font-weight: 500;
        padding: 5px 12px 0px;
        float: left;
    }
.dbq-developer-tools .modal label {
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px !important;
}
.dbq-developer-tools .dbqdt-form-label-group input:not(:placeholder-shown) ~ label {
    font-size: 12px !important;
    font-weight: 500 !important;
}
.dbq-developer-tools .dbqdt-modal-normal-select-wrapper label {
    font-size: 12px !important;
    line-height: 20px !important;
}
.dbq-developer-tools .modal .form-control {
    font-size: 1rem !important;
    font-weight: 500 !important;
    /*height: 50px !important;*/
}

.add-rule-modal .dbqdt-modal-select-wrapper, .edit-rule-modal .dbqdt-modal-select-wrapper,
.add-timer-modal .dbqdt-modal-select-wrapper, .edit-timer-modal .dbqdt-modal-select-wrapper {
    margin: 10px 0;
}

#add-rule-modal .rule-manager-wrapper select,
#add-rule-modal .rule-type-wrapper select,
.dbqdt-modal-select-wrapper select {
    overflow: auto;
    width: 100%;
}
.dbqdt-modal-select-wrapper select {
    padding: 10px !important;
}
    .dbqdt-modal-select-wrapper select#rule-timer-type {
        padding: 0 !important;
    }
.dbqdt-modal-normal-select-wrapper select {
    padding: 0 8px 5px 8px !important;
    /*padding: 0 .75rem .35rem .75rem;*/
    cursor: pointer;
}
    .dbqdt-modal-normal-select-wrapper select:disabled {
        cursor: not-allowed;
    }
#add-rule-modal .rule-manager-wrapper select,
#add-rule-modal .rule-type-wrapper select {
    min-height: 300px;
}
    #add-rule-modal .rule-manager-wrapper select option,
    #add-rule-modal .rule-type-wrapper select option,
    .dbqdt-modal-select-wrapper select option {
        font-size: 12px;
        line-height: 1;
        padding: 5px 10px;
        cursor: pointer;
    }

#add-rule-modal .dbqdt-form-label-group,
.dbq-developer-tools .modal .dbqdt-form-label-group {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 5px;
}
    #add-rule-modal .modal-header,
    #add-rule-modal .modal-body,
    #add-rule-modal .modal-footer,
    .dbq-developer-tools .modal .modal-header,
    .dbq-developer-tools .modal .modal-body,
    .dbq-developer-tools .modal .modal-footer {
        float: left;
        width: 100%;
    }

.dbq-developer-tools .modal-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}
.dbq-developer-tools .modal-body, .dbq-developer-tools .modal-header {
    padding: 20px 30px;
}

/************************************************ 
* Source code container
************************************************/
.dbqdt-source-code-container {
    height: 100%;
}
.dbqdt-pda-area {
    display: none;
    float: left;
    width: 100%;
    height: calc(100% - 80px);
}

/* button bar */
.dbqdt-tool-buttons {
    width: 100%;
    height: 50px; /* met height, komt er nu een scrollbalk over de 10px padding heen.., anders kloppen de hooftes van de andere divs niet meer, enige oplossing is anders met jquery gaan berekenen als het veranderd*/
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    float: left;
    padding: 10px; /*10px 5px 10px 10px*/
    border: 0;
    font-size: 0; /* for the spacing that display:inline-block creates */
    display: flex;
}
    .dbqdt-tool-buttons.dbqdt-tool-buttons-toggle {
        z-index: 999; /*9999*/
        position: absolute;
        top: 30px;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
        .dbqdt-tool-buttons.dbqdt-tool-buttons-toggle button.btn-clear-selection {
            /*float: right; <-- not possible with no-wrap */
            padding: 0;
            margin-left: auto;
        }
            .dbqdt-tool-buttons.dbqdt-tool-buttons-toggle button.btn-clear-selection svg {
                padding: 10px !important;
                width: 30px !important;
                height: 30px !important;
            }
            .dbqdt-tool-buttons.dbqdt-tool-buttons-toggle button.btn-clear-selection span {
                display: none;
                padding: 5px;
                line-height: 20px;
                float: left;
            }

.dbqdt-tool-buttons input, .dbqdt-compare-input-container input {
    height: 26px; /*<-- voor tripple switch*/
    padding: 0; /*<-- voor tripple switch*/
    min-width: 100px;
    display: inline-block;
    margin-right: 5px;
    /*float: left; */
    font-size: 12px;
    font-weight: 600;
}
    .dbqdt-tool-buttons input.dbqdt-tool-search {
        height: 30px;
        padding: 5px 10px;
    }
    .dbqdt-tool-buttons.dbqdt-rule-finder-search input.dbqdt-tool-search:last-of-type {
        /*margin-right: 10px;*/
    }

    .dbqdt-tool-buttons button {
        height: 30px;
        min-width: 30px;
        display: inline-block;
        vertical-align: top; /* IMPORTANT for inline-block*/
        /*float: left;*/
        margin-right: 5px;
        padding: 3px 5px;
        /* needed for buttons inside display:flex */
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }
        .dbqdt-tool-buttons button.btn-add-rule,
        .dbqdt-tool-buttons button.dbqdt-btn-build,
        .dbqdt-tool-buttons button.dbqdt-btn-add-timer {
            padding: 3px;
        }
        .dbqdt-tool-buttons button.btn-clear-selection {
            margin-right: 0;
        }
        .dbqdt-tool-buttons button.dbqdt-toggle-dropdown {
            margin-right: 0;
            padding: 5px 3px !important;
            border-radius: 5px !important;
        }
    .dbqdt-tool-buttons button:hover {
    }
    .dbqdt-tool-buttons button span {
        font-size: 12px;
        font-weight: 600;
        padding: 4px 5px;
        line-height: 12px;
        /*float: left;*/
        display: inline-block;
    }
        .dbqdt-tool-buttons button svg {
            width: 20px;
            height: 20px;
            padding: 3px;
            /*float: left;*/
            display: inline-block;
        }
        .dbqdt-tool-buttons button svg.dbqdt-btn-icon-only {
            padding: 0;
        }
        .dbqdt-tool-buttons button.dbqdt-btn-build svg {
            padding: 2px;
        }


.dbq-developer-tools .dbqdt-tool-buttons label {
    margin: 0 5px 0 0 !important; /*margin: 1px 0 1px 1px !important; <-- this is not good voor sqitch in component browser in cmsv2*/
    font-size: 12px !important;
}
.dbq-developer-tools .dbqdt-tool-buttons .switch-toggle label {
    margin: 1px 0 1px 1px !important;
}
.dbq-developer-tools .dbqdt-component-browser-container .dbqdt-tool-buttons label:last-of-type {
    margin: 0 !important;
}
.dbq-developer-tools .dbqdt-tool-buttons .dbqdt-switch-text {
    height: 26px;
}
.dbq-developer-tools .dbqdt-tool-topbar-wrapper button[data-type="set"] svg {
    padding: 0 !important;
}
/*
* source-code-area
*/
.dbq-developer-tools {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
    .dbq-developer-tools .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .dbq-developer-tools .source-code-area {
        width: 100%;
        height: calc(100% - 80px);
        /*height: auto; met de static height, wordt de container te hoog, door de validate alert, maar auto ofzo werkt niet..*/
        float: left;
    }
        .dbq-developer-tools .source-code-area textarea {
            width: 100%;
            height: 100%;
            min-height: 100%;
            max-height: 100%;
            resize: none;
            float: left;
            padding: 20px;
        }
.source-code-area-2 {
    display: none;
    float: left;
    width: 50%;
    height: calc(100% - 80px);
    border-radius: 0 0 9px 0;
}
.dbqdt-btn-toggle-splitview {
    float: left;
}
    .source-code-area-2 textarea {
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        float: left;
        background: #0b0e13;
        border-left: 1px solid #1b222d;
        border-radius: 0 0 9px 0;
        color: #FFFFFF;
    }

.dbq-developer-tools .CodeMirror {
    width: 100%;
    height: 100%;
    float: left;
    font-size: 14px;
}
.dbq-developer-tools .CodeMirror-scroll {
    /*margin-bottom: 0;
    margin-right: 0;
    padding-bottom: 0;
    overflow: hidden !important;*/
    left: 0
}
.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.dbq-developer-tools .cm-keyword {
    font-weight: 900;
}
.dbq-developer-tools .cm-builtin {
    font-weight: 900;
}

.dbqdt-lda-area {
    display: none;
    width: 100%;
    height: calc(100% - 80px);
    float: left;
}

/* triple state switch */
.switch-toggle {
    position: relative;
    width: auto;
    height: 30px;
    padding: 0 1px 0 0 !important;
    display: inline-block;
    /* float: left; <-- WHITESPACE NOWRAP not working with floating items inside.. */
    margin-right: 5px;
}
    .switch-toggle::after {
        clear: both;
        content: "";
        display: table;
    }
    .switch-toggle input {
        position: absolute;
        left: 0;
    }
    .switch-toggle *, .switch-toggle *:before, .switch-toggle *:after {
        box-sizing: border-box;
    }
        .switch-toggle *, .switch-toggle *:before, .switch-toggle *:after {
            box-sizing: border-box;
        }
    .switch-toggle label:nth-child(2):nth-last-child(6), .switch-toggle label:nth-child(2):nth-last-child(6) ~ label, .switch-toggle label:nth-child(2):nth-last-child(6) ~ a {
        width: auto;
    }
    .switch-toggle span, .switch-toggle input:checked ~ span span:first-child, .switch-toggle label {
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        padding: 4px 0 5px !important;
        line-height: 12px !important;
    }
    .switch-toggle label:not(.disabled) {
        cursor: pointer;
    }
    .switch-toggle input + label {
        position: relative;
        z-index: 2;
        display: inline-block;
        padding: 6px 12px !important;
        margin: 1px 0 1px 1px;
        text-align: center;
        font-size: 12px;
        line-height: 12px !important;
        font-weight: 600;
        float: left;
    }
        .switch-toggle input + label.dbqdt-selected-triple-state {
            padding: 4px 10px !important;
        }
    .switch-toggle label, .switch-toggle > span {
        line-height: 2em;
        vertical-align: middle;
    }
    .switch-toggle *, .switch-toggle *:before, .switch-toggle *:after {
        box-sizing: border-box;
    }
    .switch-toggle label {
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }

/************************************************
* Component browser
************************************************/
.dbqdt-component-info-container {
    width: 100%;
    height: calc(100% - 30px);
    padding: 20px 0;
    margin-bottom: 30px;
    overflow: auto;
    position: relative;
}
    .dbqdt-component-info-container {
        display: none;
    }
.dbqdt-btn-close, .dbqdt-btn-open {
    bottom: 0;
    position: absolute;
    z-index: 999; /*1100*/
}
.dbqdt-component-info-container .input-group {
    width: calc(100% - 40px);
    margin: 0 20px 5px 20px;
    float: left;
}
.dbq-developer-tools .dbqdt-component-info-container .form-control {
    height: 40px;
}
.dbqdt-component-info-container .dbqdt-input-group-wrapper {
    margin: 0 20px;
    float: left;
    width: calc(100% - 40px);
}
    .dbqdt-component-info-container .dbqdt-input-group-wrapper .input-group-50 {
        width: calc(50% - 3px);
        float:left;
        margin:0;
    }
        .dbqdt-component-info-container .dbqdt-input-group-wrapper .input-group-50:first-of-type {
            width: calc(50% - 2px);
            margin-right: 5px;
        }

.dbqdt-tool-container select.dbqdt-select-methods-to-copy {
    width: calc(100% - 115px);
    margin: 0 0 5px 115px;
    float: left;
    z-index: 999; /*9999*/
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 5px 10px;
    cursor: pointer;
}
.dbqdt-tool-container select { /*.dbqdt-select-active-user*/
    border-radius: 5px;
    padding: 3px 7px;
    margin-right: 5px;
}

.dbqdt-component-info-container .input-group-prepend {
    width: 115px;
    text-align: center;
}
.dbqdt-component-info-container .input-group-text {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    padding: 10px;
    font-weight: 500;
    /*text-align: center;
    display: grid;*/
}
.dbqdt-component-info-container .form-control {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding: 10px;
    height: 40px;
}
    .dbqdt-component-info-container .form-control#dbqdt-input-message {
        height: 150px;
    }
    .dbqdt-component-info-container div.form-control {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
.dbq-developer-tools .dbqdt-form-label-group label {
    font-weight: 400 !important;
    /*line-height: 20px !important;*/
}
.dbq-developer-tools .dbqdt-form-label-group input {
    font-weight: 400 !important;
    line-height: 20px !important;
    /*height: 40px !important;*/
}
.dbq-developer-tools .dbqdt-form-label-group input:disabled {
    cursor: not-allowed;
}

/* The placeholder style is not changing when classes are comma separated */
.dbqdt-styled-text-to-copy{
    position: relative;
    z-index: 2;
}
.dbqdt-textarea-message, .dbqdt-textarea-socket {
    position: absolute;
    z-index: 1;
    height: 10px;
    top: 5px;
    right: 0;
}

.dbqdt-component-info-container .dbqdt-info-copy-btn {
    width: 40px;
    padding: 0;
    margin-left: 5px;
    z-index: 2;
}
    .dbqdt-component-info-container .dbqdt-info-copy-btn svg {
        width: 40px;
        height: 40px;
        padding: 10px;
        margin: 0;
    }
.dbq-developer-tools .dbqdt-component-info-container .dbqdt-info-copy-btn svg {
    width: 36px;
    height: 36px;
    padding: 8px;
    margin: 0;
}

.dbqdt-info-toggle {
    position: absolute;
    width: 100%;
    min-height: 30px;
    max-height: calc(100% - 80px);
    height: calc(100% - 30px);
    left: 0;
    bottom: 0;
    z-index: 999;
}
    .dbqdt-compare-container .dbqdt-info-toggle {
        max-height: 100%;
        height: 100%;
    }
    .dbqdt-info-toggle button {
        width: 100%;
        font-size: 12px;
        line-height: 20px;
        font-weight: 600;
        text-align: left;
        padding: 5px 5px 5px 10px;
        float: left;
    }
        .dbqdt-info-toggle button svg {
            width: 20px;
            height: 20px;
            float: right !important;
            /*margin: 0 3px 0 0; <-- dit is iig niet goed voor vierkante buttons (in compare) */
            padding: 2px;
        }
        .dbqdt-info-toggle button span.info-text {
            padding: 0;
            float: left;
        }

    .dbqdt-timer-container {
        height: 100%;
    }
.dbqdt-timer-table-container {
    height: calc(100% - 31px);
}

.dbqdt-info-toggle .dbqdt-timer-table-container h3 {
    float: left;
    width: 100%;
    padding: 10px 10px 0 10px;
}

.dbqdt-timer-content-style {
    padding: 5px 5px 4px;
    line-height: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}
.dbqdt-timer-date {
    margin-right: 5px;
}

.dbqdt-modal-select-wrapper .dbqdt-add-modal-rule-id-select {
    height: 50px;
    padding-top: 20px !important;
    margin-top: -20px;
    background: rgba(0,0,0,0);
}
    .dbqdt-modal-select-wrapper .dbqdt-add-modal-rule-id-select option {
        padding: 10px;
        border: 0;
        background: #000;
        color: #fff;
    }

/************************************************ 
* Switch
************************************************/
    .dbqdt-switch {
        position: relative;
        vertical-align: top;
        height: 26px;
        padding: 0;
        margin: 0;
        cursor: pointer;
        box-sizing: content-box;
        display: inline-block;
        margin-right: 5px;
    }
.dbq-developer-tools .dbqdt-switch {
    height: 30px;
}
/* state switch source code */
.dbqdt-source-code-container .dbqdt-switch-sourcecode {
    width: 155px;
}
    .dbqdt-source-code-container .dbqdt-switch-sourcecode .dbqdt-switch-handle {
        width: 85px;
    }
    .dbqdt-source-code-container .dbqdt-switch-sourcecode .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 69px;
    }
.dbq-developer-tools .dbqdt-source-code-container .dbqdt-switch-sourcecode {
    width: 164px;
}
    .dbq-developer-tools .dbqdt-source-code-container .dbqdt-switch-sourcecode .dbqdt-switch-handle {
        width: 89px;
    }
    .dbq-developer-tools .dbqdt-source-code-container .dbqdt-switch-sourcecode .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 70px;
    }
/* UNIQUE styles each switch */
.dbqdt-switch-web-service {
    width: 145px;
}
    .dbqdt-switch-web-service .dbqdt-switch-handle {
        width: 100px;
    }
    .dbqdt-switch-web-service .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 44px;
    }
    .dbq-developer-tools .dbqdt-switch-web-service .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 40px;
    }
.dbqdt-switch-business-rules {
    width: 145px;
}
    .dbqdt-switch-business-rules .dbqdt-switch-handle {
        width: 100px;
    }
    .dbqdt-switch-business-rules .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 44px;
    }
    .dbq-developer-tools .dbqdt-switch-business-rules .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 40px;
    }
.dbqdt-switch-system-components {
    width: 115px;
}

    .dbqdt-switch-system-components .dbqdt-switch-handle {
        width: 70px;
    }

    .dbqdt-switch-system-components .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 44px;
    }

    .dbq-developer-tools .dbqdt-switch-system-components .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 40px;
    }

.dbqdt-switch-compare {
    width: 160px;
    margin-right: 5px;
}
    .dbqdt-switch-compare .dbqdt-switch-handle {
        width: 80px;
    }
    .dbqdt-switch-compare .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 79px;
    }
.dbq-developer-tools .dbqdt-switch-compare {
    width: 164px;
    margin-right: 5px;
}
    .dbq-developer-tools .dbqdt-switch-compare .dbqdt-switch-handle {
        width: 80px;
    }
    .dbq-developer-tools .dbqdt-switch-compare .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 79px;
    }
.dbqdt-rule-info-compare .dbqdt-switch-compare, .dbq-developer-tools .dbqdt-rule-info-compare .dbqdt-switch-compare {
    /*float: left; not possible for small screens*/
    display: inline-block;
    line-height: 0;
    margin-left: 5px;
    margin-right: 0;
}
    .dbqdt-rule-info-compare .dbqdt-switch-compare input, .dbq-developer-tools .dbqdt-rule-info-compare .dbqdt-switch-compare input {
        height: 26px;
        line-height: 0;
    }
    .dbqdt-rule-info-compare .dbqdt-switch-compare .dbqdt-switch-input:checked ~ .dbqdt-switch-text, .dbq-developer-tools .dbqdt-rule-info-compare .dbqdt-switch-compare .dbqdt-switch-handle .dbqdt-switch-input:checked ~ .dbqdt-switch-text {
        height: 26px;
    }
.dbq-developer-tools .dbqdt-switch-last-event {
    width: 174px;
    margin-right: 5px;
}
    .dbq-developer-tools .dbqdt-switch-last-event .dbqdt-switch-handle {
        width: 120px;
    }
    .dbq-developer-tools .dbqdt-switch-last-event .dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
        left: 49px;
    }
.dbqdt-switch-last-event .dbqdt-switch-text:before,
.dbqdt-switch-last-event .dbqdt-switch-text:after {
    width: 48px;
}
/* END OF - UNIQUE styles each switch */
.dbqdt-switch-input {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: content-box;
    /* toegevoegd voor sourceCode switch, anders was hij niet klikbaar */
    position: absolute;
    width: 100%;
    z-index: 999;
    cursor: pointer;
}
.dbqdt-switch-text {
    position: relative;
    display: block;
    height: inherit;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
    height: 26px;
}
    .dbqdt-switch-text:before, .dbqdt-switch-text:after {
        position: absolute;
        top: 50%;
        margin-top: -6px;
        line-height: 12px;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
        box-sizing: content-box;
    }
    .dbqdt-switch-text:before {
        content: attr(data-off);
        color: #737373;
        /*right: 11px;*/
        right: 0;
        width: 50%;
        text-align: center;
    }
    .dbqdt-switch-text:after {
        content: attr(data-on);
        color: #ccc;
        opacity: 0;
        /*left: 11px;*/
        left: 0;
        width: 50%;
        text-align: center;
    }
.dbqdt-component-browser-container .dbqdt-switch-text:before {
    width: 38px;
}
.dbqdt-component-browser-container .dbqdt-switch-text:after {
    width: 38px;
}
.dbqdt-switch-sourcecode .dbqdt-switch-text:before {
    width: 44%;
}
.dbqdt-switch-sourcecode .dbqdt-switch-text:after {
    width: 44%;
}

.dbqdt-switch-input:checked ~ .dbqdt-switch-text {
    /*background: #292929;*/
}
    .dbqdt-switch-input:checked ~ .dbqdt-switch-text:before {
        opacity: 0;
    }
    .dbqdt-switch-input:checked ~ .dbqdt-switch-text:after {
        opacity: 1;
    }
.dbqdt-switch-handle {
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
    text-align: center;
    padding: 4px 0;
    position: absolute;
    top: 1px;
    left: 1px;
    height: 24px;
}
    .dbqdt-switch-handle:before {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
    }
.dbqdt-switch-input:checked ~ .dbqdt-switch-handle {
    left: 47px;
}
.dbqdt-switch-label, .dbqdt-switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}


/* Search bar */
.dbqdt-search-field {
    width: calc(100% - 430px);
    min-width: 150px;
}

/* Hide the system components switch when the user has no access. */
.dbqdt-component-browser-container[data-has-system-nodes="false"] .dbqdt-switch-system-components {
    display: none;
}

.dbqdt-component-browser-container[data-has-system-nodes="false"] .dbqdt-search-field {
    width: calc(100% - 300px);
}

.dbqdt-search-area button {
    height: 30px;
    padding: 4px 6px 6px;
    font-size: 12px;
    font-weight: 500;
}
    .dbqdt-search-area button svg {
        width: 18px;
        height: 18px;
        margin: 0;
        padding: 0;
    }
/*
*   Component area
*/
.dbqdt-component-area {
    width: 30%;
    height: calc(100% - 110px);
    float: left;
}

.dbqdt-component-section-title {
    float: left;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}
.dbqdt-component-section-body {
    float: left;
    width: 100%;
}
.dbqdt-component-area .dbqdt-component-section-title{
    padding: 10px;
}
.dbqdt-component-area .dbqdt-component-section-body {
    padding: 5px 0;
}
.dbqdt-interface-area .dbqdt-component-section-body {
    /*padding: 5px 0;*/
}
    .dbqdt-interface-area .dbqdt-component-section-body input {
        float: left;
        width: 100%;
        font-size: 10px;
        line-height: 12px;
        font-weight: 500;
        padding: 5px 5px 5px 10px;
        border: 0;
        border-bottom: 1px solid #292929;
        background: #202020;
        color: #fff;
    }
/*.dbq-developer-tools .dbqdt-component-area .dbqdt-component-section-body {
    padding: 10px;
}
.dbq-developer-tools .dbqdt-interface-area .dbqdt-component-section-body {
    padding: 10px;
}*/

.dbqdt-component-browser-container{
    height: 100%;
}
.dbqdt-component-section-body .list-group {
    min-width: 100%;
}
.dbqdt-component-section-body .list-group-item {
    /*padding: 5px 0;*/
    padding: 0;
    margin: 0;
    float: left;
}
.dbqdt-component-section-body .list-group-item span:hover > span.dbqdt-list-icon, .dbqdt-component-section-body .list-group-item span:hover > button, .dbqdt-component-section-body .list-group-item span:hover > div.dbqdt-list-text {
}
    .dbqdt-component-section-body .list-group-item.list-top-level {
        padding: 0; /* 0 5px 0 <-- not with new hover/selected style */
        display: inline-block;
        white-space: nowrap;
    }
    .dbqdt-component-section-body .list-group-item.list-top-level:last-of-type {
        margin-bottom: 0px;
    }
    .dbqdt-component-section-body .list-group-item span.dbqdt-folder, .dbqdt-component-section-body .list-group-item span.dbqdt-file {
        float: left;
        cursor: pointer;
        width: 100%;
        /* float: left; <--- door deze float gaat het over elkaar heen staan. voorbeeld -> PrinterServerMgr -> PrinterServerControl*/
        margin: 0;
        /*height: 20px;*/
        padding: 0; /* 5px 0 <-- not with new hover/selected style */
    }
    .dbqdt-component-section-body .list-group-item span.dbqdt-file {
        white-space: nowrap;
    }
        ul.dbqdt-list-nested:after, .dbqdt-component-section-body .list-group-item span.dbqdt-folder:after {
            content: "";
            display: table;
            clear: both;
        }
    .dbqdt-component-section-body .list-group-item span.dbqdt-file {
        float: left;
        width: 100%;
        /*padding-inline-start: 25px; <-- removed due to new selected/hover state styling */ 
        margin: 0;
    }
ul.dbqdt-list-nested li.list-group-item:first-child {
    clear: both;
    /*padding-top: 10px !important; <-- removed due to new selected/hover state styling */
}
.dbqdt-node-name-text {
    padding: 4px 0;
    display: inline-block;
}

.dbqdt-file.dbqdt-last-clicked {
    padding: 0;
}

.dbqdt-message-table .dbqdt-folder {
    float: left;
    height: 12px;
}
    .dbqdt-folder:after {
        content: "";
        display: table;
        clear: both;
    }
.dbqdt-list-arrow {
    float: left;
}
    .dbqdt-list-arrow:after {
        content: "";
        display: table;
        clear: both;
    }

    .dbqdt-list-arrow svg {
        display: inline-block;
        margin: 0 !important; /*0 5px 0 0 !important*/
        float: left;
        /*padding: 5px 0;
        height: 20px;
        width: 10px;*/
        padding: 5px;
        height: 20px;
        width: 20px;
    }
.dbqdt-list-arrow-space {
    height: 20px;
    width: 20px;
    float: left;
}

.dbqdt-component-area .dbqdt-list-arrow::before, .dbqdt-interface-area .dbqdt-list-arrow::before {
    padding: 0;
    height: 12px;
    width: 12px;
    margin: 7px 7px 7px 0;
}

.dbqdt-list-arrow-active svg {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.dbqdt-list-icon {
    padding: 0;
    margin: 0;
    float: left;
}

.dbqdt-list-group-api .dbqdt-folder .dbqdt-list-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.dbqdt-list-group-api .dbqdt-file .dbqdt-list-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
    .dbqdt-list-group-api .dbqdt-file .dbqdt-list-icon svg,
    .dbqdt-list-group-api .dbqdt-folder .dbqdt-list-icon svg,
    .dbqdt-list-interface .dbqdt-file .dbqdt-list-icon svg,
    .dbqdt-list-interface .dbqdt-folder .dbqdt-list-icon svg {
        vertical-align: unset;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
.dbqdt-list-interface .dbqdt-folder .dbqdt-list-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.dbqdt-list-interface .dbqdt-file .dbqdt-list-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.dbqdt-list-message {
    height: 50%;
    overflow: auto;
}
.dbqdt-message-table {
    width: 100%;
    float: left;
    font-size: 10px;
    font-weight: 500;
    padding: 0;
    display: block;
    overflow: auto;
}
    .dbqdt-message-table .dbqdt-message-table-row {
        display: table-row;
    }

.dbqdt-table-body-properties {
    width: 100%;
    display: block;
    overflow: auto;
}

.dbqdt-message-section-body thead tr th {
    height: 20px;
}

.dbqdt-list-method-info-row {
    cursor: pointer;
}

    .dbqdt-list-method-info-row[data-has-children="true"] .width-node-name {
        padding: 5px 5px 4px 5px !important;
    }

.dbqdt-list-method-info {
    /*display: table; <-- zorgde ervoor dat je niet kan scrollen */
    width: 100%;
    height: 50%;
    margin: 0;
    padding: 0;
    float: left;
    overflow: auto;
    display: block;
}
.dbqdt-message-section-body thead th {
    font-size: 10px;
    line-height: 12px;
    font-weight: 500;
    position: sticky;
    top: 0;
}
    
.dbqdt-list-method-info-thead .dbqdt-list-method-info-row:hover {
    cursor: default;
}
.dbqdt-list-method-info li {
    list-style: none;
}
.dbqdt-list-method-info-td {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 1px;
    line-height: 12px;
}
    .dbqdt-list-method-info-td svg {
        width: 20px;
        height: 20px;
        margin: 0;
    }

.dbqdt-list-item-container {
    padding: 5px 0;
}

/* Tooltip */
.dbqdt-blue-tooltip .tooltip-inner {
    padding: 10px 20px; /*5px 10px 6px*/
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    min-width: 40px;
}
    .dbqdt-blue-tooltip .tooltip-inner .dbqdt-active-tool-title {
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
    }
    .dbqdt-blue-tooltip .tooltip-inner .dbqdt-active-tool-description {
        font-weight: 700;
        font-size: 12px;
        line-height: 20px;
        width: 100%;
        display: inline-block;
        margin-top: 5px;
    }
/* Tooltip on top */
.dbqdt-blue-tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .dbqdt-blue-tooltip.bs-tooltip-top .arrow::before {
    top: 0;
    /*left: 50%;
    margin-left: 4px; <-- arrow not visible in tooltip */
}
.dbqdt-blue-tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .dbqdt-blue-tooltip.bs-tooltip-bottom .arrow::before {
    top: 0;
    /*left: 50%;
    margin-left: 4px;*/
}

.dbqdt-td-svg {
    padding: 2px 20px 2px 5px;
}
.dbqdt-italic {
    font-style:italic;
}
.dbqdt-list-method-info-thead {
    display: table-header-group;
    padding-left:20px;
}
.dbqdt-list-method-info-thead .dbqdt-list-method-info-td, .dbqdt-list-method-info-table .dbqdt-list-method-info-thead .dbqdt-list-method-info-td {
    float: left;
}
    .dbqdt-list-method-info-tbody .dbqdt-list-method-info-td {
        float: left;
    }
.width-node-name{
    width:250px;
}
.width-data-type {
    width: 75px;
}
.width-direction {
    width: 75px;
}
.width-requirement {
    width: 100px;
}

.dbqdt-list-method-info-table {
    display: none;
    width: 100%;
    float: left;
    clear: both;
}
.dbqdt-list-method-info-table-active {
    display: block !important;
}

.dbqdt-list-tab-1{
    padding-left:20px;
    width: 230px;
}

.dbqdt-list-text {
    cursor: pointer;
    padding: 0;
    margin: 0;
    /*float: left; <-- dit verpest wss de styling wanneer windows kleiner worden*/
    font-size: 12px;
    padding: 5px 0 3px;
    float: left;
    width: calc(100% - 80px);
    text-align: left;
    line-height: 12px;
    font-weight: 500;
}

input.dbqdt-list-text {
    padding: 4px 5px;
}

.dbqdt-list-nested {
    display: none;
}
.dbqdt-list-active {
    display: block;
}
ul.dbqdt-list-nested {
    width: 100%;
    /*padding-inline-start: 20px; <-- removed due to new selected/hover state styling*/
    padding: 0;
}

.dbqdt-table-nested {
    display: none !important;
}
.dbqdt-table-active {
    display: block !important;
}
.dbqdt-table-inside-active {
    width: 100%;
    display: contents !important;
}
.dbqdt-table-nested:after {
    content: "";
    display: table;
    clear: both;
}

.dbqdt-table-nested-tbody {
    display: table;
}
.dbqdt-table-nested-row {
    display: table-row;
    height:20px;
}
.dbqdt-table-nested-td {
    display: table-cell;
    padding-left: 20px;
    font-weight: 500;
    font-size: 10px;
}

/************************************************ 
* Interface area
************************************************/
.dbqdt-interface-area {
    width: 30%;
    height: calc(100% - 110px);
    float: left;
}

/************************************************ 
* Component area
************************************************/
.dbqdt-message-area {
    width: 40%;
    height: calc(100% - 110px);
    float: left;
}
.areaHeight {
    height: calc(100% - 411px);
}
.dbqdt-component-area .dbqdt-component-section-body, .dbqdt-interface-area .dbqdt-component-section-body {
    overflow: auto;
}
.dbqdt-component-section-body {
    width: 100%;
    height: calc(100% - 34px);
}
.dbqdt-message-section-body {
    width: 100%;
    height: 100%; /*calc(100% - 10px) <-- why? .dbqdt-message-area .. should be calc */
    position: relative;
    z-index: 1;
}
    .dbqdt-message-section-body[data-has-rule-code=true] {
        height: 100% !important;
    }

    .dbqdt-message-section-body table {
        padding: 0; /*padding: 2px 5px; <-- in CMS klopt dit niet */
        margin-bottom: 0;
        width: 100%;
    }
        .dbqdt-message-section-body table thead {
            z-index: 999; /*1040*/
            position: sticky;
        }
        .dbqdt-message-section-body table thead th {
            padding: 5px 5px 6px 25px;
            white-space: nowrap;
        }
            .dbqdt-message-section-body table thead th:first-of-type {
                padding: 5px 5px 6px 10px;
            }

.dbqdt-list-method-info td {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 25px 4px;
    white-space: nowrap;
}
.dbqdt-property-info-table-body td {
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    padding: 5px 0 5px 30px;
    white-space: nowrap;
}
    .dbqdt-property-info-table-body td input {
        width: 100%;
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
        padding: 0;
    }
.dbqdt-property-info-table-body td.dbqdt-td-icon-default-value {
    padding: 5px 30px 5px !important;
}
    .dbqdt-property-info-table-body td.dbqdt-td-icon-default-value svg {
        width: 20px;
        height: 20px;
        float: left;
    }

/*
.dbqdt-property-info-table-body td {
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    white-space: nowrap;
}
    .dbqdt-property-info-table-body td input {
        font-size: 12px;
        font-weight: 500;
        padding: 9px 30px 8px;
        border: 0;
    }
.dbqdt-property-info-table-body td.dbqdt-td-icon-default-value {
    padding: 0 !important;
}
    .dbqdt-property-info-table-body td.dbqdt-td-icon-default-value input {
        padding: 5px 30px 5px !important;
    }
    .dbqdt-property-info-table-body td.dbqdt-td-icon-default-value svg {
        width: 20px;
        height: 20px;
    }
*/



    .dbqdt-message-node-name, .dbqdt-message-node-value {
        padding: 2px;
        float: left;
        width: 50%;
        line-height: 12px;
        font-size: 12px;
    }

.list-sub-level .dbqdt-message-node-name{
    padding: 3px 20px;
}

.dbqdt-message-property-name, .dbqdt-message-property-value {
    width: 50%;
    line-height: 1;
}
.dbqdt-message-property-value {
    padding-left: 20px;
    height:auto;
}
.dbqdt-table-thead-properties {
    float: left;
    width: 100%;
    font-size: 10px;
    font-weight: 500;
}

.dbqdt-list-property-info {
    float: left;
    width: 100%;
    height: calc(50% - 67px);
    display: block;
    overflow: auto;
}
.dbqdt-methods-title {
    float: left;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}
.dbqdt-properties-title {
    float: left;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}

.dbqdt-message-property-name .dbqdt-folder .dbqdt-list-arrow::before {
    padding: 0 0 3px;
}
.dbqdt-message-property-name .dbqdt-folder {
    line-height: 14px;
    float:left;
}
    .dbqdt-message-property-name .dbqdt-folder:after {
        content: "";
        display: table;
        clear: both;
    }

/************************************************ 
* Compare tool
************************************************/
.dbqdt-compare-container {
    width: 100%;
    height: 100%;
}

.dbqdt-compare-source-code-area-container {
    height: calc(100% - 91px);
}
    .dbqdt-compare-source-code-area-container .CodeMirror-merge {
        width: 100%;
        height: calc(100% - 41px);
        float: left;
        margin-top: -10px;
    }
    .dbqdt-compare-source-code-area-container .CodeMirror-merge-pane {
        float: left;
        height: 100%;
        width: calc(50% - 26px);
        overflow: auto;
    }
    .dbqdt-compare-source-code-area-container .CodeMirror-merge-gap {
        float: left;
        width: 51px;
        height: 100%;
    }
        .dbqdt-compare-source-code-area-container .CodeMirror-merge-gap .CodeMirror-merge-copy {
            position: relative;
            padding: 0;
            text-align: center;
        }
        .dbqdt-compare-source-code-area-container .CodeMirror-merge-gap .CodeMirror-merge-copy-reverse {
        }
        .dbqdt-compare-source-code-area-container .CodeMirror-merge-gap .CodeMirror-merge-scrolllock {
            position: relative;
            left: -50%;
            cursor: pointer;
            line-height: 1;
        }
    .dbqdt-compare-source-code-area-container .CodeMirror {
        width: 100%;
        height: calc(100% - 30px);
        float: left;
    }

.dbqdt-compare-buttons-space-application {
    width: 51px;
    height: 20px;
    float: left;
}
.dbqdt-compare-buttons-space {
    width: 51px;
    height: 50px;
    float: left;
}
    .dbqdt-compare-buttons-space button {
        width: 30px;
        height: 20px;
        padding: 0;
        margin: 10px;
    }
        .dbqdt-compare-buttons-space button svg {
            width: 30px !important;
            height: 20px !important;
            padding: 0 5px !important;
        }

.dbqdt-compare-container .dbqdt-info-toggle {
    height: 30px;
}
.dbqdt-btn-close {
    bottom: 0;
    position: absolute;
}
.dbqdt-selected-rule {
}

.dbqdt-compare-table-container {
    width: 100%;
    /*height: 203px !important; <-- after compare rule */
    height: calc(100% - 111px);
    float: left;
    overflow: auto;
    border-radius: 0 0 0 5px;
}
input.dbqdt-compare-search-application {
    width: calc(100% - 100px);
}

select.dbqdt-compare-select-application, select.dbqdt-select-rule-packages, select.dbqdt-select-comparison {
    width: 225px;
    height: 30px;
    margin-right: 5px;
    /*float: left;*/
    display: inline-block;
    padding: 3px 7px 4px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600 !important;
}

.dbqdt-compare-source-code-area {
    float: left;
    width: calc(50% - 25px);
    height: calc(100% - 303px);
}

.dbqdt-tool-buttons button.dbqdt-btn-full-rule-view{
    /*float: right;*/
    display: inline-block;
    margin-right: 0;
}

/*
    Reload application
*/
.dbqdt-toggle-dropdown {
    display: inline-block;
    padding: 5px 0 !important;
}
    .dbqdt-toggle-dropdown svg {
        padding: 5px 0 !important;
    }
.dbqdt-dropdown-reload-app {
    width: 200px;
    padding: 5px; /*10px 10px 7px 10px*/
    position: absolute;
    top: 84px;
    right: 14px;
}
    .dbqdt-dropdown-reload-app button {
        float: left;
        width: 100%;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        padding: 5px;
        margin: 0; /*0 0 3px 0*/
        border-radius: 8px;
    }
        .dbqdt-dropdown-reload-app button span {
            float: left;
            width: calc(100% - 30px);
            height: 20px;
            padding: 0; /*0 0 0 3px*/
        }
        .dbqdt-dropdown-reload-app button svg{
            float: left;
            width: 20px;
            height: 20px;
            padding: 3px;
            margin-right: 10px !important;
        }

/*.dbqdt-tool-buttons button.dbqdt-dropdown-toggle-more {
    float: right;
    margin-right: 0;
    padding: 5px 0;
}
.dbqdt-tool-buttons button.dbqdt-dropdown-toggle-more svg {
    padding: 1px 0;
}*/
.dbqdt-application-title {
    width: calc(50% - 26px);
    height: 20px;
    float: left;
    padding: 0 10px;
}
    .dbqdt-application-title input.dbqdt-application-title-input {
        float: left;
        font-size: 10px;
        line-height: 10px;
        font-weight: 500;
        padding: 0;
        margin: 0;
        height: 20px;
    }
    .dbqdt-application-title input.dbqdt-application-title-input-code {
        width: 60px;
    }
    .dbqdt-application-title input.dbqdt-application-title-input-name {
        width: calc(100% - 60px);
        padding-left: 10px;
    }

.dbqdt-compare-input-area {
    width: 100%;
    height: 60px;
    display: none; /* changes after rule chosen in compare */
}

.dbqdt-rule-info-compare {
    width: calc(50% - 25px);
    height: 41px;
    padding: 5px 0;
    /*float: left; not possible for small screens*/
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    margin-right: -4px;
    overflow-y: hidden;
    overflow-x: auto;
}
    .dbqdt-rule-info-compare input {
        /*float: left; not possible for small screens*/
        display: inline-block;
        vertical-align: top;
        padding: 1px 3px;
        line-height: 20px;
        font-size: 12px;
        font-weight: 600;
        margin-right: 0;
        padding: 3px 10px;
        margin: 0;
    }
        .dbqdt-rule-info-compare input.dbqdt-input-priority, .dbqdt-rule-info-compare input.dbqdt-input-filter { /*:read-only <-- not working? */
            cursor: not-allowed;
        }
        .dbqdt-rule-info-compare input:first-of-type {
            text-align: center;
            margin: 0; /*0 5px 0 0 <-- not possible with inline-block*/
            padding: 3px 5px;
        }
/*.dbqdt-rule-info-compare button {
        float: left;
        padding: 1px 10px 2px;
        line-height: 12px;
        font-size: 12px;
        font-weight: 500;
        margin-right: 0;
        border: 0;
    }*/
.dbqdt-rule-info-compare input.dbqdt-input-priority {
    width: 20px;
}
        .dbqdt-rule-info-compare input.dbqdt-input-state {
            width: 72px;
            padding: 4px;
        }
        .dbqdt-rule-info-compare input.dbqdt-input-filter {
            min-width: 100px;
            width: calc(100% - 202px);
        }
.dbqdt-rule-info-space {
    width: 51px;
    height: 41px;
    /*float: left;*/
    display: inline-block;
    line-height: 0;
    vertical-align: top;
    margin-right: -4px;
}

.dbqdt-compare-buttons {
    width: calc(50% - 26px);
    height: 40px;
    float: left;
    padding: 10px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}
    .dbqdt-compare-buttons .dbqdt-save-compared-rule-left,
    .dbqdt-compare-buttons .dbqdt-save-compared-rule-right,
    .dbqdt-compare-buttons .dbqdt-copy-left-rule,
    .dbqdt-compare-buttons .dbqdt-copy-right-rule {
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin-right: 5px;
    }
        .dbqdt-compare-buttons .dbqdt-save-compared-rule-left svg,
        .dbqdt-compare-buttons .dbqdt-save-compared-rule-right svg,
        .dbqdt-compare-buttons .dbqdt-copy-left-rule svg,
        .dbqdt-compare-buttons .dbqdt-copy-right-rule svg {
            width: 20px !important;
            height: 20px !important;
            padding: 0 !important;
        }

    .dbqdt-compare-buttons .dbqdt-copy-left-rule {
        float: right;
    }
        .dbqdt-compare-buttons .dbqdt-copy-left-rule:disabled {
            cursor: not-allowed;
        }

.CodeMirror-merge-r-chunk {
}

.dbqdt-info-toggle .dbqdt-compare-buttons button {
    border: 0;
}
/************************************************ 
* Build tool
************************************************/
.dbqdt-build-container {
    height: 100%;
}
    .dbqdt-build-container .dbqdt-tool-buttons {
        position: relative;
        top: 0;
    }
.dbqdt-validated-count, .dbqdt-build-count, .dbqdt-error-count, .dbqdt-ok-count {
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
    padding: 7px 12px;
    height: 30px;
    /* float: left; <-- WHITESPACE NOWRAP not working with floating items inside.. 
    margin-right: 5px;
    */
    display: inline-block;
    margin-right: 5px;
}

.dbqdt-table-container {
    width: 100%;
    float: left;
    overflow: auto;
}
    .dbqdt-table-container.dbqdt-build-table-container {
        height: calc(100% - 111px);
    }
    .dbqdt-table-container table {
        margin-bottom: 0;
    }

        .dbqdt-table-container table tr {
            cursor: pointer;
        }

        .dbqdt-table-container table th {
            font-size: 12px;
            line-height: 12px;
            font-weight: 600;
            padding: 10px !important;
            position: sticky;
            top: 0;
        }

            .dbqdt-table-container table th:first-of-type {
                padding: 10px 10px;
            }

        .dbqdt-table-container table td {
            font-size: 12px;
            line-height: 12px;
            font-weight: 500;
            padding: 6px 10px !important;
            white-space: nowrap;
        }

            .dbqdt-table-container table td:first-of-type {
                padding: 6px 10px !important;
            }

.dbqdt-state {
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    padding: 5px 5px 4px;
    float: left;
}

/************************************************ 
    state styling
************************************************/
/*.dbqdt-build-tooltip .tooltip-inner {
    padding: 10px 12px 11px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    min-width: 40px;
}
.dbqdt-build-tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .dbqdt-build-tooltip.bs-tooltip-right .arrow::before {
    top: 50%;
    left: 0;
    margin-left: 4px;
}
.dbqdt-build-tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .dbqdt-build-tooltip.bs-tooltip-bottom .arrow::before {
    top: 0;
    left: 50%;
    margin-left: 4px;
}*/

.dbqdt-build-container .dbqdt-info-toggle {
    height: 30px;
}
.dbqdt-build-error-info-container {
    display: none;
    width: 100%;
    height: calc(100% - 30px);
}
.area-height-build-table {
    height: 0 !important;
}
.info-error-count {
    padding: 4px 4px 3px 4px;
    float: left;
    margin: 0 5px 0 0;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}

.dbqdt-build-error-info-container {
}
    .dbqdt-build-error-info-container table tr {
        cursor: pointer;
    }
    .dbqdt-build-error-info-container table th {
        font-size: 12px;
        line-height: 12px;
        font-weight: 600;
        padding: 10px 20px;
        position: sticky;
        top: 0;
        min-width: 100px;
    }
        .dbqdt-build-error-info-container table th:first-of-type {
            padding: 10px 10px;
        }
        .dbqdt-build-error-info-container table th:last-of-type {
            width: 100%;
        }
    .dbqdt-build-error-info-container table td {
        font-size: 12px;
        line-height: 12px;
        font-weight: 500;
        padding: 9px 20px !important;
        white-space: nowrap;
    }
        .dbqdt-build-error-info-container table td:first-of-type {
            padding: 5px 10px !important;
        }

.dbqdt-build-error-table {
    margin-bottom: 0;
    overflow: auto;
    height: 100%;
    width: 100%;
    display: block;
}

/************************************************ 
    Locking
************************************************/
.dbq-locked-rule-icon {
    float: left;
    width: 20px;
    height: 20px;
    padding: 0;
}
    .dbq-locked-rule-icon svg {
        float: left;
        width: 20px;
        height: 20px;
    }

/************************************************ 
    Loading view
************************************************/
.dbqdt-loading-view-container {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999; /*999*/
}
.dbqdt-loading-image-container {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/************************************************ 
    Empty query text
************************************************/
.dbqdt-empty-query-container {
    float: left;
    width: 100%;
    height: calc(100% - 121px);
    position: absolute;
}
.dbqdt-empty-query-text {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
    .dbqdt-empty-query-text p {
        width: 200px;
        margin: 0;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

/* ****************************** 
    SourceCode  
****************************** */
.dbqdt-window-disabled {
    pointer-events: none;
    opacity: 0.4;
}

/* ****************************** 
    Date picker  
****************************** */
.bootstrap-datetimepicker-widget table thead tr:first-child th {
    padding: 10px 3px;
}

.datepicker .prev svg, .datepicker .next svg {
    margin: 0 9px !important;
    width: 16px !important;
    height: 16px !important;
}

.bootstrap-datetimepicker-widget table th.picker-switch {
    width: 100% !important;
}

.bootstrap-datetimepicker-widget table th {
    height: 20px;
    line-height: 20px;
    width: 20px !important;
    padding: 10px 0;
    margin: 0;
}

.bootstrap-datetimepicker-widget table td.day {
    padding: 8px;
}
.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
    width: 100px;
}


/* ****************************** 
    Date time picker    
****************************** */
.bootstrap-datetimepicker-widget .datepicker {
    /*padding: 0 5px 0 0 !important; <-- for the datepicker in WSP this isnt working..*/
    padding: 0 !important; /*date-time picker needs this..*/
}
.bootstrap-datetimepicker-widget .timepicker-picker {
    height: 100%;
    width: 100%;
    float: left;
}
    .bootstrap-datetimepicker-widget .timepicker-picker table {
        height: 100%;
    }
        .bootstrap-datetimepicker-widget .timepicker-picker table tr {
            height: 100px;
        }
        .bootstrap-datetimepicker-widget .timepicker-picker table svg {
            margin: 0 !important;
        }

.bootstrap-datetimepicker-widget a[data-action] {
    padding: 10px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    margin: 0 !important;
    padding: 4px !important;
    /*width: auto !important; <-- this isnt working for datetimepicker..*/
}

    .bootstrap-datetimepicker-widget table td span {
        float: left;
        display: inline-block;
        width: calc(25% - 10px);
        height: 54px;
        line-height: 54px;
        margin: 5px;
        padding: 0;
        cursor: pointer;
    }

.bootstrap-datetimepicker-widget .datepicker-decades .decade {
    line-height: 30px !important;
    width: calc(50% - 10px);
    margin: 5px;
    padding: 0;
    height: 30px;
}



/* Trace Tool */
.dbqdt-trace-container {
    height: 100%;
}
.dbqdt-trace-table-container {
    display: none;
    height: 100%;
}
.dbqdt-trace-table {
    width: 100%;
    height: calc(100% - 110px);
    float: left;
    overflow: auto;
    border-radius: 0 0 10px 10px;
}
.dbqdt-trace-container .dbqdt-trace-source-table {
    float: left;
    width: 100%;
    height: calc(50% - 30px);
    overflow: auto;
}
.dbqdt-trace-container .dbqdt-info-toggle .dbqdt-trace-callstack-area {
    float: left;
    width: calc(50% - 1px);
    height: calc(50% - 50px);
    overflow: auto;
    padding: 0 10px 10px 10px;
}
    .dbqdt-trace-container .dbqdt-info-toggle .dbqdt-trace-callstack-area .dbqdt-callstack-line {
        float: left;
        /* float: left; <-- with float:left; the padding will not work */
        width: 100%;
        font-size: 14px;
        /* font-weight: 600; */
        margin-bottom: 5px;
    }
.dbqdt-trace-container .dbqdt-info-toggle .dbqdt-trace-text-area {
    float: left;
    width: 50%;
    height: calc(50% - 50px);
    overflow: auto;
    padding: 0 10px 10px 10px;
}
.dbqdt-trace-container table#dbqdt-trace-table th,
.dbqdt-trace-container table#dbqdt-trace-source-table th {
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    position: sticky;
    top: 0;
    text-transform: capitalize;
}
    .dbqdt-trace-table table tr td {
        font-size: 12px;
        line-height: 23px;
        font-weight: 500;
        padding: 5px 10px !important;
    }

.dbqdt-trace-container .dbqdt-info-toggle {
    position: absolute;
    width: 100%;
    min-height: 30px;
    left: 0;
    bottom: 0;
    z-index: 999;
}
.dbqdt-btn-trace-trigger-view.dbqdt-btn-open {
    display: block;
    height: 30px;
}
.dbqdt-btn-trace-trigger-view.dbqdt-btn-close {
    display: none;
    height: 30px;
}

.dbqdt-trace-container table#dbqdt-trace-table,
.dbqdt-trace-container table#dbqdt-trace-source-table {
    margin: 0;
}
.dbqdt-trace-container table#dbqdt-trace-table tr,
.dbqdt-trace-container table#dbqdt-trace-source-table tr {
}
.dbqdt-trace-container table#dbqdt-trace-source-table thead tr th:first-of-type,
.dbqdt-trace-container table#dbqdt-trace-source-table tbody tr td:first-of-type {
    padding: 5px 10px;
}
    .dbqdt-trace-container table#dbqdt-trace-source-table tbody tr td:last-of-type {
        width: 100%;
    }

.dbqdt-trace-source-table .dbqdt-trace-source-area-title,
.dbqdt-trace-area-title-container .dbqdt-trace-callstack-area-title,
.dbqdt-trace-area-title-container .dbqdt-trace-text-area-title {
    float: left;
    padding: 10px 0 10px 10px;
    font-size: 14px;
    font-weight: 600;
}
    .dbqdt-trace-source-table .dbqdt-trace-source-area-title span,
    .dbqdt-trace-area-title-container .dbqdt-trace-callstack-area-title span,
    .dbqdt-trace-area-title-container .dbqdt-trace-text-area-title span {
        float: left;
        padding: 5px 12px;
        border-radius: 10px;
    }
.dbqdt-trace-source-table .dbqdt-trace-source-area-title {
    width: 100%;
}
.dbqdt-trace-area-title-container {
    float: left;
    width: 100%;
}
    .dbqdt-trace-area-title-container .dbqdt-trace-callstack-area-title {
        width: calc(50% - 1px);
    }
    .dbqdt-trace-area-title-container .dbqdt-trace-text-area-title {
        width: 50%;
    }

.dbqdt-label-table {
    padding: 6px 6px 5px;
    font-weight: 500;
    line-height: 12px;
    float: left;
    border-radius: 5px;
}


/* Source Code Editor (search) */
.dbq-developer-tools .CodeMirror-dialog-top {
    position: absolute;
    top: 0;
    background: #F5F7F9;
    width: 100%;
    padding: 10px 10px 10px 33px;
    z-index: 2;
    border-bottom: 1px solid #F5F7F9;
    font-family: 'Poppins';
}

.dbq-developer-tools .CodeMirror.dialog-opened .CodeMirror-scroll {
    margin-top: 47px;
}
/*
.CodeMirror-dialog {
    padding: 10px;
    line-height: 30px;
}
    .CodeMirror-dialog button {
        font-size: 14px;
        border-radius: 10px;
        padding: 0 10px;
    }*/