@media (min-width:576px) and (max-width:767.98px) {

    :root,
    body,
    html {
        font-size: 2vw
    }
}

@media (min-width:768px) and (max-width:991.98px) {

    :root,
    body,
    html {
        font-size: 1.6vw
    }
}

@media (min-width:992px) and (max-width:1199.98px) {

    :root,
    body,
    html {
        font-size: 1.4vw
    }
}

@media (min-width:1200px) and (max-width:1399.98px) {

    :root,
    body,
    html {
        font-size: 1.2vw
    }
}

@media (min-width:1400px) {
    :root {
        font-size: 1vw
    }
}

:root {
    --primary-color: #626ed4 !important;
    --primary-color-rgb: 98, 110, 212;
    --secondary-color: #724eaa !important;
    --dark-primary-color: #4e58aa;
    --dark-bg-color: #2e3648 !important;
    --dark-bg-80: #2e364880 !important;
    --dark-bg-transparent: #2e364820 !important;
    --light-primary-color: #e8eaf9 !important;
    --light-grid-row-odd-color: #f8f9fa !important
}

:root {
    --bs-body-font-size: 14px;
    --light-bg-color: #ececf1 !important;
    --light-bg-color-75: #ececf175 !important;
    --light-bg-color-50: #ececf150 !important;
    --light-bg-color-25: #ececf125 !important;
    --light-bg-color-20: #ececf120 !important;
    --bs-body-color: #5b626b !important;
    --bs-body-color-2: #999999 !important;
    --bs-white-color: #ffffff !important;
    --bs-white-color-50: #ffffff50 !important;
    --bs-body-bg: #f8f8fa !important;
    --primary-color-80: rgba(var(--primary-color-rgb), 0.8);
    --primary-color-50: rgba(var(--primary-color-rgb), 0.5);
    --primary-color-30: rgba(var(--primary-color-rgb), 0.3);
    --primary-color-20: rgba(var(--primary-color-rgb), 0.2);
    --primary-color-10: rgba(var(--primary-color-rgb), 0.1);
    --bs-font-sans-serif: "Roboto", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-color-red: #ec4561;
    --bs-color-green: #02a499;
    --bs-color-light-green: #4dbfb7;
    --bs-color-yellow: #f8b425;
    --bs-color-yellow-light: #ffd400;
    --bs-color-blue: #38a4f8;
    --bs-color-light-blue: #87c8fa;
    --bs-color-orange: #f1734f;
    --bs-primary-rgb: var(--primary-color-rgb) !important;
    --bs-color-purpule: #b54fc9;
    --bs-color-red-20: #ec456120;
    --bs-color-green-20: #02a49920;
    --bs-color-yellow-20: #f8b42520
}

.flat.platform .module-wrapper .menu-tile.app-tile,
.flat.platform .modules-section .menu-tile.module {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 130px !important;
    margin: 10px 0;
    padding: 10px 0 !important;
    border-radius: .25rem !important;
    cursor: pointer;
    background: var(--primary-color) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    transition: all .3s ease-in-out
}

    .flat.platform .module-wrapper .menu-tile.app-tile h3 {
        height: 30px
    }

    .flat.platform .module-wrapper .menu-tile.app-tile:hover,
    .flat.platform .modules-section .menu-tile.module:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
        background: var(--dark-primary-color) !important
    }

    .flat.platform .module-wrapper .menu-tile.app-tile i,
    .flat.platform .modules-section .menu-tile.module i {
        font-size: 32px;
        line-height: 32px;
        color: #fff;
        width: 36px;
        height: 36px
    }

    .flat.platform .modules-section .menu-tile.module h3 {
        margin-left: 0;
        text-align: center;
        font-size: 18px;
        font-weight: 500
    }

.flat.platform.multicolor .module-wrapper:nth-child(7n+1) .menu-tile.app-tile {
    background: #3e979b !important
}

.flat.platform.multicolor .module-wrapper:nth-child(7n+2) .menu-tile.app-tile {
    background: #4a9ccc !important
}

.flat.platform.multicolor .module-wrapper:nth-child(7n+3) .menu-tile.app-tile {
    background: #4a7eb8 !important
}

.flat.platform.multicolor .module-wrapper:nth-child(7n+4) .menu-tile.app-tile {
    background: #daad46 !important
}

.flat.platform.multicolor .module-wrapper:nth-child(7n+5) .menu-tile.app-tile {
    background: #6db464 !important
}

.flat.platform.multicolor .module-wrapper:nth-child(7n+6) .menu-tile.app-tile {
    background: #5e5491 !important
}

.flat.platform.multicolor .module-wrapper:nth-child(7n+7) .menu-tile.app-tile {
    background: #056b91 !important
}

.flat.platform.multicolor .metismenu > li:nth-child(7n+1) {
    background: #3e979b
}

.flat.platform.multicolor .metismenu > li:nth-child(7n+2) {
    background: #4a9ccc
}

.flat.platform.multicolor .metismenu > li:nth-child(7n+3) {
    background: #4a7eb8
}

.flat.platform.multicolor .metismenu > li:nth-child(7n+4) {
    background: #daad46
}

.flat.platform.multicolor .metismenu > li:nth-child(7n+5) {
    background: #6db464
}

.flat.platform.multicolor .metismenu > li:nth-child(7n+6) {
    background: #5e5491
}

.flat.platform.multicolor .metismenu > li:nth-child(7n+7) {
    background: #056b91
}

body[data-sidebar=dark].flat.platform.multicolor .navbar-brand-box {
    background: #056b91
}

.flat.platform.multicolor {
    --primary-color: #056b91 !important
}

body[data-sidebar=dark].flat.platform.multicolor #sidebar-menu ul li a:hover {
    background: var(--bs-gradient) !important
}

.flat.platform.multicolor #sidebar-menu ul li ul.sub-menu {
    background: var(--light-bg-color) !important
}

body[data-sidebar=dark].flat.platform.multicolor #sidebar-menu ul li ul.sub-menu li a {
    color: var(--bs-body-color)
}

body[data-sidebar=dark].flat.platform.multicolor #sidebar-menu ul li ul.sub-menu li.mm-active > a,
body[data-sidebar=dark].flat.platform.multicolor li.mm-active > a {
    background: var(--bs-gradient) !important
}

:root {
    scrollbar-color: var(--primary-color-30) var(--light-bg-color) !important;
    scrollbar-width: thin
}

::-webkit-scrollbar-track {
    background: var(--light-bg-color) !important
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color-30) !important
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color-50) !important
    }

input[type=range] {
    overflow: hidden;
    width: 120px;
    -webkit-appearance: none;
    background-color: #dee2e6
}

    input[type=range]::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: var(--primary-color);
        margin-top: -1px
    }

    input[type=range]::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: ew-resize;
        background: var(--primary-color);
        box-shadow: -80px 0 0 80px var(--primary-color-30)
    }

    input[type=range]::-moz-range-progress {
        background-color: var(--primary-color-30)
    }

    input[type=range]::-moz-range-track {
        background-color: var(--primary-color-30)
    }

    input[type=range]::-ms-fill-lower {
        background-color: var(--primary-color-30)
    }

    input[type=range]::-ms-fill-upper {
        background-color: var(--primary-color-30)
    }

body.flat.platform {
    margin: 0;
    font-family: var(--bs-body-font-family) !important;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

.flat.platform .main-content {
    overflow: clip !important
}

.text-color-red {
    color: var(--bs-color-red)
}

.text-color-green {
    color: var(--bs-color-green)
}

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

.icon-dir-size {
    font-size: 16px
}

.flat.platform .bg-primary {
    background-color: var(--primary-color) !important
}

.gear-text {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: var(--bs-body-color)
}

#sidebar-menu ul li ul.sub-menu {
    background: rgba(0, 0, 0, .3)
}

    #sidebar-menu ul li ul.sub-menu li a {
        font-size: 13px;
        padding: .4rem .4rem .4rem 1.6rem;
        cursor: pointer
    }

    #sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
        padding: .4rem 1.5rem .4rem 2.8rem;
        font-size: 13px
    }

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    padding: 8px 10px
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span {
    padding-left: 64px !important
}

@keyframes blink {
    50% {
        color: transparent
    }
}

.gear-text span {
    animation: 1s blink infinite;
    font-size: 24px;
    padding-left: 2px;
    line-height: 16px
}

    .gear-text span:nth-child(2) {
        animation-delay: 250ms
    }

    .gear-text span:nth-child(3) {
        animation-delay: .5s
    }

vr-actionbar .action-bar {
    background-color: var(--light-primary-color) !important
}

.flat.platform .row-main-content:has(.vr-datagrid-datacells-click).row-expandable-column-spacer,
.flat.platform .vr-datagrid-datacells-click,
.flat.platform .vr-datagrid-datacells-click .vr-datagrid-cell-container {
    background-color: var(--light-primary-color) !important
}

.flat.platform .main-content .vr-datagrid-header-simple {
    background: var(--primary-color) !important;
    font-weight: 500
}

.flat.platform .vr-remote-footer.vr-datagrid-header-simple {
    background: var(--light-primary-color) !important
}

.flat.platform .vr-pager-container .vr-dropdown-select.btn {
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 4px !important;
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 3px !important
}

    .flat.platform .vr-pager-container .vr-dropdown-select.btn:hover {
        background-color: var(--secondary-color) !important
    }

.flat.platform .vr-pager-container .vr-control-label {
    margin: 0 4px !important
}

.flat.platform .vr-datagrid[alternative-color=true] .row-main-content {
    border-color: var(--light-bg-color) !important
}

.flat.platform .vr-datagrid[alternative-color=true] .vr-datagrid-body-odd {
    background: var(--light-bg-color-50) !important
}

.flat.platform .vr-datagrid[vertical-line="true"] .vr-datagrid-cell-container {
    border-right: 1px solid rgb(208, 208, 208);
    margin: unset;
    padding: unset;
}

.flat.platform .vr-datagrid[alternative-color] .vr-datagrid-body > div:first-of-type:hover {
    background: var(--primary-color-20) !important
}

.flat.platform .vr-datagrid[alternative-color] .vr-datagrid-body.row-full-screen > div:first-of-type:hover {
    background: var(--light-bg-color) !important
}

.flat.platform .grid-expand-collapse-icon {
    width: 25px;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    left: auto;
    top: auto;
    font-size: 20px
}

.flat.platform .vr-grid-menu-box {
    width: 20px;
    display: flex;
    font-size: 14px !important;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-bg-color) !important;
    width: 20px
}

    .flat.platform .vr-fullscreen.glyphicon-fullscreen,
    .flat.platform .vr-grid-menu-box .glyphicon-cog {
        font-family: themify !important;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        top: 0;
        left: 0;
        font-size: 12px !important
    }

        .flat.platform .vr-fullscreen.glyphicon-fullscreen:before {
            content: "\e659" !important
        }

        .flat.platform .vr-grid-menu-box .glyphicon-cog:before {
            content: "\e60f" !important
        }

.flat.platform .row-header-container {
    height: 32px;
    width: 100% !important;
    padding: 0;
    border: none;
    margin: 0;
    background: 0 0 !important;
    background-image: none !important
}

    .flat.platform .row-header-container.normal-row-header > div.part {
        padding: 0
    }

    .flat.platform .row-header-container .btn-breadcrumb .btn {
        background: var(--primary-color) !important;
        color: #fff;
        border: transparent;
        height: 32px;
        line-height: 32px;
        padding: 0 12px 0 24px;
        margin-left: 0;
        top: 0;
        font-size: 12px !important
    }

.flat.platform .btn-breadcrumb .btn:after {
    content: " ";
    display: block !important;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid var(--primary-color) !important;
    position: absolute;
    top: 0;
    margin-top: 0;
    left: 100%;
    z-index: 2
}

.flat.platform .btn-breadcrumb .btn:before {
    content: " ";
    display: block !important;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid var(--dark-bg-color) !important;
    position: absolute;
    top: 0;
    margin-top: 0;
    margin-left: 1px;
    left: 100%;
    z-index: 1
}

.flat.platform .btn-breadcrumb.btn-group > .btn:hover {
    z-index: unset
}

.flat.platform .vr-datagrid-body {
    border-bottom: 1px solid var(--light-bg-color) !important;
}

.flat.platform .vr-datagrid .vr-datagrid-body.row-full-screen .row-main-content.expanded.vr-datagrid-row {
    display: flex;
    width: 100% !important;
    flex: 1 1 1px;
    flex-direction: column;
    border: 1px solid var(--light-bg-color) !important;
    padding: 10px;
    margin: 0
}

    .flat.platform .vr-datagrid .vr-datagrid-body.row-full-screen .row-main-content.expanded .vr-datagrid-row.transparent-border {
        border: 1px solid transparent !important
    }

        .flat.platform .vr-datagrid .vr-datagrid-body.row-full-screen .row-main-content.expanded .vr-datagrid-row.transparent-border .vr-detail-summary-custom {
            padding: 0 !important
        }

.flat.platform .vr-datarow-breadcrumb {
    left: 0 !important;
    display: flex;
    flex-wrap: nowrap
}

.flat.platform .field-container .field-value .vr-control-label,
.flat.platform vr-label-dynamic[isvalue] .vr-control-label,
.flat.platform vr-label[isvalue] .vr-control-label {
    font-weight: 700 !important;
    color: var(--primary-color) !important
}

.flat.platform .vr-bars:after {
    display: none
}

.flat.platform .vr-loader-container {
    padding: 4px;
    width: 80px;
    height: 20px;
    z-index: 99;
    margin: 0 auto
}

.flat.platform .vr-bars {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
    animation: platform-bars 1s linear alternate infinite;
    margin: -6px auto 0;
    box-shadow: none;
    opacity: 1
}

@keyframes platform-bars {
    0% {
        box-shadow: -24px 10px 0 2px var(--primary-color), -12px 10px 0 0 var(--primary-color-20), 0 10px 0 0 var(--primary-color-20), 12px 10px 0 0 var(--primary-color-20), 24px 10px 0 0 var(--primary-color-20)
    }

    25% {
        box-shadow: -24px 10px 0 0 var(--primary-color-20), -12px 10px 0 2px var(--primary-color), 0 10px 0 0 var(--primary-color-20), 12px 10px 0 0 var(--primary-color-20), 24px 10px 0 0 var(--primary-color-20)
    }

    50% {
        box-shadow: -24px 10px 0 0 var(--primary-color-20), -12px 10px 0 0 var(--primary-color-20), 0 10px 0 2px var(--primary-color), 12px 10px 0 0 var(--primary-color-20), 24px 10px 0 0 var(--primary-color-20)
    }

    75% {
        box-shadow: -24px 10px 0 0 var(--primary-color-20), -12px 10px 0 0 var(--primary-color-20), 0 10px 0 0 var(--primary-color-20), 12px 10px 0 2px var(--primary-color), 24px 10px 0 0 var(--primary-color-20)
    }

    100% {
        box-shadow: -24px 10px 0 0 var(--primary-color-20), -12px 10px 0 0 var(--primary-color-20), 0 10px 0 0 var(--primary-color-20), 12px 10px 0 0 var(--primary-color-20), 24px 10px 0 2px var(--primary-color)
    }
}


body[data-sidebar=dark].flat.platform #sidebar-menu ul li ul.sub-menu li.mm-active > a,
body[data-sidebar=dark].flat.platform #sidebar-menu ul li ul.sub-menu li[classname="mm-active"] > a,
body[data-sidebar=dark].flat.platform li.mm-active > a,
body[data-sidebar=dark].flat.platform li[classname="mm-active"] > a {
    background-color: var(--dark-primary-color);
    color: #fff;
}

.flat.platform .jstree-default .jstree-themeicon,
.jstree-default .jstree-no-dots .jstree-ocl {
    font-family: themify !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    background: 0 0 !important;
    color: var(--primary-color) !important
}

    .flat.platform .jstree-default .jstree-themeicon:before {
        content: "\e6a3" !important
    }

    .flat.platform .jstree-default .jstree-themeicon.jstree-themeicon-custom:before {
        content: "\e6a4" !important
    }

.flat.platform .jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl:before {
    content: "\e64b" !important
}

.flat.platform .jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl:before {
    content: "\e649" !important
}

.flat.platform .vr-datagrid .vr-expandable-row-template {
    margin-bottom: 0;
    padding: 0 !important;
    border: none !important
}

.flat.platform .row-header-container .inline-btn button,
.flat.platform .row-header-container vr-button[inline-btn] button,
.flat.platform .vr-row-action-container .inline-btn button,
.flat.platform .vr-row-action-container vr-button[inline-btn] button {
    color: var(--bs-white-color) !important;
    background-color: var(--primary-color) !important;
    border-radius: .2rem !important
}

.flat.platform .inline-btn button,
.flat.platform vr-button[inline-btn] button {
    color: var(--bs-white-color) !important;
    background-color: var(--primary-color) !important;
    border-radius: .2rem !important
}

