:root {
  --blue: #1e90ff;
  --antiblue: #e17f00;
  --portfolio-bg-color: rgb(255, 255, 255);
  --portfolio-table-row: #F2F2F2;
  --portfolio-table-row-active: #ddd;
  --negative: #F44336;
  --positive: #4CAF50;
  --mainbg : #232323;
  --white : #fff;
  --welome : #a8a8a8;
  --label : #6c757d;
  --sellbg : #F2DEDE;
  --sellfg : #ff0000;
  --buybg : #DBE3EF;
  --buyfg : #0063f5;
  --btnOKfg : rgba(0, 102, 153, 1);
  --btnOKbg : rgba(0, 102, 153, 0.12);
  --btnOKShadow : rgba(0, 102, 153, 0.25);
  --btnNOfg : rgba(255, 0, 0, 1);
  --btnNobg : rgba(255, 0, 0, 0.12);
  --btnNOShadow : rgba(255, 0, 0, 0.25);
  --dark-gray : #000;
  --red : #f00;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: URL('../fonts/Poppins-SemiBold.ttf') format('truetype');
}

#app{
  overflow-x: hidden;
  background: var(--white);
}

.appHandle {
  height: 90vh;
  overflow-y: scroll;
  background: var(--mainbg);
}

.portfolio-footer-spacer {
  height: 80px;
  width: 100%;
  background: var(--white);
}

/* HEADERSM START*/

.header {
    position: fixed;
    z-index: 99;
    min-height: 60px;
    height: 9vh;
}

.header-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: var(--mainbg);
}

.left-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.text-container {
  display: flex;
  flex-direction: column;
}

.welcome-text {
  /* font-size: 0.9rem; */
  color: var(--welome);
}

.username {
  font-size: 14px;
  font-weight: 600;
  color: var(--welome);
}

.right-container {
  display: flex;
  gap: 1rem;
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border:0.5px solid #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #232323;
  color: #fff;
  font-size: 16px;
}

.icon-btn svg{
  width: 24px;
  height: 24px;
}

/* HEADERSM ENDS*/

/* CURRENTPFSM ENDS*/
.overview-card-div{
  position: absolute;
  top: 9vh;
  left: 0;
  right: 0;
  max-height: 30vh;
  padding: 0px 20px;
}

.overview-card-table{
  border-radius: 12px;
  color: white;
  background: #49484E;
  padding: 5px 0px;

}
.negative {
  color: var(--negative);
}
.positive {
  color: var(--positive);
}

.overview-card-table tr,.overview-card-table td,.overview-card-table th{
  border: none !important;
}
.portfolio_heading{
  font-size: 16px;
  font-weight: 600;
}

.smfirstRow{
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: start;
}

.leftrow{
  text-align: start;
  padding-left: 20px;
}

/* CURRENTPFSM ENDS*/

/* PORTFOLIOSM START */
.portfolio-table-div{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65vh;
  margin-top: 20px;
  border-radius: 16px 16px 0px 0px;
  padding: 0px 20px;
  background: var(--portfolio-bg-color);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none; 
}

.portfolio-table-div::-webkit-scrollbar  {
  display: none ;
}
.portfolio-table-div.more {

}
.portfolio-table-div table {
  border-collapse: separate;
  border-spacing: 0 10px;
  width: 100%;
  table-layout: fixed;
}

.portfolio-table-div thead tr{
  border: 2px solid var(--portfolio-bg-color);
}

.portfolio-table-div thead th{
  width: 100%;
  position: sticky;
  top: 10px;
  background-color: var(--portfolio-bg-color);
  z-index: 10;
}

.portfolio-table-div thead .top10{
    top: 36px !important;
}

.portfolio-table-div tbody {
  transition: height 0.3s ease-in-out;

}
.portfolio-table-div td{
  background-color: var(--portfolio-table-row);
}

/* SHEET HANDLE */
#sheet-handle {
  width: 80px;
  height: 8px;
  background: #ccccccc5;
  margin: 2px auto;
  border-radius: 4px;
  cursor: pointer;
}

.sm-stock-ctx
{
  max-height: 0;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  position: relative;
}

.ctx-row-sm-cus{
  width: max-content;
  border: 0.5px solid #9b9b9b;
  border-radius: 10px;
  padding: 6px 10px;
  display: inline-block;
  position: absolute;
  top: 20%;
  left: 20%;
}

.ctx-active{
  height: auto;
}

.ctx-active .sm-stock-ctx{
  min-height: 30px;
}

.portfolio-table-div tr td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.portfolio-table-div tr td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
/* PORTFOLIOSM END */

/* NAVBAR START */

.bottom-nav {
  height: 9vh;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  z-index: 99;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.3s;
}

.nav-item.active,
.nav-item.active .icon,
.nav-item.active .nav-text {
  color: darkblue;
}

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  margin-bottom: 4px;
}

/* NAVBAR END */

/* OVERLAYSM START */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  justify-content: center;
  align-items: flex-end;
}

