* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
.demo-container,
#grid-container {
    height: calc(100% - 45px);
    height: 100%; 
}


#grid-allocation,
#grid-run-allocation,
#tabprogram,
#grid-risk,
#grid-instrument,
#grid-strategy,
#grid-custom,
#demo-watchlist,
#grid-runs,
#grid-monitor {
    height: 100%;
}

#runs{
    height: calc(100% - 53px);

}
#grid-run-strategy {
    width: 100%;
    height: 100%;
}
html,
body,
#container {
    height: 100%;
}
body {
    background: #213054;
    font-family: 'Open Sans', sans-serif;
    font-size: small;
    color: #444;
}

.option-switch {
    margin-top: -5px;
    display: block;
}
input,
button,
textarea {
    font-family: 'Open Sans', sans-serif;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #444;
}
/*      Header      */
#header {
    height: 70px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 0 20px; */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}
#header ul li {
    display: inline-block;
    margin: 0 10px;
}
#header ul li a i {
    margin-right: 5px;
}

.login-img img{
    width: 270px;
    height: 140px;
}

#header .logo img{
    /* height: 35%; */
    width: 127px;
}
#header .left-side {
    display: flex;
    align-items: center;
    margin-left: 10px;
}
/*      Menu Toggle Button  */

.menu-toggle-button button {
    width: 50px;
    border: 0;
    height: 50px;
    font-size: 20px;
    margin-right: 20px;
    color: #fff;
    background: #2a7ac2;
    cursor: pointer;
    border-radius: 4px;
}
.menu-toggle-button button:focus {
    outline: none;
}
.menu-toggle-button .fa-bars {
    display: block;
}
.menu-toggle-button .fa-times {
    display: none;
}
.menu-toggle-button.opened .fa-bars {
    display: none;
}
.menu-toggle-button.opened .fa-times {
    display: block;
}
/*      Content         */
#content {
    padding: 0px 0px 0 80px;
    height: calc(100% - 70px);
}
/*      Box List        */
.box-list {
    margin-left: 300px;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}

.Watch-list {
    color: #252525;
    font-size: 14px;
    margin-left: 5px;
  padding-left: 5px;
}
.box-list .box-item {
    padding: 15px 10px;
    /* margin: -18px; */
    border-radius: 4px;
    box-sizing: border-box;
    text-align: left;
    align-items: center;
    height: 50px;
    /* width: 360px; */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 190px;
}
.box-list .box-item.combobox-cnt {
    width: 290px;
    margin-left: -240px;
}
.box-list .box-item strong {
    color: #297ac2;
}
.box-list .box-item .bottom-line {
    display: inline-block;
    text-align: right;
    margin: 5px;
}
.box-list .box-item .red {
    color: red;
}
.box-list .box-item .green {
    color: #30ab30;
}
.box-list .combobox-parent .bottom-line {
    margin-top: 0;
}
.combobox-container {
    display: flex;
}
.combobox-container strong {
    margin-right: 10px;
}
/*      Left Menu       */
#left-menu {
    position: fixed;
    left: 0;
    top: 70px;
    height: calc(100% - 100px);
    width: 60px;
    background: rgba(28, 117, 188, 0.83);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.25s;
    z-index: 1000;
}
#left-menu ul li a {
    list-style: none;
    padding: 20px;
    display: block;
    border-bottom: 1px solid #2e416f;
    color: #252525;
    white-space: nowrap;
}
#left-menu ul li a.active {
  background: #1d1e22!important;
  color: #fff!important;
}
#left-menu ul li a.active .fa {
  color: #fff!important;
}
#left-menu ul li a:hover {
  background: rgb(72,101,148,.74);
  color: #fff;
}
#left-menu ul li a:hover .fa {
  color: #fff;
}
#left-menu ul li a .fa-chevron-up,
#left-menu ul li a .fa-chevron-down {
    opacity: 0;
}
#left-menu ul li a span {
    display: none;
}
#left-menu ul li a .fa {
    list-style: none;
    margin-right: 10px;
    font-size: 22px;
    color: #223054;
}
#left-menu ul li a .fa-chevron-down {
    position: absolute;
    right: 0;
    top: 21px;
}
#left-menu ul li a .fa-chevron-up {
    position: absolute;
    right: 0;
    margin-top: -25px;
}