.flat.platform .row-header-container .inline-btn button:hover,
.flat.platform .row-header-container vr-button[inline-btn] button:hover,
.flat.platform .vr-row-action-container .inline-btn button:hover,
.flat.platform .vr-row-action-container vr-button[inline-btn] button:hover {
    background-color: var(--primary-color-50) !important;
    transform: scale(1);
    text-shadow: none
}

.flat.platform .row-header-container .inline-btn button.btn-red {
    background-color: var(--bs-color-red) !important
}

.flat.platform vr-button .button-loader {
    margin-left: 4px
}

.flat.platform .loader-button {
    color: var(--primary-color) !important;
    font-size: 32px;
    width: 32px;
    height: 32px;
    line-height: 32px
}

.flat.platform .modal-content {
    border-radius: .25rem .25rem 0 0 !important
}

.flat.platform .vr-modal-header,
.flat.platform .vr-modal-header-inback {
    height: 40px;
    padding: 0 10px !important;
    background-color: var(--dark-bg-color) !important;
    border-radius: .25rem .25rem 0 0 !important;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between
}

.flat.platform div.modal .vr-modal-header-inback {
    background-color: var(--dark-bg-80) !important
}

.flat.platform div.modal:last-of-type .vr-modal-header-inback {
    background-color: var(--dark-bg-color) !important
}

.flat.platform .modal-content .vr-modal-inner-title {
    color: var(--primary-color) !important;
    font-size: 18px
}

.flat.platform .modal-header .close,
.flat.platform .modal-header .expand {
    background: 0 0;
    color: var(--bs-white-color);
    text-shadow: none;
    height: 40px;
    width: 32px;
    line-height: 40px;
    border-radius: 0;
    margin: 0 auto;
    text-align: center
}

    .flat.platform .modal-header .close > span,
    .flat.platform .modal-header .expand > span {
        font-family: themify !important;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        font-size: 18px;
        top: 0;
        line-height: 40px
    }

    .flat.platform .modal-header .close:hover > span,
    .flat.platform .modal-header .expand:hover > span {
        transform: scale(1.3);
        transition: .5s ease-in-out
    }

    .flat.platform .modal-header .close > span:before {
        content: "\e646"
    }

    .flat.platform .modal-header .expand > span:before {
        content: "\e659"
    }

.flat.platform .vr-grid-menu li a,
.flat.platform .vr-grid-menu li.vr-grid-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.flat.platform .vr-grid-menu li a {
    color: var(--bs-body-color);
    line-height: 16px
}

.flat.platform .action-bar .btn {
    color: var(--dark-bg-color) !important;
    background-color: var(--primary-color-10) !important
}

    .flat.platform .action-bar .btn:focus,
    .flat.platform .action-bar .btn:hover {
        background-color: var(--primary-color-20) !important
    }

.flat.platform .action-bar .btncustom:disabled {
    background-color: var(--bs-white-color-50) !important
}

.flat.platform .offcanvas .offcanvas-body .fieldset-vr .panel-body {
    padding: 5px 15px
}

.flat.platform .offcanvas .offcanvas-body .fieldset-vr > .panel-heading .title {
    font-size: 14px;
    color: var(--primary-color) !important
}

.flat.platform #page-topbar button.btn i {
    font-size: 1.2rem !important;
    line-height: 25px
}

.flat.platform #page-topbar .vr-dateclock-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 10px 0 0
}

.flat.platform #page-topbar .vr-clock-container,
.flat.platform #page-topbar .vr-date-container {
    line-height: 18px !important;
    font-size: 11px !important
}

.flat.platform #page-topbar .vr-date-container {
    white-space: nowrap
}

    .flat.platform #page-topbar .vr-date-container:after {
        content: "|";
        padding: 0 10px
    }

.flat.platform #page-topbar .vr-dateclock-item .vr-clock-container,
.flat.platform #page-topbar .vr-dateclock-item .vr-clock-container .vr-clock-item,
.flat.platform #page-topbar .vr-dateclock-item .vr-date-container {
    color: var(--bs-body-color) !important;
    font-weight: 500;
    top: unset !important;
    font-size: 11px
}

.flat.platform .configuration-editor-widget,
.flat.platform .personalization-widget .widget-button,
.flat.platform .personalization-widget .widget-header,
.flat.platform .personalization-widget:hover .widget-body .widget-button {
    background: var(--primary-color)
}

    .flat.platform .personalization-widget:hover .widget-body .widget-button:hover {
        background: var(--dark-primary-color)
    }

.flat.platform .btn-label.mdi:before {
    padding-left: 2px
}

.flat.platform vr-section > div.vr-normal-panel > div.panel-body {
    display: flow-root;
    background-color: var(--light-bg-color-40) !important;
    padding: 10px 0
}

.flat.platform .pagination > .active > a:focus,
.flat.platform .pagination > .active > a:hover,
.flat.platform .pagination > .active > span,
.flat.platform .pagination > .active > span:focus,
.flat.platform .pagination > .active > span:hover,
.flat.platform .vr-custom-pagination > .active > a {
    background-color: var(--primary-color) !important;
    border-radius: 3px !important
}

.flat.platform .vr-pagination-size-container {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row
}

.flat.platform .vr-pagination-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row
}

.flat.platform .vr-pagination-info {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row
}

.flat.platform .vr-datagrid-header-simple {
    background: var(--primary-color) !important
}

    .flat.platform .vr-datagrid-header-simple .vr-datagrid-header-cell {
        padding: 0 6px 0 6px;
        line-height: normal
    }

    .flat.platform .vr-datagrid-header-simple .vr-datagrid-celltext {
        line-height: normal
    }

.flat.platform .stage .add-icon {
    color: var(--bs-color-green) !important
}

.flat.platform .remove-div-icon {
    color: var(--bs-color-red) !important
}

.flat.platform .vr-tabs-expander {
    line-height: 30px;
    top: unset !important
}

.flat.platform vr-tabs .tab-validation-sign {
    color: var(--bs-color-red) !important;
    top: 4px;
    font-size: 14px;
    right: 4px;
    left: unset
}

.flat.platform .vr-be-selectentity span {
    font-size: 13px;
    background: var(--primary-color) !important;
    color: #fff
}

    .flat.platform .vr-be-selectentity span:hover {
        background: var(--secondary-color) !important;
        text-decoration: none
    }

.flat.platform .form-control:focus-visible,
.flat.platform .form-control:hover,
.flat.platform vr-select .open-select .vr-dropdown-select.btn,
.flat.platform vr-select .vr-dropdown-select.btn:focus,
.flat.platform vr-select .vr-dropdown-select.btn:hover {
    color: var(--primary-color);
    background-color: var(--bs-white-color);
    border-color: var(--primary-color);
    opacity: 1
}

.flat.platform .vr-datagrid-celltext vr-select .dropdown-container2 {
    height: 21px
}

.flat.platform .vr-normal-panel.panel-vr.card {
    margin-bottom: 1.5rem;
    -webkit-box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    border-radius: 0;
    margin: 0 0 1rem 0
}

    .flat.platform .vr-normal-panel.panel-vr.card > .panel-heading.card-header {
        margin-bottom: 0;
        background: var(--dark-bg-color) !important;
        border-bottom: 0 solid var(--bs-body-bg) !important;
        color: var(--bs-white-color) !important;
        border-radius: 0 !important;
        top: unset;
        height: 30px;
        line-height: 30px
    }

        .flat.platform .vr-normal-panel.panel-vr.card > .panel-heading.card-header.header-primary {
            background: var(--primary-color) !important;
            border-bottom: 0 solid var(--primary-color) !important
        }

        .flat.platform .vr-normal-panel.panel-vr.card > .panel-heading.card-header .card-title,
        .flat.platform .vr-normal-panel.panel-vr.card > .panel-heading.card-header label {
            color: var(--bs-white-color) !important;
            padding: 0;
            margin-bottom: 0;
            font-size: .75rem;
            line-height: 29px;
            font-weight: 700;
            text-transform: uppercase;
            width: 100%
        }

.flat.platform vr-section[usecardlayout=true] > .vr-normal-panel.panel-vr.card {
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    border-radius: 0;
    margin: 0 0 1rem 0
}

    .flat.platform vr-section[usecardlayout=true] > .vr-normal-panel.panel-vr.card > .panel-heading.card-header {
        padding: unset;
        margin-bottom: 0;
        background: var(--dark-bg-color) !important;
        border-bottom: 0 solid var(--bs-body-bg) !important;
        color: var(--bs-white-color) !important;
        border-radius: 0 !important;
        top: unset;
        height: unset;
        line-height: unset
    }

.flat.platform vr-section[usecardlayout=true][collapsible] > .vr-normal-panel.panel-vr.card > .panel-heading.card-header {
    padding: 0 !important
}

.flat.platform vr-section[usecardlayout=true] > .vr-normal-panel.panel-vr.card > .panel-heading.card-header .card-title,
.flat.platform vr-section[usecardlayout=true] > .vr-normal-panel.panel-vr.card > .panel-heading.card-header label {
    color: var(--bs-white-color) !important
}

.flat.platform vr-directivetabs[usecardlayout=true] vr-tabs {
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    border-radius: .25rem .25rem 0 0;
    margin: 0 0 1rem 0
}

.flat.platform .vr-light-panel.panel-vr.card {
    margin-bottom: 1.5rem;
    box-shadow: none;
    border-radius: 0;
    margin: 0 0 .5rem 0;
}

    .flat.platform .vr-light-panel.panel-vr.card > .panel-heading.card-header {
        margin-bottom: 0;
        background: var(--light-primary-color) !important;
        color: var(--primary-color) !important;
        border-radius: 0 !important;
        top: unset;
        height: 30px;
        line-height: 29px;
        line-height: unset;
        border: none
    }

        .flat.platform .vr-light-panel.panel-vr.card > .panel-heading.card-header .card-title,
        .flat.platform .vr-light-panel.panel-vr.card > .panel-heading.card-header label {
            color: var(--primary-color) !important;
            padding: 0;
            margin-bottom: 0;
            font-size: .75rem;
            line-height: 29px;
            font-weight: 700;
            text-transform: uppercase;
            width: 100%
        }

    .flat.platform .vr-light-panel.panel-vr.card.big-header-panel,
    .flat.platform .vr-light-panel.panel-vr.card.small-header-panel {
        padding: 0 !important;
        border: none !important
    }

        .flat.platform .vr-light-panel.panel-vr.card.big-header-panel .vr-datagrid-cell,
        .flat.platform .vr-light-panel.panel-vr.card.big-header-panel .vr-datagrid-header-cell,
        .flat.platform .vr-light-panel.panel-vr.card.small-header-panel .vr-datagrid-cell,
        .flat.platform .vr-light-panel.panel-vr.card.small-header-panel .vr-datagrid-header-cell {
            padding: 0 10px !important
        }

        .flat.platform .vr-light-panel.panel-vr.card.big-header-panel .panel-heading.card-header {
            height: 50px;
            line-height: 50px
        }

        .flat.platform .vr-light-panel.panel-vr.card.big-header-panel .panel-body.vr-threesixty-card,
        .flat.platform .vr-light-panel.panel-vr.card.small-header-panel .panel-body.vr-threesixty-card {
            margin: 0 !important;
            padding: 0 !important
        }



        .flat.platform .vr-light-panel.panel-vr.card.big-header-panel > .panel-heading.card-header .card-icon-container .card-icon {
            font-size: 18px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            background: var(--primary-color-10)
        }



.flat.platform .vr-normal-panel.panel-vr.card > .panel-heading.card-header .card-title .title-element {
    padding-left: 10px
}

.flat.platform .stages-group {
    margin: 10px
}

.flat.platform .normal-full-screen .stages-group {
    margin: 10px 0
}

.flat.platform .stages-group .stage-item.stage-regular-done {
    color: #fff;
    background-color: var(--bs-color-green) !important
}

    .flat.platform .stages-group .stage-item.stage-regular-done:after {
        border-left: 10px solid var(--bs-color-green) !important
    }

.flat.platform .stages-group .stage-item.stage-regular-current {
    color: #fff;
    background-color: var(--bs-color-yellow) !important
}

    .flat.platform .stages-group .stage-item.stage-regular-current:after {
        border-left: 10px solid var(--bs-color-yellow) !important
    }

.flat.platform .stages-group .stage-item.stage-regular-reconsider {
    color: #fff;
    background-color: var(--bs-color-orange) !important
}

    .flat.platform .stages-group .stage-item.stage-regular-reconsider:after {
        border-left: 10px solid var(--bs-color-orange) !important
    }

.flat.platform .stages-group .stage-item {
    background-color: var(--light-primary-color) !important
}

    .flat.platform .stages-group .stage-item.post-group .inner-group,
    .flat.platform .stages-group .stage-item.pre-group .inner-group {
        border: 1px solid var(--light-primary-color) !important
    }

    .flat.platform .stages-group .stage-item:before {
        border-left: 10px solid var(--bs-white-color) !important
    }

    .flat.platform .stages-group .stage-item:after {
        border-left: 10px solid var(--light-primary-color) !important
    }

.stages-group .stage-item.post-group .group-expander,
.stages-group .stage-item.pre-group .group-expander {
    border-top-color: var(--light-primary-color) !important
}

.stages-group .stage-item.post-group.stage-regular-done .group-expander,
.stages-group .stage-item.pre-group.stage-regular-done .group-expander {
    border-top-color: var(--bs-color-green) !important
}

.stages-group .stage-item.post-group.stage-regular-current .group-expander,
.stages-group .stage-item.pre-group.stage-regular-current .group-expander {
    border-top-color: var(--bs-color-yellow) !important
}

.stages-group .stage-item.post-group.stage-regular-reconsider .group-expander,
.stages-group .stage-item.pre-group.stage-regular-reconsider .group-expander {
    border-top-color: var(--bs-color-orange) !important
}

.stages-group .stage-item.post-group.stage-regular-reconsider .group-expander,
.stages-group .stage-item.pre-group.stage-regular-reconsider .group-expander {
    border-top-color: var(--bs-color-orange) !important
}

.stage-item.inner-group-container.post-group .stage-item:first-child:before,
.stage-item.inner-group-container.pre-group .stage-item:last-child:after {
    border: none !important
}

.flat.platform .vr-datagrid-body grid-row-action.bottom-row-action {
    font-size: 16px;
    padding: 0 10px;
    margin: 0
}

    .flat.platform .vr-datagrid-body grid-row-action.bottom-row-action .mdi-chevron-up {
        display: none
    }

    .flat.platform .vr-datagrid-body grid-row-action.bottom-row-action:hover .mdi-chevron-down {
        display: none
    }

    .flat.platform .vr-datagrid-body grid-row-action.bottom-row-action:hover .mdi-chevron-up {
        display: block
    }

    .flat.platform .vr-datagrid-body grid-row-action.bottom-row-action .action-full-screen-icon.inline-btn button {
        color: var(--bs-white-color) !important;
        background: var(--primary-color) !important;
        border-radius: .2rem !important
    }

        .flat.platform .vr-datagrid-body grid-row-action.bottom-row-action .action-full-screen-icon.inline-btn button:hover {
            background: var(--dark-primary-color) !important
        }

.flat.platform .stages-group .stage-item.pre-group {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: -2px -3px 0 var(--light-bg-color), -4px -6px 0 var(--light-bg-color-75), -6px -9px 0 var(--light-bg-color-50), -8px -12px 0 var(--light-bg-color-25)
}

.flat.platform .stages-group .stage-item.post-group {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 2px -3px 0 var(--light-bg-color), 4px -6px 0 var(--light-bg-color-75), 6px -9px 0 var(--light-bg-color-50), 8px -12px 0 var(--light-bg-color-25)
}

.flat.platform .vr-datagrid {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--light-primary-color)
}

.flat.platform vr-tabs[flat] vr-row[tabcontent=true] > .row {
    margin: 0 !important
}

.flat.platform vr-tab vr-columns[tabs=true] .highcharts-container,
.flat.platform vr-tab vr-columns[tabs=true] .highcharts-container .highcharts-root {
    max-width: 100% !important
}

.flat.platform vr-tabs[flat] vr-tab-header-link label {
    border-bottom: 3px var(--light-bg-color) solid !important;
    color: var(--bs-body-color) !important;
    font-weight: 500;
    padding: 0 !important
}

.flat.platform vr-tabs[flat] .vr-tabs label.clicked-btn,
.flat.platform vr-tabs[flat] .vr-tabs label:hover {
    border-bottom: 3px var(--primary-color) solid !important;
    color: var(--primary-color) !important;
    padding: 0 !important;
    font-weight: 500
}

body[data-sidebar=dark].flat.platform #sidebar-menu ul li a {
    position: relative;
    line-height: 20px
}

    body[data-sidebar=dark].flat.platform #sidebar-menu ul li a:hover {
        background: var(--primary-color) !important
    }

    body[data-sidebar=dark].flat.platform #sidebar-menu ul li a i {
        font-size: 1rem !important
    }

    body[data-sidebar=dark].flat.platform #sidebar-menu ul li a:hover i {
        transform: translate(4px, 0)
    }

    body[data-sidebar=dark].flat.platform #sidebar-menu ul li a span {
        padding-left: 4px
    }

