* {
  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 {
		--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-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-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*/
		
	}

/* 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-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-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*/
		
	}




    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-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: 1px solid var(--color-two);
      border-radius: 20px;
      color: var(--color-tweleve);
    }
	 table {
            width: 100%;
            border-collapse: collapse;
			color : var(--color-three);
			
			
        }
        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);
		}


.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-tweleve);
	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-seven);
  color: var(--color-tweleve);
  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)) ; 
}
.indexNtItemGREEN{
	background: linear-gradient(45deg, var(--color-six-semi), var(--color-six-zero)) ; 
	
}

.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));
}

.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);
		}
		.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(2),
		#responsive-table2  th:nth-child(2),
		#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)
		{
            display: none;
        }
		.grid-container3 {
			  
			  grid-template-columns: 1fr ;
			  padding-right: 0vw;
			  padding-left: 0vw;
		  }
		.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;
      }
	}