*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  transition: all 0.1s ease !important;
}

@font-face {
  font-family: 'IRANSans';
  src: url('/fonts/IRANSansX-Regular.woff2') format('woff2'),
       url('/fonts/IRANSansX-Regular.woff') format('woff'),
       url('/fonts/IRANSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'IRANSans';
  src: url('/fonts/IRANSansX-Bold.woff2') format('woff2'),
       url('/fonts/IRANSansX-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

	:root {
		
		/*=========FONT SIZE SECTION==============*/
		--font-one: 26px;
		--font-two: 24px;
		--font-three: 18px;
		--font-four: 12px;
		
		
		/*=========COLORS SECTION==============*/
		--color-one: rgba(12, 18, 25,1); /*Background Deepest black*/
		--color-two: rgba(43, 53, 64,1); /*Border, header, hover*/
		--color-three: rgba(148, 159, 168,1); /* Normal Text*/
		--color-four: rgba(18, 28, 38,1); /* Small Blocks BackGround*/
		--color-five: rgba(32, 41, 51,1); /* Dark Botton Background*/
		--color-six: rgba(0,255,167,1); /*Light Green*/
		--color-six-semi: rgba(0,255,167,0.5); /*Light Green*/
		--color-six-quarter: rgba(0,255,167,0.25); /*Light Green*/
		--color-six-zero: rgba(0,255,167,0); /*Light Green*/
		--color-seven: rgba(11,42,39,1);/* Dark Green*/
		--color-seven-semi: rgba(11,42,39,0.5);/* Dark Green*/
		--color-eight: rgba(0,186,70,1); /* medium Green*/
		--color-nine: rgba(243,128,124,1); /* red*/
		--color-nine-semi: rgba(243,128,124,0.5); /* red*/
		--color-nine-zero: rgba(243,128,124,0); /* red*/
		--color-ten: rgba(230,230,230,1); /* white*/
		--color-eleven: rgba(169,87,87,1); /* Dark red*/
		--color-tweleve: rgba(255,255,255,1); /* white*/
		--color-thirteen: rgba(33, 64, 120, 1); /* blue*/
		--color-thirteen-semi: rgba(33, 64, 120, 0.5); /* blue*/
		--color-thirteen-quarter: rgba(33, 64, 120, 0.25); /* blue*/
		--color-fourteen: rgba(255, 212, 59, 1); /* Yellow*/
		--color-fourteen-semi: rgba(255, 212, 59, 0.5); /* Yellow*/
		--color-fifteen: rgba(12, 18, 25,1); /* CONTSTANT BLACK*/
		--color-sixteen: rgba(230,230,230,1); /* CONTSTANT WHITE*/
		
		
		
		
	}

/* for Light Theme */
	[data-theme="light"] {
		--color-one: rgba(230,230,230,1); /* Light Background */
		--color-two: rgb(210, 210, 210); /* Border, header, hover */
		--color-three: rgb(50, 50, 50); /* Normal Text */
		--color-four: rgb(240, 240, 240,1); /* Small Blocks Background */
		--color-five: rgb(210, 210, 210,1); /* Light Button Background */
		--color-six: rgb(0, 150, 100,1); /* Darker Green */
		--color-six-semi: rgb(0, 150, 100,0.5); /* Darker Green */
		--color-six-quarter: rgb(0, 150, 100,0.25); /* Darker Green */
		--color-six-zero: rgb(0, 150, 100,0); /* Darker Green */
		--color-seven: rgb(200, 255, 220,1); /* Light Green Background */
		--color-eight: rgb(0, 200, 100,1); /* Medium Green */
		--color-nine: rgb(200, 60, 60,1); /* Red */
		--color-nine-semi: rgb(200, 60, 60,0.5); /* Red */
		--color-nine-zero: rgb(200, 60, 60,0); /* Red */
		--color-ten: rgb(30, 30, 30,1); /* Almost Black (for text) */
		--color-eleven: rgba(255,0,0,1); /* Dark Red */
		--color-tweleve: rgba(40,40,40,1); /* Pure White */
		--color-thirteen: rgba(86,141,255,1); /* blue*/
		--color-thirteen-semi: rgba(86,141,255,0.5); /* blue*/
		--color-thirteen-quarter: rgba(86,141,255,0.25); /* blue*/
		--color-fourteen: rgba(255, 200, 0, 1); /* Yellow*/
		--color-fourteen-semi: rgba(255, 200, 0, 0.5); /* Yellow*/
		--color-fifteen: rgba(12, 18, 25,1); /* CONTSTANT BLACK*/
		--color-sixteen: rgba(230,230,230,1); /* CONTSTANT WHITE*/
		
	}




    body {
      background: var(--color-one);
      margin: 0;
      padding: 0;
	  font-family: 'IRANSans', Tahoma, sans-serif;
    }

    /* Header */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--color-two);
      padding: 10px 15px;
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      z-index: 20;
    }

    .header img {
      height: 40px;
    }

    .menu-toggle {
      display: none;
      cursor: pointer;
      font-size: 18px;
      color: var(--color-six);
      background-color: var(--color-two);
      border: 1px solid var(--color-six);
      padding: 10px;
	  padding-right: 30px ;
	  padding-left : 30px ;
      border-radius: 5px;
    }

    /* Navbar */
    .navbar {
      background-color: var(--color-one);
      border: 1px solid var(--color-two);
      position: fixed;
      right: 0;
      top: 50px; /* Leaves space for the header */
      height: calc(100% - 50px);
      width: 250px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 10px 0;
      z-index: 10;
      overflow-y: auto;
      transition: transform 0.3s, width 0.3s, height 0.3s;
    }

    .navbar ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
    }

    .navbar ul li {
      width: 90%;
	}

    .navbar ul li a {
      display: block;
      padding: 10px 15px;
      text-decoration: none;
      color: var(--color-three);
      text-align: right;
    }

    .navbar ul li a:hover {
      color: var(--color-ten);
    }



    /* Full-screen mobile menu */
    .navbar.mobile {
      position: fixed;
      top: 0;
      right: 0;
      width: 100vw;
      height: 100vh;
      transform: translateX(0);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--color-four);
	  z-index : 21 ; 
    }

    .navbar ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .navbar ul li a {
      font-size: 1rem;
      padding: 3px 20px;
    }
	

	.navbar-close-btn {
		display: none; /* Hidden by default */
		position: absolute; /* Position it */
		top: 40px;
		left: 40px;
		z-index: 1000; /* Ensure it's above other elements */
		font-size: 40px;
		cursor: pointer;
		color: var(--color-three);
		background-color: transparent;
		border: none;
	}



    /* Main Content */
    .main-container {
      background-color: var(--color-one);
      margin-right: 250px;
       padding: 100px 20px 20px; /* Add top padding to prevent overlap with the header */
	   
    }

    /* Grid Layout */
	.grid-container1 {
      color : var(--color-tweleve);
	  display: grid;
      grid-template-columns: 1fr;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }

    .grid-container2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  
    }

    .grid-container3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }
.grid-container3_121 {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }

.grid-container3_114 {
      display: grid;
      grid-template-columns: 1fr 1fr 4fr;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }


	  .grid-container4 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }
	.grid-container5 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }
	  .grid-container6 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }
	  .size-20-20-20-auto
	  {
		grid-template-columns: 20% 20% 20% auto;
      }
	  .size-30-auto {
		grid-template-columns: 30% auto;
      }
	  .size-40-auto {
		grid-template-columns: 40% auto;
      }
	.size-60-auto {
		grid-template-columns: 60% auto;
    }
	.size-70-auto {
		grid-template-columns: 70% auto;
    }
	.size-15-70-auto
	  {
		grid-template-columns: 15% 70% auto;  
	  }
	
    .grid-item {
      background-color: var(--color-four);
      padding: 20px;
      border: 0px solid var(--color-two);
      border-radius: 10px;
      color: var(--color-tweleve);
    }
	
	/* This is the new wrapper for your first column */
.stacked-container {
  display: flex;
  flex-direction: column; /* This makes them stack vertically */
  gap: 10px;              /* Keeps the space between the two stacked items */
  width: 100%;            /* Fills the 1fr available space */
}
/* Ensure the items inside the stack share the height nicely */
.stacked-container .grid-item {
  width: 100%; /* Makes sure they don't shrink */
  box-sizing: border-box; /* Ensures padding doesn't break the width */
}
	
	 table {
            width: 100%;
            border-collapse: collapse;
			color : var(--color-three);
			font-size: 14px; /* Table font size */
			
			
        }
        td, th {
            padding: 5px;
            text-align: Right;
        }
		th{
			background : var(--color-two) ; 
			color : var(--color-ten) ; 
			cursor: pointer;
			position: sticky;
			top: 60px;
			z-index: 19;
		}
        tr {
            border-bottom: 1px solid var(--color-two); /* Horizontal border */
        }
        tr:last-child {
            border-bottom: none; /* Remove border for the last row */
        }
		tbody tr:hover {
			background-color: var(--color-two);
		}
	.numberInRtlTable{
		direction: ltr;
		text-align: right;
		unicode-bidi: isolate;
		font-variant-numeric: tabular-nums;
		}