.flat.platform.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
    padding: 12px 13px !important
}

    .flat.platform.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i {
        font-size: 1.2rem !important;
        margin: 0 !important;
        transform: translate(6px, 0);
        text-align: center
    }

    .flat.platform.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a:hover i {
        transform: translate(10px, 0)
    }

.flat.platform .vr-text-filter-type .filter-type-header.mdi {
    font-size: 16px;
    color: var(--primary-color) !important
}

.flat.platform .tooltip-error {
    background-color: var(--bs-color-red) !important;
    color: var(--bs-white-color) !important;
    opacity: 1;
    border-radius: .25rem !important
}

.flat.platform .tooltip-error-bottom:after,
.flat.platform .tooltip-error-bottom:before {
    border-color: transparent transparent var(--bs-color-red) transparent !important
}

.flat.platform .tooltip-error-right:after,
.flat.platform .tooltip-error-right:before {
    border-left-color: var(--bs-color-red) !important
}

.flat.platform .tooltip-error:after {
    border-right-color: #88b7d5 transparent transparent
}

.flat.platform .tooltip-error:before {
    border-color: transparent var(--bs-color-red) transparent transparent
}

.flat.platform .vr-datetime span.mdi {
    font-size: 16px
}

.flat.platform .filter-type-main-content {
    width: 120px;
    border: 1px solid var(--light-bg-color);
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    border-radius: .25rem
}

    .flat.platform .filter-type-main-content .filter-type-close {
        font-size: 16px;
        width: 16px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        left: calc(100% - 18px)
    }

        .flat.platform .filter-type-main-content .filter-type-close:hover {
            color: var(--primary-color)
        }

    .flat.platform .filter-type-main-content .filter-type-item {
        height: 24px;
        line-height: 22px;
        padding: 0 4px;
        border: none !important
    }

        .flat.platform .filter-type-main-content .filter-type-item.selected {
            background: var(--primary-color) !important
        }

        .flat.platform .filter-type-main-content .filter-type-item:hover {
            background: var(--light-bg-color-75) !important
        }

        .flat.platform .filter-type-main-content .filter-type-item label {
            cursor: pointer
        }

        .flat.platform .filter-type-main-content .filter-type-item.selected label,
        .flat.platform .filter-type-main-content .filter-type-item:hover label {
            color: var(--bs-white-color) !important
        }

        .flat.platform .filter-type-main-content .filter-type-item:hover label {
            color: var(--dark-bg-color) !important
        }

.flat.platform .vr-grid-menu {
    border: none;
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    border-radius: .25rem;
    padding: 0;
    margin: 0
}

    .flat.platform .vr-grid-menu .vr-grid-menu-header {
        font-weight: 500;
        background: var(--dark-bg-color);
        color: var(--bs-white-color);
        height: 24px;
        line-height: 22px;
        font-size: 12px;
        padding: 0 6px;
        margin-bottom: 2px
    }

        .flat.platform .vr-grid-menu .vr-grid-menu-header i {
            line-height: 20px;
            font-size: 15px
        }

        .flat.platform .vr-grid-menu .vr-grid-menu-header .button-loader {
            float: right
        }

.flat.platform .vr-gridmenu-checkitem i {
    display: block;
    font-size: 16px;
    line-height: 16px;
    color: var(--primary-color) !important
}

.flat.platform .vr-gridmenu-checkitem.ng-hide i {
    display: none
}

.flat.platform .panel-vr.vr-normal-panel > .panel-heading {
    background: var(--light-primary-color)
}

.flat.platform .panel-bordered {
    border: 1px solid var(--light-primary-color)
}

.flat.platform .vr-datagrid-header-cell .vr-datagrid-celltext {
    font-size: 10px;
    line-height: 24px !important;
    font-weight: 500;
    color: var(--bs-white-color) !important;
    display: flex
}

.flat.platform .vr-datagrid-cell .vr-datagrid-celltext {
    font-size: 13px;
    line-height: normal !important;
    color: var(--bs-body-color) !important
}

.flat.platform .vr-datagrid-header-simple {
    height: 24px !important;
    background: var(--primary-color) !important;
    margin: 0 !important;
    padding-top: 0
}

.flat.platform .vr-remote-footer.vr-datagrid-header-simple {
    height: 24px !important;
    line-height: 20px !important;
    background: var(--light-primary-color) !important;
    padding: 0 !important
}

.flat.platform .vr-pager-container .dropdown {
    top: -1px
}

.flat.platform .vr-datagrid-cell,
.flat.platform .vr-datagrid-header-cell {
    min-height: 24px !important;
    line-height: 24px !important;
    padding: 0 4px !important;
    margin: 0 !important
}

.flat.platform .vr-grid-menu-box {
    height: 24px !important;
    line-height: 24px !important;
    width: 24px !important;
    margin-top: 0 !important;
    background: var(--dark-bg-color) !important
}

.flat.platform .grid-expand-collapse-icon {
    height: 25px !important;
    line-height: 25px !important;
    width: 25px !important;
    margin-top: 0 !important
}

.flat.platform .row-expandable-column-spacer,
.flat.platform .row-expandable-column-spacer div {
    line-height: 25px !important;
    width: 25px !important
}

.flat.platform .vr-datagrid[alternative-color=true] .row-main-content {
    background: var(--bs-white-color) !important;
    border-top: none !important;
    color: var(--primary-color) !important
}

.flat.platform .vr-datagrid[alternative-color=true] .vr-datagrid-body-odd {
    background: var(--light-grid-row-odd-color) !important
}

    .flat.platform .vr-datagrid[alternative-color=true] .basic-container-view.row-main-content.expanded,
    .flat.platform .vr-datagrid[alternative-color=true] .vr-datagrid-body-odd.expanded {
        background: 0 0 !important
    }

.flat.platform .vr-datagrid .remove-line {
    padding-left: 0 !important;
    padding-right: 0 !important
}

    .flat.platform .vr-datagrid .remove-line div[class^=col] vr-tabs {
        padding-left: calc(var(--bs-gutter-x) * -.5);
        padding-right: calc(var(--bs-gutter-x) * -.5)
    }

.flat.platform .row-full-screen.vr-modal-row-container .row,
.flat.platform .vr-datagrid .row {
    margin: 0 !important
}

.flat.platform .expandable-row-content {
    background: var(--bs-white-color) !important;
    border-width: 0 0 1px !important;
    border-color: var(--light-primary-color) !important
}

.flat.platform .vr-tabs {
    margin: 0 !important;
    padding: 0 !important;
    border-width: 1px 1px 3px !important;
    border-color: var(--light-primary-color) !important;
    height: 32px !important
}

    .flat.platform .vr-tabs label,
    .flat.platform .vr-tabs > span.vr-header-label {
        height: 32px !important;
        line-height: 30px
    }

.flat.platform .vr-expandable-row-template {
    background: var(--bs-white-color) !important;
    border: none !important
}

.flat.platform .vr-tabs label {
    border-bottom: 3px solid var(--light-primary-color) !important;
    padding: 0 !important;
    margin: 0 !important;
    bottom: 1px
}

.flat.platform .vr-tabs .clicked-btn {
    border-bottom: 3px solid var(--primary-color) !important;
    font-weight: 500;
    bottom: 1px
}

.flat.platform vr-tab vr-columns[tabs=true] > div[class^=col] {
    border: 1px solid var(--light-bg-color) !important;
    padding: 8px 0;
    margin-bottom: -1px
}

.flat.platform .expanded-row-drill-down vr-tab vr-columns[tabs=true] > div[class^=col] {
    padding: 8px 10px
}

.flat.platform .vr-datagrid-row {
    padding-left: 0 !important
}

.flat.platform .vr-datagrid .row-main-content:hover {
    background-color: var(--light-primary-color) !important
}

    .flat.platform .vr-datagrid .row-main-content:hover > div > div > div > div > .grid-expand-collapse-icon.vr-fullscreen {
        transform: scale(1.2, 1.2)
    }

.flat.platform .vr-pager-container .vr-control-label {
    font-size: 12px;
    line-height: 20px
}

    .flat.platform .vr-pager-container .vr-control-label:first-child {
        padding: 0 10px 0 0
    }

    .flat.platform .vr-pager-container .vr-control-label:last-child {
        padding: 0 0 0 10px
    }

.flat.platform .vr-custom-pagination > li > a,
.flat.platform .vr-datagrid-header-simple.vr-remote-footer,
.flat.platform .vr-pager-container .vr-control-label {
    color: var(--bs-body-color) !important
}

.vr-pagination-size-container vr-select .dropdown-container2,
.vr-pagination-size-container vr-validator[vr-input] > div:first-child {
    height: 18px !important;
    line-height: 18px !important
}

.flat.platform .vr-custom-pagination > li.active > a {
    color: var(--bs-body-bg) !important;
    background-color: var(--primary-color) !important
}

.flat.platform .vr-custom-pagination > li:hover > a {
    color: var(--bs-body-bg) !important;
    background-color: var(--secondary-color) !important;
    border-radius: 3px !important
}


.flat.platform .figure-item .item-label {
    color: var(--bs-white-color)
}

.flat.platform .row-main-content.expanded-row {
    font-weight: 500 !important;
    color: var(--primary-color)
}

    .flat.platform .row-main-content.expanded-row .vr-datagrid-celltext {
        color: var(--primary-color) !important
    }

    .flat.platform .row-main-content.expanded-row .vr-datagrid-header-cell > div > .vr-datagrid-celltext {
        color: var(--bs-white-color) !important
    }

.flat.platform .vr-module-tabs-view .dropdown-menu label {
    font-weight: 500 !important
}

.flat.platform .vr-module-tabs-view .dropdown-menu > li:hover > a > label {
    text-shadow: none !important;
    text-decoration: none !important
}

.flat.platform #modalContainer .modal {
    margin-bottom: 1.5rem;
    -webkit-box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    border-radius: .25rem .25rem 0 0
}

.flat.platform[data-sidebar-size=small] #sidebar-menu ul li ul.sub-menu li a {
    text-align: left
}

.flat.platform[data-sidebar-size=small] #sidebar-menu ul > li {
    border-bottom: 1px solid var(--light-bg-color)
}

.flat.platform .profile-address .form-control {
    border: none;
    transition: all 250ms ease 0s;
    padding: 0;
    font-weight: 700;
    font-size: .6rem
}

.flat.platform .profile-address .field-value .form-control {
    color: var(--primary-color) !important
}

.flat.platform .profile-address .form-control:hover {
    background-color: #fff !important
}

.flat.platform .profile-address .col-form-label {
    text-align: right;
    font-size: 13px;
    font-weight: 600 !important;
    margin: 0
}

.flat.platform .button-items .btn {
    border-radius: .2rem !important
}

.flat.platform div[class^=col-].euqal-height .vr-normal-panel.panel-vr.card {
    height: calc(100% - .5rem) !important
}

.flat.platform .justify-content-between {
    justify-content: space-between
}

.flat.platform .nav-tabs-custom .nav-item .nav-link:after {
    height: 3px !important;
    bottom: -3px
}

.flat.platform .nav-tabs-custom {
    border-bottom: 3px solid var(--light-bg-color)
}

.flat.platform .nav-primary .nav-item .nav-link {
    border-radius: 0;
    line-height: 1.4em;
    font-size: .7rem;
    padding: .25rem .7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    height: 30px
}

.flat.platform .nav-primary .nav-link {
    background-color: var(--dark-bg-color)
}

    .flat.platform .nav-primary .nav-link.active {
        background-color: var(--primary-color)
    }

.flat.platform .browser-stats {
    position: relative !important
}

    .flat.platform .browser-stats img {
        background: #f3f3fb;
        padding: 5px;
        border-radius: 0;
        width: 60px;
        height: 60px
    }

    .flat.platform .browser-stats .offcanvas-header img {
        width: 50px;
        height: 50px
    }

    .flat.platform .browser-stats .offcanvas-header .btn-close {
        padding: 0 20px
    }

    .flat.platform .browser-stats .offcanvas-header h5 {
        padding-top: .5rem
    }

    .flat.platform .browser-stats .cursor-pointer {
        cursor: pointer
    }

    .flat.platform .browser-stats .offcanvas-relative {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        border: none
    }

.flat.platform .page-title-box {
    padding: 0;
    margin: 0;
    font-size: 14px
}

.flat.platform .browser-stats .offcanvas-header {
    padding: 1rem 1rem 0 1rem !important
}

.flat.platform .panel-body.card-body {
    padding: .4rem !important;
    border: 1px solid var(--light-primary-color);
    border-radius: 0
}

.flat.platform .main-content #mainNgView {
    padding-top: 10px !important
}

.flat.platform .btn,
.flat.platform .btn:focus {
    outline: 0;
    border: none;
    box-shadow: none
}

