/*
Metro stylesheed based on base.css
*/

@import '../aurora.css';

:root {
    --primary: 70 25 110;
    --primary-0: 255 255 255;
    --primary-50: 221 196 236;
    --primary-100: 228 198 247;
    --primary-200: 204 152 232;
    --primary-300: 188 120 226;
    --primary-400: 150 70 195;
    --primary-500: 110 50 160;
    --primary-600: 91 42 133;
    --primary-700: 70 25 110;
    --primary-800: 49 22 71;
    --primary-900: 35 16 51;
    --primary-950: 17 8 24;

    --secondary: 180 92 0;
    --secondary-0: 255 255 255;
    --secondary-50: 251 234 217;
    --secondary-100: 250 210 168;
    --secondary-200: 242 186 129;
    --secondary-300: 245 167 85;
    --secondary-400: 250 157 40;
    --secondary-500: 227 117 1;
    --secondary-600: 215 115 17;
    --secondary-700: 180 92 0;
    --secondary-800: 144 77 7;
    --secondary-900: 111 58 4;
    --secondary-950: 78 42 0;

    --surface: 107 114 128;
    --surface-0: 255 255 255;
    --surface-50: 249 250 251;
    --surface-100: 243 244 246;
    --surface-200: 229 231 235;
    --surface-300: 209 213 219;
    --surface-400: 156 163 175;
    --surface-500: 107 114 128;
    --surface-600: 75 85 99;
    --surface-700: 55 65 81;
    --surface-800: 31 41 55;
    --surface-900: 17 24 39;
    --surface-950: 3 7 18;

    --success: 29 155 171;
    --success-0: 255 255 255;
    --success-50: 195 239 245;
    --success-100: 177 235 242;
    --success-200: 143 225 236;
    --success-300: 108 216 230;
    --success-400: 73 207 224;
    --success-500: 38 198 218;
    --success-600: 29 155 171;
    --success-700: 21 112 123;
    --success-800: 13 68 75;
    --success-900: 5 25 27;
    --success-950: 1 3 3;

    --info: 30 136 229;
    --info-0: 255 255 255;
    --info-50: 195 223 248;
    --info-100: 176 213 246;
    --info-200: 140 194 242;
    --info-300: 103 175 237;
    --info-400: 67 155 233;
    --info-500: 30 136 229;
    --info-600: 21 107 182;
    --info-700: 15 77 132;
    --info-800: 9 48 81;
    --info-900: 4 18 31;
    --info-950: 1 3 6;

    --warning: 255 178 43;
    --warning-0: 255 255 255;
    --warning-50: 255 245 227;
    --warning-100: 255 237 206;
    --warning-200: 255 222 165;
    --warning-300: 255 208 125;
    --warning-400: 255 193 84;
    --warning-500: 255 178 43;
    --warning-600: 242 154 0;
    --warning-700: 186 118 0;
    --warning-800: 130 83 0;
    --warning-900: 74 47 0;
    --warning-950: 46 29 0;

    --help: 16 185 129;
    --help-0: 255 255 255;
    --help-50: 236 253 245;
    --help-100: 209 250 229;
    --help-200: 167 243 208;
    --help-300: 110 231 183;
    --help-400: 52 211 153;
    --help-500: 16 185 129;
    --help-600: 5 150 105;
    --help-700: 4 120 87;
    --help-800: 6 95 70;
    --help-900: 6 78 59;
    --help-950: 2 44 34;

    --danger: 239 68 68;
    --danger-50: 254 242 242;
    --danger-100: 254 226 226;
    --danger-200: 254 202 202;
    --danger-300: 252 165 165;
    --danger-400: 248 113 113;
    --danger-500: 239 68 68;
    --danger-600: 220 38 38;
    --danger-700: 185 28 28;
    --danger-800: 153 27 27;
    --danger-900: 127 29 29;
    --danger-950: 69 10 10;

    --gray: 0 0 0;
    --gray-50: 230 230 230;
    --gray-100: 216 216 216;
    --gray-200: 191 191 191;
    --gray-300: 166 166 166;
    --gray-400: 140 140 140;
    --gray-500: 115 115 115;
    --gray-600: 89 89 89;
    --gray-700: 64 64 64;
    --gray-800: 38 38 38;
    --gray-900: 13 13 13;
    --gray-950: 0 0 0;

    --accent: 38 198 218;
    --accent-50: 195 239 245;
    --accent-100: 177 235 242;
    --accent-200: 143 225 236;
    --accent-300: 108 216 230;
    --accent-400: 73 207 224;
    --accent-500: 38 198 218;
    --accent-600: 29 155 171;
    --accent-700: 21 112 123;
    --accent-800: 13 68 75;
    --accent-900: 5 25 27;
    --accent-950: 1 3 3;

    --progress: 150 158 164;
    --gold: 255 215 0;
    --silver: 192 192 192;
    --bronze: 205 127 50;

    --brand-primary: rgb(var(--primary-700));
    --brand-primary-active: rgb(var(--primary-400));
    --brand-secondary: rgb(var(--secondary-500));
    --brand-secondary-active: rgb(var(--secondary-400));
    --brand-secondary-accent: rgb(var(--primary-500));
    --ui-body-font: rgb(var(--surface-800));
    --ui-font-inverse: rgb(var(--surface-0));
    --ui-gold: rgb(var(--gold));
    --ui-light-font: rgb(var(--surface-500));
    --ui-preloader-bg: rgb(var(--surface-0));
    --ui-navbar-link: rgb(var(--surface-0));
    --ui-navbar-link-hover: rgba(var(--surface-0)/0.8);
    --ui-link: rgb(var(--primary-500));
    --ui-link-hover: rgb(var(--primary-400));
    --ui-sidebar-link: rgb(var(--surface-50));
    --ui-sidebar-link-hover: rgb(var(--surface-0));
    --ui-sidebar-link-active: rgb(var(--surface-0));
    --ui-sidebar-icon: rgb(var(--ui-light-font));
    --ui-sidebar-icon-hover: rgb(var(--surface-0));
    --ui-sidebar-icon-active: rgb(var(--surface-0));
    --ui-sidebar-link-bg-hover: rgb(var(--primary-500));
    --ui-surface-100: rgb(var(--surface-100));
    --ui-primary: rgb(var(--primary-700));
    --ui-primary-active: rgb(var(--primary-400));
    --ui-secondary: rgb(var(--gray-950));
    --ui-secondary-active: rgb(var(--gray-950));
    --ui-info: rgb(var(--info));
    --ui-warning: rgb(var(--warning));
    --ui-danger: rgb(var(--danger));
    --ui-success: rgb(var(--success));
    --ui-background: rgb(var(--surface-0));
    --ui-background-secondary: rgb(var(--surface-50));
    --ui-table-data-background: var(--ui-background);
    --ui-table-data-background-alt: rgb(var(--surface-100));
    --ui-table-border: rgb(var(--surface-400));
    --ui-white: rgb(var(--surface-0));
}

/*
Use this class to change vars for usage of states since
state classes were used as brand colors.
This will override the root vars above
*/
.ui-alert {
    --ui-info: var(--ui-info);
    --ui-success: var(--ui-success);
    --ui-warning: var(--ui-warning);
    --ui-danger: var(--ui-danger);
}

/* Module Headers */
.menu-page .card-header, .report-group-title {
    --ui-primary: rgb(var(--gray-950));
    --ui-info: rgb(var(--gray-950));
    --ui-success: rgb(var(--gray-950));
    --ui-warning: rgb(var(--gray-950));
    --ui-danger: rgb(var(--gray-950));
}

.metro-landslide-popup .text-primary {
    --ui-primary: var(--ui-body-font);
}

.text-warning {
    --ui-warning: rgb(var(--warning-600));
}

.small.text-warning {
    --ui-warning: rgb(var(--warning-700));
}

body {
    color: var(--ui-body-font);
}

/* logo shown when sidebar collapsed */
.mini-sidebar .navbar-brand {
    background-image: url(/assets/images/tmo-logo-light-icon.png);
    background-repeat: no-repeat;
    background-size: auto 32px;
    height: 32px;
    flex: 1 0 auto;
}

.logo {
    background-image: url(/assets/images/mbyt-logo-light-text.png);
    background-repeat: no-repeat;
    background-size: auto 38px;
    background-position: 18px 0;
    opacity: 1;
}

/* logos shown for preview layouts using the deveextreme layout template */
.preview-layout .navbar-brand {
    background: none;
}

.preview-layout .logo {
    background-image: url(/assets/images/rt2-logo.svg);
    background-repeat: no-repeat;
    background-size: auto 28px;
    background-position: 0 0;
}

/* logo displayed on bottom right of login screen */
.rt2-splash-logo {
    position: absolute;
    bottom: 30px;
    right: 50px;
    height: auto;
}

.rt2-logo-img {
    opacity: .7;
    width: 60px;
    height: 40px;
    background-image: url(/assets/images/rt2-logo.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

/* carrier logo displayed on the login screen */
.cobrand-logo {
    display: flex !important;
    justify-content: center;
    margin-bottom: 40px;
}

.cobrand-logo .cobrand-logo-img {
    width: 160px;
    height: 70px;
    background-image: url(/assets/images/logo-mbyt-light.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.login-register {
    height: 100vh;
}

.login-box.card {
    box-shadow: 0 4px 24px 2px rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}

.device-protected-icon {
    background-image: url('/assets/images/metro-device-protected.svg');
}

.device-unprotected-icon {
    background-image: url('/assets/images/metro-device-unprotected.svg');
}

/* Preloader */
.preloader {
    background: var(--ui-preloader-bg);
}

/* Sweet Alert */
.swal2-icon.swal2-info { border-color: var(--ui-info); color: var(--ui-info); }
.swal2-icon.swal2-success { border-color: var(--ui-success); color: var(--ui-success); }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ui-success); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ui-success); }
.swal2-icon.swal2-warning, .swal2-icon.swal2-question { border-color: var(--ui-warning); color: var(--ui-warning); }
.swal2-icon.swal2-error { border-color: var(--ui-danger); color: var(--ui-danger); }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--ui-danger); }
.swal2-icon.swal2-error .swal2-error-ring { border-color: var(--ui-danger); }
.swal2-popup .swal2-styled.swal2-confirm { background-color: var(--ui-primary); }
.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:hover { background-color: var(--ui-primary-active); }
.swal2-popup .swal2-styled:focus { box-shadow: 0 0 0 2px  var(--ui-background), 0 0 0 4px rgba(var(--primary) / 0.4); }
.swal2-popup .swal2-styled.swal2-cancel {
    outline: 1px solid var(--ui-secondary);
    outline-offset: -1px;
    background-color: var(--ui-background);
    color: var(--ui-secondary);
}
.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:hover.swal2-cancel {
    background-color: var(--ui-secondary);
    background: var(--ui-secondary);
    color: var(--ui-font-inverse);
}
.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:focus.swal2-cancel {
    box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px rgba(var(--gray-500) / 0.4);
}
/*******************
/*Top bar
*******************/
.topbar {
    background: var(--brand-primary);
}

.navbar {
    display: flex;
    align-items: center;
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
    color: var(--ui-navbar-link) !important;
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
    color: var(--ui-navbar-link-hover) !important;
}

/*******************
/*General Elements
*******************/
::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--ui-primary);
}

::selection {
  color: white;
  background: var(--ui-primary);
}

a {
    color: var(--ui-link);
}

a:hover,
a.link:hover,
a.link:focus {
    color: var(--ui-link-hover);
}

.bg-theme {
    background-color: var(--brand-primary) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary) !important;;
}

.stylish-table tbody tr:hover,
.stylish-table tbody tr.active {
    border-left: 4px solid var(--brand-primary);
}

.page-wrapper > div > .page-titles > div > h3.text-themecolor {
    font-size: 16px;
    text-transform: uppercase;
    color: var(--ui-body-font);
}

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

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
    border-bottom: 2px solid var(--brand-primary);
    color: var(--brand-primary);
}

.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
    color: var(--brand-primary);
}

/*******************
/*Buttons
*******************/
.btn-themecolor,
.btn-themecolor.disabled {
    background: var(--brand-primary);
    color: var(--ui-button-color);
    border-color: var(--brand-primary) !important;;
}

.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary) !important;;
}

.btn-themecolor.active,
.btn-themecolor:focus,
.btn-themecolor.disabled.active,
.btn-themecolor.disabled:focus {
    background: var(--ui-link-hover);
}

/*******************
/*sidebar navigation
*******************/
.left-sidebar {
    background: var(--brand-primary);
}

.sidebar-nav {
    background: var(--brand-primary);
}

.sidebar-nav ul li a {
    color: var(--ui-sidebar-link);
}

.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li.active:hover > a {
    background: var(--ui-sidebar-link-bg-hover) !important;
    color: var( --brand-primary-active);
    font-weight: 500;
}

.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
    background: var(--ui-sidebar-link-bg-hover);
    color: var(--ui-sidebar-link-hover);
}

.sidebar-nav > ul > li.active > a{
    background: var(--ui-sidebar-link-bg-hover) !important;
    color: var(--ui-sidebar-link-active);
}

.sidebar-nav ul li a:hover {
    background: var(--ui-sidebar-link-bg-hover) !important;
    color: var(--ui-sidebar-link-hover);
}

.sidebar-nav > ul > li.active:hover > a {
    background: var(--ui-sidebar-link-bg-hover) !important;
    color: var(--ui-sidebar-link-hover);
}

.sidebar-nav > ul > li > a.active i,
.sidebar-nav > ul > li > a:hover i {
    color: var(--ui-sidebar-icon-hover);
}

.sidebar-nav > ul > li > a i {
    color: var(--ui-sidebar-icon);
}

.sidebar-nav > ul > li.active > a i {
    color: var(--ui-sidebar-icon-active);
}

.sidebar-nav > ul > li.active:hover > a i {
    color: var(--ui-sidebar-link-hover);
}


@media (min-width: 768px) {
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a i {
        color: var(--ui-sidebar-icon-hover);
    }
}

/* everything else */

.form-control::placeholder {
    color: #ced4da;
}

.ribbon-unselected {
    background: white;
    color: #cde3f5;
}

.required-label {
    color: var(--ui-light-font);
}

.dx-popup-title {
    border-color: #ddd;
    background: var(--brand-primary);
    color: white;
}

.element-error-msg {
    color: var(--ui-danger) !important;
}

.element-warning-msg {
    color: var(--ui-warning) !important;
}

.dx-datagrid-headers {
    color: var(--ui-font-light);
}

.dx-datagrid {
    color: var(--ui-body-font);
}

.row-dx-datagrid {
    background: white;
}

.dx-datagrid .dx-row-alt {
    background-color: #f3f1f1;
}

/* Change the grid filter icon color when a filter is applied  */
.dx-datagrid .dx-header-filter {
    color: var(--ui-primary);
}

.dx-datagrid .dx-header-filter-empty {
    color: rgba(149, 149, 149, 0.5);
}

.dx-texteditor-input:disabled {
    background-color: #e9ecef;
}

.gold-medal {
    color: gold;
}

.silver-medal {
    color: silver;
}

.bronze-medal {
    color: #cd7f32;
}

.vue-currency input.dx-texteditor-input {
    text-align: right;
}

.metro-landslide-popup.card .card-header {
    background: var(--brand-primary);
}

.card-footer {
    background: white !important;
}

.metro-landslide-popup.card .box-title {
    color: white !important;
}

/*Landlside popup*/
.landslide-acp-content,
.landslide-fast-charging-content,
.landslide-hint-content,
.landslide-accessory-essentials-content {
    background-color: white;
    color: #000000;
}

.landslide-acp-title,
.landslide-fast-charging-title,
.landslide-hint-title,
.landslide-accessory-essentials-title {
    color: var(--ui-body-font);
}

.landslide-acp-footer,
.landslide-fast-charging-footer,
.landslide-hint-footer,
.landslide-accessory-essentials-footer {
    color: purple;
}

/* pop-up */
/* Metro Landslide Popup*/
/* Generic pop-up*/
.metro-landslide-popup.card,
.popup-drop-shadow,
.qpayDrop,
.printerSelectionDrop,
.envisionVideoDrop,
.couponDrop,
.metroApi,
.esnChangeDrop {
    background: white;
}

.form-control {
    color: var(--ui-body-font);
}

.form-material .form-control, .form-control {
    border-color: #ced4da;
}

.dx-widget input:not([conceal]) {
    color: var(--ui-body-font);
}

.dx-placeholder {
    color: var(--ui-body-font);
}

.dx-lookup-field {
    color: var(--ui-body-font);
}

.dx-widget .dx-list-item {
    color: var(--ui-body-font);
}

.big-button-click {
    box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14),
        0 3px 1px -2px rgba(40, 190, 189, 0.2),
        0 1px 5px 0 rgba(40, 190, 189, 0.12);
}

.big-button-click:hover {
    box-shadow: 0 0 12px rgba(33, 33, 33, 0.2);
}

div.container.report-list button.btn.btn-xs.btn-rounded.btn-info a.fa {
    color: white;
}

.text-muted-light {
    color: #cccccc !important;
}

.rt-line-through {
    color: red !important;
}

.rt-green {
    color: green !important;
}

.rt-red {
    color: red !important;
}

.rtpos-pink {
    color: #e2007a !important;
}

.rtpos-purple {
    color: #8710fe !important;
}

.rt-green {
    color: green !important;
}

.rt-red {
    color: red !important;
}

.required::after {
    color: var(--ui-light-font);
}

/*styles used for homepage alert messages (AlertMessages.CssClass)*/
.magenta {
    color: white;
    background-color: magenta;
}

.blue {
    color: white;
    background-color: blue;
}

.brown {
    color: white;
    background-color: brown;
}

.green {
    color: white;
    background-color: forestgreen;
}

.red {
    color: white;
    background-color: red;
}

/* Printer Selection pop-up */
.printerSelectionDrop {
    background: white;
}

i.dx-icon.dx-icon-close {
    color: var(--white);
}

body {
    background: #fff;
    color: var(--ui-body-font);
}

html {
    background: var(--ui-background);
}

html body blockquote {
    border-color: var(--ui-info) !important;;
}

a.link {
    color: var(--ui-link);
}
a.link:hover,
a.link:focus {
    color: var(--ui-link-hover);
}

.table {
    color: var(--ui-body-font);
}

.text-white {
    color: var(--ui-font-inverse) !important;
}
.text-danger {
    color: var(--ui-danger) !important;
}
.text-muted {
    color: var(--ui-light-font) !important;
}
.text-warning {
    color: var(--ui-warning) !important;
}
.text-success {
    color: var(--ui-success) !important;
}
.text-info {
    color: var(--ui-info) !important;
}
.text-info-orange {
    color: orange;
}
.text-inverse {
    color: #2f3d4a !important;
}
html body .text-blue {
    color: #02bec9;
}
html body .text-purple {
    color: var(--ui-primary);
}
html body .text-primary {
    color: var(--ui-primary) !important;
}
html body .text-megna {
    color: #00897b;
}
html body .text-dark {
    color: #67757c;
}
html body .text-themecolor {
    color: var(--ui-info);
}

.bg-primary {
    background-color: var(--ui-primary) !important;
}
.bg-success {
    background-color: var(--ui-success) !important;
}
.bg-info {
    background-color: var(--ui-info) !important;
}
.bg-warning {
    background-color: var(--ui-warning) !important;
}
.bg-danger {
    background-color: var(--ui-danger) !important;
}
html body .bg-megna {
    background-color: #00897b;
}
html body .bg-theme {
    background: var(--ui-info);
}
html body .bg-inverse {
    background-color: #2f3d4a;
}
html body .bg-purple {
    background-color: var(--ui-primary);
}
html body .bg-light-primary {
    background-color: #f1effd;
}
html body .bg-light-success {
    background-color: #e8fdeb;
}
html body .bg-light-info {
    background-color: #cfecfe;
}
html body .bg-light-extra {
    background-color: #ebf3f5;
}
html body .bg-light-warning {
    background-color: #fff8ec;
}
html body .bg-light-danger {
    background-color: #f9e7eb;
}
html body .bg-light-inverse {
    background-color: #f6f6f6;
}
html body .bg-light {
    background-color: #f2f4f8;
}
html body .bg-white {
    background-color: var(--ui-background);
}
.round {
    color: var(--ui-font-inverse);
    background: var(--ui-info);
}

.round.round-info {
    background: var(--ui-info);
}
.round.round-warning {
    background: var(--ui-warning);
}
.round.round-danger {
    background: var(--ui-danger);
}
.round.round-success {
    background: var(--ui-success);
}
.round.round-primary {
    background: var(--ui-primary);
}
.label {
    color: var(--ui-font-inverse);
}

.label-custom {
    background-color: #00897b;
}
.label-success {
    background-color: var(--ui-success);
}
.label-info {
    background: var(--ui-info);
}
.label-warning {
    background-color: var(--ui-warning);
}
.label-danger {
    background-color: var(--ui-danger);
}
.label-megna {
    background-color: #00897b;
}
.label-primary {
    background-color: var(--ui-primary);
}
.label-purple {
    background-color: var(--ui-primary);
}
.label-red {
    background-color: #fb3a3a;
}
.label-inverse {
    background-color: #2f3d4a;
}
.label-default {
    background-color: #f2f4f8;
}
.label-white {
    background-color: var(--ui-background);
}
.label-light-success {
    background-color: #e8fdeb;
    color: var(--ui-success);
}
.label-light-info {
    background-color: #cfecfe;
    color: var(--ui-info);
}
.label-light-warning {
    background-color: #fff8ec;
    color: var(--ui-warning);
}
.label-light-danger {
    background-color: #f9e7eb;
    color: var(--ui-danger);
}
.label-light-megna {
    background-color: #e0f2f4;
    color: #00897b;
}
.label-light-primary {
    background-color: #f1effd;
    color: var(--ui-primary);
}
.label-light-inverse {
    background-color: #f6f6f6;
    color: #2f3d4a;
}

.pagination > li > a,
.pagination > li > span {
    color: #263238;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: #f2f4f8;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.pager li > a,
.pager li > span {
    color: #263238;
}

.table td,
.table th {
    border-color: #f3f1f1;
}

.table-hover tbody tr:hover {
    background: #f2f4f8;
}

.waves-effect .waves-ripple {
    background: rgba(0, 0, 0, 0.2);
}
.waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45);
}
.waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7);
}
.waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7);
}
.waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7);
}
.waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7);
}
.waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7);
}
.waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7);
}

.badge-success {
    background-color: var(--ui-success);
}
.badge-info {
    background: var(--ui-info);
}
.badge-primary {
    background-color: var(--ui-primary);
}
.badge-warning {
    background-color: var(--ui-warning);
    color: var(--ui-font-inverse);
}
.badge-danger {
    background-color: var(--ui-danger);
}
.badge-purple {
    background-color: var(--ui-primary);
}
.badge-red {
    background-color: #fb3a3a;
}
.badge-inverse {
    background-color: #2f3d4a;
}

.btn:disabled {
    pointer-events: none;
    cursor: default;
}

.btn-group label {
    color: var(--ui-font-inverse) !important;
}
.btn-group label.btn-secondary {
    color: #67757c !important;
}

.btn-outline {
    color: inherit;
    background-color: transparent;
}

.btn-secondary,
.btn-secondary.disabled
.btn-secondary:disabled {
    background: var(--ui-secondary);
    border-color: var(--ui-secondary) !important;
    color: var(--ui-font-inverse);
}
.btn-secondary:hover,
.btn-secondary.disabled:hover {
    background: var(--ui-secondary-active);
    border-color: var(--ui-secondary-active) !important;
}
.btn-secondary.active,
.btn-secondary:focus,
.btn-secondary.disabled.active,
.btn-secondary.disabled:focus {
    background: var(--ui-secondary-active);
    color: var(--ui-font-inverse);
}
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--ui-primary);
    border-color: var(--ui-primary) !important;
}
.btn-primary:hover,
.btn-primary.disabled:hover {
    background: var(--ui-primary-active);
    border-color: var(--ui-primary-active) !important;
}
.btn-primary.active,
.btn-primary:focus,
.btn-primary.disabled.active,
.btn-primary.disabled:focus {
    background: var(--ui-primary);
}
.btn-themecolor,
.btn-themecolor.disabled {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
    border-color: var(--ui-info) !important;;
}
.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.btn-themecolor.active,
.btn-themecolor:focus,
.btn-themecolor.disabled.active,
.btn-themecolor.disabled:focus {
    background: var(--ui-info);
}
.btn-success,
.btn-success.disabled {
    background: var(--ui-success);
    border-color: var(--ui-success) !important;
}
.btn-success:hover,
.btn-success.disabled:hover {
    background: var(--ui-success);
    border-color: var(--ui-success) !important;
}
.btn-success.active,
.btn-success:focus,
.btn-success.disabled.active,
.btn-success.disabled:focus {
    background: var(--ui-success);
}
.btn-info,
.btn-info.disabled {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.btn-info:hover,
.btn-info.disabled:hover {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.btn-info.active,
.btn-info:focus,
.btn-info.disabled.active,
.btn-info.disabled:focus {
    background: #028ee1;
}
.btn-warning,
.btn-warning.disabled {
    background: var(--ui-warning);
    color: var(--ui-font-inverse);
    border-color: var(--ui-warning) !important;
}
.btn-warning:hover,
.btn-warning.disabled:hover {
    background: var(--ui-warning);
    color: var(--ui-font-inverse);
    border-color: var(--ui-warning) !important;
}
.btn-warning.active,
.btn-warning:focus,
.btn-warning.disabled.active,
.btn-warning.disabled:focus {
    background: var(--ui-warning);
}
.btn-danger,
.btn-danger.disabled {
    background: var(--ui-danger);
    border-color: var(--ui-danger) !important;
}
.btn-danger:hover,
.btn-danger.disabled:hover {
    background: var(--ui-danger);
    border-color: var(--ui-danger) !important;
}
.btn-danger.active,
.btn-danger:focus,
.btn-danger.disabled.active,
.btn-danger.disabled:focus {
    background: var(--ui-danger);
}
.btn-inverse,
.btn-inverse.disabled {
    background: #2f3d4a;
    border-color: #2f3d4a !important;
    color: var(--ui-font-inverse);
}
.btn-inverse:hover,
.btn-inverse.disabled:hover {
    background: #2f3d4a;
    color: var(--ui-font-inverse);
    border-color: #2f3d4a !important;
}
.btn-inverse.active,
.btn-inverse:focus,
.btn-inverse.disabled.active,
.btn-inverse.disabled:focus {
    background: #232a37;
    color: var(--ui-font-inverse);
}
.btn-red,
.btn-red.disabled {
    background: #fb3a3a;
    border-color: #fb3a3a !important;
    color: var(--ui-font-inverse);
}
.btn-red:hover,
.btn-red.disabled:hover {
    border-color: #fb3a3a !important;
    background: #fb3a3a;
}
.btn-red.active,
.btn-red:focus,
.btn-red.disabled.active,
.btn-red.disabled:focus {
    background: #e6294b;
}

.btn-outline-primary {
    color: var(--ui-font-inverse);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--ui-font-inverse);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    --webkit-box-shadow: none;
    box-shadow: none;
    opacity: .45;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    background: var(--brand-secondary-active);
    border-color: var(--brand-secondary-active);
}

.btn-outline-secondary {
    color: var(--ui-secondary);
    background-color: var(--ui-white);
    border-color: var(--ui-secondary) !important;
}
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--ui-secondary);
    border-color: var(--ui-secondary) !important;
    --webkit-box-shadow: none;
    box-shadow: none;
    opacity: .45;
}
.btn-outline-secondary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    background: var(--ui-secondary);
    color: var(--ui-font-inverse) !important;
    border-color: var(--ui-secondary) !important;
}

