:root {
    --bg: white;
    --text: black;
    --btnTextColor: white;
    --shadow: #0091ff;
    --ThemeMainColor: #0091ff;
    --divider: #0091ff;
    --borderColor: #0091ff; /*kad se mijenja boja, vidi syncfusion boju od input bordera*/
    --loaderBGcolor: #0091ff;
    --activeSelectorTheme: #0091ff;
    --navigationBarHeaderColor: white;
    --toolbarBorderColor: #616161;
    --toolbarCustomTextColor: gray;
    /*Syncfusion*/
    --eIconColor: #0091ff;
    --syncfsuionMessageInfoColor: #e89b17;
    --syncfusionTextColor: #000;
    --syncfusionGridIconBackgroundColor: #939090;
    --syncfusionGridIconBorderColor: rgba(0,0,0,0);
    --syncfusionGridIconColor: white;
    /*Code mirror editor*/
    --CodeMirrorHintBG: #303030 !important; /*background boja selektiranog elementa u autocomplete*/
    --CodeMirrorHintColor: white !important; /*boja selektiranog elementa u autocomplete*/
    --CodeMirrorHighlightColor: transparent !important; /*boja selektiranog elementa u autocomplete*/
}

.noData {
    color: var(--text) !important;
}

.no-data-available {
    background: url('../../../../images/no-data-available.png') no-repeat center center !important;
    background-size: contain !important;
}

.e-btn.e-flat.e-primary:hover, .e-css.e-btn.e-flat.e-primary:hover {
    background-color: rgba(0,0,0,.0348) !important;
}

.e-query-builder .e-group-body .e-rule-container {
    box-shadow: none !important;
    height: auto;
    margin-top: 0;
    padding-right: 12px;
    border-bottom: 1px dotted #e0e0e0 !important;
}

#multiCustomDivGroups {
    background-color: var(--bg) !important;
}
#headerRepPara {
    color: var(--text) !important;
}

.e-tooltip-wrap.e-popup {
    background-color: #363535 !important;
}

.themeBorder {
    border-color: var(--bg) !important;
}

#tooltipHrStyle {
    border-top: 1px solid var(--bg) !important;
}

.e-tooltip-wrap {
    opacity: 1 !important;
}

.e-contextmenu-wrapper ul .e-menu-item.e-separator{
    margin:0px !important;

}

.e-menu-item .e-separator {
    display: block !important;
}

.e-toast-container .e-toast .e-toast-actions .e-btn {
    color: var(--bg) !important;
}

input[type=checkbox] {
    accent-color: var(--syncfusionGridIconBackgroundColor) !important;
}

#closeModalIcon {
    color: var(--text) !important;
}

#fullScreenIcon {
    color: var(--text) !important;
}

#contextMenuTextId span {
    color: var(--toolbarCustomTextColor) !important;
    cursor: not-allowed;
}

.treeviewRenameColors {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text) !important;
}


.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--syncfusionGridIconBackgroundColor) !important;
    border-color: var(--syncfusionGridIconBorderColor) !important;
    color: var(--syncfusionGridIconColor) !important;
}

.e-radio:checked + label::before {
    border-color: var(--syncfusionGridIconBackgroundColor) !important;
    color: var(--syncfusionGridIconColor) !important;
}

[type="radio"]:checked + label:after, [type="radio"].with-gap:checked + label:after {
    background-color: var(--syncfusionGridIconBackgroundColor) !important;
    border-color: var(--syncfusionGridIconBackgroundColor) !important;
}

.customButtonAddNew {
    background-color: var(--syncfusionGridIconBackgroundColor) !important;
    border-color: var(--syncfusionGridIconBorderColor) !important;
    color: var(--syncfusionGridIconColor) !important;
}

.gridCheckboxChecked {
    position: relative !important;
    left: 0px !important;
    opacity: 1 !important;
    background-color: var(--syncfusionGridIconBackgroundColor) !important;
    border-color: var(--syncfusionGridIconBorderColor) !important;
    color: var(--syncfusionGridIconColor) !important;
    border: 2px solid;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: "e-icons";
    height: 18px;
    line-height: 10px;
    padding: 2px 0;
    text-align: center;
    vertical-align: middle;
    width: 18px;
    accent-color: var(--syncfusionGridIconBackgroundColor) !important;
}

.e-gridpager {
    background-color:var(--bg) !important;
    opacity: 01;
}


.e-message.e-info {
    background-color: var(--syncfsuionMessageInfoColor) !important;
    color: var(--syncfusionTextColor);
}

.e-frame.e-icons.e-stop {
    font-size: 0px !important;
}


.e-label {
    padding-left: 1px !important;
}

.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: var(--text) !important;
    font-size: 14px !important;
}

.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: var(--ThemeMainColor) !important;
    border-color: var(--ThemeMainColor) !important;
    color: var(--bg) !important;
}

.e-treeview .e-list-item.e-hover > .e-fullrow {
    background-color: var(--ThemeMainColor) !important;
    border-color: var(--ThemeMainColor) !important;
    color: var(--bg) !important;
}

    .CodeMirror-hint {
    background-color: var(--CodeMirrorHintBG) !important;
    color: var(--CodeMirrorHintColor) !important;
}

li.CodeMirror-hint-active {
    color: var(--CodeMirrorHintBG) !important;
}

.cm-matchhighlight {
    background: var(--CodeMirrorHighlightColor) !important;
}

.paramItems {
    color: var(--text) !important;
}
/*boja pozadine u aplikaciji*/
    body {
    background-color: var(--bg) !important;
}
/*pozadinska boja menija*/
#leftsidebar {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

    #treeDataFields .e-list-text, #treeDataFields .e-icons, #treeReportObjects .e-list-text, #treeReportObjects .e-icons {
        /*background-color: var(--bg) !important;*/
        color: var(--text) !important;
    }