.flat.platform .login-form .form-control.border-bottom {
    position: relative;
    font-size: 14px;
    background: 0 0 !important;
    padding: 0;
    border: none;
    border-bottom: 3px solid #e9ecef !important;
    box-shadow: none;
    outline: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.flat.platform .login-form .form-group {
    position: relative
}

.flat.platform .login-form .form-label,
.flat.platform .main-form .vr-control-label {
    font-size: 14px;
    font-weight: 600 !important;
    margin: 0;
    color: var(--primary-color) !important
}

.flat.platform .login-form .form-control.border-bottom:focus,
.flat.platform .login-form .form-control.border-bottom:hover {
    border-bottom: 3px solid var(--light-bg-color);
    background-color: transparent !important;
    background: 0 0 !important
}

.flat.platform .login-form .form-control.border-bottom option {
    padding: 2px 10px
}

.flat.platform .login-form .form-control.border-bottom ~ .border-bottom-animation.left {
    position: absolute;
    content: "";
    width: 0;
    background: rgba(0, 0, 0, .2);
    height: 2px;
    z-index: 99;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    left: 0;
    bottom: 0
}

.flat.platform .login-form .form-control.border-bottom:focus ~ .border-bottom-animation.left {
    background: var(--primary-color) !important;
    width: 100%
}

.flat.platform .vr-status-progress {
    height: 36px;
    line-height: 36px;
    border: none !important;
    padding: 0 46px 0 10px !important;
    box-shadow: none !important;
    margin-bottom: 4px;
    margin-right: 36px;
    background: var(--dark-bg-color);
    color: #fff !important;
    position: relative;
    font-weight: 500;
    white-space: nowrap;
    text-transform: capitalize;
    width: auto;
    max-width: calc(100% - 36px) !important;
    overflow: initial;
    border-radius: .25rem !important
}

    .flat.platform .vr-status-progress:after {
        font-family: "Material Design Icons";
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        right: 0;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 26px;
        padding: 0 !important;
        border-radius: 0 .25rem .25rem 0 !important
    }

    .flat.platform .vr-status-progress.new:after {
        background-color: var(--bs-color-blue) !important;
        content: "\f156a"
    }

    .flat.platform .vr-status-progress.postponed:after {
        background-color: var(--bs-color-yellow) !important;
        content: "\f051f"
    }

    .flat.platform .vr-status-progress.running:after {
        background-color: var(--bs-color-yellow) !important;
        content: "\f1591"
    }

    .flat.platform .vr-status-progress.waiting:after {
        background-color: var(--bs-color-yellow) !important;
        content: "\f0996"
    }

    .flat.platform .vr-status-progress.cancelling:after {
        background-color: var(--bs-color-red) !important;
        content: "\f110a"
    }

    .flat.platform .vr-status-progress.troubleshooting:after {
        background-color: var(--bs-color-red) !important;
        content: "\f02fd"
    }

    .flat.platform .vr-status-progress.completed:after {
        background-color: var(--bs-color-green) !important;
        content: "\f05e1"
    }

    .flat.platform .vr-status-progress.aborted:after {
        background-color: var(--bs-color-red) !important;
        content: "\f0425"
    }

    .flat.platform .vr-status-progress.suspended:after {
        background-color: var(--bs-color-red) !important;
        content: "\f015a"
    }

    .flat.platform .vr-status-progress.terminated:after {
        background-color: var(--bs-color-red) !important;
        content: "\f073a"
    }

    .flat.platform .vr-status-progress.cancelled:after {
        background-color: var(--bs-color-red) !important;
        content: "\f1644"
    }

    .flat.platform .vr-status-progress.cancelling,
    .flat.platform .vr-status-progress.new,
    .flat.platform .vr-status-progress.postponed,
    .flat.platform .vr-status-progress.running,
    .flat.platform .vr-status-progress.troubleshooting,
    .flat.platform .vr-status-progress.waiting {
        background: linear-gradient(268deg, var(--primary-color), var(--dark-bg-color));
        background-size: 400% 400%;
        -webkit-animation: flat-vr-visualitem-blinker 3s ease infinite;
        -moz-animation: flat-vr-visualitem-blinker 3s ease infinite;
        animation: flat-vr-visualitem-blinker 3s ease infinite
    }

.flat.platform .vr-intance {
    width: 128px;
    height: 128px;
    position: relative;
    margin: 10px auto
}

    .flat.platform .vr-intance:after {
        font-family: "Material Design Icons";
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        left: 0;
        width: 128px;
        height: 128px;
        line-height: 128px;
        text-align: center;
        font-size: 128px;
        padding: 0 !important;
        color: #666
    }

    .flat.platform .vr-intance.vr-instance-new:after {
        color: var(--bs-color-blue) !important;
        content: "\f156a"
    }

    .flat.platform .vr-intance.vr-instance-postponed:after {
        color: var(--bs-color-yellow) !important;
        content: "\f051f"
    }

    .flat.platform .vr-intance.vr-instance-running:after {
        color: var(--bs-color-yellow) !important;
        content: "\f1591"
    }

    .flat.platform .vr-intance.vr-instance-waiting:after {
        color: var(--bs-color-yellow) !important;
        content: "\f0996"
    }

    .flat.platform .vr-intance.vr-instance-canceling:after {
        color: var(--bs-color-red) !important;
        content: "\f110a"
    }

    .flat.platform .vr-intance.vr-instance-troubleshooting:after {
        color: var(--bs-color-red) !important;
        content: "\f02fd"
    }

    .flat.platform .vr-intance.vr-instance-completed:after {
        color: var(--bs-color-green) !important;
        content: "\f05e1"
    }

    .flat.platform .vr-intance.vr-instance-aborted:after {
        color: var(--bs-color-red) !important;
        content: "\f0425"
    }

    .flat.platform .vr-intance.vr-instance-suspended:after {
        color: var(--bs-color-red) !important;
        content: "\f015a"
    }

    .flat.platform .vr-intance.vr-instance-terminated:after {
        color: var(--bs-color-red) !important;
        content: "\f073a"
    }

    .flat.platform .vr-intance.vr-instance-canceled:after {
        color: var(--bs-color-red) !important;
        content: "\f1644"
    }

.flat.platform .panel-vr .field-container.simple .field-value,
.flat.platform .vr-bordered-container.simple .field-container .field-value,
.flat.platform .vr-detail-summary-custom .field-container.simple .field-value {
    color: var(--primary-color);
    border: 1px solid var(--light-bg-color)
}

.flat.platform .panel-vr .field-container.modern .field-value:hover,
.flat.platform .vr-bordered-container .field-container.modern .field-value:hover,
.flat.platform .vr-detail-summary-custom .field-container.modern .field-value:hover {
    border-bottom: 1px solid var(--primary-color) !important
}

.flat.platform .panel-vr .field-container.simple .field-value:hover,
.flat.platform .vr-bordered-container .field-container.simple .field-value:hover,
.flat.platform .vr-detail-summary-custom .field-container.simple .field-value:hover {
    border-color: var(--primary-color) !important
}

.flat.platform .vr-datagrid-body grid-row-action.bottom-row-action {
    padding: 2px 8px !important
}

    .flat.platform .vr-datagrid-body grid-row-action.bottom-row-action .action-full-screen-icon {
        padding: 4px 4px;
        width: auto;
        min-width: 154px
    }

.flat.platform .vr-datagrid .row-full-screen .runtime-field-wrapper div[class^=col-] {
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important
}

.flat.platform .row-full-screen .runtime-field-wrapper vr-select .vr-dropdown-select.btn,
.flat.platform .row-full-screen .runtime-field-wrapper vr-textarea textarea,
.flat.platform .row-full-screen .runtime-field-wrapper vr-textbox input {
    border: 1px solid var(--light-bg-color);
    transition: all 250ms ease 0s;
    padding: 4px;
    font-weight: 400;
    font-size: 13px;
    background-color: var(--light-bg-color-50);
    color: var(--primary-color)
}

    .flat.platform .row-full-screen .runtime-field-wrapper vr-select .vr-dropdown-select.btn:hover,
    .flat.platform .row-full-screen .runtime-field-wrapper vr-textarea textarea:hover,
    .flat.platform .row-full-screen .runtime-field-wrapper vr-textbox input:hover {
        background-color: #fff !important;
        border: 1px solid var(--primary-color) !important
    }

.flat.platform .row-full-screen .label-field-wrapper .vr-control-label,
.flat.platform .row-full-screen .runtime-field-wrapper .vr-control-label {
    font-weight: 400;
    font-size: .6rem !important;
    justify-content: center;
    margin: 4px 0 !important
}

.flat.platform .row-full-screen.vr-modal-row-container div.style-row,
.flat.platform .vr-datagrid .row-full-screen div.style-row {
    padding: 0 !important
}

.flat.platform .vr-datagrid .row-full-screen .panel-vr {
    margin-top: 0;
    margin-bottom: 8px
}

.flat.platform .vr-row-action-container,
.flat.platform .vr-row-action-container grid-row-action {
    display: flex;
    align-items: center
}

    .flat.platform .vr-row-action-container .dropdown {
        min-height: unset !important
    }

.flat.platform .vr-scroll-pager-info {
    margin: 2px 10px 2px 0 !important
}

.flat.platform vr-tabs > vr-tabs-header > vr-row > .remove-line > vr-columns > div[class^=col-] {
    padding-left: 0;
    padding-right: 0
}

.flat.platform vr-tabs vr-row > .remove-line {
    padding-left: calc(-.5 * var(--bs-gutter-x));
    padding-right: calc(-.5 * var(--bs-gutter-x));
    margin-right: 0;
    margin-left: 0
}

.flat.platform vr-tabs > vr-tabs-header > vr-row > .remove-line {
    margin-right: 0;
    margin-left: 0
}

.flat.platform .vr-comments .comment-main-level,
.flat.platform .vr-comments .current-user {
    padding: 10px !important
}

    .flat.platform .vr-comments .current-user .vr-image-avatar {
        padding-right: 8px
    }

        .flat.platform .vr-comments .current-user .vr-image-avatar .fileinput-button input {
            width: 48px !important;
            height: 48px !important
        }

.flat.platform .vr-comments .comment-avatar,
.flat.platform .vr-comments .comment-avatar .av-letters,
.flat.platform .vr-comments .vr-image-avatar .vr-image-file img,
.flat.platform .vr-comments vr-preview-image img {
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    border-radius: 50%
}

.flat.platform .vr-comments .comment-box {
    box-shadow: none
}

.flat.platform .vr-comments .comment-head {
    background: var(--primary-color) !important;
    border: none;
    line-height: 28px
}

.flat.platform .vr-comments .comment-box .comment-head .comment-name a,
.flat.platform .vr-comments .current-user .user-name {
    color: #343a40
}

.flat.platform .vr-comments .comment-box .info-section .comment-time {
    color: var(--bs-body-color-2)
}

.flat.platform .vr-comments .comment-box .comment-body {
    font-weight: 400;
    font-size: .8rem !important;
    color: var(--bs-body-color)
}

.flat.platform .internal-note .action-label,
.flat.platform .public-comment .action-label,
.flat.platform .vr-comments .comment-box .comment-head .type {
    font-weight: 700;
    font-size: .6rem !important
}

    .flat.platform .public-comment .action-label,
    .flat.platform .vr-comments .comment-box .comment-head .type.public-comment {
        color: var(--bs-color-light-green) !important
    }

    .flat.platform .internal-note .action-label,
    .flat.platform .vr-comments .comment-box .comment-head .type.internal-note {
        color: var(--bs-color-orange) !important
    }

.flat.platform .action-label.active {
    text-decoration: underline !important
}

.flat.platform .vr-comments .comment-box .comment-footer .edit a,
.flat.platform .vr-comments .comment-box .comment-footer .reply a,
.flat.platform .vr-comments .comment-box .comment-footer .toogle-comments {
    color: var(--primary-color);
    font-weight: 700;
    font-size: .6rem !important
}

.vr-comments .comment-box .comment-footer .reply.show-separator a:after {
    background: var(--primary-color)
}

.flat.platform .vr-comments .comment-box .comment-footer .edit i,
.flat.platform .vr-comments .comment-box .comment-footer .reply i {
    padding-left: 6px
}

.flat.platform .vr-comments .comment-box .comment-name {
    color: var(--primary-color);
    margin: 0 10px 0 0 !important
}

.flat.platform .vr-comments .comment-box:after,
.flat.platform .vr-comments .comment-box:before {
    border: 8px solid var(--light-bg-color);
    border-color: transparent transparent var(--light-bg-color) var(--light-bg-color);
    box-shadow: none
}

.flat.platform .vr-comments .comment-content {
    border: 1px solid var(--light-bg-color) !important
}

.flat.platform .vr-comments vr-button[inline-btn] button,
.flat.platform .vr-comments vr-button[inline-btn][type=Comment] button,
.flat.platform .vr-comments vr-button[inline-btn][type=Save] button {
    color: var(--bs-white-color) !important;
    background-color: var(--primary-color) !important;
    border-radius: .2rem !important;
    margin-top: 0;
    font-size: .6rem;
    line-height: 22px;
    font-weight: 600
}

.flat.platform .vr-comments vr-button[inline-btn][type=Cancel] button {
    background-color: var(--bs-color-red) !important;
    margin-left: 6px
}

.flat.platform .vr-comments vr-button[inline-btn][type=Comment] button:hover,
.flat.platform .vr-comments vr-button[inline-btn][type=Save] button:hover {
    background-color: var(--primary-color) !important;
    opacity: .9
}

.flat.platform .vr-comments vr-button[inline-btn][type=Cancel] button:hover {
    background-color: var(--bs-color-red) !important;
    opacity: .9
}

.flat.platform .vr-comments vr-button[inline-btn][type=Comment].divDisabled button,
.flat.platform .vr-comments vr-button[inline-btn][type=Savw].divDisabled button {
    background-color: var(--primary-color) !important;
    opacity: .9
}

.flat.platform .vr-comments .editor-form-action vr-button:first-of-type {
    padding-right: 0
}

.flat.platform wysiwyg-edit .tinyeditor .tinyeditor-header {
    background: var(--light-bg-color-75) !important;
    border-bottom: 1px solid var(--light-primary-color) !important
}

.flat.platform wysiwyg-edit .tinyeditor .tinyeditor-footer {
    background: var(--light-bg-color-75) !important;
    border-top: 1px solid var(--light-primary-color) !important
}

.flat.platform wysiwyg-edit .tinyeditor {
    border: 1px solid var(--light-primary-color) !important;
    padding: 0 !important
}

    .flat.platform wysiwyg-edit .tinyeditor .tinyeditor-footer .toggle {
        height: 31px;
        border-right: 1px solid var(--light-primary-color) !important;
        padding: 8px 13px 0 32px
    }

    .flat.platform wysiwyg-edit .tinyeditor .tinyeditor-header .tinyeditor-buttons-group .tinyeditor-divider {
        background: var(--light-primary-color) !important;
        height: 31px
    }

.flat.platform .history-content {
    border: 1px solid var(--light-primary-color) !important
}

.flat.platform .history-body {
    font-weight: 400;
    font-size: 14px !important;
    color: var(--bs-body-color)
}

.flat.platform .history-title {
    background: var(--light-primary-color) !important;
    border: none;
    line-height: 32px;
    color: var(--bs-body-color)
}

.flat.platform .history-footer {
    background: var(--light-bg-color-50) !important;
    border: none;
    line-height: 24px
}

.flat.platform div[ng-hide=filterSectionCollapsed].am-collapse {
    position: relative;
    display: block;
    z-index: 2
}

.flat.platform .node-container .node-header,
.flat.platform .process-container .process-header {
    background: var(--primary-color) !important;
    height: 32px;
    color: var(--bs-white-color) !important;
    line-height: 1.4em;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase
}

.flat.platform .node-container .node-content .node-icon i,
.flat.platform .process-container .process-content .process-icon i {
    font-size: 24px;
    line-height: 32px;
    text-align: center
}

.flat.platform .node-container .node-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #666;
    padding: 20px
}