.overlay-bottom-sheet{
  width: 100%;
  background: white;
  padding: 20px;
  border-radius: 16px 0px 0 0;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  transition: transform 1s ease-in;
  position: relative;
  /*left: 8px;*/
}

.overlay.show {
  display: flex !important;
  z-index: 100;
}

.overlay-bottom-sheet.show {
  z-index: 1000;
  transform: translateY(0);
  max-height: 70%;
  overflow-y: scroll;
  -ms-overflow-style: none;
scrollbar-width: none;  
}

.overlay-bottom-sheet.show::-webkit-scrollbar  {
  display: none ;
}

.sm-modal-close{
  position: absolute;
  top: 0px;
  right: 0px;
  /*transform: translateX(-50%);*/
  background: #d1d1d6;
  /*border: 2px solid #ccc;*/
  border-radius: 0px 0px 5px 5px;
  border-bottom: none;
  width: 48px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /*box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);*/
  z-index: 10;
  font-size: 0.75em;
  /* box-shadow: 0 1px 3px var(--mainbg); */
}
/* OVERLAYSM END */

.stock-frame-ctx {
  position: relative;
  top: -5px;
  /*left: 6px;
  top: 76.93px;*/
  width: 100%;
  border-radius: 0px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-items: start;
  justify-content: start;
  column-gap: 9px;
  padding: 0 5px;
  /*
  font-size: larger;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  flex-grow: 1;
  */
}

.stock-ctx-blank, .stock-ctx-buy, .stock-ctx-sell {
  position: relative;
  width: 40%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
  column-gap: 10px;

  padding: 3px 6px;
  /*
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  flex-grow: 1;
  align-self: stretch;
  */
}

.stock-ctx-buy {
  background: var(--buybg);
  color: var(--buyfg);
}

.stock-ctx-sell {
  background: var(--sellbg);
  color: var(--sellfg);
}

.stock-toolbox-ctx {
  flex: auto;
  position: relative;
}

.xs-icon {
  color:var(--btnOKfg);
}

.xs-icon-red {
  color:var(--btnNOfg);
}

.alot {
  margin: 0 0 0 15px;
  opacity: 0.5;
  font-size: smaller;
  padding: 1px 0;
}

.ctx-menu {
  left: -110px;
  border-radius: 10px;
}

.linepad {
  padding:8px 0;
}

.leftpad, .sidepad {
  padding-left:8px;
}


.rightpad,.sidepad {
  padding-right:8px;
}

.righttwopad,.sidetwopad {
  padding-right:16px;
}

.toggle-switch {
    width: 40px;
    height: 20px;
    border-radius: 15px;
}

.toggle-switch::after {
    content: '';
    width: 16px;
    height: 16px;
}

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

.xsfullwide {
  width: 100%;
}

.xshalf {
  width: 50%;
}

.xsqtr {
  width: 25%;
}

.xstwothird {
  width: 66.6666%;
}

.xsthird {
  width: 33.3333%;
}

.xsthird_2 {
  width: 16.6666%;
}

.xsthird_2_rest {
  width:  83.3333%;
}

.xssubtext {
  font-size: smaller;
  color: var(--btnOKfg);
}

.xsdivider {
  height: 4px;
  margin: 16px 16px;
}


.xsspacer {
  height: 2px;
  background: #889388;
  margin: 16px 16px;
}

.xsspacer_2 {
  height: 1px;
  background: #889388;
  margin: 8px 32px;
}

.xsline {
  height: 1px;
  background: #889388;
}

.xshero {
  font-size: 110%;
  font-style: italic;
}

.smsearch-box {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' class='bi bi-search' viewBox='-2 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat left;
  opacity: 0.7;
  border-radius: 7px;
  padding: 8px 104px 8px 28px;
  font-size: 16px;
}

.smsearch-box:hover {
  opacity: 1;
}


.smsearch-btn {
  position: relative;
  top: -42px;
  float: right;
  padding: 8px;
  margin: 2px;
  background: var(--btnOKfg);
  color: #fff;
}

.smfixoverlay {
  height: 70%;
}

.sm-wlist-row {
  background: var(--portfolio-table-row);
  margin: 6px 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--mainbg);
  /*border: 1px solid var(--portfolio-table-row);*/
}

.sm-wlist-row.active {
  background: var(--portfolio-table-row-active);
  box-shadow: 0 1px 3px var(--dark-gray);
/*  border: 1px solid var(--dark-gray);*/
}  

.sm-wlist-row.thead {
  box-shadow: -10px 0 var(--portfolio-bg-color), 10px 0 var(--portfolio-bg-color), 0 -10px 0 10px var(--portfolio-bg-color);
}

.sm-wlist-row.hi {
  box-shadow: 0 1px 3px var(--blue);
  color: var(--blue);
}

.sm-wlist-row.lo {
  box-shadow: 0 1px 3px var(--antiblue);
  color: var(--antiblue);
}
.sm-label {
  color: var(--label);
}