#left-menu .parent-menu > a {
    position: relative;
}
#left-menu.opened {
    left: 0;
}
#left-menu .sub-menu {
    background: rgba(204, 204, 204, 0.5);
    display: none;
}
#left-menu .sub-menu.active {
    display: none;
}
#left-menu .fa-chevron-up  {
    display:none;
}
#left-menu .parent-menu .fa-chevron-down  {
    display:block;
}
#left-menu .sub-active .fa-chevron-up  {
    display:block;
}
#left-menu .sub-active .fa-chevron-down  {
    display:none;
}
#left-menu:hover .sub-menu.active {
    display: block;
}



#left-menu .sub-menu li a {
    list-style: none;
    padding: 10px 20px 10px 20px;
    display: block;
    border-bottom: 1px solid #2e416f;
    color: #252525;
}
#left-menu ul li a .fa-chevron-up {
    display: none;
}
#left-menu ul li.opened a .fa-chevron-up {
    display: block;
}
#left-menu ul li.opened a .fa-chevron-down {
    display: none;
}

#left-menu.opened ul li a .fa-chevron-up,
#left-menu.opened ul li a .fa-chevron-down,
#left-menu:hover ul li a .fa-chevron-up,
#left-menu:hover ul li a .fa-chevron-down
{
    opacity: 1;
}
#left-menu.opened ul li a span {
    display: inline-block;
}
#left-menu:hover,
#left-menu.opened {
    width: 260px;
}
#left-menu:hover ul li a span   {
  display: inline-block;
}

/*      Content Area        */
.content-area {
    height: 100%;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
/*      Main Content        */
.main-content {
    width: calc(100% - 450px);
    height: calc(100% - 110px);
    background: #555555;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 20px;
    border-radius: 15px;
    color: #fff;
    margin-top: 20px;
    position: relative;
    box-sizing: content-box;
    margin-right: 20px;
}
/*      Login Form      */
.login-form {
    background: #fff;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    padding: 20px;
}
.login-form .form-row {
    margin-top: 10px;
}
.login-form .form-row input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #5e5e5e;
    color: #5e5e5e;
}
.login-form button {
    width: 100%;
    height: 40px;
    border: 0;
    color: #fff;
    background: #4087c6;
    font-weight: bold;
}
/*      Page Message        */
.page-message {
    background: #fff;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    padding: 20px;
    color: #5e5e5e;
}
.reddot {
    height: 15px;
    width: 15px;
    background-color: red;
    padding-top: 5px;
    margin-left: 5px;
    border-radius: 50%;
    display: inline-block;
}
.greendot {
    height: 15px;
    width: 15px;
    padding-top: 5px;
    margin-left: 5px;
    background-color: #01796f;
    border-radius: 50%;
    display: inline-block;
}
#select-all-mode {
    height: 32px;
    font-size: 12px;
    width: 120px;
    margin-top: -5px;
    margin-bottom: 3px;
}
#header .dx-selectbox .dx-texteditor-input:read-only {
    font-size: 18px;
    font-weight: bold;
}
.temp-watchlist {
    display: none;
    width: 20px;
    height: 100%;
    background: #1c75bc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 20px;
    position: relative;
    border-radius: 0;
    color: #fff;
    right: -40px;
    top: 0;
}
.temp-watchlist .resizeable-button {
      position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid #e4e4e4;
    background: #fff;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, .05);
    cursor: pointer;
    text-align: left;
    padding-left: 7px;
}
.watchlist {
    width: 450px;
    height: calc(100% - 30px);
    background: #1c75bc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 20px;
    position: relative;
    border-radius: 0;
    color: #fff;
}
/*      Resizeable Button   */
.hide-button {
    cursor: pointer;
    display: block;
}
.show-button {
    cursor: pointer;
    display: none;
}
#header ul .seperator {
    width: 1px;
    height: 30px;
    background: #616161;
    margin-bottom: -10px;
}
.right-menu {
    padding-top: 12px;
}
#footer {
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 0;
    align-items: center;
    height: 30px;
    width: 100%;
    margin-top: -30px;
    background: #fff;
}