.flat.platform .node-container,
.flat.platform .process-container {
    margin-bottom: 15px;
    padding: 0;
    box-shadow: 0 0 6px 3px rgb(0 0 0 / 5%);
    background: #fff !important;
    border: 0
}

    .flat.platform .node-container .node-header .header-bottons {
        height: 30px;
        display: flex
    }

    .flat.platform .node-container .node-header .node-details-button {
        height: 30px;
        background: 0 0;
        color: #fff;
        line-height: 30px;
        padding: 0;
        font-size: 24px;
        margin: 0 4px;
        text-decoration: none;
        font-weight: 500
    }

        .flat.platform .node-container .node-header .node-details-button.btn-group {
            padding: 0;
            margin: 0;
            outline: 0
        }

        .flat.platform .node-container .node-header .node-details-button .dropdown-toggle {
            background: 0 0;
            color: #fff;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
            margin: 0 4px;
            text-decoration: none;
            font-weight: 500;
            border: none;
            box-shadow: none
        }

        .flat.platform .node-container .node-header .node-details-button:hover {
            background: 0 0;
            color: var(--light-bg-color-75)
        }

    .flat.platform .node-container .node-content,
    .flat.platform .process-container .process-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666;
        padding: 20px
    }

    .flat.platform .node-container .node-header .header-flag {
        height: 24px;
        width: 24px;
        line-height: 24px;
        display: none
    }

        .flat.platform .node-container .node-header .header-flag img {
            height: 24px;
            width: 24px
        }

        .flat.platform .node-container .node-header .header-flag i {
            line-height: 24px;
            font-size: 24px;
            color: gold
        }

    .flat.platform .node-container.master-node .node-header .header-flag {
        display: inline-flex
    }

    .flat.platform .process-container .process-content .info-icon {
        display: flex;
        align-self: flex-end;
        font-size: 22px;
        color: var(--bs-color-blue)
    }

    .flat.platform .node-container .node-content .node-icon,
    .flat.platform .process-container .process-content .process-icon {
        background: #ebebeb;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .flat.platform .process-container .process-content .process-main-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        margin: 0 5px 0 40px
    }

    .flat.platform .node-container .node-content .node-icon img,
    .flat.platform .process-container .process-content .process-icon img {
        width: 32px;
        height: 32px
    }

    .flat.platform .node-container .node-content .node-status {
        display: block;
        margin-left: 20px;
        min-width: 150px
    }

        .flat.platform .node-container .node-content .node-status h4 {
            margin: 0;
            font-size: 13px;
            font-weight: 500
        }

        .flat.platform .node-container .node-content .node-status span {
            font-size: 13px;
            font-weight: 500
        }

    .flat.platform .node-container .node-content .node-machine,
    .flat.platform .node-container .node-content .node-start {
        display: block;
        margin-left: 20px
    }

    .flat.platform .process-container .process-content .process-start {
        display: block
    }

        .flat.platform .node-container .node-content .node-machine h4,
        .flat.platform .node-container .node-content .node-start h4,
        .flat.platform .process-container .process-content .process-start h4 {
            margin: 0;
            font-size: 13px;
            font-weight: 500
        }

        .flat.platform .node-container .node-content .node-machine span,
        .flat.platform .node-container .node-content .node-start span,
        .flat.platform .process-container .process-content .process-start span {
            margin: 0;
            font-size: 12px;
            font-weight: 400
        }

    .flat.platform .node-container .node-footer,
    .flat.platform .process-container .process-footer {
        height: 40px;
        background: #fff;
        color: #666;
        line-height: 40px;
        padding: 0 10px;
        z-index: 1000;
        border-top: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .flat.platform .node-container .node-footer .info-icon,
        .flat.platform .process-container .process-footer .controls-icon {
            display: flex;
            align-items: center;
            height: 24px;
            padding-right: 12px
        }

            .flat.platform .node-container .node-footer .info-icon .mdi {
                font-size: 24px;
                height: 24px;
                line-height: 24px;
                color: var(--bs-color-blue);
                padding-right: 0;
                padding-top: 0;
                display: block
            }

    .flat.platform .process-container .info-icon .mdi {
        padding-right: 4px;
        padding-top: 2px
    }

    .flat.platform .process-container .process-footer .controls-icon .mdi {
        font-size: 24px
    }

    .flat.platform .node-container vr-info,
    .flat.platform .process-container vr-info {
        line-height: 22px
    }

    .flat.platform .node-container .node-footer .info-icon .mdi-information:before,
    .flat.platform .process-container .process-footer .controls-icon .mdi-information:before {
        line-height: 22px
    }

    .flat.platform .process-container .process-footer .controls-icon .single-icon {
        display: flex;
        align-items: center;
        padding: 0 10px
    }

        .flat.platform .process-container .process-footer .controls-icon .single-icon:hover {
            opacity: .7
        }

    .flat.platform .node-container .node-footer .status-label,
    .flat.platform .process-container .process-footer .status-label {
        height: 24px;
        color: #fff;
        min-width: 120px;
        text-align: center;
        background: var(--dark-bg-color);
        line-height: 24px;
        font-size: 14px;
        padding: 0 10px;
        border-radius: 3px;
        text-transform: capitalize
    }

.flat.platform .status-label.started {
    background: var(--bs-color-green) !important
}

.flat.platform .status-label.stopped,
.flat.platform .status-label.timedout {
    background: var(--bs-color-red) !important
}

.flat.platform .status-label.restarting,
.flat.platform .status-label.starting {
    background: var(--bs-color--light-green) !important
}

.flat.platform .status-label.stopping {
    background: var(--bs-color-yellow) !important
}

.flat.platform .label-fieldvalue-style {
    color: var(--bs-color-blue) !important;
    font-weight: 400
}

.flat.platform .label-value-style {
    color: var(--bs-color-blue);
    font-size: 14px
}

.flat.platform .node-info {
    display: flex;
    flex: 0.64
}

.flat.platform .field-good {
    color: var(--bs-color-green) !important
}

.flat.platform .field-warning {
    color: var(--bs-color-yellow) !important
}

.flat.platform .field-bad {
    color: var(--bs-color-red) !important
}

.flat.platform .processes-fieldset {
    border-top: 2px solid var(--bs-color-blue);
    margin: 5px 15px 0 15px
}

    .flat.platform .processes-fieldset legend {
        width: auto;
        border-bottom: none;
        margin-bottom: 0;
        background: 0 0;
        margin: 0 20px;
        padding: 0 5px
    }

.flat.platform .process-container .process-footer .controls-icon .single-icon {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #666;
    text-decoration: none !important
}

    .flat.platform .process-container .process-footer .controls-icon .single-icon:hover {
        opacity: .7
    }

.flat.platform vr-info .popover {
    border-radius: .4rem;
    margin-left: 6px
}

    .flat.platform vr-info .popover .arrow {
        position: absolute;
        bottom: -5px;
        right: 2px;
        width: 18px;
        height: 7px
    }

.flat.platform vr-info .popover-content {
    padding: 10px;
    min-width: 300px
}

.flat.platform vr-info .popover .arrow:after,
.flat.platform vr-info .popover .arrow:before {
    border-width: 8px
}

.flat.platform vr-info .popover .arrow:before {
    border-width: -10px
}

.flat.platform vr-info .popover .arrow:after {
    border-width: -9px
}

.flat.platform .node-container .node-icon,
.flat.platform .process-container .process-icon {
    color: var(--dark-bg-color) !important
}

    .flat.platform .node-container .node-icon.started,
    .flat.platform .process-container .process-icon.started {
        color: var(--bs-color-green) !important
    }

    .flat.platform .node-container .node-icon.stopped,
    .flat.platform .node-container .node-icon.timedout,
    .flat.platform .process-container .process-icon.stopped,
    .flat.platform .process-container .process-icon.timedout {
        color: var(--bs-color-red) !important
    }

    .flat.platform .node-container .node-icon.restarting,
    .flat.platform .node-container .node-icon.starting,
    .flat.platform .process-container .process-icon.restarting,
    .flat.platform .process-container .process-icon.starting {
        color: var(--bs-color--light-green) !important
    }

    .flat.platform .node-container .node-icon.stopping,
    .flat.platform .process-container .process-icon.stopping {
        color: var(--bs-color-yellow) !important
    }

.flat.platform.login-body {
    background: unset !important;
    max-height: 100vh
}

.flat.platform .main-login {
    background: unset !important;
    height: 100vh;
    width: 100%
}

.flat.platform .login-wrapper {
    box-shadow: none;
    width: 100%;
    height: 100vh;
    align-items: center
}

.flat.platform .flat-login-container {
    width: 100%;
    height: 100vh
}

.flat.platform .login-wrapper .main-form {
    width: 30%;
    padding: 40px;
    position: relative;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: space-between !important
}

    .flat.platform .login-wrapper .main-form .form-label,
    .flat.platform .main-login .forget-link-container .fogetten-label,
    .flat.platform .main-login .forget-link-container .fogetten-label:visited {
        font-size: 14px;
        font-weight: 600 !important;
        margin: 0;
        color: var(--primary-color) !important
    }

.flat.platform .flat-logo-container {
    color: var(--bs-body-color)
}

.flat.platform .vr-product-logo {
    width: 70%;
    min-height: 100vh
}

@media (max-width:992px) {
    .flat.platform .login-wrapper .main-form {
        width: 50%
    }

    .flat.platform .vr-product-logo {
        width: 50%
    }
}

@media (max-width:768px) {
    .flat.platform .login-wrapper .main-form {
        width: 100%
    }

    .flat.platform .vr-product-logo {
        display: none
    }
}

.flat.platform .vr-product-logo > img {
    min-height: 100vh
}

.flat.platform .vr-product-logo:before {
    background: var(--primary-color-80)
}

.flat.platform .flat-login-container vr-textbox .form-control,
.flat.platform .main-login .dropdown .btn-default {
    position: relative;
    font-size: 14px;
    background: 0 0 !important;
    padding: 0;
    margin: 0;
    border: none;
    border-bottom: 3px solid var(--light-bg-color) !important;
    box-shadow: none;
    outline: 0;
    height: 28px !important;
    line-height: 28px;
    transition: all .5s ease;
    color: var(--bs-body-color-2) !important
}

.flat.platform .flat-login-container vr-textbox div#rootDiv[invalid=false] input {
    opacity: 1
}

.flat.platform .flat-login-container vr-textbox .form-control:focus {
    height: 28px
}

.flat.platform .flat-login-container vr-textbox div#rootDiv .vr-control-label,
.flat.platform .securityprovider-container .dropdown .dropdown-toggle > span {
    color: var(--bs-body-color-2) !important
}

.flat.platform .flat-login-container vr-textbox div#rootDiv:focus-within .vr-control-label,
.flat.platform .flat-login-container vr-textbox div#rootDiv[emptyvalue=false] .vr-control-label {
    opacity: 0
}

.flat.platform .flat-login-container .form-control:focus-visible,
.flat.platform .flat-login-container .form-control:hover,
.flat.platform .flat-login-container vr-select .open-select .vr-dropdown-select.btn,
.flat.platform .flat-login-container vr-select .vr-dropdown-select.btn,
.flat.platform .flat-login-container vr-select .vr-dropdown-select.btn:hover,
.flat.platform .flat-login-container vr-textbox vr-validator[vr-input] > div:first-child {
    border-bottom: none;
    border: none
}

.flat.platform .main-login .dropdown,
.flat.platform .main-login vr-validator[vr-input] > div:first-child {
    min-height: unset !important;
    height: 28px !important;
    position: relative !important;
    margin-bottom: 24px
}

.flat .flat-login-container .required-inpute > div:first-child {
    position: relative !important
}

.flat.platform .flat-login-container vr-textbox .form-control ~ .border-bottom-animation.left,
.flat.platform .main-login vr-select ~ .border-bottom-animation.left {
    position: absolute;
    content: "";
    width: 0;
    background: rgba(0, 0, 0, .2);
    height: 2px;
    z-index: 99;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    left: 0;
    bottom: 0
}

.flat.platform vr-textbox .password-form .mdi.mdi-eye {
    color: var(--bs-body-color);
}

.flat.platform vr-textbox .password-form .mdi.mdi-eye-off {
    color: var(--dark-primary-color);
}

.flat.platform .main-login vr-select ~ .border-bottom-animation.left {
    bottom: -2px
}

.flat.platform .flat-login-container vr-textbox .form-control:focus ~ .border-bottom-animation.left,
.flat.platform .main-login vr-select:focus-within ~ .border-bottom-animation.left {
    background: var(--primary-color) !important;
    width: 100%
}

.flat.platform .flat-login-container vr-textbox div#rootDiv[invalid=true] .form-control:focus ~ .border-bottom-animation.left,
.flat.platform .flat-login-container vr-textbox div#rootDiv[invalid=true] .form-control ~ .border-bottom-animation.left {
    background: var(--bs-color-red) !important;
    width: 100%
}

.flat.platform .flat-login-container .vr-select-dropdown-menu {
    width: calc(30% - 80px);
    padding: 0 !important;
    -webkit-box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05)
}

    .flat.platform .flat-login-container .vr-select-dropdown-menu .filter-section {
        padding: 0 !important
    }

    .flat.platform .flat-login-container .vr-select-dropdown-menu .inner-addon {
        display: none !important
    }

.flat.platform .main-login .securityprovider-container.input-wrapper {
    margin-bottom: 24px
}

.flat.platform .main-login a.mark-select .hand-cursor {
    font-size: 14px !important;
    padding: 0 4px
}

.flat.platform .main-login a.mark-select-selected,
.flat.platform .main-login a.mark-select:active,
.flat.platform .main-login a.mark-select:focus,
.flat.platform .main-login a.mark-select:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important
}

.flat.platform .main-login .forget-link-container i {
    color: var(--primary-color) !important
}

.flat.platform .main-login .forget-link-container:hover .fogetten-label,
.flat.platform .main-login .forget-link-container:hover i {
    color: var(--primary-color-80) !important
}

.flat.platform .cg-notify-message .cg-notify-close {
    color: var(--bs-white-color);
    text-shadow: none;
    opacity: .7
}

    .flat.platform .cg-notify-message .cg-notify-close:hover {
        opacity: 1
    }

.flat.platform .cg-notify-message.alert {
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .1) !important;
    padding: .7rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem !important;
    color: var(--bs-white-color)
}

.flat.platform .cg-notify-message.alert-success {
    background-color: var(--bs-color-green) !important;
    border-color: var(--bs-color-green) !important
}

.flat.platform .cg-notify-message.alert-danger {
    background-color: var(--bs-color-red) !important;
    border-color: var(--bs-color-red) !important
}

.flat.platform .cg-notify-message.alert-info {
    background-color: var(--bs-color-blue) !important;
    border-color: var(--bs-color-blue) !important
}

.flat.platform .cg-notify-message.alert-warning {
    background-color: var(--bs-color-yellow) !important;
    border-color: var(--bs-color-yellow) !important
}

.flat.platform .badge,
.flat.platform .vr-datagrid-celltext > div > span.label {
    border-radius: .4em !important;
    line-height: 1em;
    padding: .3em .5em;
    display: inline-block
}

.flat.platform vr-label-dynamic[isvalue] .vr-control-label.label > span,
.flat.platform vr-label[isvalue] .vr-control-label.label {
    display: inline;
    border-radius: .4em !important;
    padding: .2em .5em;
    display: inline
}

    .flat.platform .badge.bg-dark,
    .flat.platform .vr-datagrid-celltext > div > span.label.label-default,
    .flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-default > span,
    .flat.platform vr-label[isvalue] .vr-control-label.label.label-default {
        background: var(--dark-bg-color) !important;
        color: var(--bs-white-color) !important
    }

    .flat.platform .badge.bg-primary,
    .flat.platform .vr-datagrid-celltext > div > span.label.label-primary,
    .flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-primary > span,
    .flat.platform vr-label[isvalue] .vr-control-label.label.label-primary {
        background: var(--primary-color) !important;
        color: var(--bs-white-color) !important
    }

    .flat.platform .badge.bg-success,
    .flat.platform .vr-datagrid-celltext > div > span.label.label-success,
    .flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-success > span,
    .flat.platform vr-label[isvalue] .vr-control-label.label.label-success {
        background: var(--bs-color-green) !important;
        color: var(--bs-white-color) !important
    }

    .flat.platform .badge.bg-info,
    .flat.platform .vr-datagrid-celltext > div > span.label.label-info,
    .flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-info > span,
    .flat.platform vr-label[isvalue] .vr-control-label.label.label-info {
        background: var(--bs-color-blue) !important;
        color: var(--bs-white-color) !important
    }

    .flat.platform .badge.bg-warning,
    .flat.platform .vr-datagrid-celltext > div > span.label.label-warning,
    .flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-warning > span,
    .flat.platform vr-label[isvalue] .vr-control-label.label.label-warning {
        background: var(--bs-color-yellow) !important;
        color: var(--bs-white-color) !important
    }

.flat.platform .vr-control-label.label.label-warning-1,
.flat.platform .vr-control-label.label.label-warning-2 {
    background: 0 0 !important
}

.flat.platform .badge.bg-warning-1,
.flat.platform .vr-datagrid-celltext > div > span.label.label-warning-1,
.flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-warning-1 > span,
.flat.platform vr-label[isvalue] .vr-control-label.label.label-warning-1 {
    background: var(--bs-color-yellow-light) !important;
    color: var(--bs-white-color) !important
}

.flat.platform .badge.bg-warning-2,
.flat.platform .vr-datagrid-celltext > div > span.label.label-warning-2,
.flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-warning-2 > span,
.flat.platform vr-label[isvalue] .vr-control-label.label.label-warning-2 {
    background: var(--bs-color-orange) !important;
    color: var(--bs-white-color) !important
}

.flat.platform .badge.bg-danger,
.flat.platform .vr-datagrid-celltext > div > span.label.label-danger,
.flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.label-danger > span,
.flat.platform vr-label[isvalue] .vr-control-label.label.label-danger {
    background: var(--bs-color-red) !important;
    color: var(--bs-white-color) !important
}

.flat.platform .badge.bg-inprogress,
.flat.platform .vr-datagrid-celltext > div > span.label.label-inprogress,
.flat.platform vr-label-dynamic[isvalue] .vr-control-label.label.inprogress > span,
.flat.platform vr-label[isvalue] .vr-control-label.label.inprogress {
    background: var(--bs-color-purpule) !important;
    color: var(--bs-white-color) !important
}

.flat.platform .jstree-default .jstree-wholerow-clicked,
.flat.platform .jstree-default .jstree-wholerow-hovered {
    background: var(--light-primary-color) !important
}

.flat.platform .vr-tabs[vertical] label > span.vr-header-label {
    text-align: left !important
}

.flat.platform .gid-cell-menu > li .mark-select:hover > div:first-of-type,
.flat.platform .gid-cell-menu > li .mark-select:hover > div:first-of-type .action-item:hover,
.flat.platform .group-action-list > li .action-item.child-action:hover,
.flat.platform .group-action-list > li .action-item.child-action:hover .action-item:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--light-primary-color)
}

.flat.platform .gid-cell-menu.am-fade-and-slide-top {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    transition: opacity 1s ease-in-out
}



.flat.platform .btn-menu-item:focus,
.flat.platform .btn-menu-item:hover,
.flat.platform a.mark-select:active,
.flat.platform a.mark-select:focus,
.flat.platform a.mark-select:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--bs-white-color) !important
}

.flat.platform .vr-modal-row-container .vr-grid-row-summary {
    border: 1px solid var(--light-bg-color) !important
}

.flat.platform .vr-visual-circle.start {
    background: var(--bs-color-green) !important;
    border-color: var(--bs-color-green) !important
}

.flat.platform .vr-visual-circle.end {
    border-color: var(--bs-color-red) !important;
    color: var(--bs-color-red) !important
}

.flat.platform .vr-visualitem-separatorcompleted {
    border-color: var(--bs-color-green) !important;
    color: var(--bs-color-green) !important
}

.flat.platform .vr-visualitem-rightimg {
    background-color: var(--dark-bg-color) !important
}

.flat.platform .vr-visualitem-activityblock,
.visual-condition-block {
    background-color: var(--bs-color-light-blue) !important
}

.flat.platform .vr-visualitem-event-started {
    background-color: var(--bs-color-yellow) !important
}

.flat.platform .vr-visualitem-activityblock.vr-visualitem-event-completed,
.flat.platform .vr-visualitem-event-completed {
    background-color: var(--bs-color-green) !important
}

.flat.platform .vr-visualitem-activityblock.vr-visualitem-event-error,
.flat.platform .vr-visualitem-event-error {
    background-color: var(--bs-color-red) !important
}

.flat.platform .vr-visualitem-activityblock.vr-visualitem-event-retrying,
flat.platform .vr-visualitem-event-retrying {
    background-color: var(--bs-color-orange) !important
}

.flat.platform .border-wrapper > .border-item,
.flat.platform .no-if-entry .visual-item-sequence-arrow {
    color: var(--bs-color-light-blue) !important
}

.flat.platform .modal-dialog:has(.vr-modal-header-inback) {
    filter: brightness(60%)
}

.flat.platform div.modal:last-of-type .modal-dialog:has(.vr-modal-header-inback) {
    filter: none
}

.flat.platform .action-bar .btn,
.flat.platform .vr-control-label,
.flat.platform .vr-module-tabs-view label,
.flat.platform .vr-notification-label,
.flat.platform .vr-user-label {
    font-weight: 500 !important;
    font-size: .6rem !important;
    justify-content: center
}

.flat.platform .vr-control-label {
    font-weight: 500;
    font-size: .6rem !important;
    color: var(--bs-body-color)
}

.flat.platform .page-info {
    display: flex;
    align-items: center
}

    .flat.platform .page-info .page-info-title {
        display: flex;
        font-weight: 500 !important;
        font-size: 1rem;
        padding-right: 5px
    }

    .flat.platform .page-info span {
        padding-left: 5px;
        font-size: .8rem
    }