.sm-tiniest {
  font-size: 8px;
}

.xs-wlbox {
  border: 1px dotted var(--btnOKfg);  
}

.adjhldimg {
  height: 24px;
}
.smtradecontrol {
  width: 20px;
  font-size: 1.4em;
}

.smtradedata {
  line-height: 2.2;
}

.dotted:before {
  content: '\2022';
  padding: 0 6px 0 0;
  /*color: var(--portfolio-table-row-active);*/
}

.fntlarger {
  font-size: larger;
}

.fntlarge {
  font-size: large;
}


.sidemenu {
  background: var(--white);
  height: 100%;
  display: grid;
  position: absolute;
  width: 80%;
  border-radius: 0 16px 16px 0;
  z-index: 999;
  top: 0;
  left: 0;
}

.sidemenu .ctrclose {
  top: 40px;
  right: -14px;
  border-radius: 50%;
  width: 33px;
  height: 33px;
}

.bottomborder {
  border-bottom: 1px solid var(--portfolio-table-row-active);
}
.side-user-image, .side-user-image img {
  width: 50px;
  height: 50px;
  margin: 2px 0 0 0;
  border-radius: 50%;
}

.side-user-image {
  display: contents;
}


.side-user-name {
  color: #0f0f0f;
  font-size: larger;
}

.side-menu-pad {
  padding: 16px 0 0 40px;
  color: var(--label);
}

.side-menu-pad a {
  font-size: 1.2em;
  padding: 8px 0;
  text-decoration: none;  
}

.side-menu-pad a i {
  padding-right: 12px;
  width: 24px;
  text-align: center;
}

.side-mid-image {
  width: fit-content;
  margin: auto;
}

.side-logout-box {
  width: fit-content;
  margin: auto;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 8px 32px;
  border-radius: 40px;
  font-size: larger;
}

.side-container {
  align-content: center;
}

a.nounderline {text-decoration: none; }


.sidemenu-txt {
  background: red;
}

.relative{
  position: relative;
}

  /* Search Class */
  .search-field {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='white'%3E%3Cpath d='M22.5459 20.3092L18.9764 16.7388C20.1281 15.2669 20.753 13.4492 20.7507 11.578C20.7507 9.91154 20.2581 8.2825 19.3352 6.89689C18.4123 5.51128 17.1006 4.43133 15.5658 3.7936C14.0311 3.15587 12.3424 2.98901 10.7132 3.31412C9.08392 3.63923 7.58737 4.44171 6.41276 5.62008C5.23814 6.79844 4.43822 8.29977 4.11415 9.93421C3.79007 11.5687 3.9564 13.2628 4.59209 14.8024C5.22779 16.342 6.3043 17.6579 7.6855 18.5838C9.0667 19.5096 10.6906 20.0038 12.3517 20.0038C14.217 20.0061 16.0288 19.3792 17.4961 18.2238L21.0551 21.8048C21.153 21.903 21.2692 21.9809 21.3971 22.034C21.525 22.0872 21.6621 22.1145 21.8005 22.1145C21.939 22.1145 22.076 22.0872 22.2039 22.034C22.3318 21.9809 22.448 21.903 22.5459 21.8048C22.6438 21.7066 22.7215 21.59 22.7744 21.4617C22.8274 21.3334 22.8547 21.1959 22.8547 21.057C22.8547 20.9181 22.8274 20.7806 22.7744 20.6523C22.7215 20.524 22.6438 20.4074 22.5459 20.3092ZM6.0525 11.578C6.0525 10.3282 6.42194 9.10637 7.11411 8.06717C7.80627 7.02796 8.79008 6.21799 9.94111 5.7397C11.0921 5.2614 12.3587 5.13626 13.5806 5.38009C14.8026 5.62392 15.925 6.22578 16.8059 7.10956C17.6869 7.99333 18.2868 9.11933 18.5299 10.3452C18.7729 11.571 18.6482 12.8416 18.1714 13.9963C17.6946 15.151 16.8873 16.1379 15.8514 16.8323C14.8155 17.5267 13.5976 17.8973 12.3517 17.8973C10.6811 17.8973 9.07883 17.2315 7.8975 16.0464C6.71616 14.8613 6.0525 13.254 6.0525 11.578Z'/%3E%3C/svg%3E");
    background-position: 5px  center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    border: none;
    cursor: pointer;
    height: 40px;
    margin: 3px 0;
    padding: 0 0 0 32px;
    position: relative;
    -webkit-transition: width 500ms ease, background 500ms ease;
    transition:         width 500ms ease, background 500ms ease;
    width:0px;
    cursor: pointer;
  }
  
  .search-field.nonblank, .search-field:focus {
    background-color: var(--dark-gray);
    border: 1px solid var(--welome);
    cursor: text;
    outline: 0;
    width: 160px;
    color: var(--welome);
    margin: 0 0 0 -110px;
    border-radius: 10px;
  }

.search-field.nonblank {
    color: var(--white);  
}