:root { --one : 50px;}

.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;                           }
.leftSeprattor2Right               { display:grid;   grid-gap: var(--gap); grid-template-columns:  1fr 1px 2fr;                           }

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

.headerLeftLeftAuto               {   display:grid;  grid-template-columns: 250px 400px 1fr; grid-template-rows:40px auto  }


.c_oneTow                         {    display:grid;  grid-template-columns: 1fr 2fr;    }
.r_oneTowSeven                    { display:grid;   grid-gap: var(--gap); grid-template-rows:    1fr 2fr 7fr                                  }
.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_towOneAuto                     { display:grid;   grid-gap: var(--gap); grid-template-rows:    calc(2 * var(--one)) var(--one) auto                   }
.r_oneTowAuto                     { display:grid;   grid-gap: var(--gap); grid-template-rows:    var(--one) calc(2 * 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_oneAuto                        { display:grid;   grid-gap: var(--gap); grid-template-columns:    var(--one)  auto                   }
.c_twoAuto                        { display:grid;   grid-gap: var(--gap); grid-template-columns:    calc(var(--one)*2)  auto                   }
.c_4oneAuto                       { display:grid;   grid-gap: var(--gap); grid-template-columns:   calc(var(--one)*4)  auto                   }
.c_4                              { display:grid;   grid-gap: var(--gap); grid-template-columns:   calc(var(--one) * 3) calc(var(--one)*3) calc(var(--one)*3) calc(var(--one)*3)                   }
.c_fourAuto                       { display:grid;   grid-gap: var(--gap); grid-template-columns:   calc(var(--one)*4)  auto                   }
.c_fiveAuto                       { display:grid;   grid-gap: var(--gap); grid-template-columns:   calc(var(--one)*5)  auto                   }
.c_Auto2one                       { display:grid;   grid-gap: var(--gap); grid-template-columns:   1fr calc(var(--one)*2)                     }
.c_Half                           { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr  1fr                   }
.c_oneTowOne                      { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 2fr 1fr                }
.c_oneSepratorOneSepratorTow      { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 1px 1fr 1px 2fr                }
.c_oneFourTow                     { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 4fr 2fr                }
.c_oneThree                       { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 3fr                }
.c_oneFour                        { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 4fr                }
.c_oneFive                        { display:grid;   grid-gap: var(--gap); grid-template-columns:    1fr 5fr                }
.c_fitAuto                        { display:grid;   grid-gap: var(--gap); grid-template-columns:     minmax(70px, fit-content) 1fr                }
.c_threeAuto                      { display: grid; grid-gap: var(--gap); grid-template-columns:    calc(var(--one) * 3)  auto }
.c_AutoOne                        { display: grid; grid-gap: var(--gap); grid-template-columns:    auto  calc(var(--one)) }
.c_80Auto                         { display: grid; grid-gap: var(--gap); grid-template-columns:    80px  auto }

table                             {  border-radius: var(--radius);  border-spacing: 0px;  }
thead                             {  border-radius: var(--radius); height:var(--elementHeight); }
thead td                          {  padding:var(--padding); font-size:15px; font-weight:400; border-bottom:1px solid #ddd; border-top:1px solid #ddd; height:36px; border-radius: 0px}
tbody tr td                       {  padding:var(--padding); border-bottom:1px dashed #f2f2f2; color:#666}
/* tr:nth-child(even)                { }
tr                                { } */
/* tr:hover                          { background: var(--gray10); cursor: pointer; }  */
tfoot  td                         { border-top:1px solid #f2f2f2}


/* Here starts the styles for components */
.fsa {
    justify-content: space-around;
 }
 .fsb {
    justify-content: space-between;
 }

.master-details-master-item.active {
    background: var(--gray550);
}

.toggle-switch {
    width: 37px;
    height: 17px;
    background-color: #ADBBCC;
}

.slider {
    background-color: #5B7798;
    transition: transform 0.4s;
    /* border-radius: 50%; */
    margin: -1.5px 0 0;
}

.toggle-switch.active {
    background-color: #90D67F;
}

.toggle-switch.active .slider {
    transform: translateX(17px);
    background-color: #21AD00;

}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}


input:checked + .slider {
    background-color: #4CAF50;
}


input:checked + .slider:before {
    transform: translateX(26px);
}