.flat.platform .zoom-panel-wrapper {
    background-color: #f7f7f7;
    border: 1px solid #eee
}

    .flat.platform .zoom-panel-wrapper .zoom-reset {
        padding: 4px;
        color: var(--primary-color);
        cursor: pointer
    }

        .flat.platform .zoom-panel-wrapper .zoom-reset:hover {
            color: var(--primary-color-50)
        }

    .flat.platform .zoom-panel-wrapper:hover .zoom-panel {
        max-height: 88px
    }

.vr-threesixty-card {
    font-size: .85em !important;
    padding: .4rem !important
}

    .vr-threesixty-card .btn {
        padding: 0 .25rem
    }

    .vr-threesixty-card .number-font {
        font-size: 2em !important
    }

    .vr-threesixty-card h6 {
        font-size: .6rem !important
    }

    .vr-threesixty-card .nav-link {
        font-size: 1.2em !important
    }

@media screen and (min-device-width:1200px) and (max-device-width:1360px) and (-webkit-min-device-pixel-ratio:1) {
    .vr-threesixty-card {
        font-size: .75em !important
    }

        .vr-threesixty-card h6 {
            font-size: .6rem !important
        }
}

.flat.platform .vr-treeselector .vr-tree-selecteditems .selecteditems-container span.label .glyphicon:hover {
    color: var(--primary-color)
}

.flat.platform .contact-medium .field-item {
    font-size: .6rem !important;
    font-weight: 700 !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px
}

    .flat.platform .contact-medium .field-item i {
        color: var(--primary-color);
        padding-right: 10px;
        font-size: 1rem !important
    }

.flat.platform .footer-button {
    display: flex;
    justify-content: end;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, .05)
}

    .flat.platform .footer-button vr-button[standalone],
    .flat.platform .footer-button vr-button[standalone] div {
        height: 30px;
        line-height: 30px;
        margin: 0;
        text-align: right;
        width: 100%
    }

        .flat.platform .footer-button vr-button[standalone] .mdi {
            color: var(--primary-color);
            font-size: 24px;
            height: 30px;
            line-height: 30px;
            width: 30px
        }

        .flat.platform .footer-button vr-button[standalone]:hover .mdi {
            color: var(--secondary-color)
        }

.flat.platform .contact-medium-icons a {
    padding: 5px
}

    .flat.platform .contact-medium-icons a:focus .mdi,
    .flat.platform .contact-medium-icons a:hover .mdi,
    .flat.platform .contact-medium-with-title a:focus,
    .flat.platform .contact-medium-with-title a:focus .mdi,
    .flat.platform .contact-medium-with-title a:hover,
    .flat.platform .contact-medium-with-title a:hover .mdi {
        color: var(--secondary-color)
    }

.flat.platform .contact-medium-with-title .mdi {
    font-size: 1rem;
    height: 24px;
    line-height: 24px;
    width: 24px
}

.flat.platform .contact-medium-with-title .field-item {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    padding-bottom: 5px
}

.flat.platform .panel-vr .field-container.custom-title .field-value .vr-control-label {
    text-transform: capitalize;
    padding-top: 5px
}

.flat.platform .contact-medium-with-title .type-description {
    font-size: .6rem !important;
    font-weight: 400 !important
}

body #vertical-menu-btn i {
    font-size: 20px
}

body #vertical-menu-btn .dripicons-align-left {
    display: none
}

body.vertical-collpsed #vertical-menu-btn .dripicons-align-left {
    display: block
}

body.vertical-collpsed #vertical-menu-btn .dripicons-align-right {
    display: none
}

body.fullscreen-enable .mdi-fullscreen::before {
    content: "\f0294"
}

#page-topbar button.btn {
    height: 46px !important;
    padding: 4px 16px !important;
    display: block
}

#page-topbar .header-title.vr-notification-card,
#page-topbar .header-title.vr-user-card,
#page-topbar .page-info,
#page-topbar .vr-dateclock-item,
#page-topbar button#page-header-user-dropdown {
    display: flex;
    align-items: center;
    justify-content: center
}

    #page-header-user-dropdown .vr-user-label,
    #page-topbar .header-title.vr-notification-card .vr-notification-label,
    #page-topbar .header-title.vr-user-card .vr-user-label {
        color: inherit !important;
        align-self: inherit;
        padding: 0 5px
    }

#page-topbar .notification-card-dropdown-menu,
#page-topbar .user-card-dropdown-menu {
    margin-bottom: 0
}

    #page-topbar .notification-card-dropdown-menu .card-header,
    #page-topbar .user-card-dropdown-menu .card-header {
        padding: 10px 20px
    }

#page-topbar .vr-user-icon {
    display: inline-block;
    position: static
}

    #page-topbar .vr-notification-card i,
    #page-topbar .vr-user-icon i {
        margin: 0 !important;
        vertical-align: unset !important;
        line-height: 24px
    }

#page-topbar .notification-item .d-flex {
    padding: 5px !important;
    align-items: center
}

#page-topbar .notification-item .notification-icon {
    align-self: center !important
}

div[vr-modalcontent] .modal-dialog.vr-modal-lg,
div[vr-modalcontent] .modal-dialog.vr-modal-md,
div[vr-modalcontent] .modal-dialog.vr-modal-sm,
div[vr-modalcontent] .modal-dialog.vr-modal-xl {
    max-width: unset !important
}

.flat.platform .modal-body vr-form .action-bar {
    margin: 10px 0 0 0
}

.flat.platform .modal-content .action-bar .action-bar-left {
    width: 0
}

.modal-title {
    width: 100%;
    font-size: 16px
}

.flat .modal-header .close,
.flat .modal-header .expand {
    border: none
}

.panel-over-color.card {
    margin-bottom: 1.5rem;
    -webkit-box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);
    box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%)
}

    .panel-over-color.card .card-body {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 0 !important
    }

.flat.platform .vr-threesixty-card .span-summary,
.flat.platform .vr-threesixty-card .vr-datagrid-header-cell .vr-datagrid-celltext {
    font-size: .6rem !important
}

.ng-isolate-scope,
[vr-loader].ng-isolate-scope .loading-main-container,
[vr-loader].ng-isolate-scope div[ng-class*="{'divLoading'"],
span.ng-scope,
span.ng-scope > span,
vr-columns span,
vr-directivewrapper,
vr-row span {
    display: contents
}

vr-row vr-common-circle-levelindicator-runtime span {
    display: inline;
}

vr-code-editor .main-container span {
    display: inline
}

vr-genericdata-genericbusinessentity-runtime-row.ng-isolate-scope {
    display: inline
}

vr-genericdata-genericbusinessentity-runtime-section > vr-genericdata-genericbusinessentity-runtime-row.ng-isolate-scope {
    display: contents
}

vr-listitem.ng-isolate-scope {
    display: inline
}

vr-columns vr-chart span {
    display: inline
}

.flat.platform.fullscreen-enable vr-chart .glyphicon.glyphicon-fullscreen {
    display: none;
}

div[class*=col][no-padding=true] {
    padding: 0 !important
}

.vr-columns > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y)
}

div[class^=col-] {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
    float: left
}

.flat.platform .empty-line-col {
    padding-top: 23px
}

.flat.platform vr-columns[withemptyline=true] .empty-line-col {
    padding-top: 23px !important
}

.flat.platform .vr-datagrid-celltext vr-columns[withemptyline=true] .empty-line-col {
    padding-top: 18px !important;
}

.flat.platform vr-base-editor wysiwyg-edit .tinyeditor iframe {
    display: block
}

vr-columns[dummy-row] > div[class="col-lg-12 col-md-12 col-sm-12 "] {
    padding: 0 14px !important
}

.flat.platform #dropdownTabsFor > ul[aria-labelledby=dropdownTabsFor],
.flat.platform #dropdownTabsPrev > ul[aria-labelledby=dropdownTabsPrev] {
    left: 0
}

.flat.platform vr-renderasview .dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    white-space: nowrap
}

.flat.platform vr-tabs {
    display: block;
    width: 100%
}

    .flat.platform vr-tabs[vertical] {
        display: flex
    }

.flat.platform .vr-tabs {
    width: 100%;
    position: relative;
    white-space: nowrap;
    vertical-align: top;
    height: 32px;
    border-width: 1px 1px 3px !important;
    border-style: solid !important;
    border-color: var(--light-bg-color) !important;
    border-image: initial !important;
    background-color: #fff
}

    .flat.platform .vr-tabs[vertical] {
        width: 150px;
        margin-right: -5px
    }

    .flat.platform .vr-tabs vr-tab-header-link {
        height: 32px !important;
        line-height: 32px !important;
        padding: 0 !important;
        margin: 0 !important
    }

    .flat.platform .vr-tabs label {
        border: 0 solid var(--light-bg-color) !important;
        border-bottom: 3px var(--light-bg-color) solid !important;
        height: 32px;
        padding: 0 10px !important;
        background-color: unset !important;
        font-weight: 400;
        line-height: 32px;
        position: relative;
        border-radius: 0 !important;
        bottom: 0
    }

        .flat.platform .vr-tabs label .mdi {
            line-height: 1
        }

        .flat.platform .vr-tabs label > span.vr-header-label {
            text-align: center;
            height: 32px;
            line-height: 32px;
            padding: 0;
            font-size: .6rem;
            font-weight: 500;
            width: 100% !important;
            text-transform: uppercase
        }

            .flat.platform .vr-tabs label > span.vr-header-label:focus-visible {
                text-align: initial
            }

        .flat.platform .vr-tabs label span.ng-binding.ng-scope {
            display: inline;
            vertical-align: middle;
            text-align: center
        }

.flat.platform vr-tabs[vertical] .vr-tabs label {
    border: 0 solid #ddd !important;
    border-bottom: 3px #ddd solid !important
}

    .flat.platform vr-tabs[vertical] .vr-tabs label vr-header-label {
        text-align: left
    }

.flat.platform .vr-tabs label:after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    left: 50%;
    bottom: -3px;
    background-color: var(--light-bg-color);
    transition: all ease-in-out .3s
}

.flat.platform .vr-tabs .clicked-btn {
    color: var(--primary-color) !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
    background: #fff;
    bottom: 0
}

    .flat.platform .vr-tabs .clicked-btn:after,
    .flat.platform .vr-tabs label:hover:after {
        width: 100%;
        left: 0;
        background-color: var(--primary-color)
    }

.flat.platform vr-tabs[vertical] .vr-tabs .clicked-btn {
    border-bottom: 3px solid var(--primary-color) !important
}

.flat.platform .vr-tabs vr-tab-header-link.with-icon label .tab-icon-class {
    font-size: 1rem;
    padding-right: 6px
}

.flat.platform vr-directivetabs[usecardlayout=false] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group-custom.vr-tabs > .sortable-container > vr-tab-header-link > span > label,
.flat.platform vr-directivetabs[usecardlayout=true] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group-custom.vr-tabs > .sortable-container > vr-tab-header-link > span > label {
    width: auto !important;
    max-width: 180px !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 8px
}

.flat.platform vr-directivetabs[usecardlayout=false] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group-custom.vr-tabs,
.flat.platform vr-directivetabs[usecardlayout=true] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group-custom.vr-tabs {
    display: flex;
    align-items: center;
    flex: 1
}

.flat.platform vr-directivetabs[usecardlayout=true] .vr-tabs-expander.forward {
    left: 0
}

.flat.platform vr-tabs .sortable-container,
.flat.platform vr-tabs .tab-validation-sign,
.flat.platform vr-tabs vr-tab-header-link.ng-isolate-scope,
.flat.platform vr-tabs vr-tab-header-link > span,
.flat.platform vr-tabs vr-tab-header-links {
    display: inline
}

.flat.platform vr-directivetabs[usecardlayout=false] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group-custom.vr-tabs > .sortable-container,
.flat.platform vr-directivetabs[usecardlayout=true] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group-custom.vr-tabs > .sortable-container {
    display: inline-flex
}

.flat.platform vr-directivetabs[usecardlayout=true] .vr-tabs-expander > ul {
    padding: 2px 0;
    margin-top: -4px;
    border-color: var(--dark-bg-color);
    background: var(--dark-bg-color)
}

.flat.platform vr-directivetabs[usecardlayout=true] .vr-tabs-expander .dropdown-menu > li > a {
    font-size: .7rem;
    font-weight: 500;
    padding: 4px 8px;
    background: var(--dark-bg-color);
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.flat.platform vr-directivetabs[usecardlayout=true] .vr-tabs-expander .tab-icon-class {
    font-size: 1rem;
    padding-right: 6px
}

.flat.platform vr-directivetabs[usecardlayout=true] vr-tabs {
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    border-radius: .25rem .25rem 0 0;
    margin: 0 0 1rem 0
}

.flat.platform vr-directivetabs[usecardlayout=true] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group.btn-group-custom.vr-tabs {
    padding: .4rem 1rem;
    margin-bottom: 0;
    background: var(--dark-bg-color) !important;
    border-bottom: 0 solid var(--bs-body-bg) !important;
    color: var(--bs-white-color) !important;
    border-radius: 0 !important;
    top: unset;
    height: unset;
    line-height: unset
}

.flat.platform vr-directivetabs[usecardlayout=true] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group-custom.vr-tabs > .sortable-container > vr-tab-header-link > span > label {
    font-weight: 400;
    color: var(--bs-white-color) !important;
    border: none !important
}

.flat.platform vr-directivetabs[usecardlayout=true] > span > vr-tabs > vr-tabs-header > vr-row > div > vr-columns > div > vr-tab-header-links > .btn-group.btn-group-custom.vr-tabs > .sortable-container > vr-tab-header-link > span > label.clicked-btn {
    background-color: var(--primary-color) !important
}

vr-tabs .btn-group.btn-group-custom.vr-tabs {
    display: inline-block
}

vr-tabs[flat] .sortable-container,
vr-tabs[flat] vr-tab-header-link.ng-isolate-scope,
vr-tabs[flat] vr-tab-header-link > span {
    display: flex;
    width: 100%
}

vr-tabs .vr-tabs-expander .dropdown-menu > li > a:focus,
vr-tabs .vr-tabs-expander .dropdown-menu > li > a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5
}

vr-tabs .vr-tabs-expander .dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
    min-width: 160px
}

.flat.platform .vr-choices-filter {
    position: relative;
    display: block;
    margin: 0 -1px 0 0 !important;
    width: 100%
}

.flat.platform vr-search-view-options .vr-choices-filter {
    margin: 0;
    width: 100%
}

.flat.platform vr-search-view-options .row.remove-line {
    margin: 0;
    padding: 0;
    --bs-gutter-x: 0
}

.flat.platform vr-search-view-options[isdummyrow] .row.remove-line {
    margin: 0 -.5rem 0 .5rem !important;
    padding: 0 !important
}

.flat.platform vr-search-view-options .row.remove-line vr-columns[dummy-row] > div[class="col-lg-12 col-md-12 col-sm-12 "] {
    padding: 0 !important;
    margin: -10px -.5rem 5px !important;
    width: calc(100% + 2px) !important
}

    .flat.platform vr-search-view-options .row.remove-line vr-columns[dummy-row] > div[class="col-lg-12 col-md-12 col-sm-12 "] .vr-choices-filter {
        margin: 0 0 0 -1px !important;
        width: 100%;
        padding: 0
    }

.flat.platform vr-tabs[flat] vr-tabs-header > vr-row > div > vr-columns > div[class^=col]:first-child {
    padding: 0 2px
}

.flat.platform vr-tabs[flat] .vr-tabs label.clicked-btn,
.flat.platform vr-tabs[flat] .vr-tabs label:hover {
    border-bottom: 4px solid var(--primary-color) !important;
    color: var(--primary-color) !important
}

vr-fileupload #mainInput span.ng-scope,
vr-fileupload #mainInput span.ng-scope > span {
    display: inline-block;
    display: flex;
    justify-self: center;
}

.vr-datagrid-celltext .vr-file-upload.form-control {
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

vr-fileupload .vr-file-btn .vr-file-upload-paperclip {
    font-size: 16px;
    cursor: pointer;
    line-height: 26px;
    text-align: center
}

.vr-file-btn {
    padding: 0 !important
}

    .vr-file-btn input[type=file] {
        font-size: 16px;
        height: 26px
    }

vr-actionbar .action-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    z-index: 1
}

    vr-actionbar .action-bar .action-container {
        align-self: end;
        width: auto
    }

    vr-actionbar .action-bar .btn {
        font-size: 14px
    }

.flat.platform vr-actionbar {
    display: block;
    margin: 0
}

span.ng-scope[bs-tooltip] {
    display: inline
}

.tooltip {
    display: flex;
    visibility: visible;
    justify-content: space-around
}

    .tooltip .tooltip-arrow {
        top: -5px;
        border-width: 0 5px 5px;
        border-style: solid;
        width: 0;
        height: 0;
        border-color: transparent
    }

