// Variables
// --------------------------------------------------

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

/*@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee*/

@bgPrimaryColor: #fff;
@bgLgPrimaryColor: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 5%));
@bgDkPrimaryColor: darken(@bgPrimaryColor, 10%);

@textPrimaryColor: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 90%), darken(@bgPrimaryColor, 90%));
@textSecondaryColor: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 70%), darken(@bgPrimaryColor, 70%));

@brandPrimary: #6CCCCC; // @brandPrimary
@brandLgPrimary: lighten(@brandPrimary, 20%);
@brandDkPrimary: darken(@brandPrimary, 10%);

@brandSecondary: #337ab7; // @brandPrimary
/*@brand-success: #5cb85c; //#1A7BB9
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;*/
/* colors */
@navy: #1ab394; // Primary color*/
@dark-gray: #c2c2c2; // Default color
@blue: #1c84c6; // Success color
@lazur: #23c6c8; // Info color
@yellow: #f8ac59; // Warrning color
@red: #ED5565; // Danger color
@black: #000000;

//--- Overlapping -------------------------------------------------------------------------//

body {
    background-color: @bgPrimaryColor;
    color: @textSecondaryColor;
}

//== Button
@btn-primary-color: contrast(@brandPrimary);
@btn-primary-bg: @brandPrimary;
@btn-primary-border: darken(@btn-primary-bg, 5%);

.btn-primary {
    background-color: @brandPrimary;
    color: @btn-primary-color;
    border-color: @btn-primary-border;
}

.btn-primary:hover,
.btn-primary:focus {
    color: @btn-primary-color;
    background-color: darken(@brandPrimary, 5%);
    border-color: darken(@btn-primary-border, 12%);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus {
    color: @btn-primary-color;
    background-color: darken(@brandPrimary, 5%);
    border-color: darken(@btn-primary-border, 12%);
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    color: @btn-primary-color;
    background-color: darken(@brandPrimary, 10%);
    border-color: darken(@btn-primary-border, 12%);
}

.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary,
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary:focus {
    color: @btn-primary-color;
    background-color: darken(@brandPrimary, 10%);
    border-color: darken(@btn-primary-border, 12%);
}

/*===*/

/*buttons*/
@btn-dk-primary-color: contrast(@brandDkPrimary);
@btn-dk-primary-bg: @brandDkPrimary;
@btn-dk-primary-border: darken(@brandDkPrimary, 5%);

.btn-dk-primary {
    background-color: @btn-dk-primary-bg;
    color: @btn-dk-primary-color;
    border-color: @btn-dk-primary-border;
}

.btn-dk-primary:hover,
.btn-dk-primary:focus {
    color: @btn-dk-primary-color;
    background-color: darken(@btn-dk-primary-bg, 5%);
    border-color: darken(@btn-dk-primary-border, 12%);
}

.btn-dk-primary:active,
.btn-dk-primary.active,
.btn-dk-primary:active:focus {
    color: @btn-dk-primary-color;
    background-color: darken(@btn-dk-primary-bg, 5%);
    border-color: darken(@btn-dk-primary-border, 12%);
}

.btn-dk-primary.disabled,
.btn-dk-primary[disabled],
fieldset[disabled] .btn-dk-primary,
.btn-dk-primary.disabled:hover,
.btn-dk-primary[disabled]:hover,
fieldset[disabled] .btn-dk-primary:hover,
.btn-dk-primary.disabled:focus,
.btn-dk-primary[disabled]:focus,
fieldset[disabled] .btn-dk-primary:focus,
.btn-dk-primary.disabled.focus,
.btn-dk-primary[disabled].focus,
fieldset[disabled] .btn-dk-primary.focus,
.btn-dk-primary.disabled:active,
.btn-dk-primary[disabled]:active,
fieldset[disabled] .btn-dk-primary:active,
.btn-dk-primary.disabled.active,
.btn-dk-primary[disabled].active,
fieldset[disabled] .btn-dk-primary.active {
    color: @btn-dk-primary-color;
    background-color: darken(@btn-dk-primary-bg, 10%);
    border-color: darken(@btn-dk-primary-border, 12%);
}

/*=======*/

/*buttons*/
@btn-lg-primary-color: contrast(@brandLgPrimary);
@btn-lg-primary-bg: @brandLgPrimary;
@btn-lg-primary-border: darken(@brandLgPrimary, 5%);

// Make a button look and behave like a link
.btn-link {
    color: @brandPrimary;
    outline: none;
    text-decoration: none;

    &,
    &:active,
    &.active,
    &[disabled],
    fieldset[disabled] & {
        background-color: transparent;
        outline: none;
    }

    &,
    &:hover,
    &:focus,
    &:active {
        border-color: transparent;
    }

    &:hover,
    &:focus {
        color: @brandDkPrimary;
        background-color: transparent;
        outline: none;
        text-decoration: none;
    }

    &[disabled],
    fieldset[disabled] & {
        &:hover,
        &:focus {
            color: @brandLgPrimary;
            text-decoration: none;
            outline: none;
        }
    }
}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
}

.btn-lg-primary {
    background-color: @btn-lg-primary-bg;
    color: @btn-lg-primary-color;
    border-color: @btn-lg-primary-border;
}

.btn-lg-primary:hover,
.btn-lg-primary:focus {
    color: @btn-lg-primary-color;
    background-color: darken(@btn-lg-primary-bg, 5%);
    border-color: darken(@btn-lg-primary-border, 12%);
}

.btn-lg-primary:active,
.btn-lg-primary.active,
.btn-lg-primary:active:focus {
    color: @btn-lg-primary-color;
    background-color: darken(@btn-lg-primary-bg, 5%);
    border-color: darken(@btn-lg-primary-border, 12%);
}

.btn-lg-primary.disabled,
.btn-lg-primary[disabled],
fieldset[disabled] .btn-lg-primary,
.btn-lg-primary.disabled:hover,
.btn-lg-primary[disabled]:hover,
fieldset[disabled] .btn-lg-primary:hover,
.btn-lg-primary.disabled:focus,
.btn-lg-primary[disabled]:focus,
fieldset[disabled] .btn-lg-primary:focus,
.btn-lg-primary.disabled.focus,
.btn-lg-primary[disabled].focus,
fieldset[disabled] .btn-lg-primary.focus,
.btn-lg-primary.disabled:active,
.btn-lg-primary[disabled]:active,
fieldset[disabled] .btn-lg-primary:active,
.btn-lg-primary.disabled.active,
.btn-lg-primary[disabled].active,
fieldset[disabled] .btn-lg-primary.active {
    color: @btn-lg-primary-color;
    background-color: darken(@btn-lg-primary-bg, 10%);
    border-color: darken(@btn-lg-primary-border, 12%);
}

/*=======*/

@btn-secondary-color: contrast(@brandSecondary);
@btn-secondary-bg: @brandSecondary;
@btn-secondary-border: darken(@btn-secondary-bg, 5%);

.btn-secondary {
    background-color: @brandSecondary;
    color: @btn-secondary-color;
    border-color: @btn-secondary-border;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: @btn-secondary-color;
    background-color: darken(@brandSecondary, 5%);
    border-color: darken(@btn-secondary-border, 12%);
}

.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:active:focus {
    color: @btn-secondary-color;
    background-color: darken(@brandSecondary, 5%);
    border-color: darken(@btn-secondary-border, 12%);
}

.btn-secondary.disabled,
.btn-secondary[disabled],
fieldset[disabled] .btn-secondary,
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover,
fieldset[disabled] .btn-secondary:hover,
.btn-secondary.disabled:focus,
.btn-secondary[disabled]:focus,
fieldset[disabled] .btn-secondary:focus,
.btn-secondary.disabled.focus,
.btn-secondary[disabled].focus,
fieldset[disabled] .btn-secondary.focus,
.btn-secondary.disabled:active,
.btn-secondary[disabled]:active,
fieldset[disabled] .btn-secondary:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled].active,
fieldset[disabled] .btn-secondary.active {
    color: @btn-secondary-color;
    background-color: darken(@brandSecondary, 10%);
    border-color: darken(@btn-secondary-border, 12%);
}

@btn-secondary-color: contrast(@brandSecondary);
@btn-secondary-bg: @brandSecondary;
@btn-secondary-border: darken(@btn-secondary-bg, 5%);

.btn-secondary {
    background-color: @brandSecondary;
    color: @btn-secondary-color;
    border-color: @btn-secondary-border;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: @btn-secondary-color;
    background-color: darken(@brandSecondary, 5%);
    border-color: darken(@btn-secondary-border, 12%);
}

.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:active:focus {
    color: @btn-secondary-color;
    background-color: darken(@brandSecondary, 5%);
    border-color: darken(@btn-secondary-border, 12%);
}

.btn-secondary.disabled,
.btn-secondary[disabled],
fieldset[disabled] .btn-secondary,
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover,
fieldset[disabled] .btn-secondary:hover,
.btn-secondary.disabled:focus,
.btn-secondary[disabled]:focus,
fieldset[disabled] .btn-secondary:focus,
.btn-secondary.disabled.focus,
.btn-secondary[disabled].focus,
fieldset[disabled] .btn-secondary.focus,
.btn-secondary.disabled:active,
.btn-secondary[disabled]:active,
fieldset[disabled] .btn-secondary:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled].active,
fieldset[disabled] .btn-secondary.active {
    color: @btn-secondary-color;
    background-color: darken(@brandSecondary, 10%);
    border-color: darken(@btn-secondary-border, 12%);
}

//== breadcrumb

.breadcrumb-bar {
    -webkit-box-shadow: inset 0px 1px 0px 0px fade(contrast(@bgPrimaryColor), 7.5%);
    -moz-box-shadow: inset 0px 1px 0px 0px fade(contrast(@bgPrimaryColor), 7.5%);
    box-shadow: inset 0px 1px 0px 0px fade(contrast(@bgPrimaryColor), 7.5%);
}

.btn-breadcrumb .btn {
    background-color: @bgPrimaryColor;
    color: @textSecondaryColor;
    margin-left: 0px !important;
    -webkit-box-shadow: inset 0px 1px 0px 0px fade(contrast(@bgPrimaryColor), 7.5%);
    -moz-box-shadow: inset 0px 1px 0px 0px fade(contrast(@bgPrimaryColor), 7.5%);
    box-shadow: inset 0px 1px 0px 0px fade(contrast(@bgPrimaryColor), 7.5%);
}

.btn-breadcrumb .btn:hover {
    background-color: @bgLgPrimaryColor;;
}

.btn-breadcrumb .btn.btn-default:after {
    border-left: 10px solid @bgPrimaryColor;
}

.btn-breadcrumb .btn.btn-default:before {
    border-left: 10px solid fade(contrast(@bgPrimaryColor), 25%);
}

.btn-breadcrumb .btn.btn-default:hover:after {
    border-left: 10px solid @bgLgPrimaryColor;
}

.btn-breadcrumb .btn.btn-default:hover:before {
    border-left: 10px solid fade(contrast(@bgPrimaryColor), 25%);
}

// Default navbar
.navbar-default {
    -webkit-box-shadow: inset 0 1px 0 fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);
    box-shadow: inset 0 1px 0 fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);
}

@nav-gradient-1: contrast(@bgPrimaryColor,
lighten(@bgPrimaryColor, 5.5%),
darken(@bgPrimaryColor, 11.5%));

@nav-gradient-2: contrast(@bgPrimaryColor,
lighten(@bgPrimaryColor, 6.5%),
darken(@bgPrimaryColor, 12.5%));

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
    //background-image: -webkit-linear-gradient(top, @nav-gradient-1 0%, @nav-gradient-2 100%);
    //background-image: -o-linear-gradient(top, @nav-gradient-1 0%, @nav-gradient-2 100%);
    //background-image: -webkit-gradient(linear, left top, left bottom, from(@nav-gradient-1), to(@nav-gradient-2));
    //background-image: linear-gradient(to bottom, @nav-gradient-1 0%, @nav-gradient-2 100%);
    //filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
    //background-repeat: repeat-x;
    background-color: @bgLgPrimaryColor;
    -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
}

// anchor tag

@link-primary-color: @brandPrimary;

.link-primary {
    color: @link-primary-color;
}

.link-primary:hover,
.link-primary:focus {
    color: darken(@link-primary-color, 10%);
}

.link-primary:active,
.link-primary.active,
.link-primary:active:focus {
    color: darken(@link-primary-color, 10%);
}