.indicator-container {
    display: flex;
    width: 100%; /* Adjust the overall width */
    /* height: 50px; /* Adjust height of the rectangles */
    border: 2px solid var(--color-six); /* Border for the container */
    border-radius: 5px; /* Optional for rounded edges */

}

.indicator-rectangle {
    height: 100%;
	padding : 5px ; 

}

.text1{
	color : --color-tweleve ;
	font-size : 40px ;
	font-weight: bold;
}

.text2{
	color : var(--color-ten) ;
	font-size : 20px ;
}
.text3{
	color : var(--color-six) ;
	font-size : 30px ;
	font-weight : bold ;
}
.text4{
	color : var(--color-three) ;
	font-size : 15px ;
}
.text5{
	color : var(--color-six) ;
	font-size : 50px ;
	font-weight : bold ;
}

.textRed{
	color : var(--color-nine) ;
	font-size : 15px ;
}
.textGreen{
	color : var(--color-six) ;
	font-size : 15px ;
}

.button_down{
	background : var(--color-five) ;
	border-radius : 50px ;
	width : 220px ;
	padding : 10px ;
	padding-right : 20px ;
	position: absolute  ;
	right : 10px ;
	bottom: 30px;
	color : var(--color-six) ;
	border : 1px solid var(--color-seven);
}

.button_down:hover {
	background : var(--color-six) ;
	color : var(--color-one) ;
}
.icon2 {
	width: 20px ;
	margin-left: 20px ;
}
.userCard {
	background : rgba(0,0,0,0) ;
	border-radius : 0px ;
	border-bottom : 1px solid var(--color-two);
	width : 220px ;
	height : 200px ; 
	Margin : 25px ;
	padding : 10px ;
	color : var(--color-ten) ;
	text-align : center ; 
}
.tableChart {
	height : 20px; 
	width : 100px ;
}
.buttons {
	margin: 20px;
	
}
.button {
	display: inline-block;
	padding: 10px 20px;
	margin: 5px;
	font-size: 16px;
	background : var(--color-thirteen) ; 
	color: var(--color-sixteen);
	text-decoration: none;
	border-radius: 5px;
	border: none;
	cursor: pointer;
}
.button:hover {
	background-color: #0056b3;
}
.URLTableText {
	color : var(--color-ten) ; 
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}

.collapsible {
  background-color: var(--color-six-semi);
  color: var(--color-ten);
  cursor: pointer;
  padding: 18px;
/*  width: 100%; */
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius : 30px ; 
}

.active, .collapsible:hover {
  background-color: var(--color-six);
  color: var(--color-one);
  border-radius : 10px ; 
}

