/* The basics  */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body,html {
    margin: 0;
    padding: 0;
}

/* A Basic Grid */
.rows,.columns {
    display: flex;
    flex: 1 1 auto;
}
.rows {
    flex-direction: column;
}
.columns {
    flex-direction: row;
}
.cell {
   display: flex;
}
.cell.expand {
    flex: 1 1 auto;
}
.cell.scroll {
    overflow: auto;
    padding-right: .5rem;
    margin: .5rem 0;    
}
.cell > div.pad {
	padding: .3rem;
}
.cell > div.large-pad {
	padding: .8rem;
}

/* Proper Margins */
.rows.m-small > .cell{
    margin: .3rem 0px;
}
.rows.m-default > .cell{
    margin: .5rem 0px;
}
.rows.m-large > .cell{
    margin: .75rem 0px;
}
.rows.m-extra-small > .cell:first-child,
.rows.m-small > .cell:first-child,
.rows.m-default > .cell:first-child,
.rows.m-large > .cell:first-child {
    margin-top: 0px;
}
.rows.m-extra-small > .cell:last-child,
.rows.m-small > .cell:last-child,
.rows.m-default > .cell:last-child,
.rows.m-large > .cell:last-child {
    margin-bottom: 0px;
}
.columns.m-extra-small > .cell{
    margin: 0px .1rem;
}
.columns.m-small > .cell{
    margin: 0px .3rem;
}
.columns.m-default > .cell{
    margin: 0px .5rem;
}
.columns.m-large > .cell{
    margin: 0px .75rem;
}
.columns.m-extra-small .cell:first-child,
.columns.m-small .cell:first-child,
.columns.m-default .cell:first-child,
.columns.m-large .cell:first-child {
    margin-left: 0px;
}
.columns.m-extra-small .cell:last-child,
.columns.m-small .cell:last-child,
.columns.m-default .cell:last-child,
.columns.m-large .cell:last-child {
    margin-right: 0px;
}


/* Easy Aignment */
.cell.align-left {
    justify-content: flex-start;
}
.cell.align-center {
    justify-content: center;
}
.cell.align-right {
    justify-content: flex-end;
}
.cell.v-align-top {
    align-items: flex-start;
}
.cell.v-align-center {
    align-items: center;
}
.cell.v-align-bottom {
    align-items: flex-end 
}

/* Easy Spacing */
.cell.space-even {
    justify-content: space-evenly;
}
.cell.space-between {
    justify-content: space-between
}

/* Pretty Scroll Bars */
::-webkit-scrollbar {
    height: .5rem;
    width: .5rem;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.25);
}