.btn-outline-success {
    color: var(--ui-success);
    background-color: var(--ui-white);
    border-color: var(--ui-success) !important;;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success.focus {
    background: var(--ui-success);
    border-color: var(--ui-success) !important;;
    color: var(--ui-font-inverse);
}
.btn-outline-info {
    color: var(--ui-info);
    background-color: var(--ui-white);
    border-color: var(--ui-info) !important;;
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info.focus {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
    color: var(--ui-font-inverse);
}
.btn-outline-warning {
    color: var(--ui-warning);
    background-color: var(--ui-white);
    border-color: var(--ui-warning) !important;;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning.focus {
    background: var(--ui-warning);
    border-color: var(--ui-warning) !important;;
    color: var(--ui-font-inverse);
}
.btn-outline-danger {
    color: var(--ui-danger);
    background-color: var(--ui-white);
    border-color: var(--ui-danger) !important;;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger.focus {
    background: var(--ui-danger);
    border-color: var(--ui-danger) !important;;
    color: var(--ui-font-inverse);
}
.btn-outline-red {
    color: #fb3a3a;
    background-color: var(--ui-white);
    border-color: #fb3a3a;
}
.btn-outline-red:hover,
.btn-outline-red:focus,
.btn-outline-red.focus {
    background: #fb3a3a;
    border-color: #fb3a3a;
    color: var(--ui-font-inverse);
}
.btn-outline-inverse {
    color: #2f3d4a;
    background-color: var(--ui-white);
    border-color: #2f3d4a;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse.focus {
    background: #2f3d4a;
    border-color: #2f3d4a;
    color: var(--ui-font-inverse);
}
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary.focus:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success.focus:active,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover,
.btn-success.focus,
.btn-success:focus {
    background-color: var(--ui-success);
    border-color: var(--ui-success) !important;
}
.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info.focus:active,
.btn-info:active:focus,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info:hover,
.btn-info.focus,
.btn-info:focus {
    background-color: var(--ui-info);
    border-color: var(--ui-info) !important;
}
.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning.focus:active,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open > .dropdown-toggle.btn-warning.focus,
.open > .dropdown-toggle.btn-warning:focus,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning.focus,
.btn-warning:focus {
    background-color: var(--ui-warning);
    border-color: var(--ui-warning) !important;
}
.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger.focus:active,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open > .dropdown-toggle.btn-danger.focus,
.open > .dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger.focus,
.btn-danger:focus {
    background-color: var(--ui-danger);
    border-color: var(--ui-danger) !important;
}
.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.focus,
.btn-inverse:active,
.btn-inverse:focus,
.btn-inverse:hover,
.open > .dropdown-toggle.btn-inverse {
    background-color: #232a37;
    border-color: #232a37 !important;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.btn-red.focus,
.btn-red:active,
.btn-red:focus,
.btn-red:hover,
.open > .dropdown-toggle.btn-red {
    background-color: #d61f1f;
    border-color: #d61f1f !important;
    color: var(--ui-font-inverse);
}


.btn-label { background: rgba(0, 0, 0, 0.05); }

.btn-link { color: var(--ui-link); }
.btn-link:hover { color: var(--ui-link-hover); }

.notify .heartbit {
    border-color: var(--ui-danger) !important;
}
.notify .point {
    background-color: var(--ui-danger);
}

.mega-dropdown .nav-accordion .card-header {
    background: var(--ui-background);
}

.mega-dropdown .nav-accordion .card-header h5 a {
    color: #67757c;
}

ul.list-style-none li a {
    color: #67757c;
}
ul.list-style-none li a:hover {
    color: var(--ui-info);
}
.dropdown-item {
    color: #67757c;
}

.custom-control-input:checked ~ .custom-control-indicator {
    background-color: var(--ui-success);
}

.card-no-border .card {
    border-color: #d7dfe3 !important;
}
.card-no-border .sidebar-footer {
    background: #f2f6f8;
}
.card-no-border .sidebar-nav > ul > li > a.active {
    background: var(--ui-background);
}

.card-outline-danger,
.card-outline-info,
.card-outline-warning,
.card-outline-success,
.card-outline-primary {
    background: var(--ui-background);
}

.card .card-header {
    background: var(--ui-background);
}

.page-wrapper {
    background: var(--ui-background-secondary);
}

.topbar .top-navbar .navbar-nav > .nav-item.show {
    background: rgba(0, 0, 0, 0.05);
}

.topbar ul.dropdown-user li.divider {
    background-color: rgba(120, 130, 140, 0.13);
}

.topbar ul.dropdown-user li .dw-user-box .u-text .btn {
    color: var(--ui-font-inverse);
}
.topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover {
    background: #e6294b;
}
.topbar ul.dropdown-user li a {
    color: #67757c;
}
.topbar ul.dropdown-user li a:hover {
    background: #f2f4f8;
    color: var(--ui-info);
}
.search-box .app-search .srh-btn {
    background: var(--ui-background);
}

.page-titles {
    background: var(--ui-background);
}

.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #a6b7bf;
}
.page-titles .breadcrumb .breadcrumb-item.active {
    color: var(--ui-light-font);
}

.right-sidebar {
    background: var(--ui-background);
}
.right-sidebar .rpanel-title {
    color: var(--ui-font-inverse);
    background: var(--ui-info);
}

.right-sidebar .rpanel-title span:hover {
    color: var(--ui-font-inverse);
}

.chatonline li a span {
    color: #67757c;
}

ul#themecolors li a {
    color: transparent;
}
ul#themecolors li a.working:before {
    color: var(--ui-font-inverse);
}

.footer {
    color: #67757c;
    background: var(--ui-background);
}

.card .card-subtitle {
    color: var(--ui-light-font);
}
.card-inverse .card-blockquote .blockquote-footer,
.card-inverse .card-link,
.card-inverse .card-subtitle,
.card-inverse .card-text {
    color: rgba(255, 255, 255, 0.65);
}
.card-success {
    background: var(--ui-success);
    border-color: var(--ui-success) !important;;
}
.card-danger {
    background: var(--ui-danger);
    border-color: var(--ui-danger) !important;;
}
.card-warning {
    background: var(--ui-warning);
    border-color: var(--ui-warning) !important;;
}
.card-info {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.card-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary) !important;;
}
.card-dark {
    background: #2f3d4a;
    border-color: #2f3d4a;
}
.card-megna {
    background: #00897b;
    border-color: #00897b;
}

.card-actions a {
    color: #67757c;
}

.card-info {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.card-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary) !important;;
}
.card-outline-info {
    border-color: var(--ui-info) !important;;
}
.card-outline-info .card-header {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.card-outline-inverse {
    border-color: #2f3d4a;
}
.card-outline-inverse .card-header {
    background: #2f3d4a;
    border-color: #2f3d4a;
}
.card-outline-warning {
    border-color: var(--ui-warning) !important;;
}
.card-outline-warning .card-header {
    background: var(--ui-warning);
    border-color: var(--ui-warning) !important;;
}
.card-outline-success {
    border-color: var(--ui-success) !important;;
}
.card-outline-success .card-header {
    background: var(--ui-success);
    border-color: var(--ui-success) !important;;
}
.card-outline-danger {
    border-color: var(--ui-danger) !important;;
}
.card-outline-danger .card-header {
    background: var(--ui-danger);
    border-color: var(--ui-danger) !important;;
}
.card-outline-primary {
    border-color: var(--ui-primary) !important;;
}
.card-outline-primary .card-header {
    background: var(--ui-primary);
    border-color: var(--ui-primary) !important;;
}
.bc-colored .breadcrumb-item,
.bc-colored .breadcrumb-item a {
    color: var(--ui-font-inverse);
}

.bc-colored .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

ul.list-icons li a {
    color: #67757c;
}
ul.list-icons li a:hover {
    color: var(--ui-info);
}

html body .jqstooltip,
html body .flotTip {
    background: #263238;
    color: var(--ui-font-inverse);
}

.percent {
    color: #263238;
}

.amp-pxl .ct-series-a .ct-bar {
    stroke: #1e88e5;
}
.amp-pxl .ct-series-b .ct-bar {
    stroke: var(--ui-success);
}
.c3-chart-arcs-title,
.c3-legend-item {
    fill: #67757c;
}
html body #visitor .c3-chart-arcs-title {
    fill: var(--ui-light-font);
}
.stylish-table thead th {
    color: var(--ui-light-font);
}
.stylish-table tbody tr {
    border-left: 4px solid #ffffff;
}
.stylish-table tbody tr:hover,
.stylish-table tbody tr.active {
    border-color: var(--ui-info) !important;
}

.campaign .ct-series-a .ct-line,
.campaign .ct-series-a .ct-point {
    stroke: var(--ui-success);
}
.campaign .ct-series-b .ct-area {
    fill: var(--ui-info);
}
.campaign .ct-series-b .ct-line,
.campaign .ct-series-b .ct-point {
    stroke: var(--ui-info);
}

.campaign2 .ct-series-a .ct-line,
.campaign2 .ct-series-a .ct-point {
    stroke: var(--ui-success);
}
.campaign2 .ct-series-b .ct-area {
    fill: var(--ui-info);
}
.campaign2 .ct-series-b .ct-line,
.campaign2 .ct-series-b .ct-point {
    stroke: var(--ui-info);
}

.usage .ct-series-a .ct-line {
    stroke: rgba(255, 255, 255, 0.5);
}

.total-sales .chartist-tooltip {
    background: #2f3d4a;
}
.total-sales .ct-series-a .ct-bar {
    stroke: var(--ui-info);
}
.total-sales .ct-series-b .ct-bar {
    stroke: var(--ui-success);
}
.total-sales .ct-series-c .ct-bar {
    stroke: var(--ui-danger);
}

.ct-chart .ct-series-a .ct-slice-donut {
    stroke: var(--ui-success);
}
.ct-chart .ct-series-b .ct-slice-donut {
    stroke: #f2f4f8;
}
.ct-chart .ct-series-c .ct-slice-donut {
    stroke: var(--ui-info);
}
#visitfromworld path.jvectormap-region.jvectormap-element {
    stroke: var(--ui-light-font);
}
.jvectormap-zoomin,
.jvectormap-zoomout,
.jvectormap-goback {
    background: var(--ui-light-font);
}

.calendar-events {
    border-color: var(--ui-font-inverse) !important;
}
.calendar-events:hover {
    border: 1px dashed rgba(120, 130, 140, 0.13);
}

.total-revenue4 .ct-series-a .ct-line {
    stroke: var(--ui-info);
}
.total-revenue4 .ct-series-a .ct-point {
    stroke: var(--ui-info);
}
.total-revenue4 .ct-series-b .ct-line {
    stroke: var(--ui-success);
}
.total-revenue4 .ct-series-b .ct-point {
    stroke: var(--ui-success);
}
.total-revenue4 .ct-series-a .ct-area {
    fill: var(--ui-info);
}
.total-revenue4 .ct-series-b .ct-area {
    fill: var(--ui-success);
}

.fileinput .input-group-addon {
    border-bottom-color: #d9d9d9 !important;
    background: var(--ui-background);
}

.social-profile {
    background: rgba(7, 10, 43, 0.8);
}
.profile-tab li a.nav-link,
.customtab li a.nav-link {
    color: #67757c;
}
.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary);
}
.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
    color: var(--ui-primary);
}

.bootstrap-select .dropdown-menu li a {
    color: #67757c;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
    color: var(--ui-primary);
    background: #f2f4f8;
}

.select2-container--default .select2-selection--single {
    border-color: #d9d9d9;
}

.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-primary)),
            to(var(--ui-primary))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-primary), var(--ui-primary)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-primary), var(--ui-primary)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-primary), var(--ui-primary)),
        linear-gradient(#d9d9d9, #d9d9d9);
}

.form-control-line .form-control {
    border-bottom-color: #d9d9d9 !important;
}
.form-control-line .form-control:focus {
    border-bottom-color: var(--ui-primary) !important;
}

.floating-labels .form-control {
    border-bottom-color: #d9d9d9 !important;
}

.floating-labels .has-error .form-control {
    border-bottom-color: var(--ui-danger) !important;
}
.floating-labels .has-warning .form-control {
    border-bottom-color: var(--ui-warning) !important;
}
.floating-labels .has-success .form-control {
    border-bottom-color: var(--ui-success) !important;
}

.floating-labels label {
    color: #67757c;
}
.floating-labels .focused label {
    color: #263238;
}

.floating-labels .bar:before,
.floating-labels .bar:after {
    background: var(--ui-primary);
}

.has-warning .bar:before,
.has-warning .bar:after {
    background: var(--ui-warning);
}
.has-success .bar:before,
.has-success .bar:after {
    background: var(--ui-success);
}
.has-error .bar:before,
.has-error .bar:after {
    background: var(--ui-danger);
}
.has-warning .form-control:focus ~ label,
.has-warning .form-control:valid ~ label {
    color: var(--ui-warning);
}
.has-success .form-control:focus ~ label,
.has-success .form-control:valid ~ label {
    color: var(--ui-success);
}
.has-error .form-control:focus ~ label,
.has-error .form-control:valid ~ label {
    color: var(--ui-danger);
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--ui-danger) !important;
}
.form-group.validate input,
.form-group.validate select,
.form-group.validate textarea {
    border-color: var(--ui-success) !important;
}
.form-group.error .help-block ul {
    color: var(--ui-danger);
}

.form-group.issue .help-block ul {
    color: var(--ui-warning);
}

.pagination-circle li.active a {
    background: var(--ui-success);
}
.pagination-circle li a {
    background: #f2f4f8;
}

.pagination-circle li a:hover {
    background: var(--ui-success);
    color: var(--ui-font-inverse);
}
.pagination-circle li.disabled a {
    background: #f2f4f8;
    color: rgba(120, 130, 140, 0.13);
}
.dropzone {
    border: 1px dashed #d9d9d9;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--ui-info);
}
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}

.icolors > li {
    background: #263238;
}
.icolors > li.active:after {
    color: var(--ui-font-inverse);
}

