/* Option Flows */
.option_flow_table-side{
	max-height: 400px;
     
     overflow-y:auto;
     min-width: 400px;
   
    scrollbar-width: none;
    
      
     
}

.option-flow-row{
	border-bottom: 2px dotted gray;
}
html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

::-webkit-scrollbar {
    display: none;
}
.option_flow_table{
	max-height: 790px;
    overflow: auto;
    margin-bottom:40px;
}
a:hover{
	color:red  !important;
}
.history a:hover{
	color:purple !important;
}
.option_flow{
	border:2px solid #223a66;
	background-color: #222020;
	margin:0px;
	text-align: left;
  	position: relative;
	
}
.option_flow td{
	border: 1px solid #5e5e5f;
	padding:5px 8px;
	font-size:0.6em;
	letter-spacing:0.04em;
	white-space: nowrap;
	
}
.option_flow tr:hover {background-color: rgb(93, 89, 45);}
.option_flow th{
	border: 1px solid  rgb(120, 121, 116);
}
.real-time-option{
	color:rgb(110, 110, 115);
	margin-top:10px;
}
.option_flow th{
	background-color: #223a66;
	color:#ddd;
	font-size: 0.65em;
	font-family: Helvetica, sans-serif;
	position: sticky;
      top: 0;
      border: 1px solid #ddd;
      height:30px;
      font-size: 0.6em;
      padding: 0px 0.5em;
}
.stock-flow{
	
	width: 800px;
}
.usymbol{
	cursor: pointer;
	border: 1px solid #3f3f3f;
	box-shadow: 0 1px 2px rgba(121, 121, 121, 0.05);
}
.forecast_symb{
	cursor: pointer;
}
.bigsymbol{
	cursor: pointer;
}
.bigsymbol:hover{
	cursor: pointer;
}
.usymbol:hover{
	
}
.option-panel{
	
}
.unusualsymbol:hover{
	cursor: pointer;
}
.clear-search{
	left:0px;
	font-size: 1.5em;
	color: rgb(115, 115, 115);
	margin-top:-35px;
	z-index: -1;
	float:right;
	padding-right: 5px;
	cursor:pointer;
}
.nav-bar{
	margin-left:20px;
}
body{
	height: 100%;
	background-color: #f5f3fb;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("../img/wallstreet1.jpg");

  /* Add the blur effect */
  filter: blur(10px);
  -webkit-filter: blur(10px);

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.5); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 200%;
  padding-right: 10px;
  text-align:right;
}
.nav-a{
	
	/* background-image: linear-gradient(90deg,#9603b8 0,#480773); */
	background-color: #20053b;
	color:#fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}
h1{
	
}
h4, .h4{
	font-size:2.1rem;
	line-height: 30px;
	color:#fff;
}
.header-top-bar{
	font-size: 18px;
	padding:10px 0px;
}
.list-inline-item a{
	color:#fff;
	text-decoration: none;
}
.nav-item a:hover{
	color:#e12454;
}
.fs-4, .home{
	color: #e12454;
}
.mail{
	top:0px;
}
.col2-img{
	 height:400px;
}
.start-button{
	background-color: #e12454;
	color:#fff;
	border-radius: 25px;
	border-color: #e12454;
	padding:15px;
}
.total-ctl{
		color:#e4e6e9;
}
.banner-h1{
	color:#e4e6e9;
	line-height: 40px;
	text-transform:capitalize;
	margin-top:20px;
	font-family: 'Oswald', sans-serif;
}
/*
.banner-p{
	color:#223a66;
	line-height: 1.5rem;
	margin-top:20px;
	font-size:1.5rem;
	
}
*/
.banner-p{
	color:rgb(193, 195, 199);
	line-height: 1.5rem;
	margin-top:20px;
	font-size:1.5rem;
	
}
.banner{
	background-color:rgb(243, 245, 245);
}
.banner-h4{
	color:#223a66;
	line-height: 20px;
	
	margin-top:20px;
	font-family: 'Oswald', sans-serif;
	margin-bottom: 40px;
}
.img-col{
	 background: url('/img/trading1.png');
	 background-size: 700px 500px;
	 height:500px;
}
.features{
	margin-top: -70px;
}
.feature-item{
	flex-basis: 33.33%;
	margin: 0px 10px;
	padding: 20px 20px;
	background-color: rgb(243, 245, 245);
	border-radius: 15px 15px 15px 15px;
	box-shadow: 0px 0px 30px 0px rgba(0,42,106,0.1);
	


}
.feature-item span{
	color: #642f85;
}
.feature-item h5{
	color: #5a4c4c;
}
.broker h3{
	color: #5a4c4c;
}
.broker p{
	color:#5a4c4c;
}
.feature-item p{
	color: #6F8BA4;
	font-size:14px;
	height: 50px;
}

.feature-section.border-top{
	border-top:1px solid rgba(0,0,0,0.05)!important;
}
.material-icons{
	font-size:44px;
}
.bg-blue{
	background-color:#f4f9fc;
	height:100px;
	color:black;
}
.btn-a{
	background-color: #223a66;
	color:#fff;
	border-radius: 25px;
	border-color: #223a66;
	padding:14px;
	font-size:14px;
	
}
.logo{
	
	 height:40px;
}
.active{
	color:#e12454;
}
.item1{
	background-color:#230448;
}
.item2{
	background-color:#230448;
}
.item3{
	background-color:#230448;
}
.features-2{
	margin-top: 50px;
	margin-bottom: 50px;
}
.feature-item-2{
	flex-basis: 100%;
	margin: 0px 10px;
	padding: 40px 30px;
	background-color: #1b0130;
	border-radius: 15px 15px 15px 15px;
	box-shadow: 0px 0px 30px 0px rgba(0,42,106,0.1);
	
	
}
.feature-item-2 h4{
	color: #223a66;
	font-size:30px;
}
.feature-item-2 p{
	color: #6F8BA4;
	font-size:18px;
	font-family:sans-serif;
	margin: 20px 0px;
}
.feature-item-2 li{
	color: #6F8BA4;
	font-size:16px;
	
}

ul{
	list-style-type: none;
}
ul .material-icons{
	font-size:16px;
	padding-right:5px;
	color:#6F8BA4;
}
ul.sq{
	  list-style-type: square;
}
.go{
	margin-left:5px;
	height:30px;
}
.searchtxt{
	width:50px;
}
.select-date{
	margin-top:10px;
}
/* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}

/* Dotted border */
hr.dotted {
  border-top: 3px dotted #bbb;
}

/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}

