/**
* Variables
**/
:root {
    --leftNavMenuBackgroundColor: #333333;
    --rightNavMenuBackgroundColor: #444444;
    --bs-main-nav-background: #32363B;
    --bs-main-nav-size: 48px;
    --bs-main-nav-secondary-active: #555555;
    --bs-base-sizing: 8px;
    --bs-main-nav-padding: calc(var(--bs-base-sizing) * 2);
    --bs-header-height: calc((var(--bs-base-sizing) * 7) + 2px);
    --bs-copy-color: #32363B;

    /* New Design System Variables */
    /* Colors: */
    --dark-theme-page-background: #11151D;
    --color-positive: #77B458;
    --color-negitive: #D12E03;
    --dark-gray-5: #EAEEF4;
    --dark-gray-4: #C1C4CB;
    --dark-gray-n: #84888E;
    --dark-gray-2: #53575D;
    --dark-gray-1: #32363D;
    --dark-color-bg: #1F2329;
    --dark-color-link: #0483D8;
    --dark-color-selected: #CE760D;
    --dark-color-attention: #D60C34;
    --dark-color-attention-hover: #E61C44;
    --dark-color-success: #78A836;
    --dark-color-info: #771263;
    --dark-color-primary: #009596;
    --dark-color-primary-hover: #2EB1B2;
    --dark-color-brand: #059343;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray-5: #32363B;
    --color-gray-4: #53575C;
    --color-gray-n: #84888D;
    --color-gray-2: #C1C5CA;
    --color-gray-1: #EAEEF3;
    --color-gray-bg: #F0F1F2;
    --color-brand: #00AB4E;
    --color-primary: #009596;
    --color-primary-hover: #007C7D;
    --color-info: #96157C;
    --color-success: #8DC63F;
    --color-attention: #CF1034;
    --color-attention-hover: #B6001B;
    --color-selected: #F7941D;
    --color-link: #0271BB;

    /* Font/text values */
    --unnamed-font-family-source-sans-pro: Source Sans Pro;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-600: 600px;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-11: 11px;
    --unnamed-font-size-12: 12px;
    --unnamed-font-size-14: 14px;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-18: 18px;
    --unnamed-font-size-20: 20px;
    --unnamed-font-size-24: 24px;
    --unnamed-font-size-36: 36px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-character-spacing-0-14: 0.14px;
    --unnamed-character-spacing-0-11: 0.11px;
    --unnamed-character-spacing-0-12: 0.12px;
    --unnamed-line-spacing-14: 14px;
    --unnamed-line-spacing-16: 16px;
    --unnamed-line-spacing-18: 18px;
    --unnamed-line-spacing-21: 21px;
    --unnamed-line-spacing-23: 23px;
    --unnamed-line-spacing-26: 26px;
    --unnamed-line-spacing-31: 31px;
    --unnamed-line-spacing-37: 37px;
    /* New Design System Variables End */

    /* These were missing in the design system */
    --unnamed-color-eaeef4: var(--dark-gray-5);
    --unnamed-color-32363b: var(--color-gray-5);
    --unnamed-color-ffffff: var(--color-white);
    --color-ag-grid-background-attention-green: transparent linear-gradient(90deg, #77B4584D 0%, #77B45866 100%) 0% 0% no-repeat padding-box;
    --color-ag-grid-border-color-attention-green: #77B458;
    --color-ag-grid-background-attention-blue: transparent linear-gradient(90deg, #0066B240 0%, #0066B266 100%) 0% 0% no-repeat padding-box;
    --color-ag-grid-border-color-attention-blue: #0066B2;
    --color-ag-grid-background-attention-red: transparent linear-gradient(90deg, #D12E0340 0%, #D12E0366 100%) 0% 0% no-repeat padding-box;
    --color-ag-grid-border-color-attention-red: #D12E03;
    /* These were missing in the design system end */

    --app-dark-theme-background-color: var(--dark-theme-page-background);
    --app-dark-theme-lighter-background-color: var(--dark-color-bg);
    --app-dark-theme-top-nav: var(--app-dark-theme-lighter-background-color);
    --app-dark-theme-splitter: var(--app-dark-theme-lighter-background-color);
    --app-dark-theme-tabs-text-color: var(--dark-gray-5);
    --app-dark-theme-tabs-text-active-color: var(--dark-gray-5);
    --app-dark-theme-cell-color: var(--dark-gray-5);
    --app-dark-theme-icons-color: var(--color-gray-n);
    --app-dark-theme-grid-border: var(--app-dark-theme-lighter-background-color);
    --app-dark-theme-widgets-background-color: #53575C;
    --app-dark-theme-color-selected: var(--dark-color-selected);
    --app-dark-theme-color-primary-hover: var(--dark-color-primary-hover);
    --app-dark-theme-color-border-hover: var(--dark-gray-2);
    --app-dark-theme-ag-grid-header-background: var(--color-gray-5);
    --app-dark-theme-ag-grid-primary-row-background: var(--dark-theme-page-background);
    --app-dark-theme-ag-grid-secondary-row-background: var(--dark-color-bg);
    --app-dark-theme-color-divider: var(--dark-gray-2);

    --app-standard-theme-top-nav: #dcdada;
    --app-standard-theme-splitter: #EEEEEE;
    --app-standard-theme-background-color: #ffffff;
    --app-standard-theme-tabs-background-color: #eee;
    --app-standard-theme-tabs-text-color: var(--color-gray-5);
    --app-standard-theme-tabs-text-active-color: var(--color-gray-5);
    --app-standard-theme-cell-color: var(--color-gray-5);
    --app-standard-theme-icons-color: var(--color-gray-n);
    --app-standard-theme-grid-border: #BDC3C7;
    --app-standard-theme-widgets-background-color: '';
    --app-standard-theme-color-selected: var(--color-selected);
    --app-standard-theme-color-primary-hover: var(--color-primary-hover);
    --app-standard-theme-color-border-hover: var(--color-gray-2);
    --app-standard-theme-ag-grid-header-background: var(--color-gray-bg);
    --app-standard-theme-ag-grid-primary-row-background: var(--color-white);
    --app-standard-theme-ag-grid-secondary-row-background: var(--color-gray-bg);
    --app-standard-theme-color-divider: var(--color-gray-2);

    --app-background-color: var(--app-standard-theme-background-color);
    --app-ligther-background-color: var(--app-standard-theme-background-color);
    --app-tabs-background-color: var(--app-standard-theme-tabs-background-color);
    --app-top-nav-color: var(--app-standard-theme-top-nav);
    --app-splitter-color: var(--app-standard-theme-splitter);
    --app-tabs-text-color: var(--app-standard-theme-tabs-text-color);
    --app-tabs-text-active-color: var(--app-standard-theme-tabs-text-active-color);
    --app-cell-color: var(--app-standard-theme-cell-color);
    --app-icons-color: var(--app-standard-theme-icons-color);
    --app-grid-border-color: var(--app-standard-theme-grid-border);
    --app-widgets-background-color: var(--app-standard-theme-widgets-background-color);
    --app-color-selected: var(--app-standard-theme-color-selected);
    --app-color-primary-hover: var(--app-standard-theme-color-primary-hover);
    --app-color-border-hover: var(--app-standard-theme-color-border-hover);
    --app-color-divider: var(--app-standard-theme-color-divider);
    /* AgGrid variables */
    --app-ag-grid-header-background: var(--app-standard-theme-ag-grid-header-background);
    --app-ag-grid-primary-row-background: var(--app-standard-theme-ag-grid-primary-row-background);
    --app-ag-grid-secondary-row-background: var(--app-standard-theme-ag-grid-secondary-row-background);
    --app-ag-grid-background-attention: var(--color-ag-grid-background-attention-red);
    --app-ag-grid-border-color-attention: var(--color-ag-grid-border-color-attention-red);
    /* AgGrid variables end */
}


/**
* Fonts
**/
@font-face {
    font-family: 'Open Sans';
    font-weight: 300;
    font-style: normal;
    src: url('../../assets/fonts/open-sans/OpenSans-Light-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 300;
    font-style: italic;
    src: url('../../assets/fonts/open-sans/OpenSans-Light-Italic-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: normal;
    src: url('../../assets/fonts/open-sans/OpenSans-Regular-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: italic;
    src: url('../../assets/fonts/open-sans/OpenSans-Regular-Italic-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-style: normal;
    src: url('../../assets/fonts/open-sans/OpenSans-Semibold-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-style: italic;
    src: url('../../assets/fonts/open-sans/OpenSans-Semibold-Italic-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 700;
    font-style: normal;
    src: url('../../assets/fonts/open-sans/OpenSans-Bold-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 700;
    font-style: italic;
    src: url('../../assets/fonts/open-sans/OpenSans-Bold-Italic-webfont.woff') format('woff');
}

@font-face{
    font-family: 'thinkFontio';
    src: url('../../assets/fonts/iaf-custom/thinkFont.woff') format('truetype');
}

* {
  -webkit-user-select: none;
}

body {
  overflow: hidden;
}

@-ms-viewport {
  width: auto;
}

html, body {
  height: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

iframe {
    border: 0;
}

.bs-flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.highcharts-point {
    stroke-width: 0 !important;
}

svg.highcharts-root text {
    fill: var(--app-cell-color) !important;
}

svg.highcharts-root .highcharts-tooltip-box {
    fill: var(--app-ag-grid-header-background) !important;
}

svg.highcharts-root .highcharts-tooltip text {
    color: var(--app-cell-color) !important;
}

.highcharts-background {
    fill: var(--app-background-color);
}

.highcharts-data-label text {
    font-size: 11px !important;
}

.bs-flex-content {
  flex-grow: 1;
  height: 100%;
}

.lnr {
    font-size: 14px;
    font-weight: 600;
    min-height: 18px;
    width: 18px;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto; }

/* ***************************** */



.thumb-xs,
.thumb-sm,
.thumb-lg,
.thumb-xlg,
.thumb {
  position: relative;
  display: inline-block;
  text-align: center; }

h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small,
.h1 small,
.h1 .small, .h2 small,
.h2 .small, .h3 small,
.h3 .small, .h4 small,
.h4 .small, .h5 small,
.h5 .small, .h6 small,
.h6 .small {
  font-weight: 500;
  font-size: 75%;
  color: #999999; }

@media (min-width: 768px) {
  .form-horizontal.form-label-left .control-label {
    text-align: left; } }

.dropdown-toggle:after {
  content: none; }

.dropdown-menu {
  font-size: 13px;
  border-radius: 0; }
.dropdown-menu > li > a {
  padding-top: 5px;
  padding-bottom: 5px; }

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

th {
  font-weight: 600; }
/*
a {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out; }

.btn {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }

.form-control {
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out; }
*/
/***********************/
/*        Layout       */
/***********************/
.loading-message-wrapper
{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.loading-message
{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    width: 236px;
    height: 130px;
    margin: auto;
}

.loading-message-spinner {
    font-size: 69px;
}

.loading-message-text {
    margin-top: 21px;
    color: #333;
    font-family: Open Sans;
    font-size: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.app {
    height: 100%;
    display: block;
}

.app-loading {
    visibility: hidden;
}


.page-controls, .content-wrap, .loader-wrap {
  left: 274px;
  transition: left 0.3s ease-in-out; }
@media (min-width: 768px) {
  .page-controls, .content-wrap, .loader-wrap {
    margin-left: 50px;
    left: 224px; } }
.nav-collapsed .page-controls, .nav-collapsed .content-wrap, .nav-collapsed .loader-wrap {
  left: 0; }
@media (min-width: 992px) {
  .nav-static .page-controls, .nav-static .content-wrap, .nav-static .loader-wrap {
    transition: none;
    left: 0;
    margin-left: 274px; } }

.page-controls {
  transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
  right: -274px; }
.nav-collapsed .page-controls {
  right: 0; }
@media (min-width: 992px) {
  .nav-static .page-controls {
    right: 0; } }

.widget {
  width: 100%;
  height: calc(100% - 2px);
}

.widget-overflow{
    overflow: auto;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}


/******************************
    Application css override for chart
*******************************/
.paddintopggap {
  padding-top: 10px;
}

.btn-markitcolor1 {
  color: rgba(255,255,255,0.95);
  background: #008E89;
  border: 1px solid #e7eaec;
}
.btn-markitcolor1:hover {
  color: #FFF;
  background: #00A5A5;
}
.btn-markitcolor1 span {
  font-size: 12px;
}

.right-align {
  text-align: right;
}
/*
.form-control,
.dropdown-menu,
.btn-group .btn,
.popover {
  font-family: Arial;
  font-size: 11px;
}*/
itf-summary-chart h4 {
  font-size: 15px;
  font-weight: 600;
}

.popover {
  max-width: 400px;
}

.wj-popup {
  background-color: #fff !important;
}

wj-popup.wj-content {
  border-radius: 4px;
}

.popover.lef-bottom > .arrow {
  top: -11px;
  left: 90%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.popover.left-bottom > .arrow:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}

.popover.left > .arrow:after {
  border-left-color: #ebeff1;
}

.form-control {
  height: 28px;
}

.ui-chart-legend-item td {
  padding-bottom: 3px;
}

iaf-dashboard h4 {
  font-size: 16px;
  color: #222;
}

.widget-chart{
    overflow: auto;
}

.chart-container{
    width:370px;
    height:330px;
    float:left;
    border:1px solid #dfdfdf;
    margin:5px;
}

.chart-label{
    text-align: center;
    width:100%;
    padding: 3px; color:#444;
}

/* EDM styles - Begin */
button,
input[type="button"] {
    padding:6px 12px;
    outline: 0 none;
    border:none;
    background-color: #009596;
    color: #fff;
    font-size:11px;
    line-height:12px;
    text-transform: uppercase;
}
button:hover,
input[type="button"]:hover {
    background-color: #008e89;
}
button:focus,
input[type=button]:focus {
    outline: none;
}
button.cancel:disabled{
    color:#ccc;
}
button:disabled:hover{
    background-color: #009596;
}
button.cancel:disabled:hover{
    background-color: #333;
}
button.edmClose,
button.cancel,
input[type="button"].edmClose {
    background-color: #333;
}
button.edmClose:hover,
button.cancel:hover,
input[type="button"].edmClose:hover {
    background-color: #111;
}
button.edmDefault,
input[type="button"].edmDefault {
    color: rgb(0, 0, 0);
    background-color: rgb(221, 221, 221);
}
button.edmDefault:hover,
input[type="button"].edmDefault:hover {
    color: rgb(0, 0, 0);
    background-color: rgb(204, 204, 204);
}

button i {
    font-size:16px;
    padding:0;
    margin:0;
    vertical-align: text-top;
}
/* EDM styles - End */


.iaf-panel-heading {
    padding: 0px;
}

.iaf-panel-title {
    font-weight: bold;
}

.iaf-panel-title > div {
    padding: 10px 15px;
}

.iaf-panel-body {
    overflow: auto;
}

.iaf-form-row-small {
    float: left;
    width: 100%;
    padding-bottom: 6px;
}

.iaf-form-row-medium {
    float: left;
    width: 100%;
    padding-bottom: 16px;
}

.iaf-form-label {
    font-weight: bold;
    font-size: 12px;
}

.iaf-form-label .required{
    color: #ff0000;
}

.iaf-form-field {
    font-size: 12px;
}

.iaf-form-field input:not([type='checkbox']),
.iaf-form-field textarea,
.iaf-form-field-multi-select .btn{
    padding: 2px 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #a9a9a9;
    outline: 0;
    font: inherit;
    font-size: 12px;
    line-height: 1.5em;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    position: relative;
    -webkit-appearance: none;
    border-radius: 0px;
}

.iaf-form-field select{
    padding: 2px 5px;
    border: 1px solid #a9a9a9;
    font: inherit;
    font-size: 12px;
}

.iaf-form-field-multi-select .btn {
    padding: 2px 10px;
}

.iaf-form-field input:focus,
.iaf-form-field select:focus,
.iaf-form-field textarea:focus,
.iaf-form-field-multi-select .btn-default:hover,
.iaf-form-field-multi-select .input-group-sm>.form-control:focus {
    /*border: 1px solid #009596;*/
    border: 1px solid rgba(0, 149, 150, 0.5);
    background-color: #fff;
    box-shadow: none;
    outline: 0 none;
    padding: 2px 5px 2px 5px !important;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
input.k-input:focus {
    border: 1px solid rgba(0, 149, 150, 0.5);
    background-color: #fff;
    box-shadow: none;
    outline: 0 none;
    /*padding: 2px 1px 2px 1px;*/
}

input::selection {
    background-color: #009596;
    color: #ffffff;
}

select:focus {
    border-color: rgba(0, 149, 150, 0.5);
    box-shadow: none;
    outline: 0 none;
}

.iaf-form-field-multi-select .btn-group, .iaf-form-field-multi-select .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 150px;
}

.iaf-form-field-multi-select .btn-default {
    color: #333;
    background-color: #fff;
    border-color:#a9a9a9;
}

.iaf-form-field-multi-select .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 6px dashed;
    border-top: 6px solid;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    margin-top: 5px;
}

.iaf-form-field-multi-select .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #a9a9a9;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.iaf-form-field-multi-select .dropdown-menu > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
}
.iaf-form-field-multi-select .dropdown-menu>li>a {
    display: block;
    padding: 3px 10px;
    clear: both;
    color: #333;
    white-space: nowrap;
}

.iaf-form-field-multi-select .input-group-sm>.form-control,
.iaf-form-field-multi-select .input-group-sm>.input-group-addon,
.iaf-form-field-multi-select .input-group-sm>.input-group-btn>.btn {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0px;
}

/*select:focus > option:checked
{ color: #fff !important;
text-shadow: 1px 0px 0px !important;
background: #009596 !important;
-moz-appearance: none !important; }*/

.grpc-traffic-monitor-widget-highlight {
    border: 2px dashed red;
}

/*
.grpc-traffic-monitor-widget-highlight::after {
    display: flex;
    border-top: 2px dashed red;
    content: ' ';
}
*/
/* Browser Support */
#browserSupportWarning {
    display:none;
}
#browserSupportWarning .close {
    float: right;
    margin: -2px 0px 0px 0px;
    padding: 0;
    color:#333;
    opacity: 0.8;
    text-shadow: none;
    font-size: 13px;
    opacity: 0.87;
}

#browserSupportWarning .close:hover {
    background-color: rgba(255,255,255,0.1);
    color:#333;
    opacity: 1;
}

#browserSupportWarning .close i {
    padding: 0;
    margin:0;
    font-size:22px;
    line-height:1;
}

#browserSupportWarning .close span {
    display: block;
    margin-top: -1px;
    margin-left: -1px;
}

/* Theming */
.app-dark-theme {
    background-color: var(--app-dark-theme-background-color) !important;
}

/* New Design System classes */
/* Character Styles */
.dark-text-xs {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-11);
    line-height: var(--unnamed-line-spacing-14);
    letter-spacing: var(--unnamed-character-spacing-0-11);
    color: var(--unnamed-color-eaeef4);
}
.dark-text-sm {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-12);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0-12);
    color: var(--unnamed-color-eaeef4);
}
.dark-paragrah {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-18);
    letter-spacing: var(--unnamed-character-spacing-0-14);
    color: var(--unnamed-color-eaeef4);
}
.dark-text-4 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-21);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-eaeef4);
}
.dark-text-3 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-18);
    line-height: var(--unnamed-line-spacing-23);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-eaeef4);
}
.dark-text-2 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-eaeef4);
}
.dark-text-1 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-31);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-eaeef4);
}
.dark-jumbo {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-36);
    line-height: var(--unnamed-line-spacing-37);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-eaeef4);
}
.jumbo {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-36);
    line-height: var(--unnamed-line-spacing-37);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.text-1 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-31);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.text-2 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.text-3 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-18);
    line-height: var(--unnamed-line-spacing-23);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.text-4 {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-21);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.paragraph {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-18);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.text-sm {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-12);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.text-xs {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-11);
    line-height: var(--unnamed-line-spacing-14);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-32363b);
}
.button {
    font-family: var(--unnamed-font-family-source-sans-pro);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-21);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}
