/* Component styles */

@font-face {

    font-family: 'serif';

/*    src: url('../fonts/BLOKKRegular.eot');

    src: url('../fonts/BLOKKRegular.eot?#iefix') format('embedded-opentype'),

         url('../fonts/BLOKKRegular.woff') format('woff'),

         url('../fonts/BLOKKRegular.svg#BLOKKRegular') format('svg');    */

    font-weight: normal;

    font-style: normal;

}



/* Tables */

table.sticky {

    border-collapse: collapse;

    margin-bottom: 3rem;

    width: 100%;

    background: #fff;

}

table.sticky td, table.sticky th {

    padding: 0.3em 0.2rem;

    text-align: left;

}

table.sticky th {

    background-color: #3af;

    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);

    font-family: "Montserrat", Arial, sans-serif;

    font-weight: bold;

    color: #fff;

    text-align: center;

    white-space: nowrap;

}

table.sticky thead a {

    border: none;

}

table.sticky tbody th {

    background-color: #777;

    background-image: none;

}

table.sticky tbody tr:nth-child(2n-1) {

    background-color: #eee;

    transition: all .125s ease-in-out;

}

table.sticky tbody tr:nth-child(2n-1) th {

    background-image: linear-gradient(to left, rgba(0,0,0,.125) 0%, rgba(0,0,0,.25) 100%);

}

table.sticky tbody tr:hover {

    background-color: #ccc;

}

table.sticky tbody img {

    border-radius: 50%;

    display: block;

    wi/dth: 4rem;

    hei/ght: 4rem;

}

.user-name,

.user-firstName,

.user-lastName,

.user-location {

    text-transform: capitalize;

}



/* Section toggle */

.toggle {

    background-color: #666;

    border: none;

    color: #ddd;

    font-size: 1rem;

    font-weight: normal;

    margin-left: 1rem;

    padding: .25rem .5rem;

    text-transform: none;

}

    .toggle:hover {

        color: #fff;

    }



/* Basic table */

#basic .toggle,

#basic th {

    background-color: #9E0039;

}

#basic tbody tr:hover {

    background-color: rgba(245,152,157,.25);

}



/* Basic sort table */

#basic-sort .toggle,

#basic-sort th {

    background-color: #A36209;

}

#basic-sort tbody tr:hover {

    background-color: rgba(253,198,137,.25);

}



/* Biaxial table */

#biaxial .toggle,

#biaxial .bx1 th {

    background-color: #1A7B30;

}

#biaxial .bx1 tbody tr:hover {

    background-color: rgba(163,211,156,.5);

}



#biaxial .bx2 thead th,

#biaxial .bx2 tbody th {

    background-color: #ccc;

    background-image: none;

    color: #333;

}

    #biaxial .bx2 tbody tr:nth-child(2n-1) th {

        background-color: #b9b9b9;

    }

#biaxial .bx2 img {

    margin: 0 auto .5rem;

}

#biaxial .user-location {

    white-space: nowrap;

}



/* Final */

#final .sticky-wrap {

    overflow-x: auto;

    overflow-y: auto;

    max-height: 75vh;

}

#final .toggle {

    background-color: #004B80;

}



/* Media queries, unrelated to functionality of StickySort */

@media only screen and (max-width: 768px) {

    html {

        font-size: 14px;

    }

    header,

    #final .sticky-wrap {

        max-height: 25rem;

    }

}



.main-content {

    float: none !important;

}