@import url(components/layouts/layouts.css);
/*_____________________________________________________________________________
-        Trinix Computer Systems - Fronted Framework Library
-               D Y A N A M I C   T A B L E   C S S   M O D U L E
-                       Development Version
-
- Created by: Brandon Reilly on 1/6/2018
- (c) Trinix Computer Systems
-
- Todo: After testing, code will be optimized & minimized for production
- Notes: 
__________________________________________________________________________________*/


:root {
    --defaultDivHeadBackground: rgba(64,64,96,.75);
    --defaultDivHeadTextColor: rgba(200,220,210,1);
    --defaultDivBodyBackground: rgba(225,225,255,1);
    --defaultDivBodyTextColor: rgba(13,13,13,1);

    --dynTableRowEven: rgba(215, 215, 235, .975); 
    --dynTableRowOdd: rgba(190, 195, 210, .975);
    
    --dynTableRowHover: rgba(225, 235, 245, .975);
    --dynTableContentContainerHeight: 300;
    --dynTableContentContainerHeightUnits: 1px;
}

.dyn-table table, th, td {
    border-collapse: collapse;
    position: relative;
    padding: .125rem;
/*     border: .115rem solid rgba(13,13,13,0.85); */
/*     border-radius: .25rem; */
    text-align: center;
}

.dyn-table table, th, td:not(:last-child) { 
    border-radius: 0;
    border-right: .075rem solid rgba(13,13,13,0.25);
    
}

textarea {
    width:95%;
    
}

.mainContainer {
    text-align:center;
    
}

.dynTable.oneCol.table td {
    width: 100%;
}
.dynTable.twoCol.table td {
    width: 50%;
  }
  
.dynTable.threeCol.table td {
    width: 33.33333333%;
  }
  
.dynTable.fourCol.table td {
width: 25%;
}

.dynTable.fiveCol.table td {
width: 20%;
}

.dynTable.sixCol.table td {
width: 16.66666667%;
}

.dynTable.sevenCol.table td {
width: 14.28571429%;
}

.dynTable.eightCol.table td {
width: 12.5%;
}

.dynTable.nineCol.table td {
width: 11.11111111%;
}

.dynTable.tenCol.table td {
width: 10%;
}

.dynTable.elevenCol.table td {
width: 9.09090909%;
}

.dynTable.twelveCol.table td {
width: 8.33333333%;
}

.dynTable.thirteenCol.table td {
width: 7.69230769%;
}

.dynTable.fourteenCol.table td {
width: 7.14285714%;
}

.dynTable.fifteenCol.table td {
width: 6.66666667%;
}

.dynTable.sixteenCol.table td {
width: 6.25%;
}

/*Column Widths*/
.dynTable.table th.oneWide,
.dynTable.table td.oneWide {
    width:6.25%;
}
.dynTable.twoCol.table td {
    width: 50%;
  }
  
.dynTable.threeCol.table td {
    width: 33.33333333%;
  }
  
.dynTable.fourCol.table td {
width: 25%;
}

.dynTable.fiveCol.table td {
width: 20%;
}

.dynTable.sixCol.table td {
width: 16.66666667%;
}

.dynTable.sevenCol.table td {
width: 14.28571429%;
}

.dynTable.eightCol.table td {
width: 12.5%;
}

.dynTable.nineCol.table td {
width: 11.11111111%;
}

.dynTable.tenCol.table td {
width: 10%;
}

.dynTable.elevenCol.table td {
width: 9.09090909%;
}

.dynTable.twelveCol.table td {
width: 8.33333333%;
}

.dynTable.thirteenCol.table td {
width: 7.69230769%;
}

.dynTable.fourteenCol.table td {
width: 7.14285714%;
}

.dynTable.fifteenCol.table td {
width: 6.66666667%;
}

.dynTable.sixteenCol.table td {
width: 6.25%;
}
.left-aligned {
    text-align: left;
    /*margin-left: 1em;*/
}

.center-aligned {
    text-align: center;
    margin: auto;
    
}

.hiddenTemplate {
    display: none;
}

.selected {
    outline: 2px solid red; 
}
.dyn-table {
    /*Setup default table values */
    --dyn-table__body-container_height: 300;
    --dyn-table__header-container_height: 45;
    --dyn-table__container_units: 1px;

    --dyn-table-default__header_background: rgba(32,32,64,1);
    --dyn-table-default__header_text-color: rgba(200,220,210,1);
    --dyn-table-default__body_background: rgba(225,225,255,1);
    --dyn-table-default__body_text-color: rgba(13,13,13,1);

    --dyn-table__header_background: var(--dyn-table-default__header_background);
    --dyn-table__header_text-color: var(--dyn-table-default__header_text-color);
    /* --dyn-table__header_text-color: */
    --dyn-table__body_background: var(--dyn-table-default__body_background);
    --dyn-table__body_text-color: var( --dyn-table-default__body_text-color:  --dyn-table-default__main_text-color);

    --dyn-table__row_even: rgba(175,175,200,1); 
    --dyn-table__row_odd: rgba(125,125,150,1);
    --dyn-table__row_hover: rgba(220,220,250,1);
    --dyn-table__row_selected: rgba(120,20,25,1);

    text-align:center;
}
/*.dyn-table__container */


.dyn-table {
    width: calc(100% - .25rem);
    box-sizing: border-box;
    left: 0;
    margin: .25rem 0.125rem .25rem 0.125rem;
    padding: 0;
    border: 1px solid rgba(13,13,13,0.975);
    /* box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); */
    /* box-shadow: 0 0 0.025rem 0 rgb(0 0 0 / 80%), 0 0.5rem 1.25rem 0 rgb(0 0 0 / 95%); */
    border-radius: .125rem;
}

