/*#3F51B5*/
/*Plus icon in datatables*/
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    background: #3F51B5 !important;
    color: white !important;
    border-radius: 2px !important;
    border: none !important;
    top: 0px !important;
    left: -16px !important;
    line-height: 16px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    height: 16px !important;
    width: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-size: 14px !important;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background: #3F51B5 !important;
    color: #fff;
}
.theme_color {
    color: #3F51B5 !important;
}
.theme_background {
    background: #3F51B5 !important;
}

.sw-main > ul.step-anchor.nav-tabs > li.active > a {
    color: #fff !important;
    background: #3F51B5 !important;
}
.sw-main > ul.step-anchor.nav-tabs > li.done > a .number, .sw-main > ul.step-anchor.nav-tabs > li.done > a .number:before {
    background: #3F51B5 !important;
}
.sw-main .sw-toolbar .sw-btn-next, .sw-main .sw-toolbar .sw-btn-next.disabled, .sw-main .sw-toolbar .sw-btn-next.disabled:focus, .sw-main .sw-toolbar .sw-btn-next.disabled:hover {
    color: #fff !important;
    background: #3F51B5 !important;
    border-color: #3F51B5 !important;
}
.btn-success.active, .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .btn-success:hover, .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .open > .dropdown-toggle.btn-success, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover, .show > .btn-success.dropdown-toggle {
    background: #3F51B5 !important;
    border-color: #3F51B5 !important;
}
.checkbox.checkbox-css input:checked + label:before {
    background: #3F51B5;
    border-color: #3F51B5;
}
.radio.radio-css input:checked + label:before {
    background: #3F51B5;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background: #3F51B5;
}
.radio .custom-control-input:checked ~ .custom-control-label::before {
    background: #3F51B5;
}
.radio.radio-css input:checked:disabled + label:before {
    background: #3F51B5;
}
.side-apps-menu > li:hover {
    background-color: #3F51B5 !important;
}

.modal-header {
    background-color: #3F51B5;
}


.text-success {
    color: #3F51B5 !important;
}

a.text-success:hover,
a.text-success:focus {
    color: #3F51B5 !important;
}

.btn.btn-success {
    color: #fff;
    background: #3F51B5;
    border-color: #3F51B5;
}

.bwizard-steps li.active,
.bwizard-steps li.active:hover,
.bwizard-steps li.active:focus {
    background: #3F51B5 !important;
}

.bwizard-steps li small {
    color: #999 !important;
}

.selected {
    background-color: #3F51B5 !important;
    color: white !important;
}

    .selected > a {
        background-color: #3F51B5 !important;
        color: white !important;
    }

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.active,
.open .dropdown-toggle.btn-success {
    background: #25306C;
    border-color: #25306C;
}

.navbar-logo,
.coming-soon .brand .logo,
.login .login-header .brand .logo {
    border-color: #3F51B5 #3F51B5 #3F51B5;
}

.navbar.navbar-inverse .navbar-brand,
.sidebar .nav > li.active > a,
.sidebar .nav > li.active > a:focus,
.sidebar .nav > li.active > a:hover,
.page-sidebar-minified .sidebar .nav > li.has-sub.active:focus > a,
.page-sidebar-minified .sidebar .nav > li.has-sub.active:hover > a,
.page-sidebar-minified .sidebar .nav > li.has-sub.active > a,
.label.label-theme,
.btn.btn-scroll-to-top {
    background: #3F51B5;
}

.navbar.navbar-inverse .navbar-brand {
    color: #fff !important;
}

.text-theme,
.sidebar .sub-menu > li.active > a:before {
    color: #3F51B5;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-header {
        background: #3F51B5;
    }
}


/* Added in v1.5 */