/* New Design System classes end */

/* Base Buy-side Theme */
/*** Mixins ***/
body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
  font-size: 14px;
  line-height: 20px;
}
/* setting grid borders */
.wj-flexgrid {
  border: none;
  border-radius: 0px;
}
/* remove the default blue outline on focus on the grid */
div:focus {
  outline: none;
}
/* frozen area edges */
.wj-frozen {
  z-index: 2 !important;
}
.wj-frozen-row {
  border-right: 2px solid rgba(0, 0, 0, 0.55) !important;
}
.wj-frozen-col {
  border-right: 2px solid rgba(0, 0, 0, 0.55) !important;
  /*z-index: 2 !important;*/
}
/*
.wj-header.wj-frozen-col {
  z-index: 4 !important;
}
*/
/* DJN Added */
.wj-cell {
  font-size: 12px;
  line-height: 17px;
  padding: 3px 6px 0;
}
/* DJN Added - Highlight entire row on mouseover */
wj-flex-grid div[wj-part=cells] {
  overflow: hidden;
}
/* YMP: Disabled the mouseover to be able to work on basket item. Will revisit this again.
/*
.wj-cell:not(.wj-header):hover {
  overflow: visible;
}
.wj-cell:not(.wj-header):after {
  content: '';
  background-color: transparent;
  transition: all 0.5s;
}
.wj-cell:not(.wj-header):hover:after {
  position: absolute;
  left: -10000px;
  top: 0px;
  width: 20000px;
  height: 100%;
  /!* background-color: #f3f3f3; *!/
  background-color: rgba(174,174,174,0.15);
  transition: all 0.5s;
  z-index: 1;
}
*/
/* DJN Added - Ensure that the Expand Group / Collapse Group icon is rendered as a layer on top of the hover pseudo CSS class of the ::after pseudo element (which was used to highlight an entire row on mouseover) */
.wj-elem-collapse {
  z-index: 2;
}
/* DJN Added - Ensure that items inside cells are rendered as a layer on top of the hover pseudo CSS class of the ::after pseudo element (which was used to highlight an entire row on mouseover) */
.wj-cell div, .wj-cell span {
/*  position: relative;
  z-index: 2;*/
}