.link-primary.disabled,
.link-primary[disabled],
fieldset[disabled] .link-primary,
.link-primary.disabled:hover,
.link-primary[disabled]:hover,
fieldset[disabled] .link-primary:hover,
.link-primary.disabled:focus,
.link-primary[disabled]:focus,
fieldset[disabled] .link-primary:focus,
.link-primary.disabled.focus,
.link-primary[disabled].focus,
fieldset[disabled] .link-primary.focus,
.link-primary.disabled:active,
.link-primary[disabled]:active,
fieldset[disabled] .link-primary:active,
.link-primary.disabled.active,
.link-primary[disabled].active,
fieldset[disabled] .link-primary.active {
    color: darken(@link-primary-color, 10%);
}

@link-lg-primary-color: @brandLgPrimary;

.link-lg-primary {
    color: @link-lg-primary-color;
}

.link-lg-primary:hover,
.link-lg-primary:focus {
    color: darken(@link-lg-primary-color, 10%);
}

.link-lg-primary:active,
.link-lg-primary.active,
.link-lg-primary:active:focus {
    color: darken(@link-lg-primary-color, 10%);
}

.link-lg-primary.disabled,
.link-lg-primary[disabled],
fieldset[disabled] .link-lg-primary,
.link-lg-primary.disabled:hover,
.link-lg-primary[disabled]:hover,
fieldset[disabled] .link-lg-primary:hover,
.link-lg-primary.disabled:focus,
.link-lg-primary[disabled]:focus,
fieldset[disabled] .link-lg-primary:focus,
.link-lg-primary.disabled.focus,
.link-lg-primary[disabled].focus,
fieldset[disabled] .link-lg-primary.focus,
.link-lg-primary.disabled:active,
.link-lg-primary[disabled]:active,
fieldset[disabled] .link-lg-primary:active,
.link-lg-primary.disabled.active,
.link-lg-primary[disabled].active,
fieldset[disabled] .link-lg-primary.active {
    color: darken(@link-lg-primary-color, 10%);
}

@link-dk-primary-color: @brandDkPrimary;

.link-dk-primary {
    color: @link-dk-primary-color;
}

.link-dk-primary:hover,
.link-dk-primary:focus {
    color: darken(@link-dk-primary-color, 10%);
}

.link-dk-primary:active,
.link-dk-primary.active,
.link-dk-primary:active:focus {
    color: darken(@link-dk-primary-color, 10%);
}

.link-dk-primary.disabled,
.link-dk-primary[disabled],
fieldset[disabled] .link-dk-primary,
.link-dk-primary.disabled:hover,
.link-dk-primary[disabled]:hover,
fieldset[disabled] .link-dk-primary:hover,
.link-dk-primary.disabled:focus,
.link-dk-primary[disabled]:focus,
fieldset[disabled] .link-dk-primary:focus,
.link-dk-primary.disabled.focus,
.link-dk-primary[disabled].focus,
fieldset[disabled] .link-dk-primary.focus,
.link-dk-primary.disabled:active,
.link-dk-primary[disabled]:active,
fieldset[disabled] .link-dk-primary:active,
.link-dk-primary.disabled.active,
.link-dk-primary[disabled].active,
fieldset[disabled] .link-dk-primary.active {
    color: darken(@link-dk-primary-color, 10%);
}

/*--------------------------------------------START: CUSTOM--------------------------------------------------------*/
.navbar-default {
    background-color: @bgPrimaryColor;

    .navbar-nav > li > a {
        color: @textSecondaryColor;
    }

    .navbar-nav > li.active > a,
    .navbar-nav > .active > a:focus {
        background-color: @bgLgPrimaryColor;
        color: @textPrimaryColor;
    }

    .navbar-nav > .open > a,
    .navbar-nav > .open > a:hover,
    .navbar-nav > .open > a:focus {
        background-color: @bgLgPrimaryColor;
        color: @textPrimaryColor;
    }
}

.top-nav-bar, .top-right-nav-bar {
    .nav > li.active > a {
        background-color: @bgLgPrimaryColor;
    }

    .nav > li.active > a:before, .nav > li:hover > a:before {
        background-color: @brandDkPrimary;
    }

    li > a > span {
        color: @brandPrimary;
    }

    .nav > li > a:focus {
        background-color: inherit;
        color: inherit;
    }

    .nav > li > a:hover,
    .nav > li.active > a:hover {
        background-color: @bgLgPrimaryColor;
        color: @textSecondaryColor;
    }
}

.sidebar {
    /*border-right: solid 1px @bgPrimaryColor;*/
    background-color: @bgPrimaryColor;
}

.side-nav.navbar-default, .workbench-sideNav {
    .nav > li > a {
        color: @textSecondaryColor;
    }

    .nav > li > a:focus,
    .nav > li:focus {
        background-color: inherit;
        color: inherit;
    }

    .nav > li.active {
        background-color: @bgLgPrimaryColor;
    }

    .nav > li > a:hover {
        background-color: @bgLgPrimaryColor;
        color: @textSecondaryColor;
    }

    .nav > li.active > a {
        color: @textPrimaryColor;
    }

    .levelSecondNav {
        background-color: @bgPrimaryColor;
        border: 1px solid darken(@bgPrimaryColor, 5%);
    }
}

.profile-element {
    background-color: @brandPrimary;
    color: @btn-primary-color !important;
}

.logo-element {
    color: @btn-primary-color !important;
    background: @brandPrimary;
}

.logo-element:hover {
    color: @btn-primary-color !important;
    background-color: darken(@brandPrimary, 5%) !important;
    border-color: darken(@btn-primary-border, 12%);
}

.profile-element:hover {
    color: @btn-primary-color !important;
    background-color: darken(@brandPrimary, 5%) !important;
    border-color: darken(@btn-primary-border, 12%);
}

.nav > li.active {
    border-left: 4px solid darken(@brandDkPrimary, 2%);
}

.workbench-sideNav {
    .nav > li.active {
        border-left: none !important;
        border-right: 4px solid darken(@brandDkPrimary, 2%);
    }
}

//== label
.label {
    border-radius: 0;
}

//== table

// Baseline styles

.table {
    margin-bottom: 15px;

    // Cells
    > thead,
    > tbody,
    > tfoot {
        > tr {
            > th,
            > td {
                border-top: 1px solid @bgDkPrimaryColor;
                padding: 8px 0;
            }
        }
    }

    // Bottom align for column headings
    > thead > tr > th {
        border-bottom: none;
    }

    > tbody {
        border-top: 1px solid @bgDkPrimaryColor;
    }

    // Remove top border from thead by default
    > caption + thead,
    > colgroup + thead,
    > thead:first-child {
        > tr:first-child {
            > th,
            > td {
                border-top: 0;
            }
        }
    }

    // Account for multiple tbody instances
    > tbody + tbody {
        border-top: 2px solid @bgDkPrimaryColor;
    }

}

.table-striped {
    > tbody > tr:nth-of-type(odd) {
        background-color: @bgLgPrimaryColor;

        .md-input {
            label {
                background: linear-gradient(to bottom, @bgLgPrimaryColor 50%, @bgPrimaryColor 50%) !important;
            }
        }
    }

    > tbody > tr:hover {
        background-color: @bgDkPrimaryColor;

        .md-input {
            label {
                background: linear-gradient(to bottom, @bgDkPrimaryColor 50%, @bgPrimaryColor 50%) !important;
            }
        }
    }
}

//== pagination
.pagination > li > a, .pagination > li > span {
    margin: 0px 2px;
    border-radius: 0px !important;
    padding: 4px;
    min-width: 32px;
    background-color: @bgLgPrimaryColor;
    color: @textSecondaryColor;
    border-color: @bgLgPrimaryColor;
}

.pagination > li > a:hover, .pagination > li > span:hover {
    background-color: @bgDkPrimaryColor;
    color: @textSecondaryColor;
    border-color: @bgDkPrimaryColor;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    //color: #fff;
    //background-color: #337ab7;
    //border-color: #337ab7;
    cursor: default;
    background-color: @brandPrimary;
    color: @btn-primary-color;
    border-color: @btn-primary-border;
}

.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus,
.pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    background-color: @bgDkPrimaryColor;
    color: lighter(@textSecondaryColor);
    border-color: @bgDkPrimaryColor;
    opacity: 0.5;
}

//=== dropdown-menu
// The dropdown menu (ul)
.dropdown-menu {
    background-color: @bgPrimaryColor;
    border: 1px solid @bgLgPrimaryColor; // IE8 fallback
    -webkit-box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);
    box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);

    .divider {
        background-color: @bgLgPrimaryColor;
    }

    // Links within the dropdown menu
    > li > a {
        color: @textSecondaryColor;
    }
}

// Hover/Focus state
.dropdown-menu > li > a {
    &:hover,
    &:focus {
        text-decoration: none;
        color: @textPrimaryColor;
        background-color: @bgLgPrimaryColor;

        .expandCollapseIcon {
            svg {
                fill: @textPrimaryColor;
            }
        }
    }
}

// Active state
.dropdown-menu > .active > a {
    &,
    &:hover,
    &:focus {
        text-decoration: none;
        outline: 0;
    }
}

//=== layout
.page-content {
    background-color: @bgLgPrimaryColor;
}

.content-box {
    background-color: @bgPrimaryColor;

    .content-box-footer {
        border-top: solid thin @bgLgPrimaryColor;
    }

    .content-container {

        .container-with-footer {

            .content-main {

            }

            .content-footer {
                border-top: solid thin @bgLgPrimaryColor;
            }
        }
    }
}

.circular-loader1 {
    border-top: 5px solid @brandPrimary !important;
    border-bottom: 5px solid @brandPrimary !important;
}

.circular-loader2 {
    border-right: 5px solid lighten(@brandPrimary, 20%) !important;
    border-left: 5px solid lighten(@brandPrimary, 20%) !important;
}

.miniSpinner {
    .circular-loader1 {
        border-top: 3px solid @brandPrimary !important;
        border-bottom: 3px solid @brandPrimary !important;
    }

    .circular-loader2 {
        border-right: 3px solid lighten(@brandPrimary, 20%) !important;
        border-left: 3px solid lighten(@brandPrimary, 20%) !important;
    }
}

.microSpinner, .microSpinnerXS {
    .circular-loader1 {
        border-top: 2px solid @brandPrimary !important;
        border-bottom: 2px solid @brandPrimary !important;
    }

    .circular-loader2 {
        border-right: 2px solid lighten(@brandPrimary, 20%) !important;
        border-left: 2px solid lighten(@brandPrimary, 20%) !important;
    }
}

.loaderText {
    color: @textPrimaryColor;
}

.breadcrumbFooterIcons:hover {
    color: @brandDkPrimary;
}

.btn-breadcrumb .btn.noElement:after,
.btn-breadcrumb .btn.noElement:before {
    border-color: transparent !important;
}

//== .form-control

#landingPageContent {
    .form-control, .input-group-addon {
        background-color: @bgPrimaryColor;
        color: @textPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .input-group-addon {
        background-color: @bgLgPrimaryColor;
    }

    .form-control:focus {
        border-color: @brandPrimary;
        box-shadow: none;
    }
}

.form-control {
    background-color: @bgLgPrimaryColor;
    color: @textPrimaryColor;
    border-color: @bgPrimaryColor;
}

.form-control:focus {
    border-color: @brandPrimary;
    box-shadow: none;
}

.md-input .md-form-control {
    background: @bgPrimaryColor;
    border-bottom: 2px solid @textSecondaryColor;
}

.search-panel {
    border-bottom: 2px solid @textSecondaryColor !important;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px @bgPrimaryColor inset !important;
    -webkit-text-fill-color: @textSecondaryColor !important;
}

input:focus:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px @bgPrimaryColor inset !important;
    -webkit-text-fill-color: @textSecondaryColor !important;
}

//== Material Input
.md-input .md-form-control:focus ~ label, .md-input .md-form-control:valid ~ label {
    color: darken(@brandPrimary, 5%);
}

.md-input .bar:before, .md-input .bar:after, .search-panel.active .bar:before, .md-input .bar:after {
    background: @brandPrimary;
}

.md-input .md-input-icon {
    color: @brandPrimary;
}

.md-input label {
    color: @textSecondaryColor;
}