/* Rounded border */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}
.history span input{
	margin-top:10px;
}
.history{
	color:rgb(228, 231, 231);
}
.history a{
	color:rgb(228, 231, 231);
}
#final-stock-movers{
	margin-left:10px;
	font-size: 18px;
}
#filled-stock-orders{
	margin-left:10px;
	font-size: 18px;
}
.icon-east{
	
	margin-top:200px;
}
.icon-east span.material-icons{
	font-size: 84px;
	color:rgb(215, 215, 215);
	margin-left:-40px;
}
.left-panel{
	background-color:rgb(238, 238, 238);
	border-right:1px solid #ddd;
	padding:20px;
	margin-bottom: 40px;
	
}
.mid-panel{
	background-color:rgb(245, 245, 245);;
	padding:10px;
}
.right-panel{
	background-color: rgb(245, 245, 245);
	padding:10px;
}
.alert-table{
	 max-height: 100px;
     
     overflow-y:auto;
     min-width: 400px;
   
    scrollbar-width: none;
    
	
}

.left-table tr td{
	color: #b9b3b3;
	font-size:0.6em;
	letter-spacing:0.04em;
	margin-right: 10px;
}
.pref-container{
	color:rgb(78 72 72);
}
.pref-container label{
	color:rgb(30, 30, 30);
}
.pref-container legend{
	color:rgb(101, 102, 102);
}
.pref-container fieldset{
	margin-top:20px;
	margin-bottom: 20px;
	border-bottom: 1px dotted gray;
	padding-bottom:20px;
	font-size:0.8em;
}
.pref-text{
	font-weight: bold;
}
.banner-a{
	background-color: #110121;
	/* background-image: linear-gradient(90deg, rgb(254, 255, 255) 0, rgb(105 1 123)); */
}