/* -- Headers -- */
/* row and column headers */
.wj-header {
  background: #e3e3e3;
  font-weight: 600;
  text-align: left !important; /* YMP Added to ensure headers are left aligned */
  /*z-index: 3*/ /* DJN Added - Ensure that headers are rendered as a layer on top of scrolled cells. This is required because of the 'Highlight entire row on mouseover' implementation */
}
.wj-header .wj-elem-filter {
  /*z-index: 3*/ /* DJN Added - Ensure that filter icon is clickable even in case where column width is small */
}
.wj-colheaders .wj-header {
  border-top: solid 1px #dfdfdf;
}
/* Overflow for column headers (this is required because we use cell templates in some places) */
.wj-colheaders .wj-header > div {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reinstate column header borders which had previously been lost as a consequence of removing vertical grid lines */
.wj-cell.wj-header {
  border-right: solid 1px #c0c0c0;
}


/* DJN Added */
div.wj-control button,
div.wj-control button:hover,
div.wj-control button:focus {
  font-size: 11px !important;
  font-weight: 400 !important;
  border-radius: 0px !important;
}

div.wj-control button[wj-part^="btn-"],
div.wj-control button[wj-part^="btn-"]:hover,
div.wj-control button[wj-part^="btn-"]:focus {
  color: rgb(0, 0, 0);
  background-color: rgb(221, 221, 221);
}

div.wj-control button[wj-part="btn-apply"],
div.wj-control button[wj-part="btn-apply"]:hover,
div.wj-control button[wj-part="btn-apply"]:focus {
  color: #ffffff;
  background-color: #009596;
}

div.wj-control button[wj-part="btn-clear"],
div.wj-control button[wj-part="btn-clear"]:hover,
div.wj-control button[wj-part="btn-clear"]:focus {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}


/* Fix dropdown button on date and multi-select controls */
wj-input-date button.wj-btn,
wj-input-date-time button.wj-btn,
wj-multi-select button.wj-btn {
  height: 22px !important;
}

/* Buy-side multi-select */
wj-multi-select.bs-multi-select {
  border-width: 0px;
}

wj-multi-select.bs-multi-select input.wj-form-control[wj-part=input] {
  display: none;
}

wj-multi-select.bs-multi-select span.wj-input-group-btn:hover {
  background-color: transparent;
}

wj-multi-select.bs-multi-select button.wj-btn {
  border-left-width: 0px !important;
  margin-top: 7px;
}

wj-multi-select.bs-multi-select button.wj-btn:hover {
  background-color: transparent;
}

wj-multi-select.bs-multi-select button.wj-btn span.wj-glyph-down {
  display: none;
}

wj-multi-select.bs-multi-select button.wj-btn:before {
  font-family: 'Linearicons-Free';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e810";
  font-size: 14px;
}

.wj-cell.wj-detail {
  line-height:0px;
  padding: 0px;
  margin: 0px;
}

.wj-detail.wj-state-selected {
  background-color: #ffffff;
}

.wj-flexgrid .wj-cell .wj-btn.wj-btn-glyph.wj-right,
.wj-flexgrid .wj-cell .wj-viewer .wj-control .wj-btn-glyph.wj-right.wj-applybutton, .wj-viewer .wj-control .wj-flexgrid .wj-cell .wj-btn-glyph.wj-right.wj-applybutton {
  position: absolute;
  right: 1px;
  padding-top: 5px;
}

.wj-flexgrid.wj-grid-with-column-pinning .wj-cell.wj-filter-on, .wj-flexgrid.wj-grid-with-column-pinning .wj-cell.wj-filter-off
{
  padding-right: 3em;
}

.wj-flexgrid.wj-grid-with-column-pinning .wj-cell.wj-header
{
  padding-right: 1.6em;
}

.wj-flexgrid.wj-grid-with-column-pinning .wj-cell.wj-filter-on  .iaf-column-header-sort-and-pin-wrapper,
.wj-flexgrid.wj-grid-with-column-pinning .wj-cell.wj-filter-off .iaf-column-header-sort-and-pin-wrapper {
  padding-right: 15px;
}

.wj-flexgrid.wj-grid-with-column-pinning .wj-cell .iaf-column-header-sort-and-pin-wrapper,
.wj-flexgrid.wj-grid-with-column-pinning .wj-cell .iaf-column-header-sort-and-pin-wrapper {
  padding-right: 5px;
}

.wj-header .wj-glyph-down,
.wj-header .wj-glyph-up {
  font-size: 13px;
}

/* specific for generic grid as using other classes caused rendering problems */
/* NB these decorate spans. Don't use (left,right,margin) settings as these break right-aligned column text*/
.iaf-generic-grid-column-header-text {
  padding-top: 1px;
  padding-left: 3px;
}
.iaf-generic-grid-column-header-actions {
  padding-top: 2px;
  padding-right: 3px;
}
.iaf-generic-grid-column-header-pin-box, .iaf-generic-grid-column-header-pin-box-only {
  padding-left: 3px;
}
.iaf-generic-grid-column-header-sort-box, .iaf-generic-grid-column-header-sort-box-only {
  padding-left: 3px;
}
/* end generic grid*/

.iaf-column-header-text {
  /* position: absolute; */
  left: 0px;
  top: 0px;
  padding-top: 1px;
  /*padding-left: 3px;*/
}
.iaf-column-header-sort-and-pin-wrapper {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  padding-top: 2px;
  padding-right: 2px;
  text-align: right;
}

.iaf-column-header-sort-box-only {
  padding-left: 3px;
}
.iaf-column-header-sort-box {
  margin-right: -4px;
  padding-left: 3px;
}
.iaf-column-header-sort-icon {
  margin-bottom: 1px;
}
.iaf-column-header-not-frozen {
  font-size: 11px;
}
.iaf-column-header-frozen {
  padding-left: 6px;
  padding-right: 2px;
}
.wj-rowheaders .wj-header {
  border-left: solid 1px #dfdfdf;
  text-overflow: unset;
}
.wj-topleft .wj-cell {
  border-left: solid 1px #dfdfdf;
  border-top: solid 1px #dfdfdf;
}
/* -- Grid -- */
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected),
.wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
  /* Default grid cell color */
  /*background: #f5f5f5;*/
  background: #ffffff;
}
.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected),
.wj-alt:not(.wj-header):not(.wj-state-selected):not(.wj-state-multi-selected) {
  /* Alternate grid cell color */
  background: #f7f7f7;
}
.wj-cell {
  /*border-right: solid 1px #d1d1d1;*/
  border-right: solid 1px transparent;
  /*border-bottom: solid 1px #d1d1d1;*/
  border-bottom: solid 1px #dfdfdf;
  color: #000;
}
.wj-state-selected {
  /*background: #00b5f1;*/
  background: #d9efef;
  /*color: #fff !important;*/
}
.wj-cell:not(.wj-header).wj-state-multi-selected {
  /*background: #e2f8ff;*/
  background: #d9efef;
  /*color: #000;*/
}
/* targetting the blotter */
/*
itf-trade-blotter-main .wj-cell {
  color: #111;
}
*/
itf-trade-blotter-main .wj-state-selected {
  /*background: #767676;*/
  background: #d9efef;
}
itf-trade-blotter-main .wj-state-multi-selected {
  /*background: #939598;*/
  background: #d9efef;
}

/* DJN Added */
input.wj-form-control {
  border: 1px solid transparent !important;
}
input.wj-form-control:focus {
  border: 1px solid rgba(0, 149, 150, 0.5) !important;
}
.wj-calendar-outer .wj-state-selected {
  background-color: rgba(0, 149, 150);
}
.wj-calendar-outer span[wj-part="span-month"] {
  font-weight: 700;
}

