:root { --one : 36px;}

.rows                             {display: grid;  grid-gap: var(--gap); grid-auto-rows:         auto;         grid-auto-flow: row;      }  
.columns                          {display: grid;  grid-gap: var(--gap); grid-auto-columns:      auto;         grid-auto-flow: column;   } 
  
  
.leftSeprattorRight               { display:grid;   grid-gap: var(--gap); grid-template-columns:  1fr 1px 1fr;                           } 
  
.headerLeftContentFooter          { display:grid;   grid-template-columns: 50px auto;                          grid-template-rows: 60px auto 40px;   }
.headerLeftContent                { display:grid;   grid-template-columns: 50px auto;                          grid-template-rows: 60px auto;        }
  
.headerRightContentFooter         { display:grid;   grid-template-columns: auto 50px;                          grid-template-rows: 60px auto 40px;   }
.headerRightContent               { display:grid;   grid-template-columns: auto 50px;                          grid-template-rows: 60px auto;        }
  
.headerQuarterLeftContentFooter   { display:grid;   grid-template-columns: 50px auto;                          grid-template-rows: 60px auto 40px;   }
.headerQuarterLeftContent         { display:grid;   grid-template-columns: 50px auto;                          grid-template-rows: 60px auto;        }
  
.headerQuarterRightContentFooter  { display:grid;   grid-template-columns: 3fr 1fr;                            grid-template-rows: 60px auto 40px;   }
.headerQuarterRightContent        { display:grid;   grid-template-columns: 3f 1fr;                             grid-template-rows: 60px auto;        }
  
.r_oneTowSeven                    { display:grid;   grid-gap: var(--gap); grid-template-rows:    1fr 2fr 7fr                                  }  
.r_oneAuto2                        { display:grid;   grid-gap: var(--gap); grid-template-rows:   50px  auto                             } 
.r_oneAuto3                        { display:grid; grid-template-rows:   50px  auto 40px                            } 
.r_oneAuto                        { display:grid;   grid-gap: var(--gap); grid-template-rows:    var(--one)  auto                             } 
.r_oneOneAuto                     { display:grid;   grid-gap: var(--gap); grid-template-rows:    var(--one) var(--one) auto                   }  
.r_oneAutoOne                     { display:grid;   grid-gap: var(--gap); grid-template-rows:    var(--one)  auto        var(--one)           }  
.r_oneOneAutoOne                  { display:grid;   grid-gap: var(--gap); grid-template-rows:    var(--one) var(--one) auto  var(--one)       } 
  
 
.c_Half                           { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr  1fr                   }
.g_two                           { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr  1fr;  grid-template-rows:    1fr  1fr                   }
.c_oneTowOne                      { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 2fr 1fr                } 
.c_oneFourTow                     { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 4fr 2fr                } 
  
table                             { border: var(--border); border-radius: var(--radius);  border-spacing: 0px; font: var(--font); }
thead                             { background: var(--disabled);  border-radius: var(--radius)}
thead td                          { font-weight:500; font-size:14px; border-bottom: none}
td                                { padding: 0px; height: 30px; border-spacing: 0; padding:0px; margin:0px;  border-radius:0 }
/* tr:nth-child(even)                { }
tr                                { } */
tr:hover                          { background: var(--disabled); cursor: pointer; } 
tfoot  td                         { border-top:1px solid #f2f2f2}
.notifiers                        { 
  position: fixed;
  bottom: 60px;
  right: 20px;
}

.fullLoader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--primary);
  border-radius: 50%;
 aspect-ratio : 1 / 1;
  /* width: 50px;
  height: 50px; */
  animation: spin 2s linear infinite;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.fullLoaderBG {
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100% !important;
  height: 100% !important;
  background: #000000a1;
}

 
.loader                        { 
  position: absolute;
  top: 4px;
  right: 0px;
}

@keyframes show {
  100% {
    opacity: 1;
    transform: none;
  }
}
  
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
  }
  .tabs label {
    order: 1;
    display: block;
    padding: 1rem 2rem;
    margin-right: 0.2rem;
    cursor: pointer;
    color: var(--dark);
    font-weight: 300;
    background: var(--white);
    transition: background ease 0.2s;
  }
  .tabs .tab {
    order: 99;
    width: 100%;
    display: none ;
    padding: 1rem;
    background:var(--white);
    border: 1px solid #38445520;
    border-radius: 0px 0px 4px 4px;
  }
  .tabs input[type="radio"] {
    display: none;
  }
  .tabs input[type="radio"]:checked+label {
    color: var(--primary);
    background: #FAFAFB;
    border-top: 1px solid #38445520;
    border-right: 1px solid #38445520;
    border-left: 1px solid #38445520;
    font-weight: bold;
    border-radius: 4px 4px 0px 0px;
  }
  .tabs input[type="radio"]:checked+label+.tab {
    display: block;
  }
  .tabsContainer {
    width: 100%;
    font-size: 12px;
    padding: 5px;
  }