/* Mobile View */
@media screen and (max-width: 45rem){

table{
float:left;
width:100%;
margin:1rem auto;
padding:0;
}

}


/* Mobile View > Tablet only */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

table{
float:left;
width:calc(100% - 2rem);
margin:1rem;
padding:0;
}

}


/* Mobile View > till Tablet or Tablet portrait */
@media screen and (max-width: 45rem), screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

table th.optional,
table td.optional{
display:none
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

table{
float:left;
width:100%;
margin:1rem auto;
padding:0;
}

}


table{
height:auto;
border:none;
border-collapse: collapse;
}

table caption{
caption-side:top;
font-size:var(--fs-p);
font-style:italic;
text-align:left;
padding:.5rem 0;
}

table th{
vertical-align:bottom;
margin:0;
padding:0;
border:none
}

table th p{
margin:0;
padding:.15rem;
font-size:var(--fs-s);
}

table th[scope=col] p{
margin:0;
padding:.15rem;
font-size:var(--fs-s);
}

table th[scope=col]{
font-style:normal;
width:auto;
background:var(--tbl-bgr-primary-400);
border-bottom:var(--tbl-brd-primary-300) 2px solid;
}

table th[scope=col],
table th[scope=col] p{
text-align:right;
}

table th[scope=col]:first-of-type,
table th[scope=col]:first-of-type p{
text-align:left;
}

table th[scope=col]:last-of-type,
table th[scope=col]:last-of-type p{
text-align:right;
}

table td, th[scope=row]{
vertical-align:bottom;
text-align:left;
margin:0;
padding:0;
border-bottom:var(--tbl-brd-primary-400) 1px solid;
}

table th[scope=row] p{
margin:0;
padding:.15rem;
font-size:var(--fs-s) !important;
}


table td:first-of-type{
text-align:left;
}

table td:last-of-type{
text-align:right;
}



/* Mobile View only */
@media screen and (max-width: 45rem){

table th[scope=row] p{
margin:0;
padding:.15rem;
font-size:var(--fs-s) !important;
}

table td.mobile p{
float:right;
width:8rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

}


table td p{
display:block;
margin:0;
padding:.15rem;
font-size:var(--fs-s) !important;
text-align:right;

& strong{
font-weight:normal;
}

}

table tr.on th[scope=row],
table tr.on td{
color:var(--clr-primary-400);
background:var(--bgr-accent-400);
font-weight:bold;
}

table tr:hover th[scope=row],
table tr:hover td{
color:var(--clr-primary-400);
background:var(--bgr-accent-400);
}

table tr:nth-child(even){
background:var(--tbl-bgr-primary-300);
}

table tr:nth-child(odd){
background:var(--tbl-bgr-primary-400);
}