/* .dx-selectbox input {
    text-align: center;
} */

/* .dx-selectbox-popup-wrapper .dx-list-item {
    text-align: center;
} */

.dx-list-item {
    font-size: 18px;
    font-weight: bold;
}

/*    Resizeable Button   */
.resizeable-button {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid #e4e4e4;
    background: #fff;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, .05);
    cursor: pointer;
}
.resizeable-button:focus {
    outline: none;
}

.footer-left {
    margin-left: 0px;
}


.exitbutton {
    color: #337ab7;
    border: 0;
}


.center {
    width: 10%;
    margin: auto;
    padding: 10px;
}
.sticky-top {
    margin-top: 5px
}


#grid-container td {
    vertical-align: middle;
}

#grid-container .chart-cell {
    overflow: visible;
}

#grid-container .current-value {
    vertical-align: text-top;
}

#grid-container .diff {
    vertical-align: text-bottom;
}

#grid-container .inc .diff {
    color: #2ab71b;
}

#grid-container .inc .diff:before {
    content: '+';
}

#grid-container .dec .diff:before {
    content: '-';
}

#grid-container .dec .diff {
    color: #f00;
}

#grid-container .inc .diff:after,
#grid-container .dec .diff:after {
    content: '';
    display: block;
    height: 10px;
    width: 10px;
    position: absolute;
    right: -12px;
    top: 6px;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

.alignleft {
    float: left;
    vertical-align: middle;
}
.alignright {
    float: right;
}

.notification {
    text-decoration: none;
    text-align: center;
    /* padding: 10px 26px 0px 9px; */
    position: relative;
    display: inline-block;
    border-radius: 2px;
}

.notification .badge {
    position: absolute;
    top: -10px;
    right: -17px;
    padding: 2px 6px;
    border-radius: 50%;
    background-color: red;
    color: white;
}


.notification .stop {
    position: absolute;
    top: 0;
    left: -29px;
    padding: 5px 6px;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.notification2 {
    text-decoration: none;
    text-align: center;
    /* padding: 10px 26px 0px 9px; */
    position: relative;
    display: inline-block;
    border-radius: 2px;
}
.notification2 .badge{
    position: absolute;
    top: -2px;
    right: -17px;
    padding: 2px 6px;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.notification2 .stop{
    position: absolute;
    top: -2px;
    right: -24px;
    padding: 4px 6px;
    border-radius: 50%;
    background-color: red;
    color: white;
}
.modal-actions-cnt  {
    display: flex;
    justify-content: space-between;
}
.modal-actions-cnt .ma-col    {
    width: 100%;
}
.modal-actions-cnt .ma-col .btn {
    width: 90%;
}
.modal-actions-cnt .btn-text  {
    display: block;
}
#ctdmodal .input-group-text  {
    width: 140px;
    display: inline-block;
    /* text-align: right; */
}

.status-content     {
    position: absolute;
    right: 0px;
    bottom: -27px;
    display: none;
}
.status-content .status-btn     {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.status-content .status-btn:focus {
  outline: none;
}
.status-content .status-btn .light {
  display: inline-block;
  width:16px;
  height: 16px;
  border-radius: 16px;
  margin-right: 5px;
}
.status-content .status-btn .light.green {
    background: green;
}
.status-content .btn-container     {
    position: absolute;
    top: -90px;
    right: 0px;
    background: #4c519c;
    padding: 10px;
    border-radius: 8px;
}
.status-content .btn-container .btn-row button  {
  background: transparent;
  border: 0;
  display: flex;
  color: white;
}
.status-content .btn-container .btn-row button span  {
  font-size: 14px;
  white-space: nowrap;
  text-align: left;
  display: inline-block;
  margin-right: 10px;
}

.status-content .btn-container .btn-row button .fa  {
  font-size: 20px;
}

.status-content .btn-container .btn-row button .fa-toggle-off  {
  color: red;
}

.status-content .btn-container .btn-row button .fa-toggle-on  {
  color: green;
}

.darkwhite {
    color: #d0d0d0d0;
}
.lightred{
    color:red!important
}

.lightgreen {
    color:green!important
}

.darkred {
    color:#C50000!important
}

.darkgreen {
    color:rgb(71,140,29)!important
}

.lightgreenbackground {
    background-color: #99ff99
}

.lightredbackground {
    background-color: #ff6666
}


.darkgreenbackground {
    background-color: rgb(71,140,29)
}

.darkredbackground {
    background-color: #C50000
}



.gray:before {
    color:gray
}

/* if something overflowing from the container does not appear, delete this line */
#prod-container     {
    overflow: hidden;
    border-radius: 10px;
}


#grid-watchlist 	{
	border-radius: 10px;
    overflow: hidden;
    height: calc(100vh - 150px)!important;
}



.modal-actions-cnt .ma-col .btn {
    width: 100%;
}

@media (min-width: 992px){
.modal-dialog .xxl{
    max-width: 1360px !important;;
    margin: 1.75rem auto;
}
}

.w-70 {
    width: 71%!important;
}


#connection-status {
    cursor: pointer;
}


.st-btn-container     {
    position: absolute;
    bottom: 4px;
    left: 40px;
    background: #213054;
    padding: 12px 15px;
    border-radius: 8px;
    z-index: 1001;
    display: none;
}
.st-btn-container:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #213054 transparent transparent;
    display: block;
    bottom: 5px;
    left: -7px;
}
.st-btn-container .btn-row button  {
  background: transparent;
  border: 0;
  display: flex;
  color: white;
}
.st-btn-container .btn-row button span  {
  font-size: 14px;
  white-space: nowrap;
  text-align: left;
  display: inline-block;
  margin-right: 10px;
}

.st-btn-container .btn-row button .fa  {
  font-size: 20px;
}

.st-btn-container .btn-row button .fa-toggle-off  {
  color: #c52727;
}

.st-btn-container .btn-row button .fa-toggle-on  {
  color: green;
}


 .dx-button-mode-contained.dx-button-danger {
    background-color: #dc3545;
    border-color: transparent;
    color: #000;
    font-weight: bold;
  }
  .dx-button-mode-contained.dx-button-danger .dx-icon {
    color: #000;
    font-weight: bold;
  }
  .dx-button-mode-contained.dx-button-danger.dx-state-hover {
    background-color: #FF3300;
    border-color: transparent;
  }
  .dx-button-mode-contained.dx-button-danger.dx-state-focused {
    background-color: #FF3300;
    border-color: transparent;
  }
  .dx-button-mode-contained.dx-button-danger.dx-state-active {
    background-color: #FF3300;
    border-color: transparent;
    color: #000;
    font-weight: bold;

  }

.dx-button-mode-contained.dx-button-default {
    background-color: #FFFF66;
    border-color: transparent;
    color: #000;
    font-weight: bold;
  }
  .dx-button-mode-contained.dx-button-default .dx-icon {
    color: #000;
    font-weight: bold;
  }
  .dx-button-mode-contained.dx-button-default.dx-state-hover {
    background-color: #FFFF66;
    border-color: transparent;
  }
  .dx-button-mode-contained.dx-button-default.dx-state-focused {
    background-color: #FFFF66;
    border-color: transparent;
  }
  .dx-button-mode-contained.dx-button-default.dx-state-active {
    background-color: #FFFF66;
    border-color: transparent;
    color: #000;
    font-weight: bold;
  }


/* .dx-datagrid {
    height: calc(100% - 40px);
} */

.modal-sm {
    max-width: 325px;
}

.watchlist {
    flex: 0 0 520px;
    max-width: 520px;
}
/* .main-content   {
    flex: 0 0 calc(100% - 520px);
    max-width: calc(100% - 520px);  
} */
.medium .watchlist {
    flex: 0 0 586px;
    max-width: 545px;
}
.medium .main-content    {
    flex: 0 0 calc(100% - 610px);
    max-width: calc(100% - 610px);
}
.large .watchlist {
    flex: 0 0 610px;
    max-width: 522px;
}
.large .main-content     {
    flex: 0 0 calc(100% - 600px);
    max-width: calc(100% - 600px);
}

.dx-menu-item-popout-container {
    display: none;
}


