BODY{
    background-color: #fff;
    font-family: Poppins, Signika, sans-serif;
    cursor: default;
    margin: 0;
    color: #000;
}

.input-monitor {
  padding-top: 2px;
  padding-bottom: 1px;
  text-align: right;
}

#tachart {
   height:100%;
   width:100%;
   border:0;
}

.chart-header {
 text-align: center;
 padding: 10px;
 width: 80%;
 margin: auto;
 overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;  
}

.chart-header::-webkit-scrollbar  {
    display: none ;
}

#hamDD {
   right:2%;
}

.error-row-hi {
   color:red;
}
.error-row-lo {
   color:blue;
}

.ddButton {
   display: flex;
   align-self:center;
   justify-content: center;
}
.hamIcon {
   padding: 0px 0px 4px 0px;
   width: 24px;
   cursor: pointer;
}
.idLogo {
   width:180px;
   left: -35px;
   position: relative;
}

.idLogo > img {
   max-width: 95%;
}

.aide-wlcm {
   float: left;
   padding: 16px 16px 0 16px;
}

#tachartdiv, #linechart {
 padding: 0;
 left: -12px;
 height: 100%;
 margin: 0 -8px;
}

.modaldivs {
 height: 100%;
 width: 100%;
 background: #fffc;
 position: fixed;
 left: 0;
 top: 0px;
 z-index: 8;
 display: none;
 overflow-y: scroll;
}

#tachartmonths, #chartindicators {
   background:#222;
   color: #666;
   border: 0;
   outline: 0;
   background-color: transparent;
   left: 1%;
   position: relative;
   font-weight: bold;
}

#chartindicators {
   left: 1%;
   top: 1%;
   margin-right: 1%;
}

#lchartlineh,#lchartlinev,#tachartlineh,#tachartlinev, #lchartlineh2,#lchartlinev2,#tachartlineh2,#tachartlinev2{
   width: 100%;
   height: 1px;
   background: #82480b;
   position: absolute;
   top:0;
}

#lchartlineh2,#lchartlinev2,#tachartlineh2,#tachartlinev2{
   background: #480b82;
   display: none;
}

#lchartlinev,#tachartlinev,#lchartlinev2,#tachartlinev2 {
   height: 125%;
   width: 1px;
   left:0;
}

.tadivoverlay {
   width: 93%;
   height: 75%;
   position: absolute;
   top: 8%;
   left: 3%;
}


   .chartcontainer {
       width: 100%;
       height: 100%;
       position: relative;
   }

   #tvchart {
       width: 100%;
       height: 100%;
   }

   #lblspan {
       float: right;
       width: 80%;
       text-align: center;
   }
   .cola {
      /* background: #cee1d040 !important;*/
   }
   .colb {
       background: #cee1d040 !important;
   }


.theme-color-1 {
   color:#ba9de3;
}

.nbaForm {
   position: relative;
   top: 15%;
   height: auto;
   background: #fff;
   width: 40%;
   left: 30%;
}

