/* Component styles */ @font-face { font-family: 'Blokk'; src: url('../fonts/blokk/BLOKKRegular.eot'); src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg'); font-weight: normal; font-style: normal; } .component { line-height: 1.5em; margin: 0 auto; padding: 2em 0 3em; width: 90%; max-width: 1000px; overflow: hidden; } .component .filler { font-family: "Blokk", Arial, sans-serif; color: #d3d3d3; } table { border-collapse: collapse; margin-bottom: 3em; width: 100%; background: #fff; } td, th { padding: 0.75em 1.5em; text-align: left; } td.err { background-color: #e992b9; color: #fff; font-size: 0.75em; text-align: center; line-height: 1; } th { background-color: #31bc86; font-weight: bold; color: #fff; white-space: nowrap; } tbody th { background-color: #2ea879; } tbody tr:nth-child(2n-1) { background-color: #f5f5f5; transition: all .125s ease-in-out; } tbody tr:hover { background-color: rgba(129,208,177,.3); } /* For appearance */ .sticky-wrap { overflow-x: auto; overflow-y: hidden; position: relative; margin: 3em 0; width: 100%; } .sticky-wrap .sticky-thead, .sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect { opacity: 0; position: absolute; top: 0; left: 0; transition: all .125s ease-in-out; z-index: 50; width: auto; /* Prevent table from stretching to full size */ } .sticky-wrap .sticky-thead { box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125); z-index: 100; width: 100%; /* Force stretch */ } .sticky-wrap .sticky-intersect { opacity: 1; z-index: 150; } .sticky-wrap .sticky-intersect th { background-color: #666; color: #eee; } .sticky-wrap td, .sticky-wrap th { box-sizing: border-box; } /* Not needed for sticky header/column functionality */ td.user-name { text-transform: capitalize; } .sticky-wrap.overflow-y { overflow-y: auto; max-height: 50vh; }