/*
.banner-b{
	background-image: linear-gradient(90deg,rgb(216, 216, 216) 0,#480773);
}*/
.banner-b{
	background-color: #110121;
	/* background-image: linear-gradient(90deg,rgb(17, 2, 38) 0,#480773); */

}
.total-ctl{
	
}
@media (min-width: 1400px){
.banner-c{
	background-image: url('../img/purple-curve.svg');
	width: 100%;
	position:absolute;
	padding-top: 5.4%;
	background-repeat: no-repeat;
	background-position:bottom;
	background-size: 100%;
	top: 550px;
	left:0px;
	z-index: -3;
}
}
@media (min-width: 1400px){
.banner-d{
	background-image: url('../img/purple-curve.svg');
	width: 100%;
	position:absolute;
	padding-top: 5.4%;
	background-repeat: no-repeat;
	background-position:bottom;
	background-size: 100%;
	top: 1420px;
	left:0px;
	
}
}
@media (max-width: 1024px){
	.exmaple{
		display:none;
	}
}
.broker{
	color:#000;
}
.broker img{
	width:100px;
	height:100px;
}
.trade-exm h4{
	font-size:20px;
}
.trade-exm img{
	width:1200px;
	height:500px;
}
.section-a, section-b{
	margin-top:20px;
	margin-bottom: 40px;
}
.item1 h1{
	color:#b417b4;
	text-align:center;
} 
.item1 h6{
	color:rgb(181, 181, 181);
	text-align:center;
}
.beta{
	color:rgb(117, 117, 117);
	font-size:10px;
	
}
/* PLANS HTML */
.pro{
	
	
	background-color:purple;
	color:#fff;
	padding: 10px 40px 10px 40px;
}
.standard{
	
	background-color:rgb(4, 50, 255);
	color:#fff;
	padding: 10px 40px 10px 40px;
}
.basic{

	background-color:rgb(170, 121, 65);
	color:rgb(254, 255, 255);
	padding: 10px 40px 10px 40px;
}
.sub-fee{
	background-color:rgb(85, 180, 66);
	font-size: 1.5 rem;
	padding: 10px 40px 10px 40px;
	color:#fff;
}
.sub-fee-pro{
	background-color:purple;
	color:#fff;
	padding: 10px 40px 10px 40px;
}
.sub-fee-stan{
	background-color:rgb(4, 50, 255);
	color:#fff;
	padding: 10px 40px 10px 40px;
	
}
.sub-fee-basic{
	background-color:rgb(170, 121, 65);
	color:rgb(254, 255, 255);
	padding: 10px 40px 10px 40px;
}
.plan-table td{
	height:60px;
	color:gray;
}
.plan-table td span span{
	font-size:34px;
}
.yes{
	color:rgb(85, 180, 66);
}
.no{
	color:red;
}
.h3-plan{
	color:rgb(93, 93, 93);
	margin:10px 0px 20px 0px;
	font-size: 18px;
}
.price-title{
	color: #b417b4 !important;
}
.total-pl{
	text-align: right;
	color:gray;
}
.total-pl-out{
	border:1px solid gray;
	background-color: rgb(255, 245, 155);
	margin-right: 1px;
	margin-left:1px;
}
.winner-tbl{
	border: 1px solid #38393b;
	margin-right: 1px;
	margin-left:1px;
	color:#7c7b7b;
}
.my-perf{
	background-color:#fff;
}

.my-perf span{
	margin-left:10px;
	font-size: 1.4em;
	color:blueviolet;
	background-color:#fff;
	
}
@media (max-width: 1024px){
.container-left{
	display:none;
}

}
@media (min-width: 1020px){
.container-down{
	display:none;
}

}

.flowtype{
	color:#fff;
	font-size: 0.8em;
}
.pref{
	padding-bottom:20px;
}
.pref h3{
	color:rgb(237, 238, 241);
	margin-top:20px;
}
.pref legend{
	color: rgb(44 43 47);
	font-size:1.0em;
	margin-top:20px;
	margin-bottom: 10px;
	font-weight: bold;
}
.logout-panel{
	font-size:1.0em;
	white-space:nowrap;
}
.logout-panel a{
	white-space:nowrap;
	color:#fff;
}



.dropdown {
  display: inline-block;
  position: relative;
  color:#fff;
  
}
.dropdown span{
	font-size:1em;
	padding-left:5px;
}
.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  overflow: auto;
  background-color:#fff;
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
}
.dropdown:hover .dropdown-content {
  display: block;
    background-color:#fff;
    text-align: left;
}
.dropdown-content a {
  display: block;
  color: #000000;
  padding: 10px;
  text-decoration: none;
  font-size:0.8em;
  
}
.dropdown-content span{
	font-size: 1.2em;
	padding-left: 15px;
	padding-top:0px;
}
.dropdown-content a:hover {
  color: #FFFFFF;
  background-color: #b417b4;
}

.save-button{
	margin: 10% 50%;
	padding: 5px 50px;
}
.message{

 background-color: yellow;
 border: 2px solid gray;
 color:#000;
 font-size: 14px;
}
.edit_pref{
	margin-left:20px;
	text-decoration: none;
	color:rgb(193, 195, 195);
}
.pref-val{
	background-color: rgb(254, 255, 255);
	border: 1px solid gray;
	color:#000;
	padding:5px;
	font-size: 12px;
	border-radius: 4px;
}
.order-box{
	border:2px solid #223a66;
	padding:10px;
	width:200px;
	margin:10px 0px;
}
.order-form-group{
	width:200px;
}
.order-form-txt{
	width:180px;
}
/*.pref-container{
	color:#fff;
}
.pref-container label{
	color:#fff;
}
.pref-container legend{
	color:rgb(101, 102, 102);
}*/
.edit-pref{
	text-decoration:none;
	text-align: right;
	display:inline-flex;
	font-size:12px;
}
.edit-pref span span{
	font-size:20px;
}
.edit-icon{
	font-size: 24px;
		color:rgb(193, 195, 195);
	
	
}
.pref-action{
	text-align: right;
}
.edit-title{
	color:dimgray;
}
.pref-legend{
	color: rgb(44 43 47);
	font-weight: 400;
}
#agreesive_panel{
	font-size: 0.8em;
}
.row label{
	font-weight: bold;
}
.oco-val{
	margin-top:10px;
}
.warning-text{
	padding: 5px 5px;
	background-color:yellow;
	color:red;
	font-size:1.0em;
	border: 2px solid gray;
	margin:10px 0px;
	
}
.warning-text span{
	font-size:20px;
	padding-top:10px;
	margin-top:10px;
}

.sub-flow{
	margin-top:40px;
	margin-left:0px;
	background-color:#fff;
	
}
.sub-flow tr td{
	background-color:#fff;
	color:#000;
}
#panel_entry_type label{
	padding-left: 10px;
}
.invalid-entry{
	color:red;
	font-size:1em;
	
}
.invalid-entry-input{
	background-color: rgb(250 210 188);
	}
.success{
	border: 1px solid gray;
	border-radius: 4px;
	color:darkgreen;
	margin:20px;
	padding:20px;
}
.info{
	border: 1px solid gray;
	border-radius: 4px;
	color: black;
	margin:20px;
	padding:20px;
}
.error{
	border: 1px solid gray;
	border-radius: 4px;
	color:red;
	margin:20px;
	padding:20px;
}
#timezone{
	background-color:#fff;
	color:#000;
}
.favorite{
	font-size:0.6em;
	display:block;
}
.un-favorite:hover{
	font-size: 0.6em;
	display:block !important;
	color:purple;
}
.flatten{
	color:#fff;
	font-size: 1em;
}
.faq{
	margin:10px 0px;
}
.faq h6{
	color:#000
}
.faq h3{
	color:darkgray;
	font-size: 14px;
}
.faq p{
	color:#2d2d2d;
	margin: 15px 15px;
	font-size: 14px;
}
.faq a{
	text-decoration: none;
}
.symbol_list{
	margin-right: 10px;
	
	color:rgb(58, 57, 57);
	background-color: rgb(241, 241, 154);
	border: #434852;
	padding: 5px;
	text-decoration: none;
	
	border-radius: 2px;
}
.symbol_list_tbl{
	margin-top: 10px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
	margin-bottom: 4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
	bottom: 3rem;
	z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
	height: 32rem;
  }
  .carousel-item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 32rem;
  }
  
  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 {
	margin-bottom: 1.5rem;
	text-align: center;
  }
  .marketing h2 {
	font-weight: 400;
  }
  /* rtl:begin:ignore */
  .marketing .col-lg-4 p {
	margin-right: .75rem;
	margin-left: .75rem;
  }
  /* rtl:end:ignore */
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider {
	margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }
  
  /* Thin out the marketing headings */
  .featurette-heading {
	font-weight: 300;
	line-height: 1;
	/* rtl:remove */
	letter-spacing: -.05rem;
  }
  
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 40em) {
	/* Bump up size of carousel content */
	.carousel-caption p {
	  margin-bottom: 1.25rem;
	  font-size: 1.25rem;
	  line-height: 1.4;
	}
  
	.featurette-heading {
	  font-size: 50px;
	}
  }
  
  @media (min-width: 62em) {
	.featurette-heading {
	  margin-top: 7rem;
	}
  }
  .broker h3 p{
	color:#5a4c4c;
  }
  #alert_logs{
	color:yellow;
	font-size: 16px;
	cursor:pointer;
  }
  
/* Variables for easy theme management */
:root {
    --chart-bg: #1a1a1a;
    --border-color: #333;
    --text-main: #eee;
    --color-bull: #90ee90;
    --color-bear: #ff6384;
    --color-straddle: #ffff00;
    --color-unwind: #007bff;
}

.chart-wrapper {
    position: relative;
    min-height: 300px;
    width: 100%;
}

/* Loader Overlay */
.chart-overlay {
    display: none; /* Hidden by default, toggled via JS */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dims chart while loading */
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loader-text {
    color: var(--text-main);
    margin-top: 15px;
    font-family: sans-serif;
    font-weight: 500;
}

/* Spinner Animation */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--color-unwind);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Main Chart Area */
.chart-container {
    height: 600px;
    width: 100%;
	border: 1px solid #3f3c3c;

}

/* Legend Styling */
.chart-legend-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px;
    background: var(--chart-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-box {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid;
}

.legend-label {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 500;
}
:root {
    --color-bull: #90ee90;
    --color-bear: #ff6384;
    --color-straddle: #ffff00;
    --color-call-unwind: #ffcccc; /* Light Red */
    --color-put-unwind: #ccffcc;  /* Light Green */
}

.call-unwind { 
    background: rgba(255, 204, 204, 0.5); 
    border-color: #ffb3b3; 
}

.put-unwind { 
    background: rgba(204, 255, 204, 0.5); 
    border-color: #b3ffb3; 
}

/* Color Classes */
.bull { background: rgba(144, 238, 144, 0.4); border-color: var(--color-bull); }
.bear { background: rgba(255, 99, 132, 0.4); border-color: var(--color-bear); }
.straddle { background: rgba(255, 255, 0, 0.4); border-color: var(--color-straddle); }
.unwinding { background: rgba(0, 123, 255, 0.4); border-color: var(--color-unwind); }

/* Maintainable labels for your new logic */
.status-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.status-holding {
    background: rgba(144, 238, 144, 0.1);
    color: #90ee90;
    border: 1px solid #90ee90;
}

.status-exit {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    border: 1px solid #007bff;
}
#news-container{
	background-color: #000000 !important;
	border: 1px solid #3f3c3c;
	display: none;
 
}
#datepicker{
	background-color: #dee2e6;
}
.etf_symbol{
	cursor: pointer;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: right;
}
.inactive{
	color: gray;
	cursor: not-allowed;
}
#chart-loader {
	height: 100px;
	width: 400px;
	margin-left: 40%;
  
	/* Glassmorphism Effect */
	background: rgba(255, 255, 255, 0.15); /* Translucent white */
	backdrop-filter: blur(10px);            /* The "frosted" blur effect */
	-webkit-backdrop-filter: blur(10px);    /* Safari support */
	
	/* Optional but recommended for the look */
	border: 1px solid rgba(255, 255, 255, 0.2); 
	border-radius: 12px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }