body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background-color: #ebebeb;
  overflow-y: scroll;
}

::-webkit-scrollbar {
	width: 6px;
	background: rgb(43, 4, 0);
	border-radius: 20px;
}

::-webkit-scrollbar-track {
	background: rgb(203 203 203);
	border-radius: 20px;
}

::-webkit-scrollbar-thumb {
	background: rgb(243 178 28);
	border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgb(204, 236, 249);
}

.header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    padding: 10px 20px;
    background-color: white;
    /* border-bottom: 1px solid #ddd; */
    height: 70px;
    justify-content: space-between;
    box-shadow: 0 -10px 10px 10px rgb(0 0 0 / 20%);
}

.header-start{
    display: flex;
    align-items: center;
    /* padding: 10px 20px; */
    background-color: white;
    height: 60px;
}

.home-icon {
  font-size: 24px;
  margin-right: 20px;
}

.year-select-container {
  background-color: #f5b622;
  padding: 0px 0px;
  padding-inline-start: 10px;
  border-radius: 4px;
  margin-right: 30px;
  display: flex;
  align-items: center;
  font-weight: bold;
  display: flex;
  height: 40px;
}

.year-select-container label {
  margin-right: 5px;
  font-size: 14px;
}

.year-select {
  background-color: transparent;
  border: none;
  font-weight: bold;
  font-size: 16px;
  appearance: none;
  padding-right: 15px;
  cursor: pointer;
  height: 40px;
  padding: 0 20px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.user-icon {
  margin-right: 8px;
  font-size: 18px;
}

.logout {
  font-weight: bold;
  margin-right: 5px;
}

.logout-icon {
  font-size: 18px;
}

.header .logo{
	width: 120px;
	max-width: 20vw;
}

   
.sidebar {
  background-color: #f3b21c;
  width: 275px;
  height: 100vh;
  padding-top: 20px;
  position: fixed;
}
.sidebar a {
  display: block;
  padding: 15px 20px;
  color: black;
  text-decoration: none;
}
.sidebar .active {
  background-color: black;
  color: white;
  pointer-events: none;
}

.sidebar a:hover {
  background-color: #885f00;
  color: white;
}

.main-content {
  margin-left: 275px;
  padding: 40px;
  background-color: #ebebeb;
  overflow: auto;
  transition:0.5s all;
}

.plans-bar{position: sticky;top: 92px;z-index: 1;padding: 0;/* background: transparent; */margin-bottom: 0px;}
.plans-bar-content{max-width: 1000px;margin:0 auto;min-height: 80px;background: white;display: flex;}
.plans-bar-content table {width:auto}
.plans-bar-content table thead tr > *{height: 0px;padding: 0;}
.plans-bar-content .category-sum span:nth-child(1){display:none}
.plans-bar-content .tbl-top .select-budget-type{flex-direction:column;gap: 1px;}

.banners{display:flex;row-gap: 70px;column-gap: 20px;flex-wrap:wrap;max-width:1200px;margin:auto;padding-top: 40px;}
.banners a{width: calc(50% - 10px);position: relative;box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);font-size: 0;text-decoration: none;}
.banners a::before{transition:0.2s all;position:absolute;content:"";background: #a9a9a9;width: 100%;height: calc(100% - 105px);mix-blend-mode: color;}
.banners a:hover::before{opacity:0}
.banners a span{position:absolute;padding: 12px;left: 0;top: -45px;font-size:18px;font-weight:bold;background: #f3b21c;color: black;}
.banners a img{width:100%}
.banners a table{border-collapse:collapse;}
.banners a table tr{height:20px;}
.banners a table td, .banners a table th{color: #515151;font-size: 14px;text-align: center;text-decoration: none;height: 30px;width: calc(100% / 6);line-height: 1;/* border: 1px solid #ebebeb; *//* background: #f3b21c; */}
body.right-open .main-content{margin-right:400px;}



table {
  width: 100%;
  border-collapse: collapse;
  margin: auto;
}

.thead{
  
}

th, td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  height:50px;
  background-color: white;
}
th {
  font-weight: 600;
}

th:first-child, td:first-child {
  text-align:left;
}


.budget-levels {
  width: 100%;
  max-width: 1000px;
  overflow-x: auto;
  /* background-color: #f9f9f9; */
  /* padding: 20px; */
  box-sizing: border-box;
  margin: auto;
  margin-bottom: 50px;
}

.bl-table {
  /* width: 100%; */
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.bl-th, .bl-td {
  border-bottom: 1px solid #ccc;
  padding: 12px 16px;
  text-align: left;
}

.bl-header {
  /* background-color: #000; */
  /* color: #fff; */
  font-weight: bold;
}

.bl-row:nth-child(even) {
  background-color: #f2f2f2;
}

.bl-highlight td {
  background-color: #f3b21c !important;
  font-weight: bold;
}


.summary-row td {
  background-color: #f3b21c;
  font-weight: bold;
}
.bold-text {
  font-weight: bold;
}


.summary-table{
  max-width: 1000px;
}

.summary-table s{display:none}

.budget-levels thead th, .summary-table thead th{
  background:transparent;
  font-weight:400;
  font-size:0.9em;
  height:30px;
  vertical-align:bottom;
}



/* Start ss-side-summary*/

body:not(.right-open) .ss-side-summary{transform:translateX(100%)}

.ss-side-summary {
  width: 400px;
  border: 1px solid #ccc;
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  position:fixed;
  height:100vh;
  right:0;
  transition:0.5s all;
  z-index: 2;
}

.ss-open-close {
    position: absolute;
    right: 100%;
    background: #f5b622;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:30px;
	cursor:pointer;
}

.ss-select-type{display:flex;padding-top: 6px;border-bottom: 4px solid #f3b21c;}
.ss-type{width:50%;height: 40px;align-items: center;justify-content: center;display: flex;margin: 0 5px;color: #777;cursor: pointer;}
.ss-type.active{background:#f5b622;color:black}

body:not(.right-open) .ss-open-close i:nth-child(2){
	display:none;
}

body.right-open .ss-open-close i:nth-child(1){
	display:none;
}

.ss-all-categories{
	height: 100%;
	overflow-y: auto;
	margin-bottom: 90px;
	overflow-x: hidden;
	overflow-y: scroll;
	direction: rtl;
	display: none;
}

.ss-all-categories.active{
	display:block;
}

.ss-category .ss-category-line {
  border-top: 1px solid #ccc;
  cursor: pointer;
  background: #eee;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-weight: bold;
  align-items: center;
  gap: 10px;
}

.ss-category{
	direction:ltr;
}

.ss-category.opened > .ss-category-line {
  background-color: black;
  color:white;
  border-top: 3px solid black;
  gap: 10px;
}

.ss-category-details {
  background: white;
  border-left: 10px solid black;
  max-height: 0;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  transition: 0.2s all;
}


.ss-category.opened > .ss-category-details {
  display: block;
  /* padding: 10px; */
  max-height: 700px;
  border-bottom: 10px solid black;
}

.ss-category-details .ss-category.opened > .ss-category-details {
	border-bottom:0
}

.ss-category-details  .ss-category-details {
	backgorund:white;
}

.ss-category-details .ss-category.opened > .ss-category-details{
	padding:10px;
	border: 0;
}

.ss-category-details .ss-category > .ss-category-line{font-size:14px;background: #fafafa;}

.ss-category-details .ss-category.opened > .ss-category-line{background:#555}

.ss-category.opened .ss-category-details s{
  color:#aaa;  
}

.ss-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.ss-row strong {
  font-weight: bold;
}

.ss-summary {
  background-color: #f5b622;
  font-weight: bold;
  padding: 10px;
  position: sticky;
  bottom: 0;
  border-top: 2px solid #000;
}

.ss-summary .ss-row {
  justify-content: space-between;
}

.ss-price-table {
  display: flex;
  justify-content: space-between;
  /* padding: 0 10px; */
  font-size: 13px;
  font-weight: bold;
  gap: 10px;
}

.ss-price-table > div{
  font-weight:normal;
  text-align:center;  
}

.ss-price-table > div > div:nth-child(1){
  font-size:10px;
  border-bottom:2px solid transparent;
  margin-bottom: 4px;
}

.ss-price-table > div.participate > div:nth-child(1){
  border-bottom: 2px solid orange;
}

.ss-line {
  height: 1px;
  background: #ccc;
  margin: 10px 0;
}

.ss-product {
  margin-bottom: 10px;
}

.ss-product-line{
  margin-bottom: 10px;
  display:flex;
  justify-content:space-between;
  align-items: center;
}

.ss-product-line .total{
  display:flex;
  flex-direction:column;
}

.product-controls {
  display: flex;
  align-items: center;
  margin: 5px 0;
  font-size: 14px;
}

.product-controls button {
  width: 30px;
  margin: 0 5px;
  font-weight: bold;
  position:relative;
  display:flex;
  height: 30px;
  border-radius: 50%;
  background: white;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}

.product-controls button::before{
  content:"";
  position: absolute;
  width: 12px;
  height: 2px;
  background: black;
}

.product-controls button.plus::after{
  content:"";
  width: 2px;
  height: 12px;
  background: black;
}

.product-controls input{
  width:40px;
  text-align:center;
  font-size:16px;
  height:30px;
  border-radius:5px;
  border:1px solid #ccc;
    
}

.ss-products,
.ss-price-breakdown {
  margin-top: 10px;
}


.loader {
  border: 8px solid #f3f3f3;       /* Light gray background ring */
  border-top: 8px solid #f3b21c;   /* yellow spinner part */
  border-radius: 50%;              /* Make it a circle */
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: 50px auto;               /* Centered on page */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* End ss-side-summary*/

@media(max-width:992px){

}


    .dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 30px;
    }

    .card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
    }

    .card h2 {
      font-size: 1.1rem;
      color: #333;
      margin-bottom: 0.5rem;
    }

    .value {
      font-size: 1.8rem;
      font-weight: bold;
      color: #2a9d8f;
    }

    .progress-bar-container {
      background: #e0e0e0;
      border-radius: 20px;
      overflow: hidden;
      height: 16px;
      margin: 1rem 0;
    }

    .progress-bar {
      height: 100%;
      background: #2a9d8f;
    }

    .progress-bar.secondary {
      background: #f4a261;
    }

    .subtext {
      font-size: 0.9rem;
      color: #555;
    }

    .highlight {
      color: #e76f51;
      font-weight: 600;
    }



.dash-slots{
  display:flex;
  gap: 20px;
  justify-content:center;
  flex-wrap: wrap;
}
.dash-slot{
  padding: 20px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  width: calc(50% - 100px);
  max-width: 550px;
  border-radius: 15px;
}

.dash-slot-w{
  
  display:flex;
}

	
.pie-chart {
      width: 300px;
	  min-width: 300px;
	  height: 300px;
	  min-height: 300px;
	  border-radius: 50%;
	  background: conic-gradient(
		#ff6384 0% 22%,    
		#36a2eb 22% 37%,  
		#cc65fe 37% 53%,  
		#ffce56 53% 71%,  
		#2ecc71 71% 86%,    
		#ff9f40 86% 100%    
	  );
	  margin: 30px auto;
	  position: relative;
}

.pie-chart2 {
      width: 300px;
	  min-width: 300px;
	  height: 300px;
	  min-height: 300px;
	  border-radius: 50%;
	  background: conic-gradient(
		#ff6384 0% 22%,    
		#36a2eb 22% 37%,  
		#cc65fe 37% 53%,  
		#ffce56 53% 71%,  
		#2ecc71 71% 100%   
	  );
	  margin: 30px auto;
	  position: relative;
}

.pie-chart3 {
      width: 300px;
	  min-width: 300px;
	  height: 300px;
	  min-height: 300px;
	  border-radius: 50%;
	  background: conic-gradient(
		#ff6384 0% 22%,    
		#36a2eb 22% 37%,  
		#cc65fe 37% 53%,  
		#ffce56 53% 71%,  
		#2ecc71 71% 100%    
	  );
	  margin: 30px auto;
	  position: relative;
}

    .legend {
      display: flex;
      flex-direction: column;
      align-items: start;
      margin: 20px auto;
      width: 300px;
      font-family: sans-serif;
    }

    .legend-item {
      display: flex;
      align-items: center;
      margin: 4px 0;
      font-size: 14px;
    }

    .legend-color {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      border-radius: 3px;
    }

	.chart-container {
      width: 90%;
      margin: 40px auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

tag{font-size:12px;padding:0 10px;height:20px;display:inline-flex;margin:0 5px;align-items:center;background:#f3b21c}