/* dealing with the summary grid highlighting */
.summary-grid .wj-state-selected:not(.wj-frozen) {
  font-weight: 600;
  border: 1px dashed rgba(0, 0, 0, 0.6);
}
.summary-grid .wj-state-multi-selected {
  font-weight: 600;
  border-top: 1px dotted rgba(0, 0, 0, 0.6);
  border-bottom: 1px dotted rgba(0, 0, 0, 0.6);
}
.summary-grid .wj-state-selected.wj-frozen {
  border: 1px dotted rgba(0, 0, 0, 0.6);
  border-right: none;
}
/* styling row/column headers when cell selected */
.wj-rowheaders .wj-state-multi-selected {
  border-top: none;
  border-bottom: 1px solid rgba(89, 89, 89, 0.28);
}
.wj-colheaders .wj-state-multi-selected {
  border-top: solid 1px #dfdfdf;
}
/*  dealing with cell higlighting in the summary grid */
.summary-grid .wj-state-selected:not(.wj-frozen) {
  background: #f5f5f5;
}
.summary-grid .wj-state-selected.wj-alt:not(.wj-frozen) {
  background: #ffffff;
}
/* scrollbar issues */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #aaaaaa;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #666666;
}
::-webkit-scrollbar-thumb:active {
  background: #666666;
}
::-webkit-scrollbar-track {
  background: #dddddd;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #dddddd;
}
::-webkit-scrollbar-track:active {
  background: #dddddd;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
.wj-glyph-right {
  background-image: url('../images/collapsed.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 1.2em;
  height: 1.2em;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  top: 2.5px;
}
.wj-calendar .wj-btn .wj-glyph-right {
  /* Because we do not want the above wj-glyph-right override in the case of a calendar control */
  position: relative;
  display: inline-block;
  border-top: .4em solid transparent;
  border-bottom: .4em solid transparent;
  border-left: .5em solid;
  opacity: .75;
  cursor: pointer;

  background: none;
  width: unset;
  height: unset;
  top: 0px;
}
.wj-glyph-down-right {
  background-image: url('../images/expanded.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 1.2em;
  height: 1.2em;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  /*top: 2.5px;*/
}
.wj-glyph-plus {
  background-image: url('../images/collapsed-row-detail.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 1em;
  height: 0.9em;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  top: 1px;
}
.wj-glyph-minus {
  background-image: url('../images/expanded-row-detail.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 1em;
  height: 1em;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  top: 1px;
}
.wj-glyph-plus:after {
  position: inherit;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  /*top: 2.5px;*/
  content: "";
}
/** Filter **/
.wj-control {
  border-radius: 0px;
}
.wj-control a[wj-part^="btn-"] {
  background: #ddd;
  padding: 6px 12px;
  color: #000;
  display: inline-block;
  text-decoration: none;
  font-size: 11px;
  line-height: 12px;
  font-weight: normal;
  text-transform: uppercase;
  margin-top: 0px;
}
.wj-control a[wj-part^="btn-"]:hover {
  background: #ccc;
}
.wj-control a[wj-part="btn-apply"] {
  background: #00b5f1;
  color: #fff;
}
.wj-control a[wj-part="btn-apply"]:hover {
  background: #008e89;
}
.wj-control .wj-input-group {
  min-height: auto;
  height: auto;
}
.wj-control .wj-input-group .wj-form-control {
  min-height: auto;
  height: auto;
  font-size: 12px;
  line-height: 20px;
  padding: 2px 0 0;
  text-indent: 4px;
}
.wj-control .wj-listbox-item {
  padding: 0;
  font-size: 12px;
  line-height: 14px;
}
.wj-control .wj-listbox-item label {
  display: flex;
  padding: 3px 10px;
}
.wj-control .wj-listbox-item label input {
  margin: 0 4px 0 0;
}
.wj-control .wj-listbox-item.wj-state-selected {
  /*background: #00b5f1;*/
  background-color: rgba(0, 149, 150);
}

/* DJN Added */
wj-combo-box {
  margin-top: -2px;
}
wj-combo-box div.wj-input {
  height: 20px !important;
}
wj-combo-box input[wj-part="input"].wj-form-control {
  height: 20px !important;
}
div[wj-part="dropdown"].wj-content.wj-dropdown-panel.wj-control.wj-listbox .wj-listbox-item:hover {
  background-color: rgba(0, 149, 150);
  color: #ffffff;
  transition-duration: 0s;
}
span[wj-part="btn"].wj-input-group-btn {
  min-width: 20px !important;
}
wj-combo-box button.wj-btn {
  min-width: 20px !important;
  max-width: 20px;
  padding-left: 5px !important;
}
wj-combo-box span.wj-glyph-down {
  padding-top: 2px;
}

/** Group Panel **/
.wj-grouppanel {
  display: block;
  background-color: #f4f4f4;
  padding: 10px;
}
.wj-grouppanel div[wj-part="div-ph"]{
  line-height:25px;
  min-height:27px;
}
.wj-grouppanel .wj-cell {
  padding: 0px 5px;
}
.wj-groupmarker div {
  float: left;
  height: 20px;
}

/** Tabs - Tabbar **/
body .tabset-container {
  border-bottom: solid 2px #555;
  overflow: hidden;
}
body .tabset-container ul {
  border-bottom-width: 0px;
  white-space: nowrap;
}
body .tabset-container ul li {
    border-right: 0px;
    margin-bottom: 0;
    color: var(--app-tabs-text-color);
    cursor: pointer;
    display: inline-block;
    float: none;
}
body .tabset-container ul li span {
  padding: 5px 10px;
  display: inline-block;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 14px;
  /*font-weight: 600;*/
}
body .tabset-container ul li:hover {
  color: var(--app-color-primary-hover);
  background: none;
  border-style: solid;
  border-color: var(--app-color-border-hover);
  border-bottom-width: 3px;
  border-left: 0px;
  border-top: 0px;
}
body .tabset-container ul li.active-tab {
  color: var(--app-tabs-text-active-color);
  cursor: auto;
  font-weight: bold;
  border-style: solid;
  border-color: var(--app-color-selected);
  border-bottom-width: 3px;
  border-left: 0px;
  border-top: 0px;
}
body .tabset-container ul li .badge {
  margin-right: 8px;
  line-height: 0.6;
  font-weight: 700;
  background: #787878;
  color: white;
}
body .tabset-container ul li.active-tab .badge {
  background: #fff;
  color: #555;
  font-weight: 700;
}
body .tabset-container ul.tabScroll {
  margin: 0 40px;
}
body .tabset-container ul.disablePrev {
  margin-left: 0;
}
body .tabset-container .tabs-button {
  position: absolute;
  top: 0px;
  padding: 3px 15px 1px;
  background: #eee;
  cursor: pointer;
}
body .tabset-container .tabs-button:hover {
  color: #000;
  background: #ddd;
}
body .tabset-container .tabs-button.disable {
  cursor: auto;
}
body .tabset-container .tabs-button.disable .k-icon {
  opacity: 0;
}
body .tabset-container .tabs-next {
  right: 15px;
  border-left: solid 1px #fff;
}
body .tabset-container .tabs-prev {
  left: 15px;
  border-right: solid 1px #fff;
}
/** Tabs - Selectable **/
.lm_selectable ul.lm_tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px #ccc;
  white-space: nowrap;
}
.lm_selectable ul.lm_tabs li.lm_tab {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: #ddd;
  border: none;
  margin-right: 1px;
  cursor: pointer;
  border: solid 1px transparent;
  border-width: 2px 1px 0px 1px;
  position: relative;
  padding-right: 15px;
  height: 18px;
}
.lm_selectable ul.lm_tabs li.lm_tab i.lm_left {
  display: none;
}
.lm_dragProxy ul.lm_tabs li.lm_tab span.lm_title,
.lm_selectable ul.lm_tabs li.lm_tab span.lm_title {
  padding: 0px 10px;
  display: inline-block;
  /*text-transform: uppercase;*/
  font-size: 11px;
  line-height: 11px;
  font-weight: 600;
  color: #666;
}
.lm_selectable ul.lm_tabs li.lm_tab div.lm_close_tab {
  position: absolute;
  top: 1px;
  right: 3px;
  color: #999;
}
.lm_selectable ul.lm_tabs li.lm_tab div.lm_close_tab:hover {
  color: #333;
}
.lm_selectable ul.lm_tabs li.lm_tab div.lm_close_tab::before {
  font-family: 'Linearicons-Free' !important;
  content: "\e870" !important;
}
.lm_selectable ul.lm_tabs li.lm_tab i.lm_right {
  display: none;
}
.lm_selectable ul.lm_tabs li.lm_tab:hover {
  background: #ccc;
}
.lm_selectable ul.lm_tabs li.lm_tab.lm_active {
  border-top: solid 2px #008e89;
  border-left: solid 1px #ccc;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #fff;
  background: #fff;
  margin-bottom: -1px;
  cursor: auto;
}
.lm_selectable ul.lm_tabs li.lm_tab.lm_active span.lm_title {
  padding-top: 1px;
  color: #555;
}
/** Accordion **/
.accordionTree {
  border: solid 1px #dfdfdf;
}
.accordionTree .nodeList > .node {
  background: #eee;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  color: #333;
  padding: 3px 10px;
  cursor: pointer;
}
.accordionTree .nodeList > .node:hover {
  background: #ddd;
}
.accordionTree .nodeList > div:not(.node) {
  padding: 0 5px;
}
.accordionTree .nodeList > div:not(.node) .nodeList {
  padding: 2px 0;
  font-size: 12px;
  line-height: 18px;
}
/** Toolbar **/
.toolbar {
  position: relative;
}
.toolbar a.toolbarLink {
  font-size: 26px;
  color: #808080;
  float: right;
}
.toolbar a.toolbarLink:hover {
  text-decoration: none;
  color: #000;
}
.toolbar a.toolbarLink:focus {
  text-decoration: none;
}
.toolbar .toolbar-menu {
  display: none;
  position: absolute;
  z-index: 20;
  top: 25px;
  right: -5px;
  min-width: 150px;
  border: 1px solid #ddd;
  background-color: #fff;
  -webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
}
.toolbar .toolbar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toolbar .toolbar-menu ul li {
  color: #666;
  font-size: 12px;
  line-height: 18px;
  padding: 6px 10px;
}
.toolbar .toolbar-menu ul li i {
  font-size: 14px;
}
.toolbar .toolbar-menu ul li span {
  margin-left: 5px;
}
.toolbar .toolbar-menu ul li.sep {
  border-top: solid 1px #ddd;
}
.toolbar .toolbar-menu ul li:hover {
  background: #eee;
  color: #000;
  cursor: pointer;
}

/*** 26 Oct 2017 ****/
/*** Modal - Begin ***/
.modal-content {
  -webkit-border-radius: 0;
  border-radius: 0;
}

.modal-header {
  padding: 10px 14px 10px 14px;
  border: none;
  background-color: #f5f5f5;
  color:#333;
}

h5.modal-title {
  font-size:15px;
  line-height: 20px;
  font-weight:600;
  margin: 0 40px 0 0;
}

.modal-header .close {
  float: right;
  margin: -2px 0px 0px 0px;
  padding: 0;
  color:#333;
  text-shadow: none;
  font-size: 13px;
  opacity: 0.87;
}

.modal-header .close:hover {
  background-color: rgba(255,255,255,0.1);
  color:#333;
  opacity: 1;
}

.modal-header .close i, .modal-header .close em {
  padding: 0;
  margin:0;
  font-size:22px;
  line-height:1;
}

.modal-header .close i:before{
}

.modal-header .close span {
  display: block;
  margin-top: -1px;
  margin-left: -1px;
}

.modal-body .error{
  position:absolute;
  top:10px;
  right:10px;
  padding:10px 20px 10px 40px;
  background-color: #ffbbab;
  background-color: #ffc7ba;
  color: #392d2d;
  border:1px solid #ff8d73;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
  z-index: 95;
}

.modal-body {
  font-size: 13px;
  line-height: 18px;
}

.modal-body .error i, .modal-body .error em {
  position:absolute;
  left:10px;
  top:10px;
  font-size:18px;
  vertical-align:middle;
  color:rgba(255, 58, 13, 1);
}

.modal-footer{
  border-color:#ddd;
  padding-left:20px;
  padding-right:20px;
}
/*** Modal - End ***/


/*** Grid Options - Begin ***/
.inpLabel {
  padding-top: 7px;
}

.configColContent  .row.inputHoriz {
  margin-top: -5px;
}

.configColContent h6{
  margin-top: 5px;
}

#blotter_name {
  width: 100%;
}

.configColContent  {
  margin: 0;
}

.configColContent .row {
  margin:0 -5px;
}

.configColContent h5 {
  margin-top:0;
  margin-left:0;
}

.configColContent h6 {
  margin-top: 15px;
  margin-bottom: 5px;
}

.colAvailableWrp {
  padding-right:10px;
}

.colSelectedWrp {
  padding-left:10px;
}

.configCol {
  position: relative;
  /*height: 460px;*/
  overflow: auto;
  margin: 0;
  padding:4px;
  border: 1px solid #ddd;
  border-top-color: #fff;
}

.configCol ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.configColItem {
  list-style-type: none;
  padding: 4px 10px;
  margin: 0;
  border: 2px solid #fff;
  background-color: #eee;
  color: #333;
  cursor: move;
}

.configColItem:hover {
  background-color: #ddd;
}

.columnsSelected {
  border: 1px solid #ccc;
  border-top-color: #ddd;
}

.columnsSelected .configColItem {
  background-color: #e0e0e0;
  color: #000;
}

.columnsSelected .configColItem:hover {
  background-color: #d0d0d0;
  color: #333;
}

.columnActionsBtns {
  text-align: right
}

.columnActions .search > input {
  width: 100%;
  padding-right: 26px;
}

.configColContent .columnActions {
  margin: 0 20px 0 0;
  margin: 0 0 0 0;
  background: #ddd;
}

.columnActionsBtns button {
  margin-right: 5px;
  padding: 4px 5px;
  background-color: #ddd;
  color: #666;
}

.columnActionsBtns button:last-child  {
  margin-right: 0;
}

.columnActionsBtns button:hover {
  background-color: #ccc;
  color: #000;
}

.configColHint {
  width: 248px;
}

.configCol-state-selected {
  background-color: #009596!important;
  color: #fff!important;
}

.configColItem.placeholder {
  background-color: #fff!important;
  border: dashed 2px #ccc!important;
  color: #888!important;
}

.configColItem.placeholder.colSortDisabled {
  background-color: #fff!important;
  border: dashed 2px #f00!important;
  color: #f00!important;
}

.autoWidthText {
  font-size: 12px;
  margin-left: 17px;
  margin-bottom: 20px;
}

.refreshValueLists {
  background-color: #ddd;
  color: #333;
}

.refreshValueLists:hover {
  background-color: #ccc;
  color: #333;
}

/*** Grid Options - End ***/



/* DJN Added - From kendo.medm.css - Begin */
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  line-height: 1.333em;
}
.modal-content h1 {
  font-size: 36px;
  font-weight: 300;
}
.modal-content h2 {
  font-size: 30px;
  font-weight: 300;
}
.modal-content h3 {
  font-size: 24px;
  font-weight: 300;
}
.modal-content h4 {
  font-size: 18px;
  font-weight: bold;
}
.modal-content h5 {
  font-size: 14px;
  font-weight: bold;
}
.modal-content h6 {
  font-size: 12px;
  font-weight: bold !important;
}
/* DJN Added - From kendo.medm.css - End */


/* DJN Added - From EDM style.css - Begin */
/*** Layout ***/
.modal-content .col-lg-1, .modal-content .col-lg-10, .modal-content .col-lg-11, .modal-content .col-lg-12, .modal-content .col-lg-2,
.modal-content .col-lg-3, .modal-content .col-lg-4, .modal-content .col-lg-5, .modal-content .col-lg-6, .modal-content .col-lg-7,
.modal-content .col-lg-8, .modal-content .col-lg-9, .modal-content .col-md-1, .modal-content .col-md-10, .modal-content .col-md-11,
.modal-content .col-md-12, .modal-content .col-md-2, .modal-content .col-md-3, .modal-content .col-md-4, .modal-content .col-md-5,
.modal-content .col-md-6, .modal-content .col-md-7, .modal-content .col-md-8, .modal-content .col-md-9, .modal-content .col-sm-1,
.modal-content .col-sm-10, .modal-content .col-sm-11, .modal-content .col-sm-12, .modal-content .col-sm-2, .modal-content .col-sm-3,
.modal-content .col-sm-4, .modal-content .col-sm-5, .modal-content .col-sm-6, .modal-content .col-sm-7, .modal-content .col-sm-8,
.modal-content .col-sm-9, .modal-content .col-xs-1, .modal-content .col-xs-10, .modal-content .col-xs-11, .modal-content .col-xs-12,
.modal-content .col-xs-2, .modal-content .col-xs-3, .modal-content .col-xs-4, .modal-content .col-xs-5, .modal-content .col-xs-6,
.modal-content .col-xs-7, .modal-content .col-xs-8, .modal-content .col-xs-9 {
  padding: 5px;
}
/* DJN Added - From EDM style.css - End */


/* DJN Added - Test Kendo stuff - Begin */
/*.item {
  background-color: #bfe7f9;
  color: #1494d0;
  border: 1px solid #fff;
  height: 70px;
  line-height: 68px;
  font-size: 16px;
  text-align: center;
  outline: none;
  cursor: move;
}

.item:hover,
.employee:hover {
  opacity: 0.8;
}

.item.active,
.employee.active {
  background-color: #27aceb;
  color: #fff;
  border-color: #27aceb;
  z-index: 10;
}

.item.disabled {
  opacity: 0.5;
  cursor: default;
}*/

.team {
  min-height: 240px;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 1px solid #fff;
  background-color: #dff3fc;
}

.team-b {
  background-color: #fbe0e7;
}

.employee {
  background-color: #bfe7f9;
  color: #1494d0;
  margin: 1px;
  padding: 5px;
  cursor: move;
}

.team-b .employee {
  background-color: #f3b9c9;
  color: #dd4672;
}

.team-b .employee.active {
  background-color: #dd4672;
  color: #fff;
}

.empty {
  height: 150px;
}
/* DJN Added - Test Kendo stuff - End */


/*** 01 Nov 2017 ****/
/* YMP Added */
.bs-grid-data-error {
  position: relative;
  width: 100%;
  height: calc(100% - 26px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

span div.fillBar {
  position: relative;
  left: 6px;
  top: 1px;
  height: 19px;
  /*z-index: 1;*/
  background-color: #c6e29f;
}

span div.filledVal {
  position: absolute;
  top: 3px;
  right: 6px;
  /*z-index: 5;*/
}

/*** 02 Nov 2017 ****/
/* YMP Added */
.widget-loading-message {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.5);
  width: 100%;
  height: 100%;
}

/*** 27 Nov 2017 ****/
/* YMP Added */
/*** page error  ***/
.pageError {
  position:relative;
  width:100%;
  left:0;
  padding:10px 20px 10px 50px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.pageError.warning {
  background-color: #fff1c5;
  color: #000000;
  border-color: #ffd452;
}
.pageError .errorContent {
  max-width: 100%;
  margin:0 auto;
}
.pageError .errorContent .errors {
  text-align: center;
  margin-left:0;
}
.pageError .errorContent .errors i {
  display: inline-block;
}
.pageError .fa-exclamation-circle {
  margin-right: 10px;
  font-size: 20px;
  color: #ff3a0d;
  vertical-align: text-top;
}

.pageError.warning .fa-exclamation-circle {
  color: #dea800;
}

.pageError.info {
  background-color: #eef6e2;
  color: #000000;
  border-color: #ddeec5;
}

.pageError .fa-info {
  margin-right: 10px;
  font-size: 20px;
  color: #68942c;
  vertical-align: text-top;
}

.pageError + .firstRow {
  margin-top:82px;
}

/*** error modal ***/
.errorContent {
  margin: 0 5px 10px;
}
.errorContent .icon {
  float: left;
  width: 35px;
  font-size: 20px;
  color: #ff3a0d;
}
.errorContent .errors {
  margin-left: 35px;
}
.errorContent p:last-child{
  margin: 0;
}
.warningModal .errorContent .icon {
  color: #ebb000;
}


.bs-editable-field-container {
  display: flex;
  clear: both;
  white-space: nowrap;
}

.bs-editable-field-container:hover .bs-editable-field-action {
  opacity: 1;
}

.bs-editable-field-content {
  display: inline-block;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.bs-editable-field-abr-icon {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.bs-editable-field-action {
  float: right;
  opacity: 0;
}


/*** 02 Jan 2018 ****/
/* YMP Moved out the status styling from application-base.css */

/****************************************************************************
    Trade status color used by summary grid, holding grid, blotter grid etc
****************************************************************************/
.tradeStatus0.wj-state-selected,
.tradeStatus0.wj-state-multi-selected,
.tradeStatus0R.wj-state-selected,
.tradeStatus0R.wj-state-multi-selected,
.tradeStatus1.wj-state-selected,
.tradeStatus1.wj-state-multi-selected,
.tradeStatus1R.wj-state-selected,
.tradeStatus1R.wj-state-multi-selected,
.tradeStatus2.wj-state-selected,
.tradeStatus2.wj-state-multi-selected,
.tradeStatus2R.wj-state-selected,
.tradeStatus2R.wj-state-multi-selected,
.tradeStatus3.wj-state-selected,
.tradeStatus3.wj-state-multi-selected,
.tradeStatus3R.wj-state-selected,
.tradeStatus3R.wj-state-multi-selected,
.tradeStatus4.wj-state-selected,
.tradeStatus4.wj-state-multi-selected,
.tradeStatus4R.wj-state-selected,
.tradeStatus4R.wj-state-multi-selected,
.tradeStatus5.wj-state-selected,
.tradeStatus5.wj-state-multi-selected,
.tradeStatus5R.wj-state-selected,
.tradeStatus5R.wj-state-multi-selected,
.tradeStatus6.wj-state-selected,
.tradeStatus6.wj-state-multi-selected,
.tradeStatus6R.wj-state-selected,
.tradeStatus6R.wj-state-multi-selected,
.tradeStatus7.wj-state-selected,
.tradeStatus7.wj-state-multi-selected,
.tradeStatus7R.wj-state-selected,
.tradeStatus7R.wj-state-multi-selected {
  box-shadow: inset 0 0 0 2px #d9efef;
}

/*  IRD May be reviewed to have a red and a black class and then also trade status classes  */
/*.tradeStatus0:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus0 {
  /* What If */
  text-align: center !important;
  /*background-color: #b8813f !important;*/
  background-color: #E6FFFF !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus0R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus0R {
  /* What If */
  text-align: center !important;
  /*background-color: #b8813f !important;*/
  background-color: #E6FFFF !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus1:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus1 {
  /* Input */
  text-align: center !important;
  /*background-color: #ee2f53 !important;*/
  background-color: #F6D5EC !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus1R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus1R {
  /* Input */
  text-align: center !important;
  /*background-color: #ee2f53 !important;*/
  background-color: #F6D5EC !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus2:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus2 {
  /* Authorised */
  text-align: center !important;
  /*background-color: #f7941d !important;*/
  background-color: #FCDCB6 !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus2R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus2R {
  /* Authorised */
  text-align: center !important;
  /*background-color: #f7941d !important;*/
  background-color: #FCDCB6 !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus3:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus3 {
  /* Working */
  text-align: center !important;
  /*background-color: #009697 !important;*/
  background-color: #93E4EC !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
  /*background: linear-gradient(orange,orange,#7FFFD4,#fff,#7FFFD4,orange,orange) !important;*/
}

/*.tradeStatus3R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus3R {
  /* Working */
  text-align: center !important;
  /*background-color: #009697 !important;*/
  background-color: #93E4EC !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus4:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus4 {
  /* Filled */
  text-align: center !important;
  /*background-color: #78b327 !important;*/
  background-color: #C7EE91 !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus4R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus4R {
  /* Filled */
  text-align: center !important;
  /*background-color: #78b327 !important;*/
  background-color: #C7EE91 !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus5:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus5 {
  /* Confirmed */
  text-align: center !important;
  /*background-color: #00b5f1 !important;*/
  background-color: #92CDED !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus5R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus5R {
  /* Confirmed */
  text-align: center !important;
  /*background-color: #00b5f1 !important;*/
  background-color: #92CDED !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus6:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus6 {
  /* Settled */
  text-align: center !important;
  /*background-color: #96157c !important;*/
  background-color: #FFFFFF !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus6R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus6R {
  /* Settled */
  text-align: center !important;
  /*background-color: #96157c !important;*/
  background-color: #FFFFFF !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus7:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus7 {
  text-align: center !important;
  background-color: #D2D2D2 !important;
  /*color: #ffffff;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

/*.tradeStatus7R:not(.wj-state-selected):not(.wj-state-multi-selected) {*/
.tradeStatus7R {
  text-align: center !important;
  background-color: #D2D2D2 !important;
  /*color: #FF0000 !important;*/
  border-right-width: 0px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.newTradeStatus1 {
    text-align: center !important;
    background-color: #df9a91 !important;
    border-right-width: 0px;
    box-shadow: inset 0 0 0 2px var(--app-cell-color);
}
.newTradeStatus2 {
    text-align: center !important;
    background-color: #ffb33c !important;
    border-right-width: 0px;
    box-shadow: inset 0 0 0 2px var(--app-cell-color);
}
.newTradeStatus3 {
    text-align: center !important;
    background-color: #b6e4f9 !important;
    border-right-width: 0px;
    box-shadow: inset 0 0 0 2px var(--app-cell-color);
}
.newTradeStatus4 {
    text-align: center !important;
    background-color: #6b9b9f !important;
    border-right-width: 0px;
    box-shadow: inset 0 0 0 2px var(--app-cell-color);
}
.newTradeStatus5 {
    text-align: center !important;
    background-color: #5a889d !important;
    border-right-width: 0px;
    box-shadow: inset 0 0 0 2px var(--app-cell-color);
}
.newTradeStatus6 {
    text-align: center !important;
    background-color: #C1C4CA !important;
    border-right-width: 0px;
    box-shadow: inset 0 0 0 2px var(--app-cell-color);
}
.newTradeStatus7 {
    text-align: center !important;
    background-color: #84888D !important;
    border-right-width: 0px;
    box-shadow: inset 0 0 0 2px var(--app-cell-color);
}


.mismatch {
    background: var(--app-ag-grid-background-attention) !important;
    border: 1px solid var(--app-ag-grid-border-color-attention) !important;
    opacity: 1 !important;
}

.attentionGreen {
    background: var(--color-ag-grid-background-attention-green) !important;
    border: 1px solid var(--color-ag-grid-border-color-attention-green) !important;
    opacity: 1 !important;
}
.attentionBlue {
    background: var(--color-ag-grid-background-attention-blue) !important;
    border: 1px solid var(--color-ag-grid-border-color-attention-blue) !important;
    opacity: 1 !important;
}
.attentionRed {
    background: var(--color-ag-grid-background-attention-red) !important;
    border: 1px solid var(--color-ag-grid-border-color-attention-red) !important;
    opacity: 1 !important;
}

/****************************************************************************
    FIX Order Status color used by filled grid
****************************************************************************/
.fixOrderStatus0 {
  background-color: #FFA500 !important;
}

.fixOrderStatus1 {
  background-color: #90EE90 !important;
}

.fixOrderStatus2 {
  background-color: #90EE90 !important;
}

.fixOrderStatus3 {
  background-color: #90EE90 !important;
}

.fixOrderStatus4 {
  background-color: #FFB6C1 !important;
}

.fixOrderStatus5 {
  background-color: #FFB6C1 !important;
}

.fixOrderStatus6 {
  background-color: #FFB6C1 !important;
}

.fixOrderStatus7 {
  background-color: #FFB6C1 !important;
}

.fixOrderStatus8 {
  background-color: #FFB6C1 !important;
}

.fixOrderStatus9 {
  background-color: #FFB6C1 !important;
}

.fixOrderStatusA {
  background-color: #FFFF00 !important;
}

.fixOrderStatusB {
  background-color: #FFB6C1 !important;
}

.fixOrderStatusC {
  background-color: #FFB6C1 !important;
}

.fixOrderStatusD {
  background-color: #FFB6C1 !important;
}

.fixOrderStatusE {
  background-color: #FFFF00 !important;
}

.fixOrderStatusF {
  background-color: #90EE90 !important;
}

.fixOrderStatusG {
  background-color: #FFB6C1 !important;
}

.fixOrderStatusH {
  background-color: #FFB6C1 !important;
}

.fixOrderStatusI {
  background-color: #FFFF00 !important;
}

.fixOrderStatusP {
  background-color: #FFF !important;
}

.fixOrderStatusQ {
  background-color: #FFF !important;
}

.fixOrderStatus21 {
  background-color: #FFA500 !important;
}

/****************************************************************************
    Generic Order Status color used by Orders and Generic Order grid
****************************************************************************/
.orderStatus0 {
  background-color: #FFC0CB !important;
  color: #444444;
}
.orderStatus1 {
  background-color: #FFD700 !important;
  color: #444444;
}
.orderStatus99 {
  background-color: #FFF !important;
  color: #444444;
}
.orderStatus9999 {
  background-color: #D3D3D3 !important;
  color: #444444;
}

/****************************************************************************
    Realtime status color
****************************************************************************/
.real-time {
  background: #ffe79e;
}
.real-time-pos {
  background: #ffe79e;
  color: #00ab4e;
}
.real-time-neg {
  background: #ffe79e;
  color: #f00;
}

/****************************************************************************
    Placement and Fills Subsidiary
****************************************************************************/
.disable-trade {
  /*opacity: 0.4 !important;*/
  color: #a8aaac !important;
}

.customPlacementBlock {
  height: 34px;
}

.selectSize {
  min-width: 200px;
  width: 100%;
  height: 24px;
}

/*itf-trade-messages-dialog div[wj-part="root"] {*/
  /*min-height: 170px;*/
/*}*/

.accordion .ac-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  background: #eee;
  padding: 7px 10px 7px 30px;
  margin: 0 0 5px 0;
  cursor: pointer;
  position: relative;
}
.accordion .ac-title i {
  position: absolute;
  top: 7px;
  left: 10px;
  font-size: 18px;
}
.accordion .ac-title.active {
  background: #009596;
  color: #fff;
  font-weight: normal;
  margin-bottom: 0;
}
.accordion .ac-content {
  display: none;
  padding: 0;
  margin-bottom: 20px;
  position: relative;
}

.new-order {
  margin: 10px 0;
}
.new-order label {
  display: block;
}
.new-order select,
.new-order .select,
.new-order input[type="text"] {
  width: 100%;
}
.new-order .new-order-row {
  padding: 10px 20px;
  margin: 0;
}
.new-order .placement-fix {
  background: #eee;
}
.new-order #fix-switch {
  font-size: 16px;
  color: #666;
  display: inline-block;
  margin-top: 4px;
  cursor: pointer;
}
.new-order #fix-switch:hover {
  color: #000;
}
.new-order .fields-placement select,
.new-order .fields-placement .select,
.new-order .fields-placement input[type="text"] {
  width: 48%;
}
.new-order .fields-placement input {
  margin-left: 3px;
}
.new-order .placement-buttons {
  text-align: right;
  padding: 17px 0 0;
}
.new-order .placement-buttons button {
  font-size: 18px;
  color: #666;
  padding: 6px;
}
.new-order .placement-buttons button:hover {
  color: #000;
}
.new-order .placement-buttons button.active {
  background: #009596;
  color: #fff;
}
.new-order .row.placement-notes {
  display: none;
}
.new-order .row.placement-notes textarea {
  width: 100%;
  min-height: 100px;
}
.new-order .order-save {
  float: right;
  margin-top: 10px;
}
.new-order .loader {
  position: absolute;
  top: 0;
  font-size: 36px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
}
.new-order .save-message {
  width: 100%;
  text-align: center;
  padding: 50px;
}

/****************************************************************************
    Real-Time Pricing
****************************************************************************/
/* ticker cell */
.ticker div {
  display: inline-block;
}
.ticker .chg {
  font-size: 75%;
  opacity: .75;
  text-align: center;
  width: 4em;
}
.ticker .glyph {
  font-size: 120%;
  text-align: center;
  width: 1em;
}

/* value going up */
span > div.ticker > div.glyph > span.wj-glyph-up {
  color: green;
}

/* value going down */
span > div.ticker > div.glyph > span.wj-glyph-down {
  color: red;
}

/* value not changing */
.ticker.chg-none .chg,
.ticker.chg-none .glyph {
  opacity: .25;
}
/* up/down 'flare' animations */
.ticker.flare-up:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: 1s ease-out flare-up;
  animation-duration: 2s;
}
@keyframes flare-up {
  from { background: rgba(50, 255, 50, 0.5); }
}
.ticker.flare-down:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: 1s ease-out flare-down;
  animation-duration: 2s;
}
@keyframes flare-down {
  from { background: rgba(255, 50, 50, 0.5); }
}

.customRTRightMargin {
  margin-right: 5%;
}

.tficons-icon-s:before {
    content: "\e933";
    color: rgba(209,46,3,0.9);
}
.tficons-icon-b:before {
    content: "\e934";
    color: rgba(3,151,244,0.9);
}

.tficons-icon-tick:before {
    content: "\2714";
    color: #00ab4e;
}
.tficons-icon-cross:before {
    content: "\2715";
    color: rgba(209,46,3,0.9);
}

.new-order label {
    display: block;
}
.new-order .fields-placement select,
.new-order .fields-placement .select,
.new-order .fields-placement input[type="text"] {
    width: 45%;
}
.k-widget .new-order-row {
    padding: 10px 0;
}
.k-widget .k-picker-wrap.k-state-active {
    border-color: #80cacb;
}
.wj-flexgrid {
    width: 100%;
}
.new-order .row.placement-notes {
    display: block;
}
.new-order .loader {
    left: 0;
}


tr.contingentRow {
    background-color: #ddd !important;
}
.contingentOrders .modal-body .row {
    padding: 7px 0;
}
.contingentOrders .modal-body .row .order-1,
.contingentOrders .modal-body .row .order-1b {
    background-color: #e6f5f5;
    border: 1px solid #b3e0e0;
}
.contingentOrders .modal-body .row .order-1 span,
.contingentOrders .modal-body .row .order-1b span {
    margin-left: -5px;
    display: inline-block;
    padding: 8px 10px;
}
/*
.contingentOrders .modal-body .row .order-1 span:first-child,
.contingentOrders .modal-body .row .order-1b span:first-child {
    background-color: #b3e0e0;
}
.contingentOrders .modal-body .row .order-1 span:first-child i,
.contingentOrders .modal-body .row .order-1b span:first-child i {
    color: #009697;
}
*/
.contingentOrders .modal-body .row .order-2 {
    background-color: #f3f3f3;
    border: 1px solid #dfdfdf;
}
.contingentOrders .modal-body .row .order-2 span {
    margin-left: -5px;
    display: inline-block;
    padding: 8px 10px;
}

.contingentOrders .modal-body .row .order-1 span.text-highlight,
.contingentOrders .modal-body .row .order-2 span.text-highlight{
    font-weight: bold;
}
/*
.contingentOrders .modal-body .row .order-2 span:first-child {
    background-color: #e6e6e6;
}
.contingentOrders .modal-body .row .order-2 span:first-child i {
    color: #000;
}
*/
.contingentOrders .modal-body .row .condition span {
    margin-right: 5px;
}
.contingentOrders .modal-body .row .condition span:first-child {
    margin-right: 10px;
}
.contingentOrders .modal-body .row .condition .k-tooltip-validation span.k-icon {
    margin-right: 3px;
    margin-left: 10px;
}
.contingentOrders .modal-body .row .k-widget.k-tooltip-validation {
    margin-top: 5px;
}
.contingentOrders#contingentOrderDetails .modal-body .row {
    padding: 5px 0;
}
.contingentOrders#contingentOrderDetails .modal-body .row .condition span {
    font-weight: 700;
}
.contingentOrders#contingentOrderDetails .modal-body .row .condition span:first-child {
    margin-right: 0;
    font-weight: 400;
}
.contingentOrders.orderDetails .modal-body .row .order-1,
.contingentOrders.orderDetails .modal-body .row .order-2 {
    padding-left: 50px;
}
.contingentOrders.orderDetails .modal-body .row .order-1 h5,
.contingentOrders.orderDetails .modal-body .row .order-2 h5 {
    font-size: 13px;
    margin: 20px 0 2px;
}
/*
.contingentOrders.orderDetails .modal-body .row .order-1 h5:first-child,
.contingentOrders.orderDetails .modal-body .row .order-2 h5:first-child {
    margin-top: 10px;
}
.contingentOrders.orderDetails .modal-body .row .order-1 span:first-child,
.contingentOrders.orderDetails .modal-body .row .order-2 span:first-child {
    position: absolute;
    left: 5px;
    top: 0;
    height: 100%;
}
*/
.contingentOrders.orderDetails .modal-body .row .order-1 button,
.contingentOrders.orderDetails .modal-body .row .order-2 button {
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent;
    font-size: 16px;
}
.contingentOrders.orderDetails .modal-body .row .order-1 .details,
.contingentOrders.orderDetails .modal-body .row .order-2 .details {
    display: none;
    padding-left: 5px;
}
.contingentOrders.orderDetails .modal-body .row .condition span {
    font-weight: 700;
}
.contingentOrders.orderDetails .modal-body .row .condition span:first-child {
    margin-right: 0;
    font-weight: 400;
}
#contigent-reason {
    width: 100%;
    height: 60px;
}

.contingentOrders label {
    font-size: 12px;
    padding-left: 5px;
    vertical-align: middle;
}

.contingentOrders .modal-body .row .order-1 span:hover,
.contingentOrders .modal-body .row .order-1b span:hover,
.contingentOrders .modal-body .row .order-2 span:hover {
    cursor: pointer;
    text-decoration: underline;
}


/*** Kendo Form Validation ***/
.k-widget.k-tooltip-validation {
    display: inline-block;
    text-align: left;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    color: rgba(209,46,3,0.9);
}
.k-widget.k-tooltip-validation span.k-icon {
    vertical-align: text-bottom;
    font-size: 17px;
}
.k-widget.k-tooltip-validation.k-invalid-msg {
    display: none;
}

/********************
  Tabs styles
 ********************/

.mat-tab-list {
    background: #eee;
    border: 1px solid #dfdfdf;
    border-bottom: none;
}
.mat-tab-list .mat-tab-label {
    color: #000 !important;
    width: 80px;
    padding: 0px 6px !important;
}
.mat-tab-label-active {
    background: rgba(0, 181, 241, 0.36) !important;
    opacity: 1 !important;
}
.mat-tab-label-container {
    z-index: 0 !important;
}

/********************
  Widgets styles
 ********************/

section.widget {
    background: rgb(255, 255, 255) !important;
    color: #242424 !important;
    padding: 10px;
    border: 1px solid #dfdfdf;
}
itf-summary-grid section.widget {
    border: none;
    padding: 0px;
}