.icolors > li.orange {
    background: var(--ui-danger);
}
.icolors > li.yellow {
    background: var(--ui-warning);
}
.icolors > li.info {
    background: var(--ui-info);
}
.icolors > li.green {
    background: var(--ui-success);
}
.icolors > li.red {
    background: #fb3a3a;
}
.icolors > li.purple {
    background: var(--ui-primary);
}
.icolors > li.blue {
    background: #02bec9;
}

.note-editor.note-frame {
    border-color: #d9d9d9 !important;
}
.note-editor.note-frame .panel-heading {
    border-bottom-color: rgba(120, 130, 140, 0.13) !important;
}

.color-table.primary-table thead th {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}
.table-striped tbody tr:nth-of-type(odd) {
    background: #f2f4f8;
}
.color-table.success-table thead th {
    background-color: var(--ui-success);
    color: var(--ui-font-inverse);
}
.color-table.info-table thead th {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
.color-table.warning-table thead th {
    background-color: var(--ui-warning);
    color: var(--ui-font-inverse);
}
.color-table.danger-table thead th {
    background-color: var(--ui-danger);
    color: var(--ui-font-inverse);
}
.color-table.inverse-table thead th {
    background-color: #2f3d4a;
    color: var(--ui-font-inverse);
}
.color-table.dark-table thead th {
    background-color: #263238;
    color: var(--ui-font-inverse);
}
.color-table.red-table thead th {
    background-color: #fb3a3a;
    color: var(--ui-font-inverse);
}
.color-table.purple-table thead th {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}
.color-table.muted-table thead th {
    background-color: var(--ui-light-font);
    color: var(--ui-font-inverse);
}
.color-bordered-table.primary-bordered-table {
    border: 2px solid var(--ui-primary);
}
.color-bordered-table.primary-bordered-table thead th {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}
.color-bordered-table.success-bordered-table {
    border: 2px solid var(--ui-success);
}
.color-bordered-table.success-bordered-table thead th {
    background-color: var(--ui-success);
    color: var(--ui-font-inverse);
}
.color-bordered-table.info-bordered-table {
    border-color: var(--ui-info) !important;;
}
.color-bordered-table.info-bordered-table thead th {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
.color-bordered-table.warning-bordered-table {
    border: 2px solid var(--ui-warning);
}
.color-bordered-table.warning-bordered-table thead th {
    background-color: var(--ui-warning);
    color: var(--ui-font-inverse);
}
.color-bordered-table.danger-bordered-table {
    border: 2px solid var(--ui-danger);
}
.color-bordered-table.danger-bordered-table thead th {
    background-color: var(--ui-danger);
    color: var(--ui-font-inverse);
}
.color-bordered-table.inverse-bordered-table {
    border: 2px solid #2f3d4a;
}
.color-bordered-table.inverse-bordered-table thead th {
    background-color: #2f3d4a;
    color: var(--ui-font-inverse);
}
.color-bordered-table.dark-bordered-table {
    border: 2px solid #263238;
}
.color-bordered-table.dark-bordered-table thead th {
    background-color: #263238;
    color: var(--ui-font-inverse);
}
.color-bordered-table.red-bordered-table {
    border: 2px solid #fb3a3a;
}
.color-bordered-table.red-bordered-table thead th {
    background-color: #fb3a3a;
    color: var(--ui-font-inverse);
}
.color-bordered-table.purple-bordered-table {
    border: 2px solid var(--ui-primary);
}
.color-bordered-table.purple-bordered-table thead th {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}
.color-bordered-table.muted-bordered-table {
    border: 2px solid var(--ui-light-font);
}
.color-bordered-table.muted-bordered-table thead th {
    background-color: var(--ui-light-font);
    color: var(--ui-font-inverse);
}
.full-color-table.full-primary-table {
    background-color: #f1effd;
}
.full-color-table.full-primary-table thead th {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}

.full-color-table.full-primary-table tr:hover {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}
.full-color-table.full-success-table {
    background-color: #e8fdeb;
}
.full-color-table.full-success-table thead th {
    background-color: var(--ui-success);
    color: var(--ui-font-inverse);
}

.full-color-table.full-success-table tr:hover {
    background-color: var(--ui-success);
    color: var(--ui-font-inverse);
}
.full-color-table.full-info-table {
    background-color: #cfecfe;
}
.full-color-table.full-info-table thead th {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}

.full-color-table.full-info-table tr:hover {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
.full-color-table.full-warning-table {
    background-color: #fff8ec;
}
.full-color-table.full-warning-table thead th {
    background-color: var(--ui-warning);
    color: var(--ui-font-inverse);
}

.full-color-table.full-warning-table tr:hover {
    background-color: var(--ui-warning);
    color: var(--ui-font-inverse);
}
.full-color-table.full-danger-table {
    background-color: #f9e7eb;
}
.full-color-table.full-danger-table thead th {
    background-color: var(--ui-danger);
    color: var(--ui-font-inverse);
}

.full-color-table.full-danger-table tr:hover {
    background-color: var(--ui-danger);
    color: var(--ui-font-inverse);
}
.full-color-table.full-inverse-table {
    background-color: #f6f6f6;
}
.full-color-table.full-inverse-table thead th {
    background-color: #2f3d4a;
    color: var(--ui-font-inverse);
}

.full-color-table.full-inverse-table tr:hover {
    background-color: #2f3d4a;
    color: var(--ui-font-inverse);
}
.full-color-table.full-dark-table {
    background-color: rgba(43, 43, 43, 0.8);
}
.full-color-table.full-dark-table thead th {
    background-color: #263238;
    color: var(--ui-font-inverse);
}
.full-color-table.full-dark-table tbody td {
    color: var(--ui-font-inverse);
}
.full-color-table.full-dark-table tr:hover {
    background-color: #263238;
    color: var(--ui-font-inverse);
}
.full-color-table.full-red-table {
    background-color: #f9e7eb;
}
.full-color-table.full-red-table thead th {
    background-color: #fb3a3a;
    color: var(--ui-font-inverse);
}

.full-color-table.full-red-table tr:hover {
    background-color: #fb3a3a;
    color: var(--ui-font-inverse);
}
.full-color-table.full-purple-table {
    background-color: #f1effd;
}
.full-color-table.full-purple-table thead th {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}

.full-color-table.full-purple-table tr:hover {
    background-color: var(--ui-primary);
    color: var(--ui-font-inverse);
}
.full-color-table.full-muted-table {
    background-color: rgba(152, 166, 173, 0.2);
}
.full-color-table.full-muted-table thead th {
    background-color: var(--ui-light-font);
    color: var(--ui-font-inverse);
}

.full-color-table.full-muted-table tr:hover {
    background-color: var(--ui-light-font);
    color: var(--ui-font-inverse);
}

.dt-buttons .dt-button {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
.dt-buttons .dt-button:hover {
    background: #2f3d4a;
}

.dataTables_length select {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
    background-color: transparent;
}
.dataTables_length select:focus {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
}

.dataTables_filter input {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
    background-color: transparent;
}
.dataTables_filter input:focus {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
}

table.dataTable thead .sorting:after {
    color: rgba(50, 50, 50, 0.5);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #67757c;
    border-color: #ddd !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--ui-font-inverse) !important;
    border-color: var(ui-info) !important;;
    background: var(--ui-info);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #67757c;
    border-color: #ddd !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white;
    border-color: var(ui-info) !important;;
    background: var(--ui-info);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background-color: #67757c;
}

.tablesaw-bar .btn-group label {
    color: #67757c !important;
}

.paging_simple_numbers .pagination .paginate_button {
    background: var(--ui-background);
}
.paging_simple_numbers .pagination .paginate_button:hover {
    background: var(--ui-background);
}

.paging_simple_numbers .pagination .paginate_button.active a,
.paging_simple_numbers .pagination .paginate_button:hover a {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
#demo-show-entries {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
    background-color: transparent;
    color: #67757c;
}
#demo-show-entries:focus {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
}
#demo-input-search2 {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
    background-color: transparent;
    color: #67757c;
}
#demo-input-search2:focus {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(#d9d9d9, #d9d9d9);
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(#d9d9d9, #d9d9d9);
}
.footable .pagination li a {
    color: var(--ui-info);
    background-color: var(--ui-background);
    border-color: #ddd !important;
}
.footable .pagination li.active a {
    color: #fff;
    background-color: var(--ui-info);
    border-color: var(--ui-info);
}
.footable .pagination li.disabled a {
    color: #636c72;
    background-color: var(--ui-background);
    border-color: #ddd;
}

.footable-odd {
    background: #f2f4f8;
}
.icon-list-demo div {
    color: #67757c;
}
.icon-list-demo div:hover {
    color: #263238;
}

.icon-list-demo .col-md-4:hover,
.icon-list-demo .col-3:hover {
    background-color: #ebf3f5;
}

.grid-stack-item-content {
    background: #fff;
    color: #2b2b2b;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
    border-color: rgba(120, 130, 140, 0.13) !important;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    color: var(--ui-font-inverse);
    background: var(--ui-primary);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
    color: var(--ui-font-inverse);
    background: var(--ui-info);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    color: var(--ui-font-inverse);
    background: var(--ui-success);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
    color: var(--ui-font-inverse);
    background: var(--ui-warning);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
    color: var(--ui-font-inverse);
    background: var(--ui-danger);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
    color: #263238;
    background: #f2f4f8;
}

.onoffswitch-label {
    border: 2px solid var(--ui-success);
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
    color: white;
}
.onoffswitch-inner:before {
    background-color: var(--ui-success);
    color: var(--ui-font-inverse);
}
.onoffswitch-inner:after {
    background-color: #eeeeee;
    color: #999999;
}
.onoffswitch-switch {
    background: var(--ui-background);
    border: 2px solid var(--ui-success);
}

.dp-selected[style] {
    background-color: var(--ui-info) !important;
}
.datepaginator-sm .pagination li a,
.datepaginator-lg .pagination li a,
.datepaginator .pagination li a {
    border-color: rgba(120, 130, 140, 0.13) !important;
}

.show-grid [class^="col-"] {
    border-color: #d9d9d9 !important;
    background-color: #f2f4f8;
}

.vtabs .tabs-vertical {
    border-right-color: rgba(120, 130, 140, 0.13) !important;
}
.vtabs .tabs-vertical li .nav-link {
    color: #263238;
}

.tabs-vertical li .nav-link.active,
.tabs-vertical li .nav-link:hover,
.tabs-vertical li .nav-link.active:focus {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
.customvtab .tabs-vertical li .nav-link.active,
.customvtab .tabs-vertical li .nav-link:hover,
.customvtab .tabs-vertical li .nav-link:focus {
    background: var(--ui-background);
    border-color: var(--ui-info) !important;
    color: var(--ui-info);
}
.tabcontent-border {
    border-color: #ddd !important;
}
.customtab2 li a.nav-link {
    color: #67757c;
}
.customtab2 li a.nav-link.active {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
.customtab2 li a.nav-link:hover {
    color: var(--ui-font-inverse);
    background: var(--ui-info);
}

.jq-icon-info {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}
.jq-icon-success {
    background-color: var(--ui-success);
    color: var(--ui-font-inverse);
}
.jq-icon-error {
    background-color: var(--ui-danger);
    color: var(--ui-font-inverse);
}
.jq-icon-warning {
    background-color: var(--ui-warning);
    color: var(--ui-font-inverse);
}

.list-group a.list-group-item:hover {
    background: #f2f4f8;
}
.list-group-item.active,
.list-group .list-group-item.active:hover {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.list-group-item.disabled {
    color: var(--ui-light-font);
    background: #f2f4f8;
}
.media {
    border-color: rgba(120, 130, 140, 0.13) !important;
}

.el-element-overlay .el-card-item .el-card-content a {
    color: #67757c;
}
.el-element-overlay .el-card-item .el-card-content a:hover {
    color: var(--ui-info);
}

.el-element-overlay .el-card-item .el-overlay-1 .el-info {
    color: var(--ui-font-inverse);
    background-color: transparent;
}

.el-element-overlay .el-card-item .el-overlay-1 .el-info > li a {
    border-color: var(--ui-font-inverse);
    color: var(--ui-font-inverse);
}
.el-element-overlay .el-card-item .el-overlay-1 .el-info > li a:hover {
    background: var(--ui-info);
    border-color: var(--ui-info) !important;;
}
.el-element-overlay .el-card-item .el-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.timeline:before {
    background-color: #f2f4f8;
}

.timeline > li > .timeline-panel {
    border-color: rgba(120, 130, 140, 0.13) !important;
}
.timeline > li > .timeline-panel:after {
    border-right: 0 solid #ffffff;
    border-left: 7px solid #ffffff;
}
.timeline > li > .timeline-badge {
    color: #fff;
}

.timeline-badge.primary {
    background-color: var(--ui-primary);
}
.timeline-badge.success {
    background-color: var(--ui-success);
}
.timeline-badge.warning {
    background-color: var(--ui-warning);
}
.timeline-badge.danger {
    background-color: var(--ui-danger);
}
.timeline-badge.info {
    background: var(--ui-info);
}
.timeline-title {
    color: inherit;
}

.cd-horizontal-timeline .events a {
    color: var(--ui-info);
}
.cd-horizontal-timeline .filling-line,
.cd-horizontal-timeline .events a.selected::after {
    background: var(--ui-info);
}
.cd-horizontal-timeline .events a.selected::after {
    border-color: var(--ui-info) !important;;
}
.myadmin-dd .dd-list .dd-item .dd-handle {
    background: var(--ui-background);
    border-color: rgba(120, 130, 140, 0.13) !important;
}
.myadmin-dd-empty .dd-list .dd3-content {
    border-color: rgba(120, 130, 140, 0.13) !important;
    background: var(--ui-background);
}
.myadmin-dd-empty .dd-list .dd3-handle {
    border-color: rgba(120, 130, 140, 0.13) !important;
    background: var(--ui-background);
}
.dd3-handle:before {
    color: #67757c;
}

.ribbon {
    color: var(--ui-font-inverse);
}
.ribbon-bookmark:before {
    border: 15px solid #263238;
}

.ribbon-bookmark.ribbon-right:before {
    border-right: 15px solid #263238;
}

.ribbon-bookmark.ribbon-vertical-l:before,
.ribbon-bookmark.ribbon-vertical-r:before {
    border-right: 15px solid #263238;
}

.ribbon-corner {
    background-color: transparent !important;
}

.ribbon-corner:before {
    border-top-color: var(--ui-info);
    border-left-color: var(--ui-info);
}
.ribbon-corner.ribbon-right:before {
    border-right-color: #526069;
    border-left-color: transparent;
}

.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #526069;
}

.ribbon-custom {
    background: var(--ui-info);
}
.ribbon-bookmark.ribbon-right.ribbon-custom:before {
    border-right-color: var(--ui-info);
    border-left-color: transparent;
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-custom:before,
.ribbon-bookmark.ribbon-vertical-r.ribbon-custom:before {
    border-right-color: var(--ui-info);
    border-bottom-color: transparent;
}
.ribbon-primary {
    background: var(--ui-primary);
}
.ribbon-bookmark.ribbon-primary:before {
    border-color: var(--ui-primary) !important;;
    border-right-color: transparent;
}
.ribbon-bookmark.ribbon-right.ribbon-primary:before {
    border-right-color: var(--ui-primary);
    border-left-color: transparent;
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-primary:before,
.ribbon-bookmark.ribbon-vertical-r.ribbon-primary:before {
    border-right-color: var(--ui-primary);
    border-bottom-color: transparent;
}
.ribbon-primary.ribbon-corner:before {
    border-top-color: var(--ui-primary);
    border-left-color: var(--ui-primary);
}
.ribbon-primary.ribbon-corner.ribbon-right:before {
    border-right-color: var(--ui-primary);
    border-left-color: transparent;
}
.ribbon-primary.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: var(--ui-primary);
}
.ribbon-success {
    background: var(--ui-success);
}
.ribbon-bookmark.ribbon-success:before {
    border-color: var(--ui-success) !important;;
    border-right-color: transparent;
}
.ribbon-bookmark.ribbon-right.ribbon-success:before {
    border-right-color: var(--ui-success);
    border-left-color: transparent;
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-success:before,
.ribbon-bookmark.ribbon-vertical-r.ribbon-success:before {
    border-right-color: var(--ui-success);
    border-bottom-color: transparent;
}
.ribbon-success.ribbon-corner:before {
    border-top-color: var(--ui-success);
    border-left-color: var(--ui-success);
}
.ribbon-success.ribbon-corner.ribbon-right:before {
    border-right-color: var(--ui-success);
    border-left-color: transparent;
}
.ribbon-success.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: var(--ui-success);
}
.ribbon-info {
    background: var(--ui-info);
}
.ribbon-bookmark.ribbon-info:before {
    border-color: var(--ui-info) !important;;
    border-right-color: transparent;
}
.ribbon-bookmark.ribbon-right.ribbon-info:before {
    border-right-color: var(--ui-info);
    border-left-color: transparent;
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-info:before,
.ribbon-bookmark.ribbon-vertical-r.ribbon-info:before {
    border-right-color: var(--ui-info);
    border-bottom-color: transparent;
}
.ribbon-info.ribbon-corner:before {
    border-top-color: var(--ui-info);
    border-left-color: var(--ui-info);
}
.ribbon-info.ribbon-corner.ribbon-right:before {
    border-right-color: var(--ui-info);
    border-left-color: transparent;
}
.ribbon-info.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: var(--ui-info);
}
.ribbon-warning {
    background: var(--ui-warning);
}
.ribbon-bookmark.ribbon-warning:before {
    border-color: var(--ui-warning) !important;;
    border-right-color: transparent;
}
.ribbon-bookmark.ribbon-right.ribbon-warning:before {
    border-right-color: var(--ui-warning);
    border-left-color: transparent;
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-warning:before,
.ribbon-bookmark.ribbon-vertical-r.ribbon-warning:before {
    border-right-color: var(--ui-warning);
    border-bottom-color: transparent;
}
.ribbon-warning.ribbon-corner:before {
    border-top-color: var(--ui-warning);
    border-left-color: var(--ui-warning);
}
.ribbon-warning.ribbon-corner.ribbon-right:before {
    border-right-color: var(--ui-warning);
    border-left-color: transparent;
}
.ribbon-warning.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: var(--ui-warning);
}
.ribbon-danger {
    background: var(--ui-danger);
}
.ribbon-bookmark.ribbon-danger:before {
    border-color: var(--ui-danger) !important;;
    border-right-color: transparent;
}
.ribbon-bookmark.ribbon-right.ribbon-danger:before {
    border-right-color: var(--ui-danger);
    border-left-color: transparent;
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-danger:before,
.ribbon-bookmark.ribbon-vertical-r.ribbon-danger:before {
    border-right-color: var(--ui-danger);
    border-bottom-color: transparent;
}
.ribbon-danger.ribbon-corner:before {
    border-top-color: var(--ui-danger);
    border-left-color: var(--ui-danger);
}
.ribbon-danger.ribbon-corner.ribbon-right:before {
    border-right-color: var(--ui-danger);
    border-left-color: transparent;
}
.ribbon-danger.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: var(--ui-danger);
}
.ribbon-default {
    background: #263238;
}
.ribbon-bookmark.ribbon-default:before {
    border-color: #263238;
    border-right-color: transparent;
}
.ribbon-bookmark.ribbon-right.ribbon-default:before {
    border-right-color: #263238;
    border-left-color: transparent;
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-default:before,
.ribbon-bookmark.ribbon-vertical-r.ribbon-default:before {
    border-right-color: #263238;
    border-bottom-color: transparent;
}
.ribbon-default.ribbon-corner:before {
    border-top-color: #263238;
    border-left-color: #263238;
}
.ribbon-default.ribbon-corner.ribbon-right:before {
    border-right-color: #263238;
    border-left-color: transparent;
}
.ribbon-default.ribbon-corner.ribbon-bottom:before {
    border-top-color: transparent;
    border-bottom-color: #263238;
}
#idletimeout {
    background: var(--ui-info);
    border: var(--ui-info) !important;
    color: #fff;
}
#idletimeout a {
    color: var(--ui-font-inverse);
}

.mytooltip:hover .tooltip-item2 {
    color: var(--ui-font-inverse);
}

.rect .tooltiptext {
    background-color: dimgray;
    color: #fff;
}

.tooltip-item {
    background: rgba(0, 0, 0, 0.1);
}

.tooltip-content {
    -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    background: #2b2b2b;
}

.tooltip-content::after {
    border-color: transparent;
    border-top-color: #2a3035;
}
.tooltip-text {
    color: var(--ui-font-inverse);
}
.tooltip-content2 {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
}

.tooltip-content3 {
    color: var(--ui-font-inverse);
}
.tooltip-content3::after {
    background: var(--ui-info);
}
.tooltip-item2 {
    color: var(--ui-info);
    -webkit-transition: background-color 0.3s, color 0.3s,
        -webkit-transform 0.3s;
    transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
    -o-transition: background-color 0.3s, color 0.3s, transform 0.3s;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    transition: background-color 0.3s, color 0.3s, transform 0.3s,
        -webkit-transform 0.3s;
}
.tooltip-content4 {
    background: var(--ui-info);
    color: var(--ui-font-inverse);
    border-bottom: 55px solid #2b2b2b;
}
.tooltip-content4 a {
    color: #2b2b2b;
}

.tooltip-content5 {
    color: var(--ui-font-inverse);
}

.tooltip-text3 {
    border-color: var(--ui-info) !important;
}
.tooltip-inner2 {
    background: #2b2b2b;
}
.tooltip-content5::after {
    border-color: transparent;
    border-top-color: var(--ui-info);
}
.tooltip-effect-1 .tooltip-content {
    color: var(--ui-font-inverse);
}

a.mytooltip {
    color: var(--ui-info);
}

.error-box {
    background: url(../../assets/images/background/error-bg.jpg) no-repeat
        center center #fff;
}

.gmaps,
.gmaps-panaroma {
    background: #f2f4f8;
}
.gmaps-overlay {
    color: var(--ui-font-inverse);
    background: var(--ui-primary);
}

.gmaps-overlay_arrow.above {
    border-top: 16px solid var(--ui-primary);
}
.gmaps-overlay_arrow.below {
    border-bottom: 16px solid var(--ui-primary);
}

.search-listing li {
    border-bottom-color: rgba(120, 130, 140, 0.13) !important;
}

.search-listing li h3 a {
    color: var(--ui-info);
}

.search-listing li a {
    color: var(--ui-success);
}

.minimal-faq .card .card-header {
    background: var(--ui-background);
}

.featured-plan .pricing-body {
    background: #ebf3f5;
    border-color: #ddd !important;
}
.featured-plan .price-table-content .price-row {
    border-top-color: rgba(120, 130, 140, 0.13) !important;
}
.pricing-body {
    border-top-color: rgba(120, 130, 140, 0.13) !important;
    border-bottom: 5px solid rgba(120, 130, 140, 0.13);
}

.price-table-content .price-row {
    border-top-color: rgba(120, 130, 140, 0.13) !important;
}

.chat-main-box .chat-left-aside {
    border-right-color: rgba(120, 130, 140, 0.13) !important;
}
.chat-main-box .chat-left-aside .open-panel {
    background-color: #fff;
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
}

.chat-main-box .chat-left-aside .chat-left-inner .form-control {
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(var(--ui-info)),
            to(var(--ui-info))
        ),
        -webkit-gradient(linear, left top, left bottom, from(rgba(120, 130, 140, 0.13)), to(rgba(120, 130, 140, 0.13)));
    background-image: -webkit-linear-gradient(var(--ui-info), var(--ui-info)),
        -webkit-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
    background-image: -o-linear-gradient(var(--ui-info), var(--ui-info)),
        -o-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
    background-image: linear-gradient(var(--ui-info), var(--ui-info)),
        linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
}

.comment-widgets .comment-row {
    border-left: 3px solid #ffffff;
}
.comment-widgets .comment-row:hover,
.comment-widgets .comment-row.active {
    border-color: var(--ui-info) !important;;
}

.comment-footer .action-icons a {
    color: var(--ui-light-font);
}
.comment-footer .action-icons a:hover,
.comment-footer .action-icons a.active {
    color: var(--ui-info);
}

.todo-list li .checkbox label {
    color: #455a64;
}

.chat-list li .chat-content h5 {
    color: var(--ui-light-font);
}
.chat-list li .chat-content .box {
    color: #263238;
}
.chat-list li .chat-time {
    color: var(--ui-light-font);
}

.message-box ul li .drop-title {
    border-bottom-color: rgba(120, 130, 140, 0.13) !important;
}
.message-box ul li .nav-link {
    border-top-color: rgba(120, 130, 140, 0.13) !important;
}

.message-box .message-widget a {
    border-bottom-color: rgba(120, 130, 140, 0.13) !important;
}
.message-box .message-widget a:hover {
    background: #f2f4f8;
}

.message-box .message-widget a .user-img .profile-status {
    border: 2px solid #ffffff;
}
.message-box .message-widget a .user-img .online {
    background: var(--ui-success);
}
.message-box .message-widget a .user-img .busy {
    background: var(--ui-danger);
}
.message-box .message-widget a .user-img .away {
    background: var(--ui-warning);
}
.message-box .message-widget a .user-img .offline {
    background: var(--ui-warning);
}

.message-box .message-widget a .mail-contnet .mail-desc,
.message-box .message-widget a .mail-contnet .time {
    color: #67757c;
}

.fc-day {
    background: var(--ui-background);
}

.fc-widget-content {
    border-color: rgba(120, 130, 140, 0.13) !important;
}
.fc th.fc-widget-header {
    color: #67757c;
}
.fc th.fc-sun,
.fc th.fc-tue,
.fc th.fc-thu,
.fc th.fc-sat {
    background: #f2f7f8;
}
.fc th.fc-mon,
.fc th.fc-wed,
.fc th.fc-fri {
    background: #f2f7f8;
}

.fc-button {
    background: var(--ui-background);
    border-color: rgba(120, 130, 140, 0.13) !important;
    color: #67757c;
}
.fc-button:hover {
    background: #f2f4f8;
}

.fc-state-hover {
    background: #f5f5f5;
}
.fc-unthemed .fc-today {
    border-color: var(--ui-danger) !important;
    background: #f2f4f8 !important;
}
.fc-state-highlight {
    background: #f0f0f0;
}
.fc-cell-overlay {
    background: #f0f0f0;
}
.fc-unthemed .fc-today {
    background: var(--ui-background);
}
.fc-event {
    color: var(--ui-font-inverse) !important;
    background: var(--ui-info);
}
.calendar-event {
    color: var(--ui-font-inverse);
    background: var(--ui-info);
}
.calendar-event a {
    color: var(--ui-font-inverse);
}

.steamline {
    border-left-color: rgba(120, 130, 140, 0.13) !important;
}
.steamline .sl-left {
    color: var(--ui-font-inverse);
    background: #263238;
}

.steamline .sl-item {
    border-bottom-color: rgba(120, 130, 140, 0.13) !important;
}
.sl-date {
    color: var(--ui-light-font);
}
.time-item {
    border-color: rgba(120, 130, 140, 0.13);
}

.time-item:after {
    background-color: var(--ui-background);
    border-color: rgba(120, 130, 140, 0.13);
}

.feeds li:hover {
    background: #ebf3f5;
}

.little-profile .pro-img img {
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1600px) {
}

.form-control-line .form-control.form-control-success:focus {
    border-bottom-color: var(--ui-success) !important;
}
.form-control-line .form-control.form-control-warning:focus {
    border-bottom-color: var(--ui-warning) !important;
}
.form-control-line .form-control.form-control-danger:focus {
    border-bottom-color: var(--ui-danger) !important;
}

.has-success .col-form-label,
.has-success .custom-control,
.has-success .form-check-label,
.has-success .form-control-feedback,
.has-success .form-control-label {
    color: var(--ui-success);
}

.has-success .form-control {
    border-color: var(--ui-success) !important;;
}
.has-warning .col-form-label,
.has-warning .custom-control,
.has-warning .form-check-label,
.has-warning .form-control-feedback,
.has-warning .form-control-label {
    color: var(--ui-warning);
}

.has-warning .form-control {
    border-color: var(--ui-warning) !important;;
}
.has-danger .col-form-label,
.has-danger .custom-control,
.has-danger .form-check-label,
.has-danger .form-control-feedback,
.has-danger .form-control-label {
    color: var(--ui-danger);
}

.has-danger .form-control {
    border-color: var(--ui-danger) !important;;
}


.card-inverse .card-blockquote,
.card-inverse .card-footer,
.card-inverse .card-header,
.card-inverse .card-title {
    color: var(--ui-font-inverse);
}
@media (max-width: 767px) {
    .chat-main-box .chat-left-aside {
        background: var(--ui-background);
    }
}
/*Normal Color*/
.preloader {
    background: #fff;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
    border: 2px solid var(--ui-success);
}
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
    background-color: var(--ui-success);
}

[type="checkbox"]:checked + label:before {
    border-right: 2px solid var(--ui-success);
    border-bottom: 2px solid var(--ui-success);
}
[type="checkbox"]:indeterminate + label:before {
    border-right: 2px solid var(--ui-success);
}

[type="checkbox"].filled-in:checked + label:after {
    border: 2px solid var(--ui-success);
    background-color: var(--ui-success);
}
[type="checkbox"].filled-in.tabbed:checked:focus + label:after {
    background-color: var(--ui-success);
    border-color: var(--ui-success);
}

.switch label input[type="checkbox"]:checked + .lever {
    background-color: var(--ui-success);
}
.switch label input[type="checkbox"]:checked + .lever:after {
    background-color: var(--ui-success);
}
.switch label .lever {
    background-color: #818181;
}
.switch label .lever:after {
    background-color: #f1f1f1;
}
.switch label input[type="checkbox"][disabled] + .lever:after,
.switch label input[type="checkbox"][disabled]:checked + .lever:after {
    background-color: #bdbdbd;
}

.card {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.well,
pre {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}


/* Fix the color/size of buttons in the toolbar */
.base-button .dx-button-text,
.base-button .dx-icon,
.dx-datagrid .dx-link.btn,

.dx-button-mode-contained.btn-primary .dx-icon,

.dx-datagrid .dx-link.btn-outline-secondary:hover,
.base-button.btn-outline-secondary.dx-state-hover:hover .dx-button-text,
.base-button.btn-outline-secondary.dx-state-hover:hover .dx-icon,
.btn-outline-secondary.dx-state-hover:hover .dx-button-text,
.btn-outline-secondary.dx-state-hover:hover .dx-icon,

.base-button.dx-button.btn-outline-secondary:focus .dx-button-text,
.base-button.dx-button.btn-outline-secondary:focus .dx-icon,
.btn-outline-secondary:focus .dx-button-text,
.btn-outline-secondary:focus .dx-icon,
.dx-button.btn-outline-secondary:focus .dx-button-text,
.dx-button.btn-outline-secondary:focus .dx-icon,
.dx-datagrid .dx-link.btn-outline-secondary:focus,

.dx-datagrid .dx-link.btn-outline-success:hover,
.base-button.btn-outline-success.dx-state-hover:hover .dx-button-text,
.base-button.btn-outline-success.dx-state-hover:hover .dx-icon,
.btn-outline-success.dx-state-hover:hover .dx-button-text,
.btn-outline-success.dx-state-hover:hover .dx-icon,

.dx-datagrid .dx-link.btn-outline-warning:hover,
.base-button.btn-outline-warning.dx-state-hover:hover .dx-button-text,
.base-button.btn-outline-warning.dx-state-hover:hover .dx-icon,
.btn-outline-warning.dx-state-hover:hover .dx-button-text,
.btn-outline-warning.dx-state-hover:hover .dx-icon

.dx-datagrid .dx-link.btn-outline-danger:hover,
.base-button.btn-outline-danger.dx-state-hover:hover .dx-button-text,
.base-button.btn-outline-danger.dx-state-hover:hover .dx-icon,
.btn-outline-danger.dx-state-hover:hover .dx-button-text,
.btn-outline-danger.dx-state-hover:hover .dx-icon

.dx-datagrid .dx-link.btn-outline-info:hover,
.base-button.btn-outline-info.dx-state-hover:hover .dx-button-text,
.base-button.btn-outline-info.dx-state-hover:hover .dx-icon,
.btn-outline-info.dx-state-hover:hover .dx-button-text,
.btn-outline-info.dx-state-hover:hover .dx-icon { color: var(--ui-font-inverse); }

/* outline secondary */
.dx-calendar-navigator .dx-button .dx-button-content .dx-button-text,
.dx-calendar-navigator .dx-button-content .dx-icon,
.dx-button.btn-outline-secondary .dx-button-text,
.dx-button.btn-outline-secondary .dx-icon,
.dx-datagrid .dx-link.btn-outline-secondary,
.base-button.dx-button.btn-outline-secondary .dx-button-text,
.base-button.dx-button.btn-outline-secondary .dx-icon,
.btn-outline-secondary .dx-button-text,
.btn-outline-secondary .dx-icon { color: var(--ui-secondary); }

.btn-outline-secondary.dx-state-hover,
.btn-outline-secondary.dx-button-mode-contained.dx-state-hover,
.btn-outline-secondary.dx-button-mode-contained {
    border-color: var(--ui-secondary) !important;
}

.btn-outline-secondary.dx-state-hover,
.btn-outline-secondary.dx-button-mode-contained.dx-state-hover {
    background: var(--ui-secondary);
}

/* outline success */
.dx-button.btn-outline-success .dx-button-text,
.dx-button.btn-outline-success .dx-icon,
.dx-datagrid .dx-link.btn-outline-success,
.base-button.dx-button.btn-outline-success .dx-button-text,
.base-button.dx-button.btn-outline-success .dx-icon,
.btn-outline-success .dx-button-text,
.btn-outline-success .dx-icon { color: var(--ui-success); }

.btn-outline-success.dx-state-hover,
.btn-outline-success.dx-button-mode-contained.dx-state-hover,
.btn-outline-success.dx-button-mode-contained {
    border-color: var(--ui-success) !important;
}

.btn-outline-success.dx-state-hover,
.btn-outline-success.dx-button-mode-contained.dx-state-hover {
    background: var(--ui-success);
}

/* outline warning */
.dx-button.btn-outline-warning .dx-button-text,
.dx-button.btn-outline-warning .dx-icon,
.dx-datagrid .dx-link.btn-outline-warning,
.base-button.dx-button.btn-outline-warning .dx-button-text,
.base-button.dx-button.btn-outline-warning .dx-icon,
.btn-outline-warning .dx-button-text,
.btn-outline-warning .dx-icon { color: var(--ui-warning); }

.btn-outline-warning.dx-state-hover,
.btn-outline-warning.dx-button-mode-contained.dx-state-hover,
.btn-outline-warning.dx-button-mode-contained {
    border-color: var(--ui-warning) !important;
}

.btn-outline-warning.dx-state-hover,
.btn-outline-warning.dx-button-mode-contained.dx-state-hover {
    background: var(--ui-warning);
}

/* outline danger */
.dx-button.btn-outline-danger .dx-button-text,
.dx-button.btn-outline-danger .dx-icon,
.dx-datagrid .dx-link.btn-outline-danger,
.base-button.dx-button.btn-outline-danger .dx-button-text,
.base-button.dx-button.btn-outline-danger .dx-icon,
.btn-outline-danger .dx-button-text,
.btn-outline-danger .dx-icon { color: var(--ui-danger); }

.btn-outline-danger.dx-state-hover,
.btn-outline-danger.dx-button-mode-contained.dx-state-hover,
.btn-outline-danger.dx-button-mode-contained {
    border-color: var(--ui-danger) !important;
}

.btn-outline-danger.dx-state-hover,
.btn-outline-danger.dx-button-mode-contained.dx-state-hover {
    background: var(--ui-danger);
}

/* outline info */
.dx-button.btn-outline-info .dx-button-text,
.dx-button.btn-outline-info .dx-icon,
.dx-datagrid .dx-link.btn-outline-info,
.base-button.dx-button.btn-outline-info .dx-button-text,
.base-button.dx-button.btn-outline-info .dx-icon,
.btn-outline-info .dx-button-text,
.btn-outline-info .dx-icon { color: var(--ui-info); }

.btn-outline-info.dx-state-hover,
.btn-outline-info.dx-button-mode-contained.dx-state-hover,
.btn-outline-info.dx-button-mode-contained {
    border-color: var(--ui-info) !important;
}

.btn-outline-info.dx-state-hover,
.btn-outline-info.dx-button-mode-contained.dx-state-hover {
    background: var(--ui-info);
}

.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today.dx-calendar-contoured-date {
    background: var(--ui-primary);
    --webkit-box-shadow: none;
    box-shadow: none;
}

.dx-calendar-cell.dx-calendar-today {
    background: rgb(var(--surface-300));
}

.dx-calendar-cell.dx-calendar-selected-date, .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today {
    background: var(--ui-secondary);
    --webkit-box-shadow: none;
    box-shadow: none;
}

.dx-toast-info {
  background-color: var(--ui-info);
}
.dx-toast-warning {
  background-color: var(--ui-warning);
}
.dx-toast-error {
  background-color: var(--ui-danger);
}
.dx-toast-success {
  background-color:  var(--ui-success);
}


/*
Charts
*/

.css-bar-info.css-bar-0 {
    background-image: linear-gradient(90deg, #fafafa 50%, transparent 50%, transparent), linear-gradient(90deg, var(--ui-info) 50%, #fafafa 50%, #fafafa);
}

.css-bar:after, .css-bar > img {
    color: var(--ui-light-font);
}

.card-header:empty, .card-header.bg-light:empty {
    background: rgb(var(--secondary-500)) !important;
}

/*
Metro Flow Rate Plan Table
 */
.p-flex-table-rate-plan {
    --overall-width: 100%;
    --overall-height: 100%;
    --vertical-header-width: 280px;
    --horizontal-header-width: 155px;
    --horizontal-header-height: 135px;
    --cell-height: 45px;
}

.rate-plan .p-flex-left-top-header {
    color: var(--ui-font-inverse);
}

.rate-plan .p-flex-head .p-flex-header-v {
    font-weight: 600;
    background: var(--ui-background);
}

.rate-plan .p-flex-left-top-header,
.rate-plan .p-flex-table .p-flex-head .p-flex-data,
.rate-plan .p-flex-table .p-flex-body .p-flex-header-h {
    --ui-primary: rgb(var(--primary-500));
    background: var(--brand-primary);
    color: var(--ui-font-inverse);
}

.rate-plan .p-flex-table .p-flex-data:nth-child(2),
.rate-plan .p-flex-table .p-flex-header-v:nth-child(2) {
    background: var(--brand-primary) !important;
    color: var(--ui-font-inverse);
}

.rate-plan .p-flex-table .p-flex-data:nth-child(odd),
.rate-plan .p-flex-table .p-flex-header-v:nth-child(odd) {
    background: var(--ui-table-data-background-alt);
}

.rate-plan .p-flex-table .p-flex-data:nth-child(even),
.rate-plan .p-flex-table .p-flex-header-v:nth-child(even) {
    background: var(--ui-background);
}

.rate-plan .rate-plan-select-soc-code {
    color: var(--ui-gold);
}

/*
Metro Flow Protection and Insurance Table
 */
.p-flex-table-protection-insurance {
    --overall-width: 100%;
    --overall-height: 100%;
    --vertical-header-width: 400px;
    --horizontal-header-width: 155px;
    --horizontal-header-height: 215px;
    --cell-height: 75px;
}


.protection-insurance .p-flex-left-top-header {
    background: var(--brand-primary);
    color: var(--ui-font-inverse);
}

.protection-insurance .p-flex-header-h h4 {
    color: var(--ui-font-inverse);
    margin: 0;
}

.protection-insurance .p-flex-head .p-flex-header-v {
    font-weight: 600;
    background: var(--ui-background);
}

.protection-insurance .p-flex-table .p-flex-head .p-flex-data,
.protection-insurance .p-flex-table .p-flex-body .p-flex-header-h {
    --ui-primary: rgb(var(--primary-500));
    background: var(--brand-primary);
    color: var(--ui-font-inverse);
}

.protection-insurance .p-flex-table .p-flex-data:nth-child(odd),
.protection-insurance .p-flex-table .p-flex-header-v:nth-child(odd) {
    background: var(--ui-table-data-background-alt);
}

.protection-insurance .p-flex-table .p-flex-data:nth-child(even),
.protection-insurance .p-flex-table .p-flex-header-v:nth-child(even) {
    background: var(--ui-font-inverse);
}

.protection-insurance .protection-insurance-select-soc-code {
    color: var(--ui-gold);
}

.protection-insurance-description {
    display: block;
    overflow-wrap: break-word;
}

/*
Metro Cart Summary
 */

.metro-activation-cart-summary-detail-header {
    --ui-primary: rgb(var(--primary-500));
    background: var(--ui-background);
    width: 100%;
    height: 37px;
    border-bottom: 1px var(--ui-table-border) solid;
    border-top: 1px var(--ui-table-border) solid;
}

.metro-activation-cart-summary-detail {
    border-color: var(--ui-table-border);
    border: 1px solid;
    border-radius: 2px;
}

.metro-activation-cart-summary-detail .border-top-botom {
    border-color: var(--ui-table-border);
}

/*
Metro Add-Ons
 */

.add-ons-items {
    border-color: var(--ui-table-border);
}

.add-ons-item, .add-ons-items-tabs {
    border-color: var(--ui-table-border);
    background: var(--ui-background);
    color: var(--ui-body-font);
}

.add-ons-item {
    box-shadow: 0 2px 4px 0 rgb(var(--surface-950) / 10%);
}