.floatingLabelInput {
    .ngQueryBuilder-ConditionBuilder {
        color: @brandPrimary;
        background: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .conditionSelector {
        color: @brandPrimary;
    }

    .md-input label {
        font-size: 12px !important;
        text-transform: uppercase;
    }

    .observe-focusSwitch {
        color: darken(@brandPrimary, 5%);
        top: -7px;
        z-index: 1;
        opacity: 1 !important;
        background-color: @bgPrimaryColor;
    }

    .observe-newInputTopic-border {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .md-input .md-form-control:focus ~ .observe-newInputTopic-border {
        border-color: @brandPrimary;
    }

    .ngQueryBuilderTypeInfo {
        background: @bgPrimaryColor;
        border: 1.5px solid @bgLgPrimaryColor;
        padding: 3px 12px 3px 12px;
        border-left: 0px;
    }

    .ngQueryBuilderInputBorder {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .connectFieldRightArrowBorder {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .ngQueryBuilderInputBorder-part {
        border-color: @bgLgPrimaryColor;
    }

    .supplementalInputBorder-part {
        border-color: @bgLgPrimaryColor;
    }

    .ngQueryBuilderInputBorderLeft {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .connectFieldLeftArrowBorder {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .supplementalInputBorder {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .supplementalInputBorderLeft {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .observe-focusSwitch {
        color: darken(@brandPrimary, 5%);
        top: -7px;
        z-index: 1;
        opacity: 1 !important;
        background-color: @bgPrimaryColor;
    }

    .observe-newInputTopic-border {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }

    .md-input .md-form-control:focus ~ .observe-newInputTopic-border {
        border-color: @brandPrimary;
    }

    .md-input .md-form-control:focus .uniqueQueryBuilderInputBorder {
        border-color: @brandPrimary !important;
    }

    .md-input .md-form-control:focus ~ .ngQueryBuilderInputBorder, .ngQueryBuilderInputBorderLeft {
        border-color: @brandPrimary;
    }

    .md-input .md-form-control:focus ~ .connectFieldRightArrowBorder {
        border-color: @brandPrimary;
    }

    .md-input .md-form-control:focus ~ .connectFieldLeftArrowBorder {
        border-color: @brandPrimary;
    }

    .md-input .md-form-control:focus ~ .supplementalInputBorder, .supplementalInputBorderLeft {
        border-color: @brandPrimary;
    }

    .md-input .md-form-control:focus {
        border-color: @brandPrimary;
        outline: none;
    }

    ::placeholder {
        font-style: italic;
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        font-style: italic;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        font-style: italic;
    }

    .md-input .md-form-control:focus::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
    }

    .md-input .md-form-control:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: transparent;
    }

    .md-input .md-form-control:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: transparent;
    }

    .md-input .md-form-control:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: transparent;
    }

    .md-input .md-form-control {
        background: @bgPrimaryColor;
        border: 1.5px solid @bgLgPrimaryColor;
        padding: 10px 10px 10px 20px;
    }

    .md-input .md-form-control:focus ~ label, .md-input .md-form-control:valid ~ label, .activeLabel {
        color: darken(@brandPrimary, 5%);
        top: -7px;
        z-index: 1;
        opacity: 1.0 !important;
        background-color: @bgPrimaryColor;
    }

    .md-input .md-form-control ~ label, .md-input .md-form-control ~ label {
        margin-left: 13px;
        padding: 0 3px;
        opacity: 0;
        transition: top 0.4s, opacity 0.4s;
        -moz-transition: top 0.4s, opacity 0.4s;
        -webkit-transition: top 0.4s, opacity 0.4s;
    }

    .helper-text-error {
        position: absolute;
        margin-top: 2px;
        -webkit-transition: all linear 0.5s;
        transition: all linear 0.5s;
    }

    .helper-text-error.ng-hide {
        -webkit-transition: all linear 0.2s;
        transition: all linear 0.2s;
        opacity: 0;
    }

    .helper-text-error {
        width: 100%;
        background-color: transparent;
        margin-top: 5px;

        .errorText {
            display: block;
            padding: 4px;
            color: @textSecondaryColor;
        }
    }
}

//== Modal
.modal-header, .modal-footer {
    border-color: @bgLgPrimaryColor;
}

.modal-footer-border-thin-solid {
    border-top: solid thin @bgLgPrimaryColor !important;
}

.modal-body, .modal-header, .modal-footer, .modal-content {
    background-color: @bgPrimaryColor;
}

.svgFill path {
    fill: @textPrimaryColor !important;
}

/*User Profiles Toggle Switch*/
.switch.checked {
    background: @brandPrimary;
    border-color: darken(@brandPrimary, 10%);
}

.switch {
    background: @bgPrimaryColor;
    border: 1px solid @textSecondaryColor;
}

.switch small {
    background: @textSecondaryColor;
}

.switch .off {
    color: @textSecondaryColor;
}

.switch .on {
    color: contrast(@brandPrimary);
}

.ui-tabs-scrollable > .spacer > div:first-child > .nav-tabs > li > a {
    color: @textSecondaryColor;
}

.ui-tabs-scrollable > .spacer > div:first-child > .nav-tabs > li.active > a,
.ui-tabs-scrollable > .spacer > div:first-child > .nav-tabs > li > a:hover {
    background-color: @bgLgPrimaryColor;
    -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
    border-top: solid 4px @brandDkPrimary;
    color: @textPrimaryColor;
}

.ui-tabs-scrollable > .nav-button,
.ui-tabs-scrollable > .dropdown > .dropdown-toggle {
    color: @brandPrimary;
}

.ui-tabs-scrollable > .nav-button,
.ui-tabs-scrollable > .dropdown > .dropdown-toggle {
    background-color: @bgPrimaryColor;
    border: solid thin @bgLgPrimaryColor;
}

.ui-tabs-scrollable > .dropdown > .dropdown-toggle:hover,
.ui-tabs-scrollable > .nav-button:hover {
    background-color: @bgDkPrimaryColor;
    border: solid thin @bgPrimaryColor;
}

.ui-tabs-scrollable > .spacer > div:first-child > .tab-content {
    border-top: 1px solid @bgLgPrimaryColor;
}

/*User Profiles Toggle Switch*/
/*--------------------------------------------START: AUTO COMPLETE---------------------------------------------------*/
div.auto-complete-container {
    border: 1px solid @bgLgPrimaryColor; // IE8 fallback
    -webkit-box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);
    box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);
    background-color: @bgPrimaryColor;
}

div.auto-complete-container ul.auto-complete-results li.auto-complete-item {
    background-color: @bgPrimaryColor;
}

div.auto-complete-container ul.auto-complete-results li.auto-complete-item:hover,
div.auto-complete-container ul.auto-complete-results li.auto-complete-item-selected {
    color: @textPrimaryColor;
    background-color: @bgLgPrimaryColor;
}

/*--------------------------------------------END: AUTO COMPLETE---------------------------------------------------*/

//== accordion

.panel-group .panel {
    background-color: @bgLgPrimaryColor;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body,
.panel-default {
    border-color: @bgLgPrimaryColor;
    box-shadow: none !important;
}

.panel-default > .panel-heading {
    background-color: @bgLgPrimaryColor;
    color: @textSecondaryColor;
    border-color: @bgLgPrimaryColor !important;
    border-radius: unset !important;
}

.panel-default > .panel-body {
    background-color: @bgPrimaryColor !important;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

//== check-box
.check-box {
    margin: 0px;
    border: 1px solid @textSecondaryColor;
}

input[type=checkbox]:checked + .check-box, input[type=radio]:checked + .check-box, .check-box.checked {
    border-color: @brandDkPrimary;
}

.check-box::before, .check-box::after {
    background-color: @brandPrimary;
}

//=== color classes
.navy-bg {
    background-color: @navy;
    color: #ffffff;
}

.blue-bg {
    background-color: @blue;
    color: #ffffff;
}

.lazur-bg {
    background-color: @lazur;
    color: #ffffff;
}

.yellow-bg {
    background-color: @yellow;
    color: #ffffff;
}

.red-bg {
    background-color: @red;
    color: #ffffff;
}

.black-bg {
    background-color: @black;
    color: #ffffff;
}

/*--------------------------------------------END: CUSTOM--------------------------------------------------------*/

/*--------------------------------------------START: PREVIEW--------------------------------------------------------*/

@previewBgColor: #fff;
@previewLgBgColor: contrast(@previewBgColor, lighten(@previewBgColor, 10%), darken(@previewBgColor, 5%));
@previewDkBgColor: darken(@previewBgColor, 10%);

@previewTextPrimaryColor: contrast(@previewBgColor, lighten(@previewBgColor, 90%), darken(@previewBgColor, 90%));
@previewTextSecondaryColor: contrast(@previewBgColor, lighten(@previewBgColor, 70%), darken(@previewBgColor, 70%));

@previewPrimaryColor: #6CCCCC;
@previewPrimaryLgColor: lighten(@previewPrimaryColor, 20%);
@previewPrimaryDkColor: darken(@previewPrimaryColor, 10%);

.previewBg {
    color: @previewTextPrimaryColor;

    .bgCol1 {
        background-color: @previewBgColor;
        border: solid thin @previewLgBgColor;
    }

    .bgCol2 {
        background-color: @previewBgColor;
    }

    .bgCol3 {
        background-color: @previewLgBgColor
    }

    .bgCol4 {
        background-color: @previewDkBgColor
    }
}

.previewPrimary {
    color: @previewTextPrimaryColor;

    .primaryCol1 {
        background-color: @previewBgColor;
        border: solid thin @previewLgBgColor;
    }

    .primaryCol2 {
        background-color: @previewPrimaryColor;
    }

    .primaryCol3 {
        background-color: @previewPrimaryLgColor
    }

    .primaryCol4 {
        background-color: @previewPrimaryDkColor
    }
}

.previewText {
    color: contrast(@previewTextPrimaryColor);

    .previewTextCol {
        background-color: @previewTextPrimaryColor;
        border: solid thin @previewLgBgColor
    }
}

.previewSecondaryText {
    color: contrast(@previewTextSecondaryColor);

    .previewSecondaryTextCol {
        background-color: @previewTextSecondaryColor;
        border: solid thin @previewLgBgColor
    }
}

.hoverPreviewBox:hover,
.hoverPreviewBox:focus {
    /*box-shadow: 0 8px 10px -5px @previewBgColor, 0 16px 24px 2px fade(@previewBgColor, 10%), 0 6px 30px 5px fade(contrast(@previewBgColor), 55.5%);*/
    box-shadow: 0 2px 10px fade(contrast(@bgPrimaryColor), 50%), 0 6px 6px fade(contrast(@bgPrimaryColor), 10%);
    -webkit-transition: box-shadow 0.5s; /* Safari */
    transition: box-shadow 0.5s;
}

.selectedPreviewBox {
    /*-webkit-box-shadow: inset 0 2px 10px fade(@previewBgColor, 15%), 0 1px 5px fade(contrast(@previewBgColor), 55.5%);
    box-shadow: inset 0 2px 10px fade(@previewBgColor, 15%), 0 1px 5px fade(contrast(@previewBgColor), 55.5%);*/
    /*box-shadow: 0 5px 5px -3px @previewBgColor, 0 8px 10px 1px fade(@previewBgColor, 10%), 0 3px 14px 2px fade(contrast(@previewBgColor), 55.5%);*/
    box-shadow: 0 2px 10px fade(contrast(@bgPrimaryColor), 50%), 0 6px 6px fade(contrast(@bgPrimaryColor), 10%);
}

/*--------------------------------------------END: PREVIEW--------------------------------------------------------*/
.sweet-alert {
    background: @bgPrimaryColor;

    .sa-button-container {
        button {
            color: @brandPrimary;

            &:hover,
            &:focus {
                color: @brandDkPrimary;
            }

        }

        .btn-default:focus,
        .btn-primary:focus,
        .btn-primary:active {
            color: @brandDkPrimary;
        }
    }

    h2, p {
        color: @textSecondaryColor;
    }
}

.wizard {
    .nav-pills {

        a {
            color: @textPrimaryColor
        }

        li.active > a,
        li.active > a:hover,
        li.active > a:focus {
            color: @btn-primary-color !important;
            background-color: darken(@brandPrimary, 5%) !important;
            border-color: darken(@btn-primary-border, 12%) !important;
        }

        li > a:hover, .nav > li > a:focus {
            background: @bgLgPrimaryColor;
        }

    }

    textarea {
        background: @bgLgPrimaryColor;
        border-color: @bgDkPrimaryColor;
    }
}

.statementsItem {
    background: @bgLgPrimaryColor;

    .footer {
        padding: 8px 15px;
        border-top: solid thin @bgDkPrimaryColor;
    }
}

.ObserverConditionItem {
    background: @bgLgPrimaryColor;

    .footer {
        padding: 8px 15px;
        border-top: solid thin @bgDkPrimaryColor;
    }
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background: @bgLgPrimaryColor;
    color: @textPrimaryColor;
}

.query-builder .rules-group-container {
    border: solid thin @textPrimaryColor !important;
}

.query-builder .rules-group-container .btn.active {
    color: @btn-primary-color !important;
    background-color: @brandDkPrimary !important;
    border-color: @brandDkPrimary !important;
}

.query-builder .rules-group-container .btn {
    color: @textPrimaryColor !important;
}

.steps-indicator li a:before {
    background: @bgLgPrimaryColor;
}

.steps-indicator li.current a:before {
    background-color: @brandLgPrimary;;
}

.steps-indicator li.done a:before {
    background: @brandDkPrimary;
    border-color: @bgDkPrimaryColor;
}

.steps-indicator li a {
    color: @textSecondaryColor;
}

.steps-indicator li a:hover {
    color: @textPrimaryColor;
}

.md-editor {
    border-color: @bgLgPrimaryColor;

    button[title~="Preview"] {
        background-color: @brandPrimary !important;
        color: @btn-primary-color !important;
        border-color: @btn-primary-border !important;
    }

    button[title~="Preview"]:hover,
    button[title~="Preview"]:focus,
    button[title~="Preview"]:active,
    button[title~="Preview"]:active:focus {
        color: @btn-primary-color;
        background-color: darken(@brandPrimary, 5%);
        border-color: darken(@btn-primary-border, 12%);
    }

    .md-preview {
        background-color: inherit;
        color: @textSecondaryColor;

        img {
            //border: 1px solid darken(@bgLgPrimaryColor, 12%);
        }
    }

    .md-header {
        background-color: @bgDkPrimaryColor;
        border-bottom: solid thin @bgLgPrimaryColor;

        .btn-group {
            button {
                background-color: @bgLgPrimaryColor;
                border-color: darken(@bgLgPrimaryColor, 12%);
                color: @textSecondaryColor;
            }
        }
    }

    textarea {
        background-color: @bgLgPrimaryColor;
    }

    textarea:focus {
        background-color: @bgPrimaryColor;
    }
}

.markdown-footer {
    background-color: @bgDkPrimaryColor;
    border: solid thin @bgLgPrimaryColor;
    border-top: none;
}

.md-editor.active {
    border-color: darken(@bgLgPrimaryColor, 12%);
    box-shadow: none;
}

.commentDivider {
    border-color: @bgLgPrimaryColor;
}

.newCommentUI .md-editor, .md-editor {
    .content-box.dropActive {
        border: dashed !important;
        border-color: darken(@btn-primary-border, 12%) !important;
    }
}

.dropzone {
    background: darken(@bgDkPrimaryColor, 20%);

    h1 {
        color: contrast(@bgDkPrimaryColor);
    }
}

.suggestedColorSpan:hover {
    box-shadow: 0 2px 2px fade(contrast(@bgPrimaryColor), 50%), 0 1px 1px fade(contrast(@bgPrimaryColor), 10%);

}

.injectTextArea {
    border: solid 1px @bgLgPrimaryColor;
}

/*Context-Menu: Start*/
.context-menu-list {
    border: 1px solid @bgLgPrimaryColor;
}

.context-menu-item {
    background-color: @bgPrimaryColor;
    color: @textSecondaryColor;
}

.context-menu-item.hover {
    background-color: @bgLgPrimaryColor;
}

/*Context-Menu: End*/

.overlay-div {
    border-right: 2px solid @bgDkPrimaryColor;
}

.rg-left {
    background-color: @bgDkPrimaryColor;
}

.linkDeactive {
    color: @textSecondaryColor;
    text-decoration: none;
    outline: none;
}

.IconActive {
    color: @brandPrimary !important;
}

.IconDeActive {
    color: @textSecondaryColor !important;
}

#componentChart {
    path {
        stroke: @bgPrimaryColor;
    }
}

treecontrol {
    color: @textSecondaryColor;
}

.treeControlPanel {
    //border-right: solid thin @textSecondaryColor;
    font-weight: 700;

    .current-node {
        color: @brandPrimary !important;
    }
}

.verticalMenu {
    .nav {
        li {
            a {
                color: @textSecondaryColor;
            }

            a:hover {
                background-color: @bgLgPrimaryColor;
                -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
                color: @textPrimaryColor;
            }
        }

        li.active {
            a {
                background-color: @bgLgPrimaryColor;
                -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
                color: @textPrimaryColor;
            }
        }
    }
}

.slider-color::-webkit-slider-thumb {
    background: @brandPrimary;
}

.slider-color::-moz-range-thumb {
    background: @brandPrimary;
}

.horizontal-divider {
    border-bottom: solid thin @bgLgPrimaryColor;

}

/*
.CodeMirror-scroll {
    background-color: @bgLgPrimaryColor;
}

.CodeMirror-gutters {
    background-color: @bgDkPrimaryColor;
    border-right: 1px solid @bgPrimaryColor;
}
*/

.node-menu-container {
    border-color: @bgLgPrimaryColor;
    background: @bgPrimaryColor;

    li {
        a {
            color: @textSecondaryColor;
        }

        .dropdown-content {
            .displayText {
                color: @textSecondaryColor;
            }
        }
    }
}

.dropdown-content {
    background-color: @bgPrimaryColor;
    border: 1px solid @bgLgPrimaryColor; // IE8 fallback
    -webkit-box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);
    box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%);

    .divider {
        display: block;
        height: 1px;
        margin: 0 -10px;
        background-color: @bgLgPrimaryColor;
    }

    // Links within the dropdown menu
    > li > a {
        color: @textSecondaryColor;
    }
}

// Hover/Focus state
.dropdown-content > li > a {
    &:hover,
    &:focus {
        text-decoration: none;
        color: @textPrimaryColor;
        background-color: @bgLgPrimaryColor;
    }
}

// Active state
.dropdown-content > .active > a {
    &,
    &:hover,
    &:focus {
        text-decoration: none;
        outline: 0;
    }
}

.gridView {
    .col-sm-12.text-center {
        border-color: @textSecondaryColor;
        background-color: @bgPrimaryColor;
    }
}

.storage-breadcrumb {
    .breadcrumb > li + li:before {
        color: @textPrimaryColor;
    }
}

.componentGhost {
    .componentGhost-breadcrumb {
        .dummyInventories {
            background-color: @brandPrimary !important;
        }

        .clickDisable {
            i:hover {
                cursor: not-allowed;
            }

            i:hover a {
                cursor: not-allowed;
                pointer-events: none;
                text-decoration: none;
            }
        }

        ul.dot-breadcrumb:before {
            background: @textPrimaryColor;
        }

        li.breadcrumb-item i:hover {
            background: @bgLgPrimaryColor;
        }

        li.breadcrumb-item i:hover a {
            color: @textPrimaryColor;
        }
    }
}

.full-width-breadcrumb {
    .componentGhost {
        .componentGhost-breadcrumb ul li:last-child i {
            background: @bgLgPrimaryColor;

            a {
                color: @textPrimaryColor;
            }
        }
    }
}

.attributeRelativeTime {
    color: lighten(@textPrimaryColor, 50%);
}

.grayItalicValue {
    color: lighten(@textPrimaryColor, 50%) !important;
}

.grayItalicAction {
    color: @textPrimaryColor;
    opacity: 0.3;
}

.deviceAttributeDescription {
    color: lighten(@textPrimaryColor, 50%);
}

.DescriptionText {
    color: lighten(@textPrimaryColor, 50%);
}

.dot {
    background-color: lighten(@textPrimaryColor, 50%);
}

.progress {
    background-color: @bgDkPrimaryColor;
}

.redialProgressBar {
    .progress .track {
        stroke: @bgDkPrimaryColor;
    }

    .progress .fill {
        stroke: @brandPrimary;
    }
}

.issue-project-dropdown-menu {
    border: 1px solid @brandPrimary !important;
}

.progress-bar {
    color: contrast(@brandPrimary);
    background-color: @brandPrimary;
}

.AiBranchInput {
    uib-accordion {
        .panel-body {
            background: @bgPrimaryColor;
        }
    }
}

.shortcutsBtn {
    border: 2px solid @bgLgPrimaryColor;
    background-color: @bgDkPrimaryColor;
    color: @textPrimaryColor;
}

.shortcutsBtn:hover {
    border: 2px solid @bgLgPrimaryColor;
    background-color: @bgDkPrimaryColor;
    color: @textPrimaryColor;
}

.billing {
    .billingHeader {
        .modal-header {
            border-bottom: 2px solid @bgDkPrimaryColor;
        }
    }

    .billing-no-invoice-icon {
        .no-invoice-icon {
            svg {
                fill: @textSecondaryColor;
            }
        }
    }
}

.subBillDetails {
    border: 1px solid @bgLgPrimaryColor;
    background: @bgDkPrimaryColor;
}

#barChartDropdownMenu {
    .dropdown-menu {
        min-width: 110px;
    }
}