.collapsible:after {
  content: '\002B';
  color: --color-tweleve;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.indexNtItemRED{
	background: linear-gradient(45deg, var(--color-nine-semi), var(--color-nine-zero)) ; 
	background : var(--color-nine-semi);
	color : var(--color-sixteen) ; 
}
.indexNtItemGREEN{
	background: linear-gradient(45deg, var(--color-six-semi), var(--color-six-zero)) ; 
	background : var(--color-six-semi);
	color : var(--color-sixteen) ; 
	
}

.theme-btn {
    width: 60px;
    height: 30px;
    background: var(--color-four);
    border-radius: 15px;
    position: relative;
    border: none;
    cursor: pointer;
    outline: none;
    transition: background 0.3s ease-in-out;
    display: flex;
    align-items: center;
    padding: 3px;
}

.toggle-circle {
    width: 24px;
    height: 24px;
    background: var(--color-eight);
    border-radius: 50%;
    position: absolute;
    left: 4px;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.iconColor {
	stroke : var(--color-six) ; 
	width:30px;
	height:30px;
}

.responsive-table1 {
      display: flex;
      flex-direction: row;
      width: 100%;
      text-align: right;
	  
    }

    .responsive-table1 div {
      flex: 1; /* Equal width for all */
      padding: 10px;
      border: 0px solid #ccc;
    }
	
	
	
    .nt-chart-filter-wrapper {
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nt-chart-btn {
        background-color: #f4f4f8;
        border: 1px solid #bbb;
        padding: 6px 14px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: sans-serif;
        font-size: 14px;
        color: #333;
    }

    .nt-chart-btn:hover {
        background-color: #0066cc;
        color: #fff;
        border-color: #0066cc;
    }

    .nt-chart-btn:active {
        transform: scale(0.96);
    }
	
	
	
.nt-chart-tab-wrapper {
    display: inline-flex;
    border: 1px solid var(--color-three);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-one);
    
}

.nt-chart-tab-btn {
    padding: 8px 14px;
    border: none;
    background: var(--color-one);
    color: var(--color-three);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    outline: none;
    border-right: 1px solid var(--color-two);
}

.nt-chart-tab-btn:last-child {
    border-right: none;
}
/*
.nt-chart-tab-btn:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.nt-chart-tab-btn:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
*/

.nt-chart-tab-btn:hover {
    background-color: var(--color-two);
}




.nt-chart-tab-btn.active {
    background-color: var(--color-thirteen) ;
}


	
	

/* Light Mode Styles */
[data-theme="light"] .theme-btn {
    background: var(--color-eight);
}

[data-theme="light"] .toggle-circle {
    transform: translateX(30px);
    background: var(--color-seven);
}

/* Invert icons in Light Mode */
[data-theme="light"] img.invertible {
    filter: grayscale(100%) invert(1) brightness(80%);
}


.Li1{
	padding-right : 10px ; 
	border-right : 3px solid var(--color-six);
	background-color : var(--color-seven) ;
	background: linear-gradient(to left, var(--color-seven), var(--color-four));
}
button,
input,
select,
textarea {
    font-family: inherit;
}
  .watchlist-btn {
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      margin-left: 5px;
      transition: transform 0.1s ease;
  }
  .watchlist-btn:hover {
      transform: scale(1.2);
  }
  .watchlist-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.wl-tab {
    padding: 6px 12px;
    border: 2px solid var(--color-thirteen);
    background: var(--color-one);
    color : var(--color-three); 
	cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
	font-size : 15px ; 
	
}

.wl-tab:hover {
    background: var(--color-thirteen);
    color : var(--color-sixteen);
}

.wl-tab.active {
    background: var(--color-thirteen);
    color: white;
    font-weight: bold;
}
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

.modal-content {
    background: var(--color-one);
    margin: 10% auto;
    padding: 20px;
    width: 300px;
    border-radius: 10px;
	border : 1px solid var(--color-six-semi)  ; 
    text-align: center;
}
.wl-tab::before,
.wl-tab::after {
    content: none !important;
}
.add-tab {
    border-style: dashed;
    color: var(--color-ten);
    color: var(--color-ten);
    opacity: 0.8;
}

.add-tab:hover {
    background: var(--color-six);
    color: var(--color-one);
    opacity: 1;
}
/* === NEW: watchlist menu === */
.wl-tab {
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: visible;  /* ✅ FIX */
}

.wl-label {
    padding: 6px 12px;
    cursor: pointer;
}

.wl-menu {
    position: relative;
    padding: 6px;
    border-left: 1px solid var(--color-thirteen);
}

.wl-dots {
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
}

.wl-dropdown {
    display: none;
    position: absolute;
    top: 30px;
    right: 0;
    background: var(--color-one);
    border: 1px solid var(--color-six-semi);
    border-radius: 6px;
    min-width: 200px;
    z-index: 999;
	color : var(--color--one);
}

.wl-dropdown div {
    padding: 8px;
    cursor: pointer;
}

.wl-dropdown div:hover {
    background: var(--color-four);
}

.card100 {
	width : 98% ; 
}







/* iPad and Old Monitors adjustments for main content 
	@media (max-width: 1085px) {
		.main-container {
		margin-right: 0;
		}
		.menu-toggle {
			display: block;
		}

		.navbar {
			transform: translateX(150%);
		}

		.navbar.mobile {
			transform: translateX(0);
		}
		.grid-container {
			padding-right: 0vw;
			padding-left: 0vw;
			
		}
		 .navbar-close-btn {
			display: block;
		  }
		
	}

*/



/* Mobile adjustments for main content */
	@media (max-width: 1085px) {
		.main-container {
			margin-right: 0;
		}

		.grid-container1 {
			grid-template-columns: 1fr;
			padding-right: 0vw;
			padding-left: 0vw;
		}
		.grid-container2 {
			padding-right: 0vw;
			padding-left: 0vw;
			grid-template-columns: 1fr;

		}
		.menu-toggle {
			display: block;
		}

		.navbar {
			transform: translateX(150%);
		}

		.navbar.mobile {
			transform: translateX(0);
		}
		.navbar-close-btn {
			display: block;
		  }
		.button_down {
			background : var(--color-six) ;
			color : var(--color-one) ;
			padding-right : 20px ;
			position: fix  ;
			right : 10px ;
		}
		#responsive-table  td:nth-child(2),
		#responsive-table  th:nth-child(2),
		#responsive-table  td:nth-child(3),
		#responsive-table  th:nth-child(3),
		#responsive-table  td:nth-child(4),
		#responsive-table  th:nth-child(4),
		#responsive-table  td:nth-child(5),
		#responsive-table  th:nth-child(5),
		#responsive-table  td:nth-child(6),		
		#responsive-table  th:nth-child(6),
		#responsive-table  td:nth-child(7),
		#responsive-table  th:nth-child(7),
		#responsive-table  td:nth-child(8),
		#responsive-table  th:nth-child(8)
		{
            display: none;
        }
		
		.responsive-table2  td:nth-child(3),
		.responsive-table2  th:nth-child(3),
		.responsive-table2  td:nth-child(5),		
		.responsive-table2  th:nth-child(5),
		.responsive-table2  td:nth-child(6),		
		.responsive-table2  th:nth-child(6),
		.responsive-table2  td:nth-child(7),
		.responsive-table2  th:nth-child(7),
		.responsive-table2  td:nth-child(11),
		.responsive-table2  th:nth-child(11),
		.responsive-table2  td:nth-child(12),
		.responsive-table2  th:nth-child(12)
		{
            display: none;
        }
		.responsive-table3 td:nth-child(2),
		.responsive-table3 th:nth-child(2),
		.responsive-table3 td:nth-child(3),
		.responsive-table3 th:nth-child(3),
		.responsive-table3 td:nth-child(4),
		.responsive-table3 th:nth-child(4),
		.responsive-table3 td:nth-child(5),
		.responsive-table3 th:nth-child(5)
		{
            display: none;
        }
		.grid-container3 {
			  
			  grid-template-columns: 1fr ;
			  padding-right: 0vw;
			  padding-left: 0vw;
		  }
		  
		  
		  .grid-container3_114 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      padding-right: 1vw;
      padding-left: 1vw;
	  padding-bottom : 10px ;
	  }
		  
		.grid-container4 {
			  display: grid;
			  grid-template-columns: 1fr ;
			  gap: 10px;
			  padding-right: 0vw;
			  padding-left: 0vw;
		  }
		.grid-container5 {
			  display: grid;
			  grid-template-columns: 1fr ;
			  gap: 10px;
			  padding-right: 0vw;
			  padding-left: 0vw;
		  
		  }
		.grid-container6 {
			  display: grid;
			  grid-template-columns: 1fr ;
			  gap: 10px;
			  padding-right: 0vw;
			  padding-left: 0vw;
		  }
		.size-30-auto {
			grid-template-columns: 1fr;
			}
		.size-70-auto {
			grid-template-columns: 1fr;
		}
		.size-15-70-auto{
			grid-template-columns: 1fr;
		}
		.responsive-table1 {
        flex-direction: column;
      }
	}
	
	
	  table-Stacked {
    width: 100%;
    display: block;
  }

  table-Stacked tr {
    display: flex;
    flex-direction: column;  /* از افقی به عمودی */
  }

  table-Stacked td {
    width: 100%;
    display: block;
    margin-bottom: 20px; /* فاصله بین سلول‌ها */
  }