.carousel-control {
    opacity: 1;
    width: 18px;
    color: #555555;
}

.carousel-control .glyphicon-menu-right {
    left: -3px !important;
}
.carousel-indicators {
    display: none;
}

.carousel-control:hover {
    color: #111111;
    opacity: 1;
}

.carousel-control:focus {
    color: #555555;
}

/* Background of screen - also fills in headers of inactive widgets since they are transparent */
.lm_goldenlayout{
    background: #eeeeee;
}
/* widget background */
.lm_content{
    background: #ffffff;
}
.lm_dragProxy .lm_content{
    box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.2 );
}
/* Styling widget on being dragged in */
.lm_dragProxy .lm_header{
    border: 1px solid transparent;
}
.lm_dragProxy .lm_header .lm_tab {
    border: 1px solid #dfdfdf;
    border-bottom: none;
    z-index: 9999;
}

/* Marking where dragged item will be repositioned */
.lm_dropTargetIndicator{
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
    outline: none;
    margin: 1px;
    transition: all 200ms ease;
}

.lm_dropTargetIndicator .lm_inner{
    background: #000;
    opacity: 0.1;
}
/* divider between widgets (for resizing) */
.lm_splitter{
    /*background-color: #d1d1d1;*/
    /*background: #eeeeee;*/
    background: #ffffff;
    transition: opacity 200ms ease;
}
/* divider between widgets (for resizing) on mouse over */
.lm_splitter:hover {
    /*background: rgb(199,199,199);*/
    /*background-color: #d1d1d1;*/
    /*background: #eeeeee;*/
    background: #ffffff;
}
.lm_splitter.lm_dragging{
    /*background: rgb(93, 93, 93);*/
    /*background: #009596;*/
    background: #ffffff;
}
/*
.lm_splitter.lm_dragging{
    border: 1px dotted rgba(200,200,200,0.3);
}
*/


