/**
 * @file
 * Visual styles for Startupgrowth's tables.
 */
table {
  border-collapse: collapse;
  width: 100%;
  color: #000000;
  margin: 25px 0 40px;
}
table:not(#cwws, .PlanMonthGruop)  th {
  font-size: 16px;
  text-transform: uppercase;
  border: 1px solid #fff;
  background: #3f3f3f;
  color: #ffffff;
}
table:not(#cwws-0, #cwws-2, #cwws, .PlanMonthGruop) th,
table:not(#cwws-0, #cwws-2, #cwws, .PlanMonthGruop) td {
  vertical-align: top;
  padding: 10px 20px;
  text-align: left;
}
table th a {
  color: #ffffff;
}
table:not(#cwws,#cwws-0,#cwws-2,#cwws-3,.PlanMonthGruop) td {
  border: 1px solid #fff;
}
table:not(#cwws)  tr.even,
table:not(#cwws)  tr.odd {
  border-bottom: 1px solid #fff;
  background: #e4e4e4;
  font-size: 14px;
}
.colored-region table {
  color: #ffffff;
}
.colored-region table th {
  background-color: transparent;
}
.colored-region table:not(#cwws)  td {
  border-color: #ffffff;
}
.colored-region table tr.even,
.colored-region table tr.odd {
  background: transparent;
}
.footer-area table th,
.footer-area table td {
  padding: 10px;
}

div.DataTableContainer
{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  border: 1px solid rgb(220,220,220) !important;
}
table.PlanMonthGruop{
	font-family:arial;
	margin:0px auto;
	color:#4b4b4b;
  table-layout: auto;
	font-family: arial;
    
  border-collapse: separate;
  border-spacing: 0px;
  box-sizing: border-box;
  font-size: 14px;
    
}

/*table.PlanMonthGruop th,*/ table.PlanMonthGruop td
{
  border: 1px solid lightgray;
}
table.PlanMonthGruop th, table.PlanMonthGruop td
{
  padding: 5px;
}

/* Fix the first column */
.fixed-column {
  position: sticky;
  left: -1px;
  /*z-index: 3;*/
  background: white;
  /*border-bottom: 1px solid black; /* Ensure right border is visible */
  /*min-width: 200px;*/
  /*width: auto;*/
  white-space: nowrap;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Adds a subtle border effect */
}

/* Fix the first row */
.fixed-rows:nth-child(1) th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: white;
  /*border-bottom: 1px solid #aaa; /* Ensures bottom border is visible */
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
}

/* Fix the second row */
.fixed-rows:nth-child(2) th {
  position: sticky;
  /*top: 40px; /* Adjust based on row height */
  z-index: 2;
  background: white;
  /*border-bottom: 1px solid #aaa;*/
}

/* Fix the third row */
.fixed-rows:nth-child(3) th {
  position: sticky;
  /*top: 80px; /* Adjust based on row height */
  z-index: 1;
  background: white;
  /*border-bottom: 1px solid #aaa;*/
}

/* Ensure the top-left cell stays on top and has full borders */
.fixed-rows.fixed-column {
  z-index: 100;
  top: 1px;
  background: white;
  border-right: 1px solid #aaa;
  /*border-bottom: 10px solid #aaa;*/
  /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Makes it more distinct */
}
.fixed-rows th  div
{
  position: relative;
}
.fixed-rows th  div span
{
  /*position: absolute;*/
}

.fixed-column div
{
  /*position: absolute;
  top: 0;
  left: 0;*/
  width: 100%;
  height: 100%;
  /*border-right: 1px solid lightgray;
  padding: 10px;*/
  box-sizing: border-box;
  /*background-color: red;*/
}
th.fixed3
{
  border: 1px solid lightgray;
}
.fixed-rows:nth-child(3) th div
{
  text-align: center;
}
.fixed-rows:nth-child(1) th div span
{
  position: sticky;
  left: 0;
  z-index: 100; /* Keep it above other content */
  background-color: white; /* Ensure it's readable */
  padding: 5px;
  clip-path: inset(0 var(--clip-right, 0px) 0 0); /* Clip dynamically */
  transition: clip-path 0.2s ease-out; /* Smooth hiding effect */
}

/*div.DataTableContainer
{
  height: 400px;
}*/

.loaderDiv
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-bottom: 5px solid white;
  border-top: 5px solid white;
  border-radius: 50px;
  padding: 10px;
  border-right: 5px solid rgb(50, 58, 208);
  border-left: 5px solid white;
  animation: loader 1s  ease infinite;
}

@keyframes loader
{
  0%{transform: rotate(90deg);}
  25%{transform: rotate(180deg);}
  75%{transform: rotate(270deg);}
  100%{transform: rotate(360deg);}
}

@media only screen and (max-width: 768px)
{
  table.PlanMonthGruop td ,
  table.PlanMonthGruop th 
  {
    font-size: 12px;
    padding: 0;
  }
  .fixed-column
  {
    /*min-width: 155px;*/
  }
  .fixed-column div
  {
    padding: 0px 0px 0px 5px;
  }
  .fixed-rows:nth-child(1) th,
  .fixed-rows:nth-child(2) th,
  .fixed-rows:nth-child(3) th
  {
    top: 0;
    font-size: 12px;
    padding: 3px;
  }
  #collapseRight, #collapseLeft
  {
    width: 16px !important;
    height: 16px !important;
  }
}