.invisible {
   opacity: 0;
}


   #app > div {
     display: inline-block;
   }

   #app p {
     font-weight: bold;
     margin: 5px 0;
   }

   #app .icon {
       width: 28px;
       cursor: pointer;
       padding: 4px 4px 0 4px;
   }


   .sortable {
       cursor: pointer;
   }
   .sortable:before{
       content: "\2195"; /*02C5 02C4 */
       color:#ccc;
   }
   .sortable:hover:before{
       content: "\2195"; /*02C5 02C4 */
       color:#444;
   }
   .sortable.asc:before{
       content: " \2191"; /*02C5 02C4 */
       color:#444;
   }
   .sortable.desc:before{
       content: " \2193"; /*02C5 02C4 */
       color:#444;
   }
   .oddRow {
       background: #f3f3f3;
   }
   .rowhilite {
       background: aliceblue;
   }
   .rowportfolio {
       background: #ba9de3;
   }

   .nbaFrame {
       width: 100%;
       height: 100%;
       border: none;
   }

   .mainthead th { 
       position: sticky; 
       top: 50px; 
       background: #fff;
       font-weight: normal;
   }

   table tr {
        border:solid 1px #aaa;
   }
   .bold {
       font-weight: bold;
   }

   .header {
       box-sizing: border-box;
       z-index: 9;
       width: 100%;
       position: sticky;
       top: 0;
       background: #fff;
       height: 50px;
   }

   .chartbutton {
       /**/
       position: absolute;
       right: 8px; 
       top: 8px;
       width:100px;
       opacity: 70%;
       background-image: url("../img/logoGraph.webp");
       background-size: 80px;
       background-repeat: round;
       border: solid #fff 1px ;
       color:teal;
       font-weight: bold;
       padding: 8px;
       cursor: pointer;
       /*font-size: 22px;*/
   }
   
   .chartbutton:hover {
       border: solid teal 1px ;
   }
   .cursor-point {
       cursor: pointer;
   }

   .buffer {
/*        background: teal;*/
       width: 100%;
   }
   .detRow {
       height: 33px;
   }

   .appHandle {
       width: 100%;
       padding: 0;
       margin: 0;
       min-height: 350px;
   }
   
   .wfd {
       margin: 25% 36%;
       position: relative;
   }

   .buyblue {
       padding: 5px;
       color: #4184f3;
       background-color: rgba(65,132,243, 0.1);
   }

   .buyblue.bg {
       background-color: rgba(65,132,243, 0.02);
   }

   .sellred {
       padding: 5px;
       color: #df514c;
       background-color: rgba(223,81,76, 0.1);
   }

   .sellred.bg {
       background-color: rgba(223,81,76, 0.02);
   }

   .alot {
       border-radius: 8px;
       text-align: center;
   }

   .alot.vvhigh {
       background: #44b9e8b9;
       color: red;
   }
   .alot.vhigh {
       background: #b944b9;
       color: red;
   }
   .alot.high {
       background: #e8b9cd;
       color: #7b0e0e;
   }
   .alot.lotok {
       background: #a3b2df;
       color: red;
   }
   .alot.low {
       background: #b9e844;
       color: red;
   }
   .alot.vlow {
       background: #9cd6e8;
       color: red;
   }
   .alot.vvlow {
       background: #b98e9b;
       color: red;
   }
   .alot.neglot {
       background: #b9e8b9;
       color: red;
   }
   .clipboardHelper {
       color: olive !important;
   }

   .copyhelpers {
       position:fixed;
       left:-10%;
       width:1px;
       height:1px;
       resize:none;
       cursor: copy;
   }

   .modal {
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;

     z-index: 2;
     background-color: rgba(255,255,255,0.8);

     display: flex;
     align-items: center;
     justify-content: center;
   }

   .modal-content {
     flex-basis: 400px;
     padding: 4px;

     background-color: #ddd;
     border-radius: 6px;
   }

   .watch-box {
       height: 40%; 
       overflow-x: scroll;
       position: relative;
   }

   .wl-hover:hover {
       background: #ba9de3;
       cursor: pointer;
   }
   

   .modal-title {
     font-size: 110%;
     font-weight: 700;
     margin-bottom: 2px;
   }

   .modal-close {
       float: right;
       font-size: 1.2em;
       color: maroon;
       font-weight: bold;
       padding: 0 6px;
       color:#666;/*#222;*/
       cursor: pointer;
       top: 0;
       right: 0;
       position: absolute;
   }

       /* Contect Manu Start */
   .ctx-action {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       position: absolute;
       top: 6px;
       left: 0;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       /* margin: 7px 15px; */
       background: #fff;
   }

   .ctx-action * {
       cursor: pointer;
   }

   .ctx-action button, .ctx-row, .ctx-row-sm {
       padding: 6px 10px;
       min-width: 35px;
       display: inline-block;
       margin-left: 3px;
       line-height: 1;
       border-radius: 3px;
       border: 1px solid #9b9b9b;
   }

   .ctx-row {
       width: 160px;
       height: 28px;
   }
   
   .ctx-row-sm {
       width: 125px;
       height: 27px;
   }
   
   .senti-ctrl {
       padding:3px 4px;
       border-radius:8px;
   }

   .ctx-menu, .senti-menu {
       position: absolute;
       text-align: left;
       background: #fff;
       box-shadow: 0 1px 4px 0 rgba(0, 0, 0,.1);
       border-radius: 2px;
       border-width: 1px;
       border-style: solid;
       border-color: #eee;
       z-index: 100;
   }

   .senti-menu {
       width: 88px;
       left: -50%;
   }
   .ctx-menu ul {
       padding: 1px;
       margin: 2px;
       /* min-width: 200px; */
       list-style: none;
       width: 140px;
   }

   .ctx-menu ul li {
       padding-bottom: 7px;
       padding-top: 7px;
   }

   .ctx-menu ul li a {
       text-decoration: none;
       color: black;
   }

   .ctx-menu .separator
   {
       border-top: 1px solid #eee;
   }

   .ctx-menu ul li:hover {
       background: darkgray;
       border: blue;
   }

   .inactive {
       color: #ccc !important;
       cursor: default;
       opacity: 0.5;
   }
           /* CTXMENU END */
   .actellip:hover > * {
       color: #f7aa1e !important;
   }

       /* Contect Manu Start */

       /* TGGLSWT START */
   .toggle-text {
       margin-top: 5px;
       text-align: right;
       padding: 4px;
   }

   .toggle-container {
       display: flex;
       align-items: center;
       cursor: pointer;
   }

   .toggle-label {
       margin-left: 10px;
       opacity: 70%;
   }

   .toggle-switch {
       position: relative;
       width: 50px;
       height: 25px;
       background: #ccc;
       border-radius: 15px;
       transition: background 0.3s;
   }

   .toggle-switch::after {
       content: '';
       position: absolute;
       top: 2px;
       left: 2px;
       width: 21px;
       height: 21px;
       background: #fff;
       border-radius: 50%;
       transition: left 0.3s;
   }

   .toggle-switch.active {
       background: #4caf50;
   }

   .toggle-switch.active.invert {
       background: #e35a3a;
   }

   .toggle-switch.active::after {
       left: 27px;
   }

   .toggle-switch.fixed {
       opacity: 0.5;
   }

   .toggle-switch.fixed::after {
       background: #ccc;
   }


       /* TGGLSWT END */