#chart {
    .pie text {
        fill: @textSecondaryColor;
    }
}

#legendG {
    .divider {
        stroke: @bgLgPrimaryColor
    }
}

#donutLegend {
    .donutLegendBorderBottom {
        border-bottom: 1.5px solid @bgLgPrimaryColor;
    }
}

#barChart {
    .grid .tick {
        stroke: @textSecondaryColor;
        opacity: 0.7;
    }

    text {
        fill: @textSecondaryColor;
    }

    .axis path, .axis line, .grid .tick {
        stroke: @textSecondaryColor;
    }
}

#DatePartition {
    .dropdown-menu {
        min-width: 110px;
    }
}

.transaction-detail {
    border: 1px solid @bgLgPrimaryColor; // IE8 fallback
    //-webkit-box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 2px 2px fade(contrast(@bgPrimaryColor), 7.5%);
    //box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 2px 2px fade(contrast(@bgPrimaryColor), 7.5%);
}

.credit-detail {
    border: 1px solid @bgLgPrimaryColor; // IE8 fallback
    -webkit-box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 2px 2px fade(contrast(@bgPrimaryColor), 7.5%);
    box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 2px 2px fade(contrast(@bgPrimaryColor), 7.5%);
}

#lifecycleTimeline {
    .message-item:before {
        background: @bgLgPrimaryColor;
    }

    .message-item:after,
    .message-first:after {
        background: @brandPrimary;
        border: 2px solid @brandPrimary;
    }

    .message-item .message-inner,
    .message-first .message-inner {
        background: @bgLgPrimaryColor;
        border: 1px solid @bgLgPrimaryColor;
    }

    .message-item .message-inner:after,
    .message-first .message-inner:after {
        border-right: 10px solid @bgLgPrimaryColor;
    }

    .message-item .message-inner:before,
    .message-first .message-inner:before {
        border-right: 10px solid @bgLgPrimaryColor;
    }

    .message-item .message-head,
    .message-first .message-head {
        border-bottom: 1px solid @bgDkPrimaryColor;
    }

    .message-item .message-head .post-meta > div,
    .message-first .message-head .post-meta > div {
        color: @textSecondaryColor;
    }
}

.workflowLoadValue, .stashDecorativeDiv {
    background: @bgDkPrimaryColor;
}

#inventoryFileTree {
    .angular-ui-tree-handle {
        //background: @bgDkPrimaryColor;
        //border: 1px solid @bgDkPrimaryColor;
        color: @textSecondaryColor;
    }

    .angular-ui-tree-handle:hover {
        color: @textPrimaryColor;
        //background: darken(@bgDkPrimaryColor, 5%);
        //border-color: @bgDkPrimaryColor;
    }

    /* --- Tree --- */

    .tree-node {
        //border: 1px solid @bgDkPrimaryColor;
        //background: @bgDkPrimaryColor;
        color: @textSecondaryColor;
    }

    .tree-handle {
        //background: @bgDkPrimaryColor;
        color: @textSecondaryColor;
    }
}