.gradient-enabled .navbar.navbar-inverse .navbar-brand,
.gradient-enabled .sidebar .nav > li.active > a,
.gradient-enabled .sidebar .nav > li.active > a:focus,
.gradient-enabled .sidebar .nav > li.active > a:hover,
.gradient-enabled.page-sidebar-minified .sidebar .nav > li.has-sub.active:focus > a,
.gradient-enabled.page-sidebar-minified .sidebar .nav > li.has-sub.active:hover > a,
.gradient-enabled.page-sidebar-minified .sidebar .nav > li.has-sub.active > a,
.gradient-enabled .label.label-theme,
.gradient-enabled .btn.btn-scroll-to-top {
    background: rgb(103,176,240); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY3YjBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDhmZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(103,176,240,1) 0%, rgba(52,143,226,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,176,240,1)), color-stop(100%,rgba(52,143,226,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(103,176,240,1) 0%,rgba(52,143,226,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(103,176,240,1) 0%,rgba(52,143,226,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(103,176,240,1) 0%,rgba(52,143,226,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(103,176,240,1) 0%,rgba(52,143,226,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b0f0', endColorstr='#3F51B5',GradientType=0 ); /* IE6-8 */
}
/*SMALL PROGRES BAR AND SPINNER*/
.pace-progress {
    background: #3F51B5 !important;
}

.pace .pace-activity {
    border-top-color: #3F51B5 !important;
    border-left-color: #3F51B5 !important;
}
/*MAIN SPINNER*/
.spinner,
.spinner-small {
    border-top: 2px solid #3F51B5 !important;
}


/* Added in v1.7 */

.page-with-light-sidebar .sidebar .nav > li.active > a > i {
    color: #3F51B5;
}

.page-with-light-sidebar .sidebar .nav > li.active > a .badge,
.page-with-light-sidebar .sidebar .nav > li.active > a .label.label-theme {
    background: #3F51B5;
}

.table_title {
    background-color: #25306C;
    color: white;
    font-size: 16px;
}

span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .tt-suggestion:hover, span.twitter-typeahead .tt-suggestion:focus {
    background-color: #3F51B5 !important;
    color: white !important;
}

.h4SearchGrad:hover {
    color: white;
    background: #3F51B5;
}

.h4SearchGrad small:hover {
    color: white;
    background: #3F51B5;
}

.spinnerTable {
    color: #3F51B5;
}

.header.navbar-inverse {
    background: #3F51B5 !important;
}

.background_primary {
    background-color: #3F51B5
}

.btn.btn-primary {
    color: #fff;
    background: #3F51B5;
    border-color: #3F51B5;
}

    .btn.btn-primary, .btn.btn-primary.disabled, .btn.btn-primary.disabled:hover, .btn.btn-primary.disabled:focus, .btn.btn-primary[disabled], .btn.btn-primary[disabled]:hover, .btn.btn-primary[disabled]:focus {
        color: #fff;
        background: #3F51B5;
        border-color: #3F51B5;
    }

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background: #3F51B5 !important;
    border-color: #3F51B5 !important;
    color: #fff;
}

.pagination > li > a {
    border-radius: 4px !important;
}


.bg-purple {
    background-color: #3F51B5 !important;
}

.dataTables_paginate {
    float: right;
    text-align: right;
    margin-right: -12px;
}

.dataTables_filter {
    display: inline !important;
    float: left !important;
}

.dataTables_custom_buttons {
    display: inline !important;
    margin-left: 10px;
}

.datatables_reset_search {
    float: left !important;
    display: inline !important;
}

.sidebar .nav {
    display: block;
    font-weight: 600;
}

.btn.btn-success, .btn.btn-success.disabled, .btn.btn-success.disabled:hover, .btn.btn-success.disabled:focus, .btn.btn-success[disabled], .btn.btn-success[disabled]:hover, .btn.btn-success[disabled]:focus {
    color: #fff;
    background: #3F51B5;
    border-color: #3F51B5;
}

.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td span.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
    background: black !important;
    color: #fff !important;
    text-shadow: black !important;
}

.tt-cursor h4 {
    color: white !important;
}

.parsley-errors-list.filled {
    margin-top: 0px !important;
}

.datetimepicker table tr td.active, .datetimepicker table tr span.active {
    background-image: none !important;
    background: #3F51B5 !important;
    color: #fff !important;
    text-shadow: none !important;
}

.datetimepicker {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

/*LOADING*/
/*
 *  Usage:
 *
      <div class="sk-double-bounce">
        <div class="sk-child sk-double-bounce1"></div>
        <div class="sk-child sk-double-bounce2"></div>
      </div>
 *
 */
.sk-double-bounce {
    width: 140px;
    height: 140px;
    position: relative;
    margin: 140px auto;
}

    .sk-double-bounce .sk-child {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #3F51B5;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
        animation: sk-doubleBounce 2s infinite ease-in-out;
    }

    .sk-double-bounce .sk-double-bounce2 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

@-webkit-keyframes sk-doubleBounce {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-doubleBounce {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/*
 *  Usage:
 *
      <div class="sk-folding-cube">
        <div class="sk-cube1 sk-cube"></div>
        <div class="sk-cube2 sk-cube"></div>
        <div class="sk-cube4 sk-cube"></div>
        <div class="sk-cube3 sk-cube"></div>
      </div>
 *
 */
.sk-folding-cube {
    margin: 100px auto;
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

    .sk-folding-cube .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        .sk-folding-cube .sk-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #3F51B5;
            -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
            animation: sk-foldCubeAngle 2.4s infinite linear both;
            -webkit-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
        }

    .sk-folding-cube .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }

    .sk-folding-cube .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }

    .sk-folding-cube .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }

    .sk-folding-cube .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-folding-cube .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .sk-folding-cube .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

/*Panel tabs color active*/
.nav-tabs.nav-tabs-inverse .nav-item.show .nav-link, .nav-tabs.nav-tabs-inverse .nav-link.active, .nav-tabs.nav-tabs-inverse .nav-link.active:focus, .nav-tabs.nav-tabs-inverse .nav-link.active:hover, .nav-tabs.nav-tabs-inverse > li.active > a, .nav-tabs.nav-tabs-inverse > li.active > a:focus, .nav-tabs.nav-tabs-inverse > li.active > a:hover {
    color: white;
    background: #3F51B5;
}

/*DATATABLE COLOR */
table.dataTable tbody tr.selected_row {
    color: #fff !important;
    background-color: #3F51B5 !important;
}

.table-striped > tbody > tr.selected_row:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background: #3F51B5 !important;
}

.table-striped > tbody > tr.selected_row:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
    background: #3F51B5 !important;
}

/*
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background: #3F51B5 !important;
    color: #fff !important;
}
*/
.table-hover > tbody > tr:hover:not(.selected_row) > td,
.table-hover > tbody > tr:hover:not(.selected_row) > th {
    background: #d9dadb !important;
    color: black !important;
    fill: black !important;
}
.table-hover > tbody > tr .selected_row > td,
.table-hover > tbody > tr .selected_row > th {
    color: #fff !important;
    background-color: #3F51B5 !important;
}
/*Ovo je za tablice koje imaju select row opciju*/
.table-hover-custom > tbody > tr:hover:not(.selected_row) > td,
.table-hover-custom > tbody > tr:hover:not(.selected_row) > th {
    background: #d9dadb !important;
    color: black !important;
    fill: black !important;
}
.table-hover-custom > tbody > tr .selected_row > td,
.table-hover-custom > tbody > tr .selected_row > th {
    color: #fff !important;
    background-color: #3F51B5 !important;
}

.table-hover > tbody > tr:hover > .dataTableActions span:not(.iconActiveGreen):not(.iconActiveRed) {
    color: black !important;
}

table.dataTable tbody tr.selected_row .dataTableActions span:not(.iconActiveGreen):not(.iconActiveRed) {
    color: black !important;
}