@media only screen and (min-width: 1400px){
   #app {
       width: 1400px;
       margin: auto;
       font-size: 13px;
   }

   .buysellflag {
/*        font-size: 80%;*/
   }

}

@media only screen and (min-width: 852px) and (max-width: 1400px){
   #app {
       width: 100%;
       font-size: 11px;
       float: initial;
   }

   .buysellflag {
       font-size: 80%;
   }

}

@media only screen and (min-width: 700px) and (max-width: 852px){
   #app {
       width: 100%;
       font-size: 9px;
       float: initial;
   }
}

@media only screen and (max-width: 700px){
   #app {
       width: 100%;
       font-size:0.75em;
   }
   .nbaForm {
       width: 80%;
       left: 10%;
       top: 8%;
   }

   table {
       font-size: 12px;
   }

   .ctx-action {
       top:0;
       left:-25px;
   }
}


.form-range {
  width: 100%;
  height: 0.1rem;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--welome);
}

.form-range:focus {
 outline: 0;
}

.form-range:disabled {
 pointer-events: none;
}

@keyframes shake {
 0% { transform: translate(1px, 1px) rotate(0deg); }
 10% { transform: translate(-1px, -2px) rotate(-1deg); }
 20% { transform: translate(-3px, 0px) rotate(1deg); }
 30% { transform: translate(3px, 2px) rotate(0deg); }
 40% { transform: translate(1px, -1px) rotate(1deg); }
 50% { transform: translate(-1px, 2px) rotate(-1deg); }
 60% { transform: translate(-3px, 1px) rotate(0deg); }
 70% { transform: translate(3px, 1px) rotate(-1deg); }
 80% { transform: translate(-1px, -1px) rotate(1deg); }
 90% { transform: translate(1px, 2px) rotate(0deg); }
 100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake-once {
 /* Start the shake animation and make the animation last for 0.5 seconds */
   animation-delay: 0.5s;
   animation: shake 0.5s;

}

.shake-twice {
   animation-delay: 0.5s;
   animation: shake 0.5s, shake 1.5s, shake 0.5s;
   animation-iteration-count: 2;
}

.shake-inf {
 animation-delay: 0.5s;
 animation: shake 0.5s;
 animation-iteration-count: infinite;
}


.xsbutton {
 border-radius: 7px;
 display: inline-block;
 padding: 6px 10px;
 vertical-align: middle;
 overflow: hidden;
 text-decoration: none;
 min-width: 100px;
 cursor: pointer;
 /*box-shadow: 1px 2px #aaa;*/
}

.xsbutton.ok {
 background: var(--btnOKbg);
 color: var(--btnOKfg);
 border: 1px solid var(--btnOKfg);
 box-shadow: 1px 2px var(--btnOKShadow);
}

.xsbutton.no {
 background: var(--btnNObg);
 color: var(--btnNOfg);
 border: 1px solid var(--btnNOfg);
 box-shadow: 1px 2px var(--btnNOShadow);
}