/* widget header */
.lm_header {
    background-color: #ffffff;
}

.lm_header .lm_controls {
    background-color: #ffffff;
    height: 18px;
}

/* icons in the close/maximise/minimise part of the top bar */
.lm_controls > li {
    position: relative;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-transition: opacity 300ms ease;
    -o-transition: opacity 300ms ease;
    -ms-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

.lm_controls > li:hover{
    opacity: 1;
    filter: alpha(opacity=100);
}

.lm_transition_indicator{
    background-color: transparent;
    border: 1px dashed #555;
}
.lm_splitter.lm_vertical .lm_drag_handle{
    height: 8px !important;
    top: -1px !important;
}
.lm_splitter.lm_horizontal .lm_drag_handle{
    width: 8px !important;
    left: -1px !important;
}

/* close cross icon */
.lm_tab > .lm_close_tab {
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
li.lm_tab > div.lm_close_tab::before {
    font-family: 'Linearicons-Free' !important;
    content: "\e870" !important;
}


ul.lm_controls > li {
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
    color: black;
    float: left;
    cursor: pointer;
}

ul.lm_controls > li.lm_maximise {
    top: 3.4px;
}
ul.lm_controls > li.lm_maximise:before{
    font-family: 'thinkFontio' !important;
    content: "a" !important;
    font-size: 11px;
}
.lm_maximised ul.lm_controls li.lm_maximise:before {
    font-family: 'thinkFontio' !important;
    content: "R" !important;
    font-size: 11px;
}

/* close cross icon */
.lm_header .lm_tab .lm_close_tab{
    color: #191919;
}

.lm_header .lm_tab .lm_close_tab{
    width: 11px;
    height: 11px;
    right: 6px;
    top: 4px;
}

li.lm_tab > div.lm_close_tab {

    /*removing base64 background image*/
    /*background-image: none !important;*/

    /*     from lnr class */

    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: white;
}
li.lm_tab > div.lm_close_tab::before {
    font-family: 'Linearicons-Free' !important;
    content: "\e870" !important;
}
.lm_header .lm_tab:hover .lm_close_tab,
.lm_header .lm_tab.lm_active .lm_close_tab{
    color: #000 !important;
    opacity: 0.8;
}
.lm_header .lm_tab .lm_close_tab:hover {
    opacity: 1;
}

.lm_controls > li {
    -webkit-font-smoothing: antialiased;
    color: black;
    float: left;
}

ul.lm_controls > li.lm_close {
    top: 3px;
}

ul.lm_controls > li.lm_maximise {
    top: 5px;
}
ul.lm_controls > li.lm_close:before {
    font-family: 'Linearicons-Free' !important;
    content: "\e870" !important;
}
ul.lm_controls > li.lm_maximise:before{
    font-family: 'thinkFontio' !important;
    content: "a" !important;
    font-size: 11px;
}
.lm_maximised ul.lm_controls li.lm_maximise:before {
    font-family: 'thinkFontio' !important;
    content: "R" !important;
    font-size: 11px;
}


ul.lm_controls > li.iaf_lm_toggledisplaymode {
    padding: 4px 16px 0px 3px;
}

ul.lm_controls > li.iaf_lm_displaymodechart:before {
    font-family: 'thinkFontio' !important;
    content: "C" !important;
    font-size: 11px;
}

ul.lm_controls > li.iaf_lm_displaymodegrid:before {
    font-family: 'thinkFontio' !important;
    content: "G" !important;
    font-size: 11px;
}

ul.lm_controls > li.iaf_lm_duplicate {
    margin-top: 4px;
}

ul.lm_controls > li.iaf_lm_duplicate:before {
    font-family: 'thinkFontio' !important;
    font-size: 11px;
    content: "D";
}

ul.lm_controls > li.iaf_lm_duplicate ul {
    font-size: 11px;
    list-style-type: none;
    list-style-position: inside;
    margin: 0px 0px 0px -92px;
    padding-top: 1px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    position: absolute;
    left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
    z-index: 999;
    width: 150px;
}
.iaf_lm_duplicate li {
    padding: 4px 6px; /* Introducing a padding between the li and the a give the illusion spaced items */
    margin: 0px;
    float: none;
    text-align: left;
    color: #222;
    background-color: #ffffff;
    white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    border:  1px solid #dfdfdf;
    border-bottom: none;
}
.iaf_lm_duplicate ul li:last-child {
    border-bottom: 1px solid #dfdfdf;
}
.iaf_lm_duplicate ul li:hover {
    background-color: #eee;
}
ul.lm_controls > li.iaf_lm_duplicate:hover ul { /* Display the dropdown on hover */
    left: 0; /* Bring back on-screen when needed */
}

ul.lm_controls > li.iaf_lm_configure {
    margin-top: 3px;
}

.iaf_lm_configure:before {
    font-family: 'Linearicons-Free';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e810";
}

/* ---------------------------------------------------------------- */

nav.bar-container {
    background: #ffffff;
    border: 1px solid #dfdfdf;
    border-bottom: none;
}

nav.bar-container .basket-custom, nav.bar-container .fa-history, nav.bar-container .fa-paper-plane-o, nav.bar-container .fa-plus-square-o, nav.bar-container .fa-table, nav.bar-container .fi-archive, nav.bar-container .fi-comment, nav.bar-container .fi-pencil, nav.bar-container .ion-android-more-vertical, nav.bar-container .ion-android-search, nav.bar-container .printer-custom, nav.bar-container .search, nav.bar-container .fa-chain, nav.bar-container .fa-clock-o, nav.bar-container .fa-chain-broken, nav.bar-container .fa-trash-o {
    color: #53575C;
}

nav.bar-container .basket-custom:hover, nav.bar-container .fa-history:hover, nav.bar-container .fa-paper-plane-o:hover, nav.bar-container .fa-plus-square-o:hover, nav.bar-container .fa-table:hover, nav.bar-container .fi-archive:hover, nav.bar-container .fi-comment:hover, nav.bar-container .fi-pencil:hover, nav.bar-container .ion-android-more-vertical:hover, nav.bar-container .ion-android-search:hover, nav.bar-container .printer-custom:hover, nav.bar-container .search:hover,  nav.bar-container .fa-chain:hover, nav.bar-container .fa-clock-o:hover, nav.bar-container .fa-chain-broken:hover, nav.bar-container .fa-trash-o:hover {
    color: #939598;
}

.bar-container .ion-network {
    color: #3f88c3;
}
nav.bar-container .ion-network:hover {
    color: #63a7dc;
}

.bar-container ul ul {
    background: white !important;
}
nav.bar-container ul ul li {
    color: #222 !important;
}
nav.bar-container ul ul li:hover {
    background: #eee !important
}

.bar-container ul li:hover> ul> li {
    border: 1px solid #dfdfdf !important;
    border-bottom: none !important;
}
nav.bar-container ul ul > li:last-child {
    border-bottom: 1px solid #939598 !important;
}

nav.bar-container ul li.disabled,
nav.bar-container ul li.disabled:hover,
nav.bar-container ul ul li:disabled,
nav.bar-container ul ul li:disabled:hover {
    color:#e0e0e0 !important;
}


/******************************
    Charts
******************************/
/*  fixing background when launch widget only */
.ui-widget-content {
    border: 0px;
    background-color: white;
}
.ui-chart-container {
    font-size: 11px;
}

.ui-horizontal-axis-labels {
    color: #333;
}

.ui-vertical-axis-labels {
    color: #333;
}

iaf-dashboard .ui-angular-axis-labels {
    color: #e0e0e0;
}

iaf-dashboard .ui-radial-axis-labels {
    color: #e0e0e0;
}

iaf-dashboard .ui-chart-category-axis-tick {
    color: #e0e0e0;
}

.ui-chart-legend-item:hover {
    cursor: pointer;
}


.ui-chart-legend-item-text {
    font-size: 11px;
    color: #333;
}

.horzontal-chart-legend tr {
    display: inline-block;
    padding-right: 5px;
}

ig-pie-chart canvas {
    padding-top: 5px;
}

.ui-igzoombar-scrollbar {
    background-color: #e6e6e6;
    height: 10px !important;
}

.ui-igzoombar-scrollbar-thumb {
    height: 10px;
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
    line-height: 6px;
    border-radius: 5px;
}

.ui-igzoombar-scrollbar-thumb, .ui-igzoombar-window-handle {
    background-color: #bebebe;
    border: 1px solid #B9B9B9;
    color: #4B4B4B;
    font-weight: normal;
}

.ui-igzoombar-scrollbar-button {
    width: 16px;
    height: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.ui-igzoombar-window-handle {
    width: 8px; /* height:20px; */
    position: absolute;
    top: 50%;
    margin-top: -10px;
    cursor: e-resize;
}

.ui-igzoombar-window-handle-left {
    left: 100%;
    margin-left: -4px;
    text-align: center;
    line-height: 11px;
}

    .ui-igzoombar-window-handle-left:after, .ui-igzoombar-window-handle-right:after {
        content: "\0131\0131";
        font-size: 8px;
    }

.ui-igzoombar-scrollbar-thumb:after {
    content: "\0131\0131\0131";
    font-size: 6px;
    cursor: default;
}

.chart-title{
    font-size: 11px;
}