.label-count {
    background-color: var(--ThemeMainColor) !important;
    color: var(--btnTextColor) !important;
}

.right-sidebar #settings .setting-list li {
    border-top-color: var(--ThemeMainColor) !important;
}

/*poja pozadine navigacijskog hedera*/
.navbar-header, .container-fluid {
    background-color: var(--navigationBarHeaderColor) !important;
}

.nav-tabs > li > a:before {
    border-bottom-color: var(--ThemeMainColor) !important
}
/*pozadinska boja manjeg menija gdje je logo na dnu*/
.legal {
    background-color: var(--bg) !important;
}
/*boja syncfusion ikona*/
.e-icon {
    color: var(--eIconColor) !important;
}

.material-icons {
    color: var(--eIconColor) !important;
}

.e-menu.e-split, .e-menu.e-context.e-split, .e-menu.e-context.e-split .e-list > ul, .e-menu.e-widget.e-split li.e-list {
    background-color: var(--bg) !important;
}
/*class for e-icon */
.eIconStyle {
    color: var(--eIconColor) !important;
    font-size: 18px !important;
}


.e-btn.e-select, .e-btn.e-tbtn.e-select, .e-btn.e-split-btn.e-select {
    background-color: var(--ThemeMainColor) !important;
    color: var(--btnTextColor) !important
}

.sk-cube-grid .sk-cube {
    background-color: var(--ThemeMainColor) !important;
}


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

.theme-blue .sidebar .menu .list li.active {
    background-color: var(--activeSelectorTheme) !important;
}


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

.name {
    color: var(--text) !important;
}

.email {
    color: var(--text) !important;
}


.CodeMirror-hint-active {
    background: #fffdfd !important;
    color: #252b2d !important;
}

#TransakcijskaPretraga, #DBexplorerPretraga {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

.form-control {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

.sidebar .menu .list a span, .sidebar .menu .list a i {
    color: var(--text) !important;
}

#rightsidebar {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}



.divider {
    background-color: var(--divider) !important;
    color: var(--text) !important;
}

.e-toolbar {
    background-color: var(--bg);
    margin-bottom: 10px !important;
}

.nav-tabs li.active a {
    color: var(--text) !important;
}

    .nav-tabs li.active a:hover, .nav-tabs li.active a:active, .nav-tabs li.active a:focus { /*zakomentiran u style.css !important;*/
        background-color: var(--bg) !important;
    }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { /*zakomentiran u style.css !important;*/
    background-color: var(--bg) !important;
}

.dropdown-menu {
    background-color: var(--bg) !important;
    box-shadow: 0 1px 10px var(--shadow) !important;
}

.card .header h2 {
    color: var(--text) !important;
}

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


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

.modal-body {
    color: var(--text) !important;
}

.modal-title {
    color: var(--text) !important;
}

.modal-header {
    border-bottom: 2px solid var(--borderColor) !important;
}

.cssGroupButton {
    padding: 0px 3px !important;
    margin-top: -7px !important;
    margin-bottom: -1px !important;
    background: var(--bg) !important;
    box-shadow: none !important;
    font-size: 17px !important;
    border: 1px solid var(--borderColor) !important
}

.lds-ellipsis div {
    background: var(--loaderBGcolor) !important;
}

.sk-cube-grid .sk-cube {
    background-color: var(--loaderBGcolor) !important;
}

/*userprofile header element*/
.card .header .header-dropdown i:hover {
    color: var(--text) !important;
}


.dropdown-menu > li > a {
    color: var(--text) !important;
    padding: 6px 10px !important;
    line-height: 16px;
}

#menuLista .eIconStyle {
    margin-top: 6px !important;
}

/*Tab css*/
@font-face {
    font-family: 'em-icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.em-icons {
    font-family: 'em-icons';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}


.e-people:before {
    content: '\e7b9';
    font-size: 20px;
}

.e-copy-1:before {
    content: '\e33d';
}

.e-upload-file-list {
    width: 400px;
}

.e-upload-files {
    width: 400px;
}

.e-file-container {
    margin-right: 60px;
}

@media only screen and (min-width:768px) and (max-width:1282px) {
    #userProfileContainer {
        flex-direction: column;
        align-items: center;
        padding-left:0;
        padding-right:10px !important;
    }

    #dropdownProfileContainer {
        width: 90% !important;
        margin-left: 0px !important;
    }

    #uploadfile {
        padding-right: 150px;
    }

    .profile-picture-row {
        margin-right: 30px;
    }

    #droparea {
        padding-left:0;
    }
    .e-upload-files {
        margin-right:50px;
    }
    .e-indicator .e-ignore {
        right: 980px;
    }
}

.e-item .e-toolbar-item .e-active {
    color: green !important;
    border-bottom: 3px solid blue;
}

.e-grid .e-groupdroparea.e-grouped{
    background-color: #c3c3c3 !important;
}
.e-grid .e-groupheadercell:hover {
    background-color: gray !important;
    border-color: gray !important;
}

.e-grid .e-groupheadercell {
    background-color: gray !important;
    border-color: gray !important;
}

.e-grid .e-groupdroparea.e-hover {
    background-color: #c3c3c3 !important;
}

@media only screen and (min-width:1283px) {
    .profile-picture-row {
            margin-right: 35px;
        }

        #dropdownProfileContainer {
            width: 60% !important;
        }

        #basicProfile {
            width: 800px !important;
        }

        .avatarProfile {
            margin-left: 60px;
        }
    }

    @media only screen and (min-width:1580px) {
        #basicProfile {
            width: 100% !important;
        }
    }
    /*End of tab css*/