/*GridBased*/

.dyn-table .dyn-table__header-container {
    width: 100%;
    /* text-align: left; */
    /* margin: 0 auto; */
    height: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 2.6rem;
    background: rgba(130, 130, 130, .95);
    z-index: 1;
    left: 0;
    /* padding: 0; */
    box-sizing: border-box;
}


.dyn-table .dyn-table-distributed__columns {
    --num-columns: 4;
    --coloumn-width: calc(100 / var(--num-columns));

}
.dyn-table .dyn-table-distributed__columns td {
    width: var(--column-width);
}


.dyn-table .dyn-table__header {

    width:100%;
    background: var(--dyn-table__header_background);
    color: var(--dyn-table__header_text-color);
    /*border-collapse: collapse;*/
}


.dyn-table .dyn-table__body-container {
    width: 100%;
    margin: auto;
    /* max-height: calc(100vh - 20rem); */
    /*height: auto; /* calc(var(--dyn-table__body-container_height) *  var(--dyn-table__container_units));*/
    height: 32rem;
    overflow-y: auto;
    
    /* border: 1px solid rgb(18, 16, 128); */
    /* overflow-x: auto; */
}

.dyn-table .dyn-table__body-container  .dyn-table__body
{
    width:100%;
    background: var(--dyn-table__body_background);
    color: var(--dyn-table__body_text-color);

}
 
.dyn-table .dyn-table__body tr:nth-child(odd){background-color: var(--dynTableRowOdd)}
.dyn-table .dyn-table__body tr:nth-child(even){background-color: var(--dynTableRowEven)}
.dyn-table .dyn-table__body tr:hover {background-color: var(--dynTableRowHover)}

.dyn-table .dyn-table__body_hidden
{
   display:none;
}


.dyn-table-header__row {
    display: table-row;
}

.dyn-table__row {
    display: table-row;
    border: none; /* .25rem solid rgba(225, 225, 255, .995) !important;*/
}




.dyn-table .dyn-table__add-row {
    text-align: left;
    display: inline-block;
    width: 1rem;
    padding: 0 !important;
    line-height: 0.75;
    margin: 0.5rem 0rem -0.125rem .125rem;
    /* font-size: 1.75rem; */
    /* left: 2em; */
    /* margin-left: 20px; */
}

.dyn-table .dyn-table__add-row i.icon {
    display: inline-block;
    opacity: 1;
    padding: 0.25rem .75rem 0 .25rem;
    width: 2em;
    font-family: 'Icons';
    font-style: normal;
    font-size: 1.95rem;
}

.dyn-table span.dyn-table-header-title {
    text-align: center;
    display: inline-block;
    width: calc(100% - 3.5rem);
    margin: 0.125rem auto 0;
    height: 1rem;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1.1;
    font-family: Tomorrow;
    font-weight: 500;
    letter-spacing: .075rem;
    /* font-variant: small-caps; */
}


.dyn-table .dyn-table__add-row__button {
    font-size: 1.25em;
}

.dyn-table .dyn-table__row_move-up {
    font-size: .75em;
}

.dyn-table .dyn-table__row_move-down {
    font-size: .75em;
}
.dyn-table .dyn-table__row_delete {
    font-size: 1.5em;
}

.dyn-table .dyn-table__row {
    /*position: relative;*/
    width:100%;
}

.dyn-table .dyn-table__row {
    width: 100%;
}

.dyn-table .dyn-table__row:hover {
    background-color: rgba(225,225,225,.4);
}

.dyn-table .dyn-table__row:active {
    background-color: rgba(255,0,0,.333);

}
.dynTableRow:hover {
    background-color: rgba(225,225,225,.5);
}
.dynTableRow:active {
    background-color: rgba(255,0,0,.665);

}

.dynTableContent-tbody
{
    width:100%;
    border: 1px solid rgb(107, 12, 5);
}



.childDiv
{
    position: absolute;
    bottom: 0;
}
.prog-bar__slider 
{
    opacity:1;
    color: rgba(0,0,250,1);

}
.prog-bar_full-width
{
    --progBarGreen: 0;
    --progBarRed:255;
    --progBarForgndColor: rgba(13,13,13,1);
    --progBarWidth: 1;
    --progBarWidthUnit: 1%;
    --progBarHeight: 25;
    --progBarHeightUnit: 1px;

    padding: 0px;
    margin: 0px;
    vertical-align: top;
    text-align:center;
    height:calc(var(--progBarHeight) * var(--progBarHeightUnit)) !important;;
    /*width:100%;*/
    width: calc(var(--progBarWidth) * var(--progBarWidthUnit));
    background-color: rgba(var(--progBarRed), var(--progBarGreen), 0, 1);
    color:var(--progBarForgndColor);
    

}

.prog-bar {
    transition: all 0.5s 
}


  
  .table-remove {
    color: #700;
    cursor: pointer;
    
   /* &:hover {
      color: #f00;
    }
    */
  }
  
  .table-up, .table-down {
    color: #007;
    cursor: pointer;
    /*
    &:hover {
      color: #00f;
    }
    */
  }
  
  .table-add {
    color: #070;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 0;
    /*
    &:hover {
      color: #0b0;
    }
    */
  }


  @media (max-width:768px) {

    .dyn-table .dyn-table__header-container {
  
        top: 6.25rem;
       
     
    }
    
  }