vr-select .dropdown-container2 {
    position: relative
}

    vr-select .btn .caret,
    vr-select .btn span,
    vr-select .dropdown .vr-select-remove,
    vr-select .dropdown-container2 .vr-select-add,
    vr-select.ng-isolate-scope,
    vr-select span.remove-selected-itemremove-selected-item.ng-scope {
        display: inline
    }

vr-select.ng-isolate-scope {
    width: 100%
}

vr-select .dropdown-container2 .vr-select-add {
    padding: 0;
    position: absolute;
    top: -14px;
    right: 0;
    font-size: 12px;
    color: #5cb85c
}

vr-select .vr-select-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

vr-select .dropdown-toggle::after,
vr-textbox-multiple .dropdown-toggle::after {
    display: none
}

vr-textbox-multiple .items-container span {
    display: inline-block
}

vr-select a {
    text-decoration: none
}

vr-select .dropdown-container1 {
    position: relative
}

.flat.platform vr-select .vr-dropdown-select.btn {
    width: 100%;
    text-align: left;
    height: 100% !important;
    cursor: default;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    background-color: #fff;
    border: 1px solid #ddd;
    white-space: nowrap;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.flat.platform .vr-datagrid-celltext vr-select .vr-dropdown-select.btn {
    width: 100%;
    text-align: left;
    position: static;
    height: 20px !important;
    padding: 0px 12px !important;
}

vr-select .vr-dropdown-select.btn:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

vr-select .custom-label {
    display: inline-block
}

vr-select .selected-items-container {
    display: block
}

.vr-datetime-container .input-group-addon:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.vr-datetime-container .input-group-addon {
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    width: 24px;
    color: var(--primary-color);
    text-align: center;
    background-color: var(--light-primary-color);
    border: none !important;
    display: table-cell
}

.vr-datetime-container .datepicker {
    border: 0 solid #f8f9fa;
    padding: 0
}

    .vr-datetime-container .datepicker .table-condensed > tbody > tr > td,
    .vr-datetime-container .datepicker .table-condensed > thead > tr > th {
        padding: 5px
    }

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease
}

.vr-datetime-container .collapse {
    display: none
}

    .vr-datetime-container .collapse.in {
        display: block
    }



.flat.platform vr-cellviewer span {
    display: inline
}

.flat.platform vr-excel-wb .loading-main-container {
    display: block;
    font-size: 14px
}

.flat.platform vr-panel > div > div.panel-body {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important
}

.flat.platform .panel-body.card-body {
    padding: 0 !important
}

.table-bordered td,
.table-bordered th {
    padding: .25rem .5rem !important
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal !important
}

.flat.platform #sidebar-menu {
    padding-bottom: 100px;
    background: var(--dark-bg-color)
}

    .flat.platform #sidebar-menu ul li a {
        padding: 10px 10px 10px 10px
    }

        .flat.platform #sidebar-menu ul li a i {
            min-width: 1rem;
            line-height: 1rem
        }

    .flat.platform #sidebar-menu ul li ul.sub-menu li a:before {
        content: "\e0b6" !important;
        font-family: typicons !important;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        line-height: 1.4rem;
        font-size: 11px !important;
        padding-right: .8rem
    }

    .flat.platform #sidebar-menu ul li ul.sub-menu li ul.sub-menu li a:before {
        content: "\e0b5" !important;
        font-size: 12px !important
    }

    .flat.platform #sidebar-menu ul li ul.sub-menu.mm-show {
        height: auto !important
    }

.flat.platform.vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    padding: 0
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span {
    padding-left: 32px !important
}

.btn .badge.vr-taskalert-count {
    position: absolute;
    top: 17px;
    right: 7px;
    line-height: 1;
    border-radius: 10px;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 500;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem !important;
    padding-right: .6em;
    padding-left: .6em
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.flat.platform .main-content .row-expandable-column-spacer {
    width: 25px !important;
    min-height: 25px !important;
    margin: 0 !important
}

.grid-cell-value {
    color: var(--primary-color);
    font-weight: 500
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:nth-last-child(-n+5) > ul {
    bottom: 0
}

.flat.platform .main-content .vr-top-nav-container {
    top: 46px;
    display: flex;
    border: none;
    line-height: 24px;
    background: #fff;
    padding: 0 !important;
    width: 100%;
    margin: 0;
    z-index: calc(101 + var(--vr-base-z-index));
    position: sticky !important
}

.flat.platform span.vr-module-tabs-view {
    margin-left: 0 !important;
    display: flex;
    align-items: center
}


.flat.platform .vr-module-tabs-view label {
    border-bottom: 3px solid transparent !important;
    color: var(--bs-body-color) !important
}

    .flat.platform .vr-module-tabs-view label:hover {
        color: var(--primary-color) !important;
        border-bottom: 3px solid var(--primary-color) !important;
        text-decoration: none !important
    }

.flat.platform .vr-module-tabs-view .choiced-view {
    color: var(--primary-color) !important;
    border-bottom: 3px solid var(--primary-color) !important;
    text-decoration: none !important
}

    .flat.platform .vr-module-tabs-view .choiced-view:hover {
        background-color: unset !important
    }

.flat.platform .vr-top-nav-container .page-sperator {
    color: var(--primary-color) !important
}

.flat.platform .vr-module-tabs-view .list-view-icon {
    font-family: "Material Design Icons";
    speak: none;
    font-style: normal;
    font-weight: 500;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    top: 0;
    left: 0;
    font-size: 16px !important
}

    .flat.platform .vr-module-tabs-view .list-view-icon.glyphicon-forward:before {
        content: "\f0798" !important;
        color: var(--primary-color) !important
    }

    .flat.platform .vr-module-tabs-view .list-view-icon.glyphicon-backward:before {
        content: "\f0797" !important;
        color: var(--primary-color) !important
    }

.flat.platform #dropdownTabsFor a:has(.list-view-icon) {
    padding: 5px 0
}

.flat.platform .flat .vr-top-nav-container .page-sperator,
.flat.platform .vr-module-tabs-view .list-view-icon {
    padding: 5px !important
}

.flat.platform .main-content #mainNgView {
    padding: 0;
    padding-top: 0 !important
}

.flat.platform .main-content vr-mainview {
    display: block !important;
    padding-top: 15px !important
}

.flat.platform .flex-end {
    display: flex;
    justify-content: flex-end
}

.loading-container > svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px
}

.flat.platform .main-content .vr-datagrid-body.row-full-screen {
    width: calc(100% - 250px);
    left: 240px;
    top: 50px
}

    .flat.platform .main-content .vr-datagrid-body.row-full-screen.normal-full-screen {
        width: calc(100% - 260px);
        left: 250px;
        top: 50px
    }

.flat.platform .version-container.collapsed-menu-in {
    width: calc(100% - 70px)
}

@media (max-width:992px) {
    .flat.platform .main-content .vr-datagrid-body.row-full-screen {
        width: calc(100% - 45px);
        left: 22px
    }

        .flat.platform .main-content .vr-datagrid-body.row-full-screen.normal-full-screen {
            width: calc(100% - 55px);
            left: 32px
        }
}

.flat.platform .bottom-row-action .dropdown-menu.expanded-row-action.show {
    position: fixed !important;
    top: inherit !important;
    left: inherit !important
}

.flat.platform.vertical-collpsed .main-content .vr-datagrid-body.row-full-screen {
    width: calc(100% - 80px);
    left: 70px
}

    .flat.platform.vertical-collpsed .main-content .vr-datagrid-body.row-full-screen.normal-full-screen {
        width: calc(100% - 90px);
        left: 80px
    }

.flat.platform .main-content vr-mainview.topspacer-in .vr-datagrid-body.row-full-screen,
.flat.platform .main-content vr-mainview[topspacer-in="true"] .vr-datagrid-body.row-full-screen {
    top: 75px
}

.flat.platform.modal-open-inline #modalContainer .modal .modal-content .modal-body {
    padding: 0 !important
}

.flat.platform .vr-modal-full-screen-row .row-header-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
    white-space: nowrap
}

.flat.platform .main-content #mainNgView ~ #modalContainer {
    margin-top: 5px
}

.flat.platform .main-content #mainNgView.topspacer-in ~ #modalContainer,
.flat.platform .main-content #mainNgView[topspacer-in="true"] ~ #modalContainer {
    margin-top: 30px
}

.flat.platform .vr-datagrid-body.row-full-screen .row-main-content.expanded.row-header-container {
    padding: 0;
    margin: 0;
    width: 100% !important
}

.flat.platform .action-full-screen-icon .dropdown-toggle .caret {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent
}

.flat.platform .action-full-screen-icon .dropdown-toggle:after {
    display: none
}

.flat.platform .vr-datagrid .vr-datagrid-body.row-full-screen > .row-main-content.expanded > div > div[ng-if="!ctrl.isMobile"] > .vr-datagrid-row {
    width: 100% !important;
    margin: 0;
}

.flat.platform .vr-datagrid .vr-datagrid-body.row-full-screen .row-main-content.expanded > div > .vr-datagrid-row.normal-row {
    margin: 0 0 15px 0;
    border: 1px solid var(--light-primary-color) !important
}

.flat.platform vr-choices .vr-tabs.radio-btn-groupe {
    border: 0 solid transparent !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: unset !important
}

    .flat.platform vr-choices .vr-tabs.radio-btn-groupe vr-choice .hand-cursor {
        border: 0 !important;
        background-color: var(--light-bg-color) !important;
        color: var(--bs-body-color);
        display: inline-block;
        font-weight: 400 !important;
        line-height: 32px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: 0 !important;
        margin: 0 !important;
        font-size: .875rem;
        border-radius: .25rem !important;
        width: 60px;
        height: 32px !important;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out
    }

        .flat.platform vr-choices .vr-tabs.radio-btn-groupe vr-choice .hand-cursor span {
            height: unset !important;
            padding: 0;
            margin: 0;
            text-align: center;
            vertical-align: middle;
            line-height: 32px
        }

    .flat.platform vr-choices .vr-tabs.radio-btn-groupe vr-choice:first-child .hand-cursor {
        border-radius: .25rem 0 0 .25rem !important
    }

    .flat.platform vr-choices .vr-tabs.radio-btn-groupe vr-choice:last-child .hand-cursor {
        border-radius: 0 .25rem .25rem 0 !important
    }

    .flat.platform vr-choices .vr-tabs.radio-btn-groupe vr-choice .hand-cursor.clicked-btn {
        border: 0 !important;
        background-color: var(--bs-color-green) !important;
        color: var(--bs-white-color)
    }

.flat.platform .vr-groupfilter-button button {
    border: 0 !important;
    background-color: var(--bs-color-green) !important;
    color: var(--bs-white-color);
    margin-bottom: 0
}

.flat.platform .panel-vr.panel-vr-child > .panel-body {
    background: #fff
}

.flat.platform .required-inpute > div:first-child {
    border: 1px solid var(--bs-color-red) !important;
    box-shadow: none !important
}

.flat.platform vr-section[collapsible] .panel-body > vr-validator > .required-inpute > div:first-child {
    padding: 10px 0 !important
}

.flat.platform vr-section[light] .vr-normal-panel.panel-vr.card {
    margin: 0
}

.flat.platform .panel-vr.panel-vr-child > .panel-heading label {
    padding: 0 2px 0 2px !important;
    left: 6px;
    top: -8px;
    background: var(--bs-white-color) !important
}

.flat.platform .panel-vr.vr-normal-panel > .panel-heading .collapsible-icon {
    padding: 0 4px;
    background: var(--primary-color) !important;
    color: var(--bs-white-color) !important;
    height: 30px;
    line-height: 30px;
    display: inline-block
}

.flat.platform .panel-vr.vr-normal-panel > .panel-heading .collapsible-icon {
    padding: 0 4px;
    background: var(--primary-color) !important;
    color: var(--bs-white-color) !important;
    height: 30px;
    line-height: 30px;
    display: inline-block
}

.flat.platform .panel-vr.panel-vr-child > .panel-heading .collapsible-icon {
    font-size: 16px;
    height: 16px;
    line-height: 16px !important;
    display: inline-block;
    padding: 0 10px !important;
    color: var(--bs-color-green) !important
}

.flat.platform .panel-vr.panel-vr-child.light > .panel-body {
    padding: 6px 6px !important
}

.flat.platform .panel-vr.panel-vr-child {
    margin-top: 12px;
    margin-bottom: 6px
}

    .flat.platform .panel-vr.panel-vr-child .panel-heading {
        padding: 0 6px 0 0;
        margin-top: 0;
        height: 16px
    }

    .flat.platform .panel-vr.panel-vr-child .panel-body .close-condition {
        position: relative
    }

        .flat.platform .panel-vr.panel-vr-child .panel-body .close-condition .parent-col-container {
            display: flex;
            align-items: flex-end
        }

        .flat.platform .panel-vr.panel-vr-child .panel-body .close-condition .mdi-close-box.hand-cursor {
            position: absolute;
            top: 1px;
            right: 1px;
            font-size: 16px;
            line-height: 16px;
            color: var(--bs-color-red) !important
        }

    .flat.platform .panel-vr.panel-vr-child.light > .panel-body,
    .flat.platform .panel-vr.panel-vr-child > .panel-heading {
        border: none !important
    }

.flat.platform .panel-vr .field-label .vr-control-label:after,
.flat.platform .vr-bordered-container .field-label .vr-control-label:after,
.flat.platform .vr-detail-summary-custom .field-label .vr-control-label:after {
    padding-right: 4px
}

.flat.platform .panel-vr .field-container.modern .field-value .vr-control-label,
.flat.platform .vr-bordered-container .field-container.modern .field-value .vr-control-label,
.flat.platform .vr-detail-summary-custom .field-container.modern .field-value .vr-control-label {
    margin: 0 !important
}

.flat.platform .panel-vr .field-container,
.flat.platform .vr-bordered-container .field-container,
.flat.platform .vr-detail-summary-custom .field-container {
    margin-bottom: 2px
}

.flat.platform .panel-vr .field-value,
.flat.platform .vr-bordered-container .field-value,
.flat.platform .vr-detail-summary-custom .field-value {
    padding: 0
}

.flat.platform .panel-vr .field-label {
    padding: 0
}

.flat.platform .panel-vr .field-container.classic {
    margin-top: 0
}

.flat.platform .switch.checked small {
    left: 18px
}

.flat.platform .switch small {
    width: 15px;
    height: 15px
}

.flat.platform .switch {
    height: 15px;
    border-radius: 15px
}

.flat.platform .vr-switch.vanrise-inpute .vr-hint-input {
    top: 0
}

.flat.platform .switch.checked {
    background: var(--bs-color-green) !important;
    border-color: var(--bs-color-green) !important
}

.flat.platform vr-button[type=Add][standalone] div > span {
    color: var(--bs-color-green) !important;
    font-size: 24px
}

.flat.platform .stansalone-button,
.flat.platform vr-button[standalone] {
    display: block !important;
    float: left;
    color: var(--primary-color)
}

.flat.platform .stansalone-button,
.flat.platform vr-button[standalone] {
    height: 24px;
    line-height: 24px;
    margin-bottom: 10px;
    padding: 0 1px
}

.flat.platform .vr-datagrid-celltext > vr-button[standalone] {
    margin-bottom: unset
}

.flat.platform .stansalone-button .mdi,
.flat.platform vr-button[standalone] .mdi {
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center
}

.flat.platform vr-button[type=UploadExcel][standalone] div > span {
    color: var(--bs-color-green) !important
}

.flat.platform .vr-datagrid-body .vr-row-action-container .close-icon {
    background: 0 0;
    color: var(--bs-white-color);
    text-shadow: none;
    height: 30px;
    width: 40px;
    line-height: 30px;
    border-radius: 0;
    margin: 0 auto;
    text-align: center;
    padding: 0
}

    .flat.platform .vr-datagrid-body .vr-row-action-container .close-icon span {
        display: block;
        color: var(--primary-color);
        font-size: 24px
    }

    .flat.platform .vr-datagrid-body .vr-row-action-container .close-icon:hover span {
        color: var(--dark-primary-color)
    }

.flat.platform .vr-tabs[flat] label:hover {
    background: unset
}

.flat.platform .row-header-container .inline-btn button,
.flat.platform .vr-row-action-container .inline-btn button {
    height: unset !important;
    margin-top: 0;
    font-size: .6rem;
    line-height: 22px;
    font-weight: 500
}

.flat.platform .stages-group .stage-item {
    font-size: .8rem
}

.flat.platform .panel-vr .field-value:hover,
.flat.platform .vr-bordered-container .field-value:hover,
.flat.platform .vr-detail-summary-custom .field-value:hover {
    border-color: var(--primary-color)
}

.flat.platform #page-header-notifications-dropdown.empty-list {
    pointer-events: none
}

.flat.platform commonbes-vruser-notifications .noti-icon .badge {
    min-width: 20px;
    position: absolute;
    top: 15px;
    right: 5px;
    border-radius: 1em !important;
    padding: 4px
}

.flat.platform commonbes-vruser-notifications .message-content-warpper {
    position: relative;
    height: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 175px
}

.flat.platform commonbes-vruser-notifications .notification-directive {
    display: inline !important
}

.flat.platform commonbes-vruser-notifications .message-content-warpper * {
    text-overflow: ellipsis;
    overflow: hidden
}

.flat.platform commonbes-vruser-notifications .notification-warpper {
    background-color: #fff;
    border-bottom: 1px solid var(--primary-color-20);
    display: flex
}

    .flat.platform commonbes-vruser-notifications .notification-warpper.not-read {
        background-color: var(--primary-color-10)
    }

        .flat.platform commonbes-vruser-notifications .notification-warpper.not-read:after {
            position: absolute;
            width: 7px;
            height: 7px;
            content: "";
            background: var(--primary-color);
            right: 30px;
            border-radius: 50%;
            -webkit-animation: dot-bg 2s infinite
        }

    .flat.platform commonbes-vruser-notifications .notification-warpper:hover {
        background-color: #f8f9fa
    }

    .flat.platform commonbes-vruser-notifications .notification-warpper.not-read:hover {
        background-color: var(--light-primary-color)
    }

.flat.platform .vr-alert-notify {
    background-image: none
}

.flat.platform .notification-dropdown,
.flat.platform .user-dropdown {
    border: none
}

.flat.platform .notification-warpper .close-button {
    line-height: 18px;
    width: 18px;
    height: 18px;
    align-self: flex-start
}

    .flat.platform .notification-warpper .close-button:hover {
        color: var(--primary-color)
    }

.flat.platform .notification-warpper .sender-name {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 12px
}

.flat.platform .vr-alert-notify {
    background: #fff;
    border-radius: .25rem;
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .1) !important
}

    .flat.platform .vr-alert-notify:hover {
        background-image: none
    }

    .flat.platform .vr-alert-notify .vr-alert-header {
        color: #fff;
        padding: 10px 20px;
        margin-bottom: 0;
        background-color: var(--dark-bg-color);
        border-bottom: 0 solid var(--dark-bg-color);
        border-radius: .25rem .25rem 0 0;
        height: 46px;
        font-size: 13.44px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .flat.platform .vr-alert-notify .cg-notify-message-template {
        border-radius: 0 0 .25rem .25rem;
        text-align: left
    }

        .flat.platform .vr-alert-notify .cg-notify-message-template .message-content-warpper {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }

    .flat.platform .vr-alert-notify.cg-notify-message .cg-notify-close {
        color: #fff;
        position: relative;
        height: 18px;
        width: 18px;
        line-height: 18px;
        top: 0;
        right: 0
    }

        .flat.platform .vr-alert-notify.cg-notify-message .cg-notify-close span {
            font-size: 18px;
            margin: 0;
            padding: 0;
            line-height: 18px
        }

@-webkit-keyframes dot-bg {
    0% {
        background-color: var(--bs-color-light-blue)
    }

    50% {
        background-color: var(--bs-color-purpule)
    }

    100% {
        background-color: var(--bs-color-light-blue)
    }
}

.flat.platform div[class^=col-]:has(>.field-container.grid-cell) {
    padding: 0 !important
}

.flat.platform .vr-light-panel.panel-vr.card .field-container.grid-cell {
    border-right: 1px solid var(--light-primary-color);
    margin-bottom: 0;
    right: -1px;
    padding-left: 1px
}

.flat.platform .field-container.grid-cell vr-label-dynamic .vr-control-label {
    padding: 0;
    margin: 2px 0 0;
    color: var(--bs-body-color) !important;
    font-weight: 400 !important;
    font-size: 11px !important
}

    .flat.platform .field-container.grid-cell vr-label-dynamic .vr-control-label label {
        padding: 0;
        margin: 0
    }

.flat.platform .field-container.grid-cell .field-value {
    border-bottom: none;
    padding: 0;
    margin: 0;
    width: unset
}

.flat.platform .runtime-process {
    display: flex;
    align-items: center;
    border: 1px solid var(--light-bg-color-50);
    border-left: 6px solid var(--primary-color);
    margin: 10px
}

    .flat.platform .runtime-process.process-completed {
        border: 1px solid var(--bs-color-green-20);
        border-left: 6px solid var(--bs-color-green)
    }

    .flat.platform .runtime-process.process-aborted {
        border: 1px solid var(--bs-color-red-20);
        border-left: 6px solid var(--bs-color-red)
    }

    .flat.platform .runtime-process.process-canceled {
        border: 1px solid var(--bs-color-red-20);
        border-left: 6px solid var(--bs-color-red)
    }

    .flat.platform .runtime-process .vr-runtime-icon {
        width: 106px;
        height: 106px;
        position: relative;
        margin: 0
    }

    .flat.platform .runtime-process.process-completed .vr-runtime-icon {
        background: var(--bs-color-green-20)
    }

    .flat.platform .runtime-process.process-aborted .vr-runtime-icon {
        background: var(--bs-color-red-20)
    }

    .flat.platform .runtime-process.process-canceled .vr-runtime-icon {
        background: var(--bs-color-red-20)
    }

.flat.platform .vr-runtime-icon:after {
    font-family: "Material Design Icons";
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 0;
    width: 106px;
    height: 106px;
    line-height: 106px;
    text-align: center;
    font-size: 84px;
    padding: 0 !important;
    color: #666
}

.flat.platform .runtime-process.process-completed .vr-runtime-icon:after {
    color: var(--bs-color-green) !important;
    content: "\f05e1"
}

.flat.platform .runtime-process.process-aborted .vr-runtime-icon:after {
    color: var(--bs-color-red) !important;
    content: "\f0425"
}

.flat.platform .runtime-process.process-canceled .vr-runtime-icon:after {
    color: var(--bs-color-red) !important;
    content: "\f1644"
}

.flat.platform .runtime-process .vr-runtime-message {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700
}

.flat.platform .runtime-process.process-completed .vr-runtime-message {
    color: var(--bs-color-green) !important
}

.flat.platform .runtime-process.process-aborted .vr-runtime-message,
.flat.platform .runtime-process.process-canceled .vr-runtime-message {
    color: var(--bs-color-red) !important
}

.flat.platform .runtime-process .vr-runtime-message::first-letter {
    text-transform: uppercase
}


.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-success,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-success {
    background-color: var(--bs-color-green);
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-warning,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-warning {
    background: var(--bs-color-yellow) !important;
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-warning-1,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-warning-1 {
    background: var(--bs-color-yellow-light) !important;
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-warning-2,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-warning-2 {
    background: var(--bs-color-orange) !important;
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-danger,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-danger {
    background: var(--bs-color-red) !important;
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-info,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-info {
    background: var(--bs-color-blue) !important;
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-primary,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-primary {
    background: var(--primary-color) !important;
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .label.label-default,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .label.label-default {
    background: var(--dark-bg-color) !important;
}

.flat.platform vr-genericdata-notificationmessageeditor-definition .danger-font,
.flat.platform vr-genericdata-notificationmessageeditor-runtime .danger-font {
    color: var(--bs-color-red) !important;
}

.flat.platform .grid-header {
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    box-shadow: none;
    margin: 0 0 0.5rem 0;
    margin-bottom: 0;
    background: var(--light-primary-color) !important;
    color: var(--primary-color) !important;
    border-radius: 0 !important;
    top: unset;
    height: 30px;
    line-height: unset;
}

    .flat.platform .grid-header .card-title {
        color: var(--primary-color) !important;
        padding: 0;
        margin-bottom: 0;
        font-size: 0.75rem;
        line-height: 29px;
        font-weight: 700;
        text-transform: uppercase;
        width: 100%;
    }

        .flat.platform .grid-header .card-title > .title-element {
            display: inline;
            padding: 0 10px;
        }

    .flat.platform .grid-header > .card-icon-container,
    .flat.platform .panel-vr.card > .panel-heading.card-header .card-icon-container {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--primary-color) !important;
        margin: 0 10px;
        text-align: center;
        font-size: 16px;
    }

        .flat.platform .grid-header > .card-icon-container .card-icon,
        .flat.platform .panel-vr.card > .panel-heading.card-header .card-icon-container .card-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--primary-color) !important;
            text-align: center;
            font-size: 20px;
        }

.flat.platform .grid-with-header-body {
    border: 1px solid var(--primary-color-50) !important;
    margin-bottom: 10px;
}

    .flat.platform .grid-with-header-body #gridBodyContainer {
        min-height: 94px;
    }

.flat.platform vr-columns[tileitem] > div[class^="col"] {
    padding: 8px;
}

.flat.platform vr-columns[tileitem].is-parent-container > div[class^="col"] {
    padding: 0px !important;
}

.flat.platform vr-tabs vr-tab-header-links.include-header .btn-group.btn-group-custom.vr-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-color) !important;
    color: var(--bs-white-color) !important;
    border-width: 0px !important;
    height: 30px !important;
}

.flat.platform vr-section[light] .vr-light-panel.panel-vr.card > .panel-heading.card-header .card-title {
    background-color: var(--primary-color) !important;
    color: var(--bs-white-color) !important;
}

.flat.platform vr-tabs vr-tab-header-links.include-header .btn-group.btn-group-custom.vr-tabs .tabs-header {
    display: block;
    color: var(--bs-white-color) !important;
    padding: 0;
    margin-bottom: 0;
    font-size: .7rem;
    line-height: 29px;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
    padding: 0 10px !important;
    line-height: 30px !important;
    max-width: calc(100% - 3rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.flat.platform vr-tabs vr-tab-header-links.include-header .btn-group.btn-group-custom.vr-tabs .sortable-container {
    display: flex;
    margin-right: 10px;
    width: auto;
}

.flat.platform vr-tabs vr-tab-header-links.include-header .btn-group.btn-group-custom.vr-tabs vr-tab-header-link {
    height: 26px !important;
    line-height: 26px !important;
}

.flat.platform vr-tabs vr-tab-header-links.include-header vr-tab-header-link.ng-isolate-scope,
.flat.platform vr-tabs vr-tab-header-links.include-header vr-tab-header-link > span,
.flat.platform vr-tabs vr-tab-header-links.include-header vr-tab-header-links {
    display: flex;
}

.flat.platform vr-tabs vr-tab-header-links.include-header .btn-group.btn-group-custom.vr-tabs label {
    height: 26px !important;
    line-height: 26px !important;
    border: none !important;
    background: var(--primary-color);
    color: var(--bs-white-color) !important;
    border-bottom: 0px !important;
    padding: 0rem 0.5rem !important;
    width: auto !important;
    margin: 2px 0 0 !important;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    font-weight: 500;
    font-size: .7rem !important;
}

    .flat.platform vr-tabs vr-tab-header-links.include-header .btn-group.btn-group-custom.vr-tabs label.clicked-btn {
        color: var(--primary-color) !important;
        background: var(--bs-white-color) !important;
    }

.flat.platform vr-tabs vr-tab-header-links.include-header .clicked-btn:after,
.flat.platform vr-tabs vr-tab-header-links.include-header label:hover:after {
    display: none;
}

.flat.platform vr-tabs vr-tab-header-links.include-header .btn-group.btn-group-custom.vr-tabs label span.vr-header-label {
    text-align: center;
    height: 26px;
    line-height: 26px;
    display: flex;
}

.flat.platform vr-directivewrapper[embeddedheader="true"] vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords {
    display: block;
    border: 1px solid var(--light-primary-color) !important;
}

.flat.platform vr-common-tabtiles-runtime vr-tabs,
.flat.platform vr-section[light] .vr-normal-panel.panel-vr.card,
.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords {
    -webkit-box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);
}

.flat.platform vr-common-tabtiles-runtime vr-tab vr-columns[tabs=true] > div[class^=col] {
    border: unset !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.flat.platform .vr-figure {
    background-color: var(--bs-white-color) !important;
    color: var(--primary-color);
    padding: 0.5rem !important;
    border: 1px solid var(--light-primary-color) !important;
    border-top: unset !important;
}

    .flat.platform .vr-figure .figure-data-content .figure-item {
        border-bottom: 1px dashed var(--primary-color-50);
    }

    .flat.platform .vr-figure .figure-data-content [class*='col-']:last-child .figure-item {
        border-bottom: none;
    }


    .flat.platform .vr-figure .figure-data-content .figure-item .item-label {
        display: block;
        text-align: left;
        overflow: hidden;
        color: var(--primary-color);
        font-size: 0.7rem;
    }

    .flat.platform .vr-figure .figure-data-content .figure-item .item-value {
        display: block;
        text-align: right;
        margin-left: auto;
        font-weight: bold;
        font-size: 30px;
        font-size: 1.3rem;
        padding: 0px;
        line-height: 1.3rem;
    }

    .flat.platform .vr-figure .figure-info-content > img {
        width: 4rem;
        height: 4rem;
        text-align: center;
        line-height: 3.6rem;
        font-size: 32px;
        color: var(--bs-white-color);
        background-color: var(--primary-color) !important;
        border-radius: 50%;
        padding: 0.2rem !important;
        background-color: var(--primary-color-30) !important;
    }


.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-header.vr-datagrid-header-simple, .flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-header.vr-datagrid-header-simple div {
    background: var(--light-primary-color) !important;
    color: var(--primary-color);
    height: 30px !important;
    line-height: 30px !important;
    font-size: .7rem;
}

    .flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-header.vr-datagrid-header-simple .vr-grid-menu-box {
        background: var(--light-primary-color) !important;
    }

.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-row, .flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-cell-container {
    height: 30px !important;
    line-height: 30px !important;
}

.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-header-cell .vr-datagrid-celltext {
    color: var(--primary-color) !important;
    font-size: .7rem;
}

.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-body .row-main-content .span-summary {
    font-size: .7rem;
    display: inline;
    color: var(--bs-body-color) !important;
}

.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid[alternative-color=true] .row-main-content,
.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .row-main-content:has(.vr-datagrid-datacells-click).row-expandable-column-spacer,
.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-datacells-click .vr-datagrid-cell-container {
    background: var(--bs-white-color) !important;
}

    .flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid[alternative-color=true] .row-main-content:hover,
    .flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .row-main-content:has(.vr-datagrid-datacells-click).row-expandable-column-spacer:hover,
    .flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-datacells-click .vr-datagrid-cell-container:hover {
        background-color: var(--light-primary-color) !important;
    }

.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-datagrid-body {
    border-top: 1px solid var(--light-primary-color) !important;
}

.flat.platform vr-common-widgetsettings-runtime vr-analytic-datagrid-analyticrecords .vr-grid-menu .vr-grid-menu-header {
    background: var(--primary-color);
    height: 30px;
    line-height: 28px;
}

.flat.platform .vr-figure .figure-info-content {
    padding-right: 0.2rem !important;
}

    .flat.platform .vr-figure .figure-info-content > img {
        background-color: var(--primary-color-30) !important;
        border-radius: 50%;
        width: 4rem;
        height: 4rem;
        padding: 0.2rem !important;
    }

    .flat.platform .vr-figure .figure-info-content > img {
        background-color: var(--light-primary-color) !important;
        border-radius: 50%;
    }

    .flat.platform .vr-figure .figure-info-content > i {
        width: 4rem;
        height: 4rem;
        text-align: center;
        line-height: 3.6rem;
        font-size: 32px !important;
        color: var(--bs-white-color);
        border: 0.2rem solid var(--bs-white-color-50);
        background-color: var(--primary-color) !important;
        border-radius: 50%;
    }

.flat.platform .theme-preview-img {
    width: 100%;
    height: 300px;
}

.flat.platform .legend-container .label {
    font-size: 10px;
    font-weight: 400;
}

.flat.platform .legend-container .label-default {
    background-color: #777777;
}


    .flat.platform .legend-container .label-default[href]:hover,
    .flat.platform .legend-container .label-default[href]:focus {
        background-color: #5e5e5e;
    }


.flat.platform .legend-container .label-primary {
    background-color: #337ab7;
}


    .flat.platform .legend-container .label-primary[href]:hover,
    .flat.platform .legend-container .label-primary[href]:focus {
        background-color: #286090;
    }


.flat.platform .legend-container .label-success {
    background-color: #5cb85c;
}


    .flat.platform .legend-container .label-success[href]:hover,
    .flat.platform .legend-container .label-success[href]:focus {
        background-color: #449d44;
    }


.flat.platform .legend-container .label-info {
    background-color: #5bc0de;
}


    .flat.platform .legend-container .label-info[href]:hover,
    .flat.platform .legend-container .label-info[href]:focus {
        background-color: #31b0d5;
    }


.flat.platform .legend-container .label-warning {
    background-color: #f0ad4e;
}


    .flat.platform .legend-container .label-warning[href]:hover,
    .flat.platform .legend-container .label-warning[href]:focus {
        background-color: #ec971f;
    }

.flat.platform .legend-container .label-danger[href]:hover,
.flat.platform .legend-container .label-danger[href]:focus {
    background-color: #c9302c;
}


.flat.platform .legend-container .label-danger {
    background-color: #d9534f;
}