/* Dark Theme */
body.dark   {background: #71747b;}
body.dark a   {color: #d2d2d2;}

body.dark #header {background: #30363a;}

body.dark .box-list .box-item strong {color: #d0d0d0;}
body.dark .box-list .box-item .red {color: #ff8282;}
body.dark .box-list .box-item .green {color: #9dff9d;}

body.dark .watchlist {background: #30363a;}

body.dark #left-menu  {background: #30363a;}

body.dark #left-menu ul li a,
body.dark #left-menu ul li a .fa {color: #ababab;}

body.dark #left-menu ul li a {border-bottom: 1px solid #b0b2b5;}

body.dark #left-menu ul li a:hover {
    background: rgb(78,78,78,.74); color: #fff;}

/* .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {
    background-color: rgba(0,0,0,.04);
    color:white;
} */
/* .dx-state-disabled {
    background-color: #f7f7f7!important;
} */

.dx-tab-selected:after {
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    border-bottom: none!important;
}
.dx-tabpanel.dx-state-focused .dx-tab:not(.dx-tab-selected):before {
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    border-bottom: none!important;
}
.dx-tabpanel .dx-multiview-wrapper {
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    border-bottom: none!important;
}
.dx-tabpanel.dx-state-focused .dx-multiview-wrapper {  
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    border-bottom: none!important; 
} 
.dx-multiview .dx-swipeable .dx-tabpanel .dx-widget .dx-visibility-change-handler .dx-collection .dx-state-focused {
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    border-bottom: none!important; 
}

.dx-tabs {  
    table-layout: fixed;  
}  


.highcharts-figure, .highcharts-data-table table {
    height: 100%;
    width: 100%;
    margin: 1em auto;
  }
  #highcharts-first {
    height: 100%;
  }
  .highcharts-description{
      color: white;
      text-align: center;
  }
  .highcharts-data-table table {
      font-family: Verdana, sans-serif;
      border-collapse: collapse;
      border: 1px solid #EBEBEB;
      margin: 10px auto;
      text-align: center;
      width: 100%;
      max-width: 500px;
  }
  .highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
  }
  .highcharts-data-table th {
      font-weight: 600;
    padding: 0.5em;
  }
  .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
  }
  .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
  }
  .highcharts-data-table tr:hover {
    background: #f1f7ff;
  }


.red {
    color: red!important;
}
.green {
    color: #30ab30!important;
}

.select-text {
    width: 180px;
}
.select-hours {
    width: 100px;
}




.item1 { grid-area: none_radio; }
.item2 { grid-area: none_input1; }
.item3 { grid-area: none_input2; }
.item4 { grid-area: none_input3; }
.item5 { grid-area: range_radio; }
.item6 { grid-area: range_input1; }
.item7 { grid-area: range_input2; }
.item8 { grid-area: range_input3; }
.item9 { grid-area: list_radio; }
.item10 { grid-area: list_input1; }
.item11 { grid-area: list_input2; }
.item12 { grid-area: list_input3; }
.scan-container {
  display: grid;
  grid-template-areas:
    'none_radio none_input1 none_input2 none_input3'
    'range_radio range_input1 range_input2 range_input3'
    'list_radio list_input1 list_input2 list_input3';
  grid-gap: 10px;
 
  padding: 10px;
}
.scan-container > div {
  text-align: left;
  width: 208px;/*max-content;*/
  padding: 0px 5px;
}

.dx-item-content .dx-list-item-content{
    color: wheat;
}
.modal { overflow: auto !important; }

.highcharts-menu-wrapper { width: 60px; }
.highcharts-bindings-wrapper { width: 60px; }

.form-row input{
    margin-right: 85px;
    margin-left: 0px;
}

.numberbox-right input[type=text], input[type=password] {  
    text-align:right;  
  } 

.numberbox-center input[type=text], input[type=password] {  
text-align:center;  
}   

.dx-datagrid-headers .dx-datagrid-text-content
{
    text-align: center;
}

#id_username {
    text-align: center;
  }

.roll-time-blue{
    color: blue!important;
}

.roll-time-gray{
    color: #B9B9B9!important;
}

.force-exit-button{
    color: red!important;
}