#functionModal, #deviceFunctionalModel {
    .panel-body {
        background-color: @bgLgPrimaryColor;
        color: @textSecondaryColor;
    }

    .panel-footer {
        background-color: @bgLgPrimaryColor;
        color: @textSecondaryColor;
    }
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: @brandPrimary;
    color: contrast(@brandPrimary);
}

.dtp div.dtp-date, .dtp div.dtp-time {
    background: lighten(@brandPrimary, 10%);
    color: contrast(@brandPrimary);
}

.dtp table.dtp-picker-days tr > td > a.selected {
    background: @brandPrimary;
    color: contrast(@brandPrimary);
}

.dtp div.dtp-actual-year {
    color: contrast(@brandPrimary);
}

.dtp .p10 > a {
    color: contrast(@brandPrimary);
}

.dtp .dtp-close > a {
    color: contrast(@brandPrimary);
}

.year-picker-item:hover {
    color: contrast(@brandPrimary);
}

.year-picker-item.active {
    color: contrast(@brandPrimary);
}

.dtp-btn-cancel, .dtp-btn-ok {
    background: lighten(@brandPrimary, 10%);
    color: contrast(@brandPrimary);
}

.mdtp__wrapper[data-theme='blue'] .mdtp__time_holder {
    background-color: @brandPrimary;
    color: contrast(@brandPrimary);
}

.mdtp__time_holder .mdtp__time_h, .mdtp__time_holder .mdtp__time_m {
    color: darken(@textSecondaryColor, 10%);
}

.mdtp__time_holder .mdtp__time_h.active, .mdtp__time_holder .mdtp__time_m.active {
    color: contrast(@brandPrimary);
}

.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__am,
.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__pm {
    color: contrast(@brandPrimary);
}

.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__am.active,
.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__pm.active {
    background-color: @brandPrimary;
    color: contrast(@brandPrimary);
}

.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__clock_dot {
    background-color: @brandPrimary;
}

.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__digit {
    color: contrast(@brandPrimary);
}

.mdtp__wrapper[data-theme='blue'] .mdtp__digit.active span,
.mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__digit span:hover {
    background-color: @brandPrimary !important;
    color: contrast(@brandPrimary);
}

.mdtp__wrapper[data-theme='blue'] .mdtp__digit.active:before {
    background-color: @brandPrimary;
}

.mdtp__wrapper[data-theme='blue'] .mdtp__button {
    background-color: @brandPrimary;
    color: contrast(@brandPrimary);
}

#workflowTriggersTreeView, .workflowLoadModalTreeView {
    ul.tree li {
        color: @textSecondaryColor;;
        border-left: 1px dashed @textSecondaryColor;
    }

    ul.tree li:before {
        border-bottom: 1px dashed @textSecondaryColor;
    }

    ul.tree li:last-child:before {
        border-left: 1px dashed @textSecondaryColor;
    }
}

#workflowStashInfo {
    .line1 {
        color: @textSecondaryColor;
        background-color: @textSecondaryColor;
    }

    .hintLine {
        border-bottom: 1px dashed @textSecondaryColor;
    }

    .workflowLoadModalTreeView, .workflowLoad {
        .treeItem {
            border: 1px solid @textSecondaryColor;
            background-color: @textSecondaryColor;
        }

        .treeItem_hi {
            width: 10px;
            height: 10px;
            border: 1px solid @bgDkPrimaryColor;
            border-radius: 100%;
            background-color: @bgDkPrimaryColor;
        }

        .treeItem_set {
            width: 10px;
            height: 10px;
            border: 1px solid @brandPrimary;
            border-radius: 100%;
            background-color: @brandPrimary;
        }
    }
}

.sweet-alert {

    #swalTextarea {
        resize: none;
    }

    .form-control, #swalTextarea {
        border: 1px solid @bgLgPrimaryColor;
        background-color: transparent;
        box-shadow: none;
    }

    .form-control:focus, #swalTextarea:focus {
        border: 1px solid @brandPrimary;
        background-color: transparent;
        box-shadow: none;
    }

    .has-error {
        .help-block {
            color: @textPrimaryColor;
        }
    }
}

#htmlParse {
    background: @bgLgPrimaryColor;
    border-color: @bgDkPrimaryColor;
}

#inventoryD3Treeview, #inventoryD3UserTreeview {
    .link, .node text {
        stroke: @textSecondaryColor;
    }

    .node text {
        stroke-width: 1px;
    }

    .treeCircle {
        fill: @brandPrimary;
        stroke: darken(@brandPrimary, 5%);
    }

    .treeIcon {
        fill: @textSecondaryColor;
    }

    .rect-fill {
        fill: @bgPrimaryColor;
    }
}

#singupProfileContent {
    .containerBorder {
        border: 1px solid @bgLgPrimaryColor;
        border-top: 3px solid @textSecondaryColor;
    }
}

.trackerSideBar {
    .panelDivider {
        border-bottom: solid thin @bgLgPrimaryColor;
    }
}

.customDropdown {
    .titleLabel {
        margin-left: 13px;
        font-size: 12px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        padding: 0 3px;
        transition: top 0.4s, opacity 0.4s;
        -moz-transition: top 0.4s, opacity 0.4s;
        -webkit-transition: top 0.4s, opacity 0.4s;
        top: -10px;
        z-index: 1;
        opacity: 1.0;
        color: darken(@brandPrimary, 5%);
        background-color: @bgPrimaryColor;
        text-transform: uppercase;
    }

    .btn {
        text-align: left;
        color: @textPrimaryColor;
        background: @bgPrimaryColor;
        border: 1.5px solid @bgLgPrimaryColor;
        padding: 10px 10px 10px 20px;
    }

    .btn-sm, .btn-group-sm > .btn {
        font-size: 14px;
        color: @textPrimaryColor;
    }

    .caret {
        position: absolute;
        right: 10px;
        top: 19px;
        color: @textPrimaryColor;
    }

    .btn-group.open .dropdown-toggle {
        box-shadow: none;
        border-color: @brandPrimary;
        background: @bgPrimaryColor;
        outline: none;
        color: @textPrimaryColor;
    }

    .btn:active, .btn.active {
        border-color: @brandPrimary;
        background: @bgPrimaryColor;
        outline: none;
        box-shadow: none;
        color: @textPrimaryColor;
    }

    .dropdown-menu {
        max-height: 250px;
        overflow: auto;
    }
    .v4-primary-button {
        border: 1px solid @brandPrimary !important;
    }
}

#newPermissionUI {

    ul[dnd-list] > li {
        border-bottom: solid thin @bgLgPrimaryColor;
    }

    ul[dnd-list] > li.dndPlaceholder {
        background-color: @bgPrimaryColor;
    }

    .tree-viewUI {
        ul[dnd-list] li {
            color: @textSecondaryColor;;
            border-left: 1px dashed @textSecondaryColor;
        }

        ul[dnd-list] li:before {
            border-bottom: 1px dashed @textSecondaryColor;
        }

        ul[dnd-list] li:last-child:before {
            border-left: 1px dashed @textSecondaryColor;
        }

        .lastIndex {
            position: relative;
            left: -21px;
            border-left: 1px dashed @textSecondaryColor;
            top: -22px;
        }
    }

    .panel .panel-body {
        background-color: @bgPrimaryColor;
    }
}

.observerDetails {
    .thingDiv, .conditionsDiv, .actionsDiv {
        border: 2px dashed @bgLgPrimaryColor;
    }

    .modelLabelDiv {
        border-color: @bgLgPrimaryColor;
    }

    .observer-hierarchyIconColor {
        fill: @textSecondaryColor;
    }

    .conditionDivArrow:before {
        border: 2px solid @textSecondaryColor;
    }

    .conditionDownArrow:before {
        border-top-color: @textSecondaryColor;
    }

    .newActionArrow:before {
        border: 2px solid @textSecondaryColor;
    }

    .actionSmArrow:after {
        border: 2px solid @textSecondaryColor;
    }

    .actionDownArrow:before {
        border-top-color: @textSecondaryColor;
    }

    .createConditionDownArrow:before {
        border-top-color: @textSecondaryColor;
    }

    .createConditionArrow:after {
        border-color: @textSecondaryColor;
    }

    .createConditionArrow:before {
        border-color: @textSecondaryColor;
    }
}

#inventoryInfo {
    .bgColorForGateway-info-box {
        background-color: @bgPrimaryColor;
    }
}

.createLine {
    .parent-line:not(.noLine) {
        .last-child-line {
            &.lastChild:before {
                position: absolute;
                top: 18px;
                left: 0px;
                height: calc(~"100% - 24px");
                width: 2px;
                content: "";
                background: @bgPrimaryColor;
            }
        }

        &:not(.rootParent):after {
            position: absolute;
            top: 17.5px;
            left: 0px !important;
            height: 1px;
            width: 10px;
            content: "";
            border-top: 1px dashed @textSecondaryColor;
        }

        &:not(.child-line, .rootParent):after {
            position: absolute;
            top: 17.5px;
            left: 0px;
            height: 1px;
            width: 10px;
            content: "";
            border-top: 1px dashed @textSecondaryColor;
        }

        &:not(.noChild):before {
            position: absolute;
            top: 24px;
            left: 0px;
            height: calc(~'100% - 40px');
            width: 1px;
            content: "";
            border-left: 1px dashed @textSecondaryColor;
        }
    }

}

.ngQueryBuilderFocalIcon {
    color: @brandPrimary;
}

.observer-condition-divider {
    border-bottom: 1px solid @textSecondaryColor;
}

.observer-hierarchyIcon-modal {
    fill: @textSecondaryColor;
}

.profile-element-beta-tag {
    color: @brandPrimary;
}

.logo-element-beta-tag {
    color: @brandPrimary;
}

.countdownIcon {
    .circleStroke {
        stroke: @textSecondaryColor;
    }

    .lineStroke1 {
        stroke: @textSecondaryColor;
    }

    .lineStroke2 {
        stroke: @textSecondaryColor;
    }
}

#federatedAccessModal {
    .federatedAccess {
        background-color: @bgPrimaryColor;

        .divider {
            background-color: @bgLgPrimaryColor;
        }

        > li > a {
            color: @textSecondaryColor;
        }
    }

    .federatedAccess > li > a {
        &:hover,
        &:focus {
            text-decoration: none;
            color: @textPrimaryColor;
            background-color: @bgLgPrimaryColor;
        }
    }
}

.loadModalDisplayPath {
    color: lighten(@textPrimaryColor, 50%);
}

.nativeConsoleBlock {
    #animationClock {
        .text {
            color: @brandPrimary;
        }

        .digit {
            color: @textSecondaryColor;
        }
    }
}

.service-action-beta-tag {
    color: @brandPrimary;
}

.loadModalDivider {
    border-bottom: solid thin @bgLgPrimaryColor;
}

.nmsOverlayLayout {
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */

    .modal-content {
        background-color: @bgPrimaryColor;
        border: solid thin @bgLgPrimaryColor;
    }

}

.customDropdown-icon {
    .customMenuBar {
        border-color: @brandPrimary;
    }
}

.attributeDisableColor {
    color: lighten(@textPrimaryColor, 50%);
    font-style: italic;
}

.regularExpressionTest {
    background-color: @brandPrimary;
}

#newWorkflowUI {
    .tf-tree li li:before {
        border-top: 2px solid @textSecondaryColor;
    }

    .tf-tree .tf-nc:after, .tf-tree .tf-node-content:after, .tf-tree .tf-node-content:before {
        border-left: 2px solid @textSecondaryColor;
    }

    .tf-tree .tf-nc:before {
        border-left: 2px solid @textSecondaryColor;
    }

    .tf-nc:not(.root) a:before {
        border: 6px solid @textSecondaryColor;
        border-color: @textSecondaryColor transparent transparent transparent;
    }

    .stateErrorIcon {
        background-color: @bgPrimaryColor;
    }

    .triggerSelectBox {
        .triggerBoxBorder {
            border: 1px dashed @textSecondaryColor;
        }
    }

    .stateBoxBorder {
        border: 1px dashed @textSecondaryColor;
    }

    .settingIcon {
        border: 2px solid @textSecondaryColor;
        background: @bgPrimaryColor;
    }
}

#workflowStatesTabView {
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        color: @brandPrimary;
        background-color: @bgPrimaryColor;
    }

    .nav > li > a {
        color: @brandPrimary;
    }

    .nav > li > a:hover, .nav > li > a:focus {
        background-color: @bgPrimaryColor;
    }
}

.observerUpdateMsg {
    border-top: solid thin @bgLgPrimaryColor;
}

.customObserverAlert {
    .cycleAlert-bottom {
        background: @brandPrimary;
        color: @textPrimaryColor;
    }
}

.healthStyle {
    border-color: @dark-gray;
}

.workFlowCounter {
    border-color: @dark-gray;
}

.arrowLine.arrow-right:after {
    border-left-color: @dark-gray;
}

.arrowLine {
    background: @dark-gray;
}

.btnBorder {
    background-color: @bgPrimaryColor !important;
    border-color: orange !important;
    color: orange !important;
}

.btnBorder:hover {
    background-color: orange !important;
    color: white !important;
}

.disableBtnBorder {
    background-color: @bgPrimaryColor !important;
    border-color: @bgLgPrimaryColor !important;
}

.disableBtnBorder:hover {
    background-color: @bgLgPrimaryColor !important;
}

#new-Issue-btnBorder {
    background-color: @bgPrimaryColor;
    border-color: @brandPrimary;
    color: @brandPrimary;
}

#new-Issue-btnBorder:hover {
    background-color: @brandPrimary;
    color: white;
}

.connectedLine::after {
    border-color: @bgLgPrimaryColor;
}

.timeline-labelIcon {
    .labelIcon {
        background-color: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;
    }
}

.issueCommentBorder {
    border: 1px solid @bgLgPrimaryColor !important;
}

.workflowFlowTabView li:not(.noHover).selected {
    background-color: @bgLgPrimaryColor;

    a:before {
        background-color: @brandDkPrimary;
    }
}

.workflowFlowTabView li:not(.noHover):hover {
    background-color: @bgLgPrimaryColor;

    a:before {
        background-color: @brandDkPrimary;
    }
}

.errorFlowOptionModal {
    .newErrorFlowCss {
        .panel {
            border: 1px dashed @textSecondaryColor !important;
            background: @bgPrimaryColor;

            .panel-heading {
                background: @bgPrimaryColor;
            }
        }
    }
}

.errorConfigurationIcon {
    background: @bgPrimaryColor;
}

.create-screen {
    h2.text-primary {
        color: @brandPrimary;
        font-weight: bolder;
    }
}

.roleInfo {
    color: @brandPrimary;
}

.typeIconBorder {
    border-color: @textSecondaryColor;
}

.typeIcon {
    color: @textSecondaryColor;
}

.denyBadge {
    background-color: black;
    border-color: @textSecondaryColor !important;
    color: @bgPrimaryColor !important;
}

.allowBadge {
    background-color: @brandPrimary !important;
    color: @textSecondaryColor !important;
}

.search-panel-v4 {
    .search-icon {
        svg {
            fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));;
        }
    }

    .clear-icon {
        svg {
            fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
        }
    }

    .advanced-search-icon {
        svg {
            fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
        }
    }

    .search-container {
        border: 1.5px solid @bgLgPrimaryColor;
    }

    .tag-name {
        .btn-default {
            background: @bgLgPrimaryColor;
            color: @textSecondaryColor;
            border-color: @bgLgPrimaryColor;
        }
    }

    .conditionToggle {
        .btn-default {
            background: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
            color: @textSecondaryColor;
            border-color: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
        }
    }

    .sort-direction {
        border: 1.5px solid @bgLgPrimaryColor;

        &:hover {
            background: @bgLgPrimaryColor;
        }
    }
}

#healthRangeSlider {
    .rzslider .rz-pointer {
        background-color: @brandPrimary !important;
    }

    .rzslider .rz-selection {
        background: @brandPrimary;
    }

    .rzslider .rz-pointer:after {
        position: unset;
    }
}

.reportedComponentFillColor {
    fill: @textSecondaryColor;
}

.expandCollapseIcon {
    svg {
        fill: @textSecondaryColor;
    }
}

.highcharts-background {
    fill: transparent;
}

.highcharts-title {
    fill: @textSecondaryColor !important;
}

.highcharts-axis-labels {
    fill: @textSecondaryColor !important;
}

.highcharts-subtitle {
    fill: @textPrimaryColor !important;
}

.highcharts-axis-title {
    fill: @textSecondaryColor !important;
}

.highcharts-legend-item > text {
    fill: @textSecondaryColor !important;;
}

.highcharts-axis-labels > text {
    fill: @textPrimaryColor !important;
}

.highcharts-plot-band-label {
    fill: @textPrimaryColor !important;
}

.highcharts-button-box {
    fill: transparent !important;
    stroke: @brandPrimary;
}

.highcharts-button-symbol {
    stroke: @brandPrimary;
}

.highcharts-menu {
    background-color: @bgPrimaryColor !important;
    border: 1px solid @bgLgPrimaryColor !important;
    -webkit-box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%) !important;
    box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%) !important;
}

.highcharts-menu-item {
    background-color: @bgPrimaryColor !important;
    color: @textSecondaryColor !important;
}

.highcharts-menu-item:hover {
    color: @textPrimaryColor !important;
    background-color: @bgLgPrimaryColor !important;
}

.overview-active-link {
    color: @brandPrimary;
}

.relative-time-box {
    border: 1px solid @textSecondaryColor;
}

.selected-box {
    background-color: @brandPrimary;
    color: @btn-primary-color;
}

.embedded-daterangepicker {
    .daterangepicker {
        background-color: @bgPrimaryColor !important;
        border-color: @textSecondaryColor !important;

        .calendar-table {
            border: none;
            background-color: @bgPrimaryColor !important;

            .off {
                background-color: @bgPrimaryColor !important;
                color: @textPrimaryColor !important;
            }

            .active {
                background-color: @brandPrimary;
                color: @textPrimaryColor !important;
            }

            .in-range:not(.start-date):not(.end-date) {
                background-color: lighten(@brandPrimary, 10%);
                color: @textPrimaryColor !important;
            }

            th.available {
                span {
                    border-color: @brandPrimary;
                }
            }

            th.available:hover {
                background-color: transparent;
            }

            .available:hover {
                background-color: @brandPrimary;
                color: @textPrimaryColor !important;
            }
        }
    }
}

.daterangepicker {
    background-color: @bgPrimaryColor !important;
    border-color: @bgLgPrimaryColor !important;

    .calendar-table {
        border: none;
        background-color: @bgPrimaryColor !important;

        .off {
            background-color: @bgPrimaryColor !important;
            color: @textPrimaryColor !important;
        }

        .active {
            background-color: @brandPrimary;
            color: @textPrimaryColor !important;
        }

        .in-range:not(.start-date):not(.end-date) {
            background-color: lighten(@brandPrimary, 10%);
            color: @textPrimaryColor !important;
        }

        th.available {
            span {
                border-color: @brandPrimary;
            }
        }

        th.available:hover {
            background-color: transparent;
        }

        .available:hover {
            background-color: @brandPrimary;
            color: @textPrimaryColor !important;
        }
    }

    .drp-buttons {
        border-color: @bgLgPrimaryColor !important;
    }

    .monthselect, .yearselect, .hourselect, .minuteselect {
        background: @bgPrimaryColor !important;
        color: @textSecondaryColor !important;
        border-color: @textSecondaryColor !important;
    }

    .ranges {
        .active {
            background-color: @brandPrimary !important;
        }

        color: @textPrimaryColor !important;
    }

    .ranges li:hover {
        background-color: @brandPrimary !important;
    }
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid @bgLgPrimaryColor !important;
}

.daterangepicker:after {
    border-bottom-color: @bgPrimaryColor !important;
}

.daterangepicker:before {
    border-bottom-color: @bgLgPrimaryColor !important;
}

.HighChartPie {
    .highcharts-data-label {
        text {
            fill: @textSecondaryColor !important;
            font-size: unset !important;
            font-weight: normal !important;

            .highcharts-text-outline {
                fill: @textSecondaryColor !important;
            }

            tspan {
                font-weight: normal !important;
                stroke: none !important;

            }
        }
    }
}

.HighChartBarChart {
    .highcharts-data-label {
        text {
            fill: @textSecondaryColor !important;
            font-size: unset !important;
            font-weight: normal !important;

            .highcharts-text-outline {
                fill: @textSecondaryColor !important;
            }

            tspan {
                font-weight: normal !important;
                stroke: none !important;

            }
        }
    }

    .highcharts-yaxis-grid {
        path {
            stroke: @bgLgPrimaryColor;
        }

    }
}

.search-icon-searchBar {
    svg {
        fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));;
    }
}

.contextMenuBubble {
    background: @bgPrimaryColor !important;
    border: 1px solid @bgLgPrimaryColor !important;
    box-shadow: inset 0 2px 10px fade(@bgPrimaryColor, 15%), 0 1px 5px fade(contrast(@bgPrimaryColor), 7.5%) !important;

    div {
        color: @textSecondaryColor !important;
    }
}

.contextMenuBubble div:hover {
    background: @bgDkPrimaryColor !important;
}

.lightDarkThemeIcon {
    svg {
        fill: @textSecondaryColor !important;
    }
}

.componentAccordion {
    .panel-group {
        div.panel:nth-of-type(even) {
            .panel-heading {
                background: @bgPrimaryColor !important;
                border-color: @bgPrimaryColor !important;
            }

            .panel-heading:hover {
                background: @bgDkPrimaryColor !important;
                border-color: @bgDkPrimaryColor !important;
            }

            .panel-body {
                div.componentObserver:nth-of-type(even) {
                    background: @bgPrimaryColor !important;
                    border-color: @bgPrimaryColor !important;
                }

                div.componentObserver:nth-of-type(odd) {
                    background: @bgLgPrimaryColor !important;
                    border-color: @bgLgPrimaryColor !important;
                }
            }
        }

        div.panel:nth-of-type(odd) {
            .panel-heading {
                background: @bgLgPrimaryColor !important;
                border-color: @bgLgPrimaryColor !important;
            }

            .panel-heading:hover {
                background: @bgDkPrimaryColor !important;
                border-color: @bgDkPrimaryColor !important;
            }

            .panel-body {
                div.componentObserver:nth-of-type(even) {
                    background: @bgLgPrimaryColor !important;
                    border-color: @bgLgPrimaryColor !important;
                }

                div.componentObserver:nth-of-type(odd) {
                    background: @bgPrimaryColor !important;
                    border-color: @bgPrimaryColor !important;
                }
            }
        }
    }

    .panel-body {
        div.componentObserver:nth-of-type(even):hover {
            background: @bgDkPrimaryColor !important;
            border-color: @bgDkPrimaryColor !important;
        }

        div.componentObserver:nth-of-type(odd):hover {
            background: @bgDkPrimaryColor !important;
            border-color: @bgDkPrimaryColor !important;
        }
    }
}

.search-active {
    border-color: @brandPrimary !important;
}

.loader-table {
    table tr td.td-2 span {
        background-color: @bgLgPrimaryColor;
    }

    table tr td.td-3 span {
        background: linear-gradient(to right, @bgLgPrimaryColor 20%, darken(@bgLgPrimaryColor, 7%) 50%, @bgLgPrimaryColor 80%);
    }

    table tr td.td-5 span {
        background-color: @bgLgPrimaryColor;
    }

    table tr td.td-6 span {
        background-color: @bgLgPrimaryColor;
    }

    .comments-icon {
        color: @bgLgPrimaryColor;
    }
}

.search-active {
    border-color: @brandPrimary !important;
}

.ghostAttributeNewUI {
    .iconCSS {
        svg {
            fill: @textSecondaryColor !important;
        }
    }
}

.month-box {
    border: 1px solid @textSecondaryColor;
}

#HighChart3DDonutChart {
    .highcharts-tracker {
        .highcharts-point path {
            stroke: @bgPrimaryColor;
        }
    }
}

.aggregateHeatMapChartMainContainer, .atomicHeatMapChartMainContainer, .connectionHeatMapChartMainContainer {
    rect.highcharts-point {
        stroke: @bgPrimaryColor !important;
    }
}

.titleWithBorderBottom {
    border-bottom: 1.5px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
}

.deviceHasComponents {
    svg {
        fill: @textSecondaryColor
    }
}

.bubble-wizard {
    .wizard {
        background: @bgPrimaryColor;
    }

    .connecting-line {
        background: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
    }

    span.round-tab {
        background: @bgPrimaryColor;
        border: 2px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
    }

    span.round-tab i {
        color: @textSecondaryColor;
    }

    .wizard li:not(.pagination-page).active {
        a {
            background-color: @bgPrimaryColor;
            border: 0;
        }

        span.round-tab {
            border: 2px solid @brandPrimary;

            .custom-wizard-svg-icon {
                fill: @brandPrimary;
            }

            i {
                color: @brandPrimary;
            }
        }

    }

    .wizard .nav-tabs > li > a, .wizard .nav-tabs > li > a:hover, .wizard .nav-tabs > li > a:focus {
        background-color: @bgPrimaryColor !important;
        border: 0 !important;
    }

    .link-border {
        border: 3px solid @brandPrimary;
    }

    .link-arrow {
        border: 8px solid;
        border-color: @brandPrimary transparent transparent transparent
    }

    .custom-wizard-svg-icon {
        fill: @textSecondaryColor;
    }

    .title-border-bottom {
        border-bottom: 1.5px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
    }
}

.aggregateHealth {
    .chart-export-button {
        background: @bgLgPrimaryColor;
    }

    .aggregate-health-chart {
        background: @bgLgPrimaryColor;
    }

    .aggregate-health-chart-animation {
        background: linear-gradient(to right, @bgLgPrimaryColor 20%, @bgDkPrimaryColor 50%, @bgLgPrimaryColor 80%);
        background-image: linear-gradient(90deg, fade(@bgPrimaryColor, 0%) 0, fade(@bgPrimaryColor, 20%) 20%, fade(@bgPrimaryColor, 50%) 60%, fade(@bgPrimaryColor, 0%) 0)
    }

    .aggregate-health-chart-date-plotting {
        .chart-date-label {
            background: @bgLgPrimaryColor;
        }
    }
}

.atomicHealth {
    .chart-export-button {
        background: @bgLgPrimaryColor;
    }

    .atomic-health-chart {
        background: @bgLgPrimaryColor;
    }

    .atomic-health-chart-animation {
        background: linear-gradient(to right, @bgLgPrimaryColor 20%, @bgDkPrimaryColor 50%, @bgLgPrimaryColor 80%);
        background-image: linear-gradient(90deg, fade(@bgPrimaryColor, 0%) 0, fade(@bgPrimaryColor, 20%) 20%, fade(@bgPrimaryColor, 50%) 60%, fade(@bgPrimaryColor, 0%) 0)
    }

    .atomic-health-chart-date-plotting {
        .chart-date-label {
            background: @bgLgPrimaryColor;
        }
    }
}

.valueChart {
    .highcharts-heatmap-series {
        rect {
            fill: @brandPrimary !important;
        }
    }
}

.recipesConfig {
    .notificationEmailInput {
        .md-input {
            label {
                background: linear-gradient(to bottom, @bgLgPrimaryColor 50%, @bgPrimaryColor 50%) !important;
            }
        }
    }
}

.accessUserInput {
    .md-input {
        label {
            background: linear-gradient(to bottom, @bgLgPrimaryColor 50%, @bgPrimaryColor 50%) !important;
        }
    }
}

#refreshSwal {
    .alert {
        background-color: @textSecondaryColor !important;;
        color: @bgPrimaryColor !important;
        border-color: @textSecondaryColor !important;
    }

    .svgIconFillTextSecondaryColor {
        fill: @bgPrimaryColor !important;
    }
}

.custom-svg-side-menu-icon {
    fill: @textSecondaryColor;
}

.custom-svg-side-menu-icon-primary {
    fill: @brandPrimary;
}

.custom-svg-icon {
    svg {
        fill: @textSecondaryColor !important;
    }
}

.administrator-icon {
    svg {
        fill: @textSecondaryColor !important;
    }
}

.svgIconFillTextSecondaryColor {
    fill: @textSecondaryColor;
}

.svg-fill-primary {
    svg {
        fill: @brandPrimary !important;
    }
}

.dashboard-panel {
    background-color: @bgLgPrimaryColor;
    color: @textSecondaryColor;
}

.dashboard-panel-chart-widget {
    background-color: fade(@bgLgPrimaryColor, 40%) !important;
}

.dashboard-pie-chart-img, .dashboard-img-not-found {
    fill: @textSecondaryColor !important;
}

.dashboard-border {
    border-bottom: 1.5px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 20%), darken(@bgPrimaryColor, 20%));
}

.dashboard-header {
    background: @bgDkPrimaryColor !important;
}

.btn-gray {
    color: contrast(@bgLgPrimaryColor, lighten(@bgLgPrimaryColor, 20%), darken(@bgLgPrimaryColor, 20%)) !important;
    border-color: contrast(@bgLgPrimaryColor, lighten(@bgLgPrimaryColor, 20%), darken(@bgLgPrimaryColor, 20%)) !important;
    background: transparent !important;
}

.header-background-bgLgPrimaryColor {
    background: @bgLgPrimaryColor !important;
}

.dashboard-body {
    background: @bgPrimaryColor !important;
}

.pie-background-color {
    background: @previewBgColor !important;
}

.resource-panel {
    background: @bgPrimaryColor !important;
}

.tab-clear-icon-position {
    svg {
        fill: @textSecondaryColor !important;
    }
}

.serviceInfoIcon {
    border-bottom: 1px solid @bgLgPrimaryColor;
    color: @brandPrimary;
}

.btn-primary-cancel {
    background: transparent !important;
    color: @textSecondaryColor !important;
    border: 1.5px solid @bgLgPrimaryColor !important;
}

.dashboard-header-panel {
    .panel-default {
        border-color: @bgLgPrimaryColor !important;
    }

    .panel-body {
        background-color: @bgLgPrimaryColor;
        color: @textSecondaryColor;
    }

    .panel-footer {
        background-color: @bgLgPrimaryColor;
        color: @textSecondaryColor;
    }
}

.inputCheckIcon {
    color: @brandPrimary;
}

.v4-primary-button {
    background-color: transparent !important;
    color: @brandPrimary !important;
}

.custom-widget {
    border: 15px solid @bgLgPrimaryColor;
    background-color: fade(@bgLgPrimaryColor, 40%);
}

.query-table {
    thead {
        background: @bgLgPrimaryColor;
    }

    tbody {
        border: 1px solid @bgLgPrimaryColor;

        tr {
            td {
                border-color: @bgLgPrimaryColor;
            }
        }
    }
}

.custom-sql-editor {
    .CodeMirror {
        border: 1.5px solid @bgLgPrimaryColor;
    }

    .CodeMirror-focused {
        border: 1.5px solid @brandPrimary !important;
    }
}

.chartEditor {
    .highed-toolbox-body {
        background-color: @bgPrimaryColor !important;
        color: @textSecondaryColor !important;
    }

    .highed-vsplitter-body {
        background-color: @bgPrimaryColor !important;
        color: @textSecondaryColor !important;
    }

    .highed-toolbox-body {
        background-color: @bgPrimaryColor !important;
        color: @textSecondaryColor !important;
    }

    .highed-chart-templates {
        .panel {
            background-color: @bgPrimaryColor !important;

            .highed-list {
                .item {
                    color: @textSecondaryColor !important;
                }

                .item-selected {
                    background-color: @bgLgPrimaryColor !important;
                    color: @textSecondaryColor !important;
                    border-left: 4px solid @brandPrimary;
                }
            }

            .highed-chart-template-frame {
                .highed-chart-template-cat-desc {
                    color: @textSecondaryColor !important;
                }

                .highed-chart-template-container {
                    background-color: @bgLgPrimaryColor !important;
                    color: @textSecondaryColor !important;
                }

                .highed-chart-template-preview-selected {
                    border-color: @brandPrimary !important;
                }
            }
        }
    }

    .highed-toolbox-user-contents {
        .highed-tab-control {
            .body {
                background-color: @bgPrimaryColor !important;

                .highed-hsplitter {
                    background-color: @bgPrimaryColor !important;

                    .panel {
                        background-color: @bgPrimaryColor !important;

                        .highed-list {
                            .item {
                                color: @textSecondaryColor !important;
                            }

                            .item-selected {
                                background-color: @bgLgPrimaryColor !important;
                                color: @textSecondaryColor !important;
                                border-left: 4px solid @brandPrimary;
                            }
                        }

                        .highed-customizer-body {
                            background-color: @bgPrimaryColor !important;
                            color: @textSecondaryColor !important;

                            .highed-customize-group {
                                .highed-customizer-table-heading {
                                    color: @textSecondaryColor !important;
                                }

                                .highed-customizer-table tr:nth-child(even) {
                                    background-color: @bgPrimaryColor !important;
                                }

                                .highed-customizer-table tr:nth-child(odd) {
                                    background-color: @bgPrimaryColor !important;
                                }

                                .highed-dropdown, .highed-field-input {
                                    border-color: @bgLgPrimaryColor !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.highed-dropdown-items {
    border-color: @bgLgPrimaryColor !important;
}

.highed-dropdown-items-responsive {
    .highed-dropdown-item {
        color: @textSecondaryColor !important;
        background-color: @bgPrimaryColor !important;
        height: unset;
    }

    .highed-dropdown-item-selected {
        text-decoration: none;
        color: @textPrimaryColor !important;
        background-color: @bgLgPrimaryColor !important;
    }

    .highed-dropdown-item:hover {
        background: @bgLgPrimaryColor !important;
        color: @textSecondaryColor !important;
    }
}

.previewChart {
    .highed-chart-frame {
        background-color: @bgPrimaryColor !important;

        .highed-chart-frame-body {
            background-color: @bgPrimaryColor !important;
        }
    }
}

.availableField {
    border: 1px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
}

#privilegesContent {
    .border-1px {
        border: 1px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
    }

    .border-left-1px {
        border-left: 1px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
    }

    .border-bottom-1px {
        border-bottom: 1px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
    }
}

.theme-label {
    color: @textPrimaryColor;
}

.preferences .cell {
    border: 1px solid @textSecondaryColor;
}

.emailBodyBorder {
    border: 1.5px solid @bgLgPrimaryColor;
}

.variables-table {
    thead {
        background: @bgLgPrimaryColor;
    }

    thead, tbody {
        border: 1px solid @bgLgPrimaryColor;

        tr {
            td {
                border-color: @bgLgPrimaryColor;
            }
        }
    }
}

.businessDetailsCard {
    border: 10px solid @bgLgPrimaryColor;
}

.plan-card, .product-card, .iotDashboardPanel {
    background: @bgLgPrimaryColor;
    border: 1px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));;
}

.product-box {
    border: 1px solid contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
}

.product-box.customECUBox {
    background: @bgLgPrimaryColor;
}

.product-details-page {
    .panel-default {
        border-color: @bgLgPrimaryColor !important;

        .panel-body {
            border-color: @bgLgPrimaryColor !important;
        }
    }
}

.boardSettings {
    .panel-title {
        color: @textPrimaryColor !important;
    }
}

.cart-card {
    border-bottom: 1px solid @bgLgPrimaryColor;
}

.order-summary-card {
    background: @bgLgPrimaryColor;
}

.stripe-card-element {
    .sr-input,
    input[type="text"] {
        border: 1.5px solid @bgLgPrimaryColor;
        background: @bgPrimaryColor;
    }

    .sr-input:focus,
    input[type="text"]:focus,
    button:focus,
    .focused {
        border-color: @brandPrimary;
    }

    .sr-input::placeholder,
    input[type="text"]::placeholder {
        color: transparent;
    }

    .ElementsApp, .ElementsApp .InputElement {
        color: @textSecondaryColor !important;
    }
}

.email-template-border-bottom {
    border-bottom: 1px solid @bgLgPrimaryColor !important;
}

.issueReadUnreadBGColor {
    background-color: @brandPrimary;
}

.issue-side-panel {
    background-color: @bgLgPrimaryColor;
    border: 1px solid fade(contrast(@bgPrimaryColor), 10%);

    .label-box {
        background-color: @bgLgPrimaryColor !important;
        border: 1px solid fade(contrast(@bgPrimaryColor), 10%) !important;
    }

    .label-header, .label-header-change-view {
        background-color: @bgLgPrimaryColor !important;
    }

    .floatingLabelInput {
        .md-input label, .md-form-control, .dropdown-menu {
            .divider {
                background-color: fade(contrast(@bgPrimaryColor), 10%);
            }
        }

        .md-form-control {
            border-color: @brandPrimary;
        }
    }

    .border-1-assignee {
        border: 1px solid fade(contrast(@bgPrimaryColor), 10%);
    }

    .linear-gradient-background {
        .md-input label {
            background: linear-gradient(to bottom, @bgLgPrimaryColor 50%, @bgPrimaryColor 50%) !important;
        }
    }

    .issue-side-panel-icon:hover {
        background: @bgDkPrimaryColor !important;
    }
}

.newCommentUI {
    .dashed-border {
        border-color: @textSecondaryColor !important;
    }

    .issue-timeline-icon {
        background-color: @bgPrimaryColor;
    }

    .aaa:after {
        border-color: @textSecondaryColor !important;
    }

    .comment {
        border: 1px solid @bgLgPrimaryColor !important;
    }

    .comment-header {
        background-color: @bgLgPrimaryColor !important;
    }

    .comment-footer {
        border-top: 1px solid @bgLgPrimaryColor !important;
    }

    .selected-comment {
        fill: @brandPrimary !important;
    }

    .comment-syntax-btn {
        border: 1px solid @textSecondaryColor !important;
        border-radius: 8px;
    }

    .commentArrowIcon:before {
        content: " ";
        height: 0;
        position: absolute;
        top: 50px;
        width: 0;
        z-index: 1;
        left: 6px;
        border: medium solid @bgLgPrimaryColor;
        border-width: 10px 10px 10px 0;
        border-color: transparent @bgLgPrimaryColor transparent transparent;
        transform: rotate(90deg);
    }

    .bg-color {
        background-color: @bgPrimaryColor;
    }

}

.text-primary {
    color: @brandPrimary;
    font-weight: bolder;
}

.btnPrimary {
    background: @brandPrimary !important;
    border-color: @brandPrimary !important;
}

.issue-name-input {
    .md-input {
        label {
            background: linear-gradient(to bottom, @bgDkPrimaryColor 50%, @bgPrimaryColor 50%) !important;
        }
    }
}

.newComment {
    border: 1px solid @bgLgPrimaryColor;

    .newCommentFooter {
        border-top: 1px solid @bgLgPrimaryColor;
    }
}

.issueBoard {
    .content-main {
        .boardOutline {
            .boardPanel {
                .boardContentPanel {
                    .boardContent {
                        background-color: @bgLgPrimaryColor;

                        .issueDetails {
                            background-color: @bgPrimaryColor;
                        }
                    }

                    .boardFooter {
                        background-color: @bgLgPrimaryColor;
                        border-top: solid thin @bgDkPrimaryColor;
                    }
                }
            }
        }
    }
}

#billingPlansMainDiv {
    .servicePanel {
        background-color: @bgLgPrimaryColor;
        border: 1px solid @bgDkPrimaryColor;

        .servicePanelBorder {
            border-bottom: 1px solid @bgDkPrimaryColor;
        }
    }

    .rzslider {
        .rz-pointer {
            background-color: darken(@brandPrimary, 10%);
        }

        .rz-pointer:after {
            background-color: darken(@brandPrimary, 25%);
        }

        .rz-bubble {
            color: @textPrimaryColor;

            .rz-limit {
                color: @textPrimaryColor;
            }
        }

        .rz-bar {
            background-color: @bgDkPrimaryColor;
        }

        .rz-selection {
            background-color: darken(@brandPrimary, 10%);
        }
    }
}

.multiForm {
    border: 1px solid @bgLgPrimaryColor;
}

.divBlockTest {
    border: 1px solid @bgLgPrimaryColor;
    padding: 15px;
}

.json-formatter-row, .json-formatter-row a, .json-formatter-row a:hover {
    color: @textPrimaryColor;
}

.typeFormInputAction {
    .clear-icon {
        svg {
            fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
        }
    }
}

.inputConfigModal, .formBuilderTabUI {
    .nav > li > a {
        color: @textPrimaryColor;
    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        color: @brandPrimary;
        background-color: @bgPrimaryColor;
    }

    .nav > li > a:hover, .nav > li > a:focus {
        background-color: @bgPrimaryColor;
    }

    .panel {
        border-color: @bgLgPrimaryColor;

        .panel-heading {
            border-color: @bgLgPrimaryColor;
        }

        .panel-body {
            background-color: @bgPrimaryColor;
        }
    }
}

.newTypeFormConfig {
    .formBuilderTabUI {
        .tab-content {
            border: 1px solid @bgLgPrimaryColor;
        }
    }

    .border-1px-solid {
        border: 1px solid @bgLgPrimaryColor;
    }

    .border-bottom-1px {
        border-bottom: 1px solid @bgLgPrimaryColor;
    }

    .drag-drop-div {
        border: 1px dashed @textSecondaryColor;
        background: @bgLgPrimaryColor;
    }
}

.projectRelationships {
    .panel {
        background: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;

        .panel-heading {
            background: @bgLgPrimaryColor;
            border-color: @bgLgPrimaryColor;
        }

        .panel-body {
            background: @bgPrimaryColor;
            border-radius: 0 0 4px 4px;
        }
    }

    .tf-tree li li:before {
        border-top: 2px solid @bgLgPrimaryColor;
    }

    .tf-tree .tf-nc:after, .tf-tree .tf-node-content:after, .tf-tree .tf-node-content:before {
        border-left: 2px solid @bgLgPrimaryColor;
    }

    .tf-tree .tf-nc:before {
        border-left: 2px solid @bgLgPrimaryColor;
    }

    .tf-nc:not(.root) a:before {
        border: 6px solid @bgLgPrimaryColor;
        border-color: @bgLgPrimaryColor transparent transparent transparent;
    }

    .border-top-1px {
        border-top: 1px solid @bgLgPrimaryColor;
    }
}

.graphRelationships {
    .panel {
        background: @bgPrimaryColor;
        border-color: @bgLgPrimaryColor;

        .panel-heading {
            background: @bgLgPrimaryColor;
            border-color: @bgLgPrimaryColor;
        }

        .panel-body {
            background: @bgPrimaryColor;
            border-radius: 0 0 4px 4px;
        }
    }

    .tf-tree li li:before {
        border-top: 2px solid @bgLgPrimaryColor;
    }

    .tf-tree .tf-nc:after, .tf-tree .tf-node-content:after, .tf-tree .tf-node-content:before {
        border-left: 2px solid @bgLgPrimaryColor;
    }

    .tf-tree .tf-nc:before {
        border-left: 2px solid @bgLgPrimaryColor;
    }

    .tf-nc:not(.root) a:before {
        border: 6px solid @bgLgPrimaryColor;
        border-color: @bgLgPrimaryColor transparent transparent transparent;
    }

    .border-top-1px {
        border-top: 1px solid @bgLgPrimaryColor;
    }

    .activeNode {
        border-left: 30px solid @brandPrimary !important;
    }

    .currentNode {
        color: @bgPrimaryColor !important;
    }
}

.newAdvancedSearchTable {
    th {
        background-color: @bgLgPrimaryColor;
    }
}

.customProjectDropdown {
    .label-header {
        background-color: @bgPrimaryColor !important;
        color: @brandPrimary;
    }

    .label-box {
        border: 1.5px solid @bgLgPrimaryColor;
    }

    .grayItalicValue {
        color: @textPrimaryColor !important;
    }
}

.xmlAuthInput {
    .CodeMirror {
        border: 1.5px solid @bgLgPrimaryColor;
        padding-top: 13px;
    }
}

.nodeNotesModal, .nodeMermaidEditorModal {
    .md-editor {
        border: 1px solid @bgLgPrimaryColor;
    }
}

.registerNode {
    .local-search-bar {
        .md-input {
            border-width: 1.5px;
        }

        .search-icon {
            svg {
                fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));;
            }
        }
    }

    .customInputDesign {
        border: 1.5px solid @bgLgPrimaryColor;

        .customLabel {
            background-color: @bgPrimaryColor !important;
        }
    }

    .io3-grid {
        border: 1.5px solid @bgLgPrimaryColor;
    }
}

.es4-script {
    border: 1.5px solid @bgLgPrimaryColor !important;
}

.documentation-app-text {
    color: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));;
}

.node-attributes-tab {
    .selected-chart-type {
        fill: @brandPrimary;
    }

    .border-1px {
        border: 1.5px solid @bgLgPrimaryColor !important;
    }

    .attr-list-div {
        border: 1.5px solid @bgDkPrimaryColor;
        background: @bgLgPrimaryColor;

        .panel-group {
            .panel {
                .panel-heading {
                    border-top: 1px solid @bgDkPrimaryColor !important;
                }
            }

            .panel-title .fa {
                color: darken(@bgDkPrimaryColor, 20%) !important;;
            }
        }
    }

    .local-search-bar {
        .md-input {
            border-width: 1.5px;
        }

        .search-icon {
            svg {
                fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));;
            }
        }
    }

    .node-attribute-date-range {
        .dateRangeLabel {
            color: darken(@brandPrimary, 5%);
            background-color: @bgPrimaryColor;
        }

        .caret {
            color: @textPrimaryColor;
        }
    }

    .customChartsLabel {
        color: darken(@brandPrimary, 5%);
        background-color: @bgPrimaryColor;
    }
}

.documentation, .iot3NodeMainContent {
    .local-search-bar {
        .search-icon {
            svg {
                fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));;
            }
        }
    }
}

.script-dropdown {
    .v4-primary-button {
        border: 1px solid @brandPrimary !important;
        border-left: 0px !important;
    }

    .caret {
        color: @brandPrimary !important;
    }
}

.create-software-dropzone {
    border: 1.5px dashed @bgLgPrimaryColor !important;

    .dropActive {
        background-color: @bgLgPrimaryColor !important;
    }
}

#sidebar-resizer {
    background-color: @bgLgPrimaryColor;
}

.extractedDataContent {
    textarea {
        color: @textSecondaryColor;
        background-color: @bgLgPrimaryColor;
    }
}

.node-graph-tab {
    .mermaid {
        .label-container {
            stroke: @textPrimaryColor !important;
        }

        .path {
            stroke: @textPrimaryColor !important;
        }

        .arrowheadPath {
            fill: @textPrimaryColor !important;
        }
    }
}

.updateIoT3Modal {
    .box-border {
        border: 1.5px solid @bgLgPrimaryColor !important;
    }
}

.textAreaStyle {
    background-color: transparent;
    color: @textSecondaryColor;
}

.insight-query-editor {
    .border-1px {
        border: 1.5px solid @bgLgPrimaryColor !important;
    }

    .custom-label {
        color: darken(@brandPrimary, 5%) !important;
        background-color: @bgPrimaryColor !important;
    }
}

.add-new-query-editor-icon {
    .editor-icon {
        fill: contrast(@bgPrimaryColor, lighten(@bgPrimaryColor, 10%), darken(@bgPrimaryColor, 20%));
    }
}

.grid-stack-item-content {
    background-color: fade(@bgLgPrimaryColor, 40%) !important;
}

.insight-dashboards-preview {
    .border-1px {
        border: 1.5px solid @bgLgPrimaryColor !important;
    }
}

.passwordStrength {
    border: 1px solid @bgLgPrimaryColor !important;
    background: @bgLgPrimaryColor !important;
}

.action-btn {
    border: 1.5px solid @brandPrimary;
}

.insight-service-dashboards {
    .grid-stack-item-content {
        background: @previewBgColor !important;
    }

    .dashboard-panel-chart-widget {
        background-color: fade(@bgLgPrimaryColor, 40%) !important;
    }
}

.alarm-history-date-range {
    .dateRangeLabel {
        color: darken(@brandPrimary, 5%);
        background-color: @bgPrimaryColor;
    }

    .caret {
        color: @textPrimaryColor;
    }

    .border-1px {
        border: 1.5px solid @bgLgPrimaryColor !important;
    }
}

.issue-detail-page {
    .vertical-comment-view {
        .message-inner {
            background: @bgPrimaryColor !important;
            border: 1px solid @bgPrimaryColor !important;
        }

        .message-item .message-inner:after,
        .message-first .message-inner:after {
            border-right: unset !important;
        }

        .message-item .message-inner:before,
        .message-first .message-inner:before {
            border-right: unset !important;
        }

        .qa-message-content {
            background: @bgPrimaryColor !important;
        }

        .sub-comment-container:before {
            background: @bgLgPrimaryColor;
        }

        .qa-message-footer {
            background: @bgPrimaryColor !important;
            border: 1px solid @bgLgPrimaryColor !important;
        }
    }
}