:root {
  --bg-color: #fff;
  --text-color: #000;
  --header-bg: #f4f8ff;
  --sidebar-bg: #ddd;
   --white:#2d2d2d;
  --border-color:#dadada;
  --blur-bg:#8ca1db1c;
}

[data-theme="dark"] {
  --bg-color: #131722;
  --text-color: #ffffff;
  --header-bg: #1e1e1e;
  --sidebar-bg: #333;
  --white:#fff;
  --border-color:#48484870;
  --blur-bg:#8ca1db1c;
  --table-head-bg:#212737;
}

[data-theme="light"] {
  --bg-color: #fff;
  --text-color: #000;
  --header-bg: #f4f8ff;
  --sidebar-bg: #ddd;
  --white:#2d2d2d;
  --border-color:#dadada;
  --blur-bg:#8ca1db1c;
  --table-head-bg:#f2f5fb;
}

#sun-icon,
#moon-icon {
    transition: opacity 0.3s ease;
    display: none; /* Initially hidden */
}


body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
.headerr .toggle-btns{
  display:flex;
  column-gap: 5px;
}
.headerr .toggle-btns button i{
  padding:0.2rem 0.38rem;
  --color1: var();
  --color1: var(--white);
  color:var(--color1);
  border-radius:5px
}
.theme-toggle{
  background:transparent;
  border:none;
}
.theme-toggle:hover{
  background:none;
}
.theme-toggle img#sun-icon {
  
}
.theme-toggle img#moon-icon{
   filter: invert(1) saturate(9.5);
}

.headerr, .left-sidebar, .right-sidebar, .right-sidebar1, .chart, .bot-content {
  /* background-color: var(--header-bg); */
}

.chart-grid, .bot-head {
  /* background-color: var(--sidebar-bg); */
}
.mychartstab{
  display: flex;
  position: absolute;
  border: 0 !important;
  bottom: 0;
  left: 164px;
  column-gap: 0px;
  align-content: flex-end;
}
.mychartstab .nav-link:focus, .nav-link:hover{
  background-color: var(--bg-color);
  border-radius:0px;
}
.mychartstab button{
  border-radius: 0 !important;
  text-transform: uppercase !important;
  padding: 8px 9px !important;
  --tv-toolbar-explicit-hover-border-radius: 4px;
  all: unset;
  align-items: center;
  color: var(--f);
  cursor: default;
  display: flex;
  flex: 1 0 auto;
  height: 100%;
  position: relative;
  transition: background-color .35s ease, color 60ms ease;
  z-index: 0;
  border: 1px solid var(--border-color) !important;
  font-size: smaller;
}


.tab-content {
  flex-grow: 1; /* Make the tab content fill the remaining space */
  display: flex;
  flex-direction: column;
}

.tab-pane {
  display: none; /* Hide non-active tabs */
  height: 100%;
}

.tab-pane.active {
  display: block; /* Show active tab */
  height: 100%;
}

.tab-pane .table th{
  background: var(--table-head-bg);{
  --table-head-bg}
}
.tab-pane .table tr:hover td{
  background:#8ca1db1c;  
}
.tab-pane iframe {
  width: 100%;
  height: 89.9vh; /* Make the iframe fill the height of the tab-pane */
  border: none; /* Remove iframe borders */
}

.chart-container {
  display: grid;
  grid-template-areas:
  "header header"  
  "chart chart"
  "footer footer";
  grid-template-columns: 1fr ;
  grid-template-rows: 50px 1fr 50px;
  height: 100vh;
   transition: all 0.5s ease;
}

.chart-container1 {
  display: grid;
  grid-template-areas:
    "header header"
    "chart right-sidebar1"
    "footer footer";
  grid-template-columns: 1fr auto; /* Adjust columns for the right sidebar */
  grid-template-rows: auto 1fr 50px; /* Let header and footer adjust while chart fills the rest */
  height: 100vh;
  gap: 0;
  padding: 0;
  overflow: hidden; /* Prevents container overflow */
}

  
  .chart-container1 .right-sidebar1{
    display: none;
  }


  .headerr {
    grid-area: header;
    padding: 0;
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid #ddd; */
    justify-content: space-between;
  }
  
  .left-sidebar {
    grid-area: left-sidebar;
   background-color: var(--white-bg);;
    display: flex;
    flex-direction: column;
    border-right: 1px solid  var(--border-color);
    padding: 10px;
  }
 
  .right-sidebar {
    grid-area: right-sidebar;
    /* background-color: var(--white-bg); */
    display: block;
    flex-direction: column;
    border-left: 0px solid  var(--border-color);
    border-top: 1px solid  var(--border-color);
    padding: 0;
  }
  .right-sidebar1 {
    grid-area: right-sidebar1;
    background-color: var(--white-bg);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 10px;
    min-width: 350px;
    overflow: auto;
  }
  
  
  .chart {
    grid-area: chart;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevents overflow inside the chart area */
    height: 100%; /* Ensures it fills the available grid space */
    border-left: 1px solid  var(--border-color);
    /* height: 100%;
    grid-area: chart;
    
    background-color: var(--white-bg);
    display: flex;
    flex-direction: column; */
    /* border-right: 1px solid #ddd; */
    /* padding: 0 5px 5px 0; */
  }
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  
  .chart-grid {
    flex-grow: 1;
    background-color: var(--white-bg);
    border: 1px solid  var(--border-color);
    /* This is where you would render the actual chart in a canvas or SVG */
    position: relative;
  }
  
  .bot-content {
    grid-area: footer;
    background-color: var(--white-bg);
    padding: 0px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid  var(--border-color);
    border-right: 1px solid  var(--border-color);
  }

   .bot-head span button {
    background: #f4f8ff;
    border: none;
    padding: 0.3rem;
    height: 40px;
    width: 40px;
    border-radius: 0.5rem;
    position: absolute;
    left: 85px;
    top: 4px;
}
        .bot-content {
    grid-area: footer;
    background-color: var(--bg-color);
    /* padding: 10px; */
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--border-color);
    width: 100%;
    position: fixed !important;
    bottom: 0px !important;
    /* border-right: 1px solid #ddd; */
}
        .footter
        {
            color:red !important;
            font-size:12pt;
            font-weight:bolder;
            text-align:right;
        }
        .search_form {
            padding: 0.8rem 0 0 0rem;
            display: flex;
            column-gap: 15px;
        }
        .prevent-select {
            -webkit-user-select: none; /* Safari */
            -ms-user-select: none; /* IE 10 and IE 11 */
            user-select: none; /* Standard syntax */
        }

        .allpositions {
            font-size: 10px;
            font-weight: 600;
        }

        .serverDetails {
            font-size: 6pt;
            color: blue;
        }

        .allpositions .modal-dialog {
            max-width: 50%;
        }

        thead th {
            position: sticky;
            top: 0;
            text-wrap: nowrap;
            z-index: 9;
            background: #2196F3;
        }

        .inimg {
            width: 12px !important;
            height: 12px !important;
            cursor: pointer;
        }

        .pointer {
            cursor: pointer;
        }

        .group-click-s {
            text-decoration: underline;
            cursor: pointer;
        } 

        .bluedata, .green-current-price {
            color: blue !important;
            font-weight: bold !important;
        }

        .reddata, .red-current-price {
            color: red !important;
        }

        .navigator span {
            font-size: 8pt !important;
    font-weight: 600;
    font-family: system-ui;
        }
        #marketwatch select{
            background: var(--bg-color);
            color: var(--font-color);
            border: 1px solid var(--border-color);
        }

        #trade input, select {
            width: -webkit-fill-available !important;
            height: 28px !important;
            font-size: 0.7rem !important;
            padding: 0 5px !important;
            font-family: system-ui;
        }

        .arrow-down {
            border: solid #868686 !important;
            border-width: 0 2px 2px 0 !important;
            display: inline-block !important;
            padding: 3px !important;
            margin-right: 5px !important;
            margin-left: 5px !important;
            transform: rotate(45deg) !important;
            -webkit-transform: rotate(45deg) !important;
        }

        .balance5 {
    background: var(--bg-color);
    font-size: 11px;
    color: var(--font-color);
    font-weight: bold;
    padding: 3px;
    font-family: system-ui;
    border: 1px solid var(--border-color);
}

.bluedata, .green-current-price {
    color: #0a7dff !important;
    font-weight: bold !important;
}

.reddata, .red-current-price {
    color: #F44336 !important;
}

.market nav .table > tbody tr td {
    font-weight: 500 !important;

}

.market nav tbody, td, tfoot, th, thead, tr {
    border-color: var(--border-color);
    border-style: solid;
    border-width: 0px;
}

@media screen and (min-width:240px) {
     
}

@media screen and (min-width:1200px) {
    
}

@media screen and (min-width:1600px) {
    
}

  /* button {
    padding: 10px;
    background-color: #daecff;
    color: #fff;
    border: none;
    cursor: pointer;
    margin: 5px 0;
  }  */
.bot-head{
    display: flex !important;
    padding: 0.3rem;
    align-items: center;
    height: -webkit-fill-available;
    align-content: center;
}
.bot-head span{
    /* display: flex; */
    gap: 6px;
    /* width: 100%; */
    padding: 5px;
    align-items: center;
    align-content: center;
    justify-content: space-around;
  }
 .bot-head span a{
 border: 0.5px solid  var(--border-color);
 padding: 0.3rem 1rem;
 border-radius: 1rem;
 display: none;
 font-size: 0.8rem;
 margin-left: 0.5rem;
 } 
.bot-head span p{
    
margin: 0;
    
font-size: 1rem;
    
font-weight: 700;
  }
.bot-head span button svg{
  stroke:var(--text-color);
  fill: var(--text-color);
}
  .bot-head span button{
    position: unset;
    background: var(--blur-bg);
    border: none;
    padding: 0.1rem;
    height: 30px;
    width: 30px;
    border-radius: 0.5rem;
  }
  
  button:hover {
    background-color: #0056b3;
  } */
  .full-chart{
    position: absolute;
    width: 100%;
    height: 100vh;
    bottom: 0;
    top: 0;
  }
  .full-chart iframe{
    height: inherit !important;
    width: 100% !important;
  }
@media (max-width: 768px) {
.right-sidebar1 {
    grid-area: right-sidebar1;
    background-color: var(--white-bg);
    display: flex;
    position: absolute !important;!i;!;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 10px;
    min-width: 100%;
    overflow: auto;
    background: var(--bg-color);
    height: 100%;
    top: 60px;
  }
  
  
  .chart-container1 {
  display: grid;
  grid-template-areas:
      "header"
      "chart"
      "right-sidebar1"
      "footer";
    grid-template-columns: 1fr; /* Stack everything in a single column */
grid-template-rows:60px 1fr auto; /* Let header and footer adjust while chart fills the rest */
  height: 100vh;
  gap: 0;
  padding: 0;
  overflow: hidden; /* Prevents container overflow */
}


  .mychartstab{
  display: flex;
  position: relative;
  border: 0 !important;
  top: 0px;
  left: 0;
  bottom: auto;
  column-gap: 0px;
  align-content: center;
}
  
}