<commit_before>// bower:scss
// endbower

@font-face {
    font-family: 'AF-LED7Seg-3';
    src: url('fonts/2BB2E2_0_0.woff') format('woff'),
         url('fonts/2BB2E2_0_0.ttf') format('truetype');
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin:0;
    padding:0;
    height:100%;
    width: 100%;
    user-select: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    background-color: #999999;
    background: url(../images/car_background@2x.jpg) no-repeat 100% 100%, url(../images/speckles_background@2x.jpg) repeat;
    background-size: 530px 325px, auto;

    color: #333;
    font-family: 'Source Sans Pro', source-sans-pro, sans-serif;
    letter-spacing: 3px;
    overflow: hidden;
    perspective: 5000px;
}

img {
    vertical-align: middle;
}
button {
  overflow: visible;
  text-transform: none;
  margin: 0;
  -webkit-appearance: button;
  border: none;
}
button[disabled] {
  cursor: default;
}
button:focus {
    outline:0;
}
button::-moz-focus-inner{
  padding: 0;
  border: 0;
}

footer {
    position: relative;
    letter-spacing: normal;
    width: 990px;
    float: left;
    margin-top: 10px;
    margin-left: 5%;
    font-size: 10px;
    font-weight: 300;

    a:visited, a {
        color: #333;
    }
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.spinner-overlay {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background-color:rgba(0,0,0,0.8);
    transition: all 400ms;
    z-index:500;
}

.details-spinner-overlay {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background-color:rgba(0,0,0,0.8);
    transition: all 400ms;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.spinner {
  width: 100px;
  height: 100px;
  position: absolute;
  top:calc(50% - 50px);
  left:calc(50% - 50px); 
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 20;
    /*background-color: rgba(0,0,0,0.8);*/
    background-color: #999999;
    background: url(../images/car_background@2x.jpg) no-repeat 100% 100%, url(../images/speckles_background@2x.jpg) repeat;
    background-size: 530px 325px, auto;
}


.overlay-splat {
    -webkit-backface-visibility: hidden; position:absolute;
}

.overlay-title {
    font-weight:bold; font-size:100px; color:#fff;
    position:absolute; line-height:85px;
    letter-spacing:-0.0175em;
}

.overlay-description {
    color: white;
    font-size: 18px;
    font-weight: 300;
    margin-left: 5px;
    margin-top: 0px;
    position: absolute;
    text-transform:uppercase;
    letter-spacing:1px;
    line-height:22px;
    img {
        vertical-align: bottom;
        width: 109px; position:relative;  top:4px;
    }
}

.overlay-instructions {
    margin-left: 200px;
    margin-top: 240px;
    position: absolute;
    z-index: 101;
}

.about-block {
    margin-top: 36px;
    color: white;
    width: 580px;
    margin-left: calc(20% + 60px);
    position: absolute;
    z-index: 100;

    a:visited, a {
        color: white;
    }

    .about-header {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 40px;
        letter-spacing: 0.3em;
    }

    .about-description {
        font-size: 19px;
        font-weight: 300;
        margin: 30px 0 30px 0;
    }

    .zd-website-button {
        font-size: 18px;
        font-weight: 700;
        padding: 10px 20px;
        border-radius: 12px;
        border: 2px solid white;
        width: 241px;
        float: left;
        cursor: pointer;
        text-decoration: none;
    }

    .close-about-button {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        float: left;
        padding-top: 17px;
        margin-left: 25px;
        border-bottom: 2px solid white;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
}

.dashboard {
    height: 94%;
    width: 90%;
    min-height: 550px;
    min-width: 990px;
    position: relative;
    margin: auto;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;

    .dashboard-foreground {
        background: url(../images/speckles_background@2x.jpg) repeat;
        background-color: #999999;
        background-size: auto;

        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        box-shadow: #ABABAB 0px 0px 3px inset, 2px 2px 6px 0px rgba(0,0,0,0.75);
        overflow: hidden;
        display: inline-block;

        .year-trend-wrapper {
            position: relative;
            height: 54px;
            margin: 0 10px;
            width: calc(100% - 20px);
            margin-bottom: 18px;
            border-bottom: 1px solid #737373;

            .trend-header {
                float: left;
                font-size: 20px;
                margin-left: 60px;
                text-transform: uppercase;
                position: absolute;
                bottom: 0;
            }

            #trend {
                height: 52px;
                margin-left: 236px;
            }

            .about-button {
                float: right;
                position: absolute;
                right: 0;
                top: 15px;
                cursor: pointer;
            }
        }

        .make-wrapper {
            background: #7A7A7A;
            float: left;
            padding: 0 8px;
            width: 20%;
            min-width: 186px;
            height: calc(100% - 180px);
            position: relative;

            .make-header {
                color: #f6ebe6;
                margin: 10px 0;
                font-size: 21px;
                font-weight: 300;
                text-transform: uppercase;
                height: 50px;
                position: relative;
                z-index: 100;
            }

            #make-bar-chart {
                height: calc(100% - 60px);
                position: relative;
                z-index: 100;
            }
        }

        .connector {
            background: #4C4C4C;
            float: left;
            width: 25px;
            height: calc(100% - 180px);
            margin-top: 46px;
            transform: skew(0,75deg);
        }

        .model-wrapper {
            background: #7A7A7A;
            float: left;
            padding: 0 8px;
            width: 20%;
            min-width: 186px;
            height: calc(100% - 180px);
            position: relative;

            .model-header {
                color: #f6ebe6;
                margin: 10px 0;
                font-size: 21px;
                font-weight: 300;
                text-transform: uppercase;
                height: 50px;
            }

            #model-bar-chart {
                height: calc(100% - 60px);
            }
        }

        .header {
            margin-top: 0px;
            height: 93px;
            margin-left: calc(20% + 50px);

            .title {
                color: #ffffff;
                font-size: 40px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.3em;
                margin-left: 10px;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .stats {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;

                button.reset {
                    margin-left: 20px;
                    vertical-align: top;
                    background: none;
                    height: 30px;
                    padding: 0;
                }
                button.reset .circle {
                    background: rgba(93, 93, 93, 0.75);
                    color: #78C9D1;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    // transform: rotate(300deg);
                    box-shadow: 4px 4px 3px 0px rgba(73, 73, 73, 0.75);
                    vertical-align: top;
                    padding: 2px 1px 0 2px;
                    font-size: 13px;
                }

                button.reset:active .circle {
                    box-shadow: none;
                }

                button.reset .label {
                    color: #4c4c4c;
                    font-size: 10px;
                    line-height: 12px;
                    margin-left: 6px;
                    text-align: left;
                    text-transform: uppercase;
                }

                div {
                    display: inline-block;
                }

                .LED {
                    background: #7A7A7A;
                    font-family: AF-LED7Seg-3;
                    font-size: 30px;
                    position: relative;
                    height: 30px;
                    margin-left: 20px;
                    line-height: 22px;

                    div {
                        position: absolute;
                        text-align: right;
                        width: inherit;
                        height: inherit;
                    }

                    div.background {
                        color: #737373;
                    }

                    div.foreground {
                        color: #F6EBE6;
                    }
                }

                .LED.five {
                    width: 115px;
                }

                .LED.six {
                    width: 135px;
                }

                .filler {
                    color: #f6ebe6;
                    height: 30px;
                    font-size: 21px;
                    line-height: 30px;
                    margin-left: 20px;
                    font-weight: 300;
                    vertical-align: top;
                    text-transform: uppercase;
                }
            }
        }

        .gauges {
            float: right;
            height: 120px;
            width: 55%;

            .gauge {
                display: inline-block;
                margin: 0 10px 0 0;
                width: 120px;
                height: 90px;
            }
        }

        .scatterplot {
            width: 100%;
            height: 100%;
        }

        .map {
            width: 100%;
            height: 100%;
        }

        .background-image {
            position: absolute;
           /* bottom: -10%;
            right: -6%;*/
            bottom:-41px;
            right:-62px;
            width: 530px;
            height: 325px;
        }

        .annotation {
            color: #333333;
            position: absolute;
            bottom: 0;
            left: 10px;
            height: 100px;
            letter-spacing: 0.15em;
            
            div {
                font-size: 12px;
                font-weight: 300;
                text-transform: uppercase;

                img {
                    margin-bottom: 10px;
                }
            }
        }
    }

    .dashboard-background {
        background: #424242;
        color: #E5E5E5;
        box-shadow: inset 0 0 100px 20px #000000;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        text-align: center;
        position: absolute;
        padding: 0 24px;
        overflow: hidden;
        border-collapse: collapse;

        h2.header {
            font-weight: 300;
            font-size: 23px;
            text-transform: uppercase;
        }

        .backgrid-container {
            height: calc(100% - 70px);
            overflow: hidden;
        }

        .backgrid {
            $makeWidth: 100px;
            $modelWidth: 90px;
            $yearWidth: 60px;
            $stateWidth: 60px;
            $componentWidth: 200px;
            $crashedWidth: 30px;
            $fireWidth: 30px;
            $injuredWidth: 30px;
            $speedWidth: 40px;
            $descriptionWidth: 302px; //942px - 640px

            letter-spacing: 0.15em;

            thead tr {
                display: block;
                position: relative;
            }

            thead {
                th {
                    background-color: transparent;
                    border-bottom: 6px solid #5F5F5F;
                    font-size: 11px;
                    height: 52px;
                    vertical-align: bottom;
                    overflow: visible;
                }

                th.make {
                    min-width: $makeWidth;
                }

                th.model {
                    min-width: $modelWidth;
                }

                th.year {
                    min-width: $yearWidth;
                }

                th.state {
                    min-width: $stateWidth;
                }

                th.component {
                    min-width: $componentWidth;
                }

                // Rotate Column Headers
                // http://css-tricks.com/rotated-table-column-headers/
                th.crashed {
                    min-width: $crashedWidth;
                    max-width: $crashedWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, 2px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.fire {
                    min-width: $fireWidth;
                    max-width: $fireWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, 1px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.injured {
                    min-width: $injuredWidth;
                    max-width: $injuredWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, 1px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.speed {
                    min-width: $speedWidth;
                    max-width: $speedWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, -3px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.description {
                    width: $descriptionWidth;
                    min-width: $descriptionWidth;
                }
            }

            tbody {
                display: block;
                width: 100%;
                overflow: auto;

                td {
                    border-left: 1px solid #5F5F5F;
                    border-bottom: 1px solid #5F5F5F;
                    border-right: 1px solid #5F5F5F;
                    font-size: 11px;
                }

                td.bullet {
                    color: #6d6e71;
                }

                td:nth-child(1){
                    min-width: $makeWidth;
                }<commit_msg>Minor CSS tweak for the details grid.<commit_after>// bower:scss
// endbower

@font-face {
    font-family: 'AF-LED7Seg-3';
    src: url('fonts/2BB2E2_0_0.woff') format('woff'),
         url('fonts/2BB2E2_0_0.ttf') format('truetype');
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin:0;
    padding:0;
    height:100%;
    width: 100%;
    user-select: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    background-color: #999999;
    background: url(../images/car_background@2x.jpg) no-repeat 100% 100%, url(../images/speckles_background@2x.jpg) repeat;
    background-size: 530px 325px, auto;

    color: #333;
    font-family: 'Source Sans Pro', source-sans-pro, sans-serif;
    letter-spacing: 3px;
    overflow: hidden;
    perspective: 5000px;
}

img {
    vertical-align: middle;
}
button {
  overflow: visible;
  text-transform: none;
  margin: 0;
  -webkit-appearance: button;
  border: none;
}
button[disabled] {
  cursor: default;
}
button:focus {
    outline:0;
}
button::-moz-focus-inner{
  padding: 0;
  border: 0;
}

footer {
    position: relative;
    letter-spacing: normal;
    width: 990px;
    float: left;
    margin-top: 10px;
    margin-left: 5%;
    font-size: 10px;
    font-weight: 300;

    a:visited, a {
        color: #333;
    }
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.spinner-overlay {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background-color:rgba(0,0,0,0.8);
    transition: all 400ms;
    z-index:500;
}

.details-spinner-overlay {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background-color:rgba(0,0,0,0.8);
    transition: all 400ms;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.spinner {
  width: 100px;
  height: 100px;
  position: absolute;
  top:calc(50% - 50px);
  left:calc(50% - 50px); 
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 20;
    /*background-color: rgba(0,0,0,0.8);*/
    background-color: #999999;
    background: url(../images/car_background@2x.jpg) no-repeat 100% 100%, url(../images/speckles_background@2x.jpg) repeat;
    background-size: 530px 325px, auto;
}


.overlay-splat {
    -webkit-backface-visibility: hidden; position:absolute;
}

.overlay-title {
    font-weight:bold; font-size:100px; color:#fff;
    position:absolute; line-height:85px;
    letter-spacing:-0.0175em;
}

.overlay-description {
    color: white;
    font-size: 18px;
    font-weight: 300;
    margin-left: 5px;
    margin-top: 0px;
    position: absolute;
    text-transform:uppercase;
    letter-spacing:1px;
    line-height:22px;
    img {
        vertical-align: bottom;
        width: 109px; position:relative;  top:4px;
    }
}

.overlay-instructions {
    margin-left: 200px;
    margin-top: 240px;
    position: absolute;
    z-index: 101;
}

.about-block {
    margin-top: 36px;
    color: white;
    width: 580px;
    margin-left: calc(20% + 60px);
    position: absolute;
    z-index: 100;

    a:visited, a {
        color: white;
    }

    .about-header {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 40px;
        letter-spacing: 0.3em;
    }

    .about-description {
        font-size: 19px;
        font-weight: 300;
        margin: 30px 0 30px 0;
    }

    .zd-website-button {
        font-size: 18px;
        font-weight: 700;
        padding: 10px 20px;
        border-radius: 12px;
        border: 2px solid white;
        width: 241px;
        float: left;
        cursor: pointer;
        text-decoration: none;
    }

    .close-about-button {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        float: left;
        padding-top: 17px;
        margin-left: 25px;
        border-bottom: 2px solid white;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
}

.dashboard {
    height: 94%;
    width: 90%;
    min-height: 550px;
    min-width: 990px;
    position: relative;
    margin: auto;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;

    .dashboard-foreground {
        background: url(../images/speckles_background@2x.jpg) repeat;
        background-color: #999999;
        background-size: auto;

        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        box-shadow: #ABABAB 0px 0px 3px inset, 2px 2px 6px 0px rgba(0,0,0,0.75);
        overflow: hidden;
        display: inline-block;

        .year-trend-wrapper {
            position: relative;
            height: 54px;
            margin: 0 10px;
            width: calc(100% - 20px);
            margin-bottom: 18px;
            border-bottom: 1px solid #737373;

            .trend-header {
                float: left;
                font-size: 20px;
                margin-left: 60px;
                text-transform: uppercase;
                position: absolute;
                bottom: 0;
            }

            #trend {
                height: 52px;
                margin-left: 236px;
            }

            .about-button {
                float: right;
                position: absolute;
                right: 0;
                top: 15px;
                cursor: pointer;
            }
        }

        .make-wrapper {
            background: #7A7A7A;
            float: left;
            padding: 0 8px;
            width: 20%;
            min-width: 186px;
            height: calc(100% - 180px);
            position: relative;

            .make-header {
                color: #f6ebe6;
                margin: 10px 0;
                font-size: 21px;
                font-weight: 300;
                text-transform: uppercase;
                height: 50px;
                position: relative;
                z-index: 100;
            }

            #make-bar-chart {
                height: calc(100% - 60px);
                position: relative;
                z-index: 100;
            }
        }

        .connector {
            background: #4C4C4C;
            float: left;
            width: 25px;
            height: calc(100% - 180px);
            margin-top: 46px;
            transform: skew(0,75deg);
        }

        .model-wrapper {
            background: #7A7A7A;
            float: left;
            padding: 0 8px;
            width: 20%;
            min-width: 186px;
            height: calc(100% - 180px);
            position: relative;

            .model-header {
                color: #f6ebe6;
                margin: 10px 0;
                font-size: 21px;
                font-weight: 300;
                text-transform: uppercase;
                height: 50px;
            }

            #model-bar-chart {
                height: calc(100% - 60px);
            }
        }

        .header {
            margin-top: 0px;
            height: 93px;
            margin-left: calc(20% + 50px);

            .title {
                color: #ffffff;
                font-size: 40px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.3em;
                margin-left: 10px;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .stats {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;

                button.reset {
                    margin-left: 20px;
                    vertical-align: top;
                    background: none;
                    height: 30px;
                    padding: 0;
                }
                button.reset .circle {
                    background: rgba(93, 93, 93, 0.75);
                    color: #78C9D1;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    // transform: rotate(300deg);
                    box-shadow: 4px 4px 3px 0px rgba(73, 73, 73, 0.75);
                    vertical-align: top;
                    padding: 2px 1px 0 2px;
                    font-size: 13px;
                }

                button.reset:active .circle {
                    box-shadow: none;
                }

                button.reset .label {
                    color: #4c4c4c;
                    font-size: 10px;
                    line-height: 12px;
                    margin-left: 6px;
                    text-align: left;
                    text-transform: uppercase;
                }

                div {
                    display: inline-block;
                }

                .LED {
                    background: #7A7A7A;
                    font-family: AF-LED7Seg-3;
                    font-size: 30px;
                    position: relative;
                    height: 30px;
                    margin-left: 20px;
                    line-height: 22px;

                    div {
                        position: absolute;
                        text-align: right;
                        width: inherit;
                        height: inherit;
                    }

                    div.background {
                        color: #737373;
                    }

                    div.foreground {
                        color: #F6EBE6;
                    }
                }

                .LED.five {
                    width: 115px;
                }

                .LED.six {
                    width: 135px;
                }

                .filler {
                    color: #f6ebe6;
                    height: 30px;
                    font-size: 21px;
                    line-height: 30px;
                    margin-left: 20px;
                    font-weight: 300;
                    vertical-align: top;
                    text-transform: uppercase;
                }
            }
        }

        .gauges {
            float: right;
            height: 120px;
            width: 55%;

            .gauge {
                display: inline-block;
                margin: 0 10px 0 0;
                width: 120px;
                height: 90px;
            }
        }

        .scatterplot {
            width: 100%;
            height: 100%;
        }

        .map {
            width: 100%;
            height: 100%;
        }

        .background-image {
            position: absolute;
           /* bottom: -10%;
            right: -6%;*/
            bottom:-41px;
            right:-62px;
            width: 530px;
            height: 325px;
        }

        .annotation {
            color: #333333;
            position: absolute;
            bottom: 0;
            left: 10px;
            height: 100px;
            letter-spacing: 0.15em;
            
            div {
                font-size: 12px;
                font-weight: 300;
                text-transform: uppercase;

                img {
                    margin-bottom: 10px;
                }
            }
        }
    }

    .dashboard-background {
        background: #424242;
        color: #E5E5E5;
        box-shadow: inset 0 0 100px 20px #000000;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        text-align: center;
        position: absolute;
        padding: 0 24px;
        overflow: hidden;
        border-collapse: collapse;

        h2.header {
            font-weight: 300;
            font-size: 23px;
            text-transform: uppercase;
        }

        .backgrid-container {
            height: calc(100% - 70px);
            overflow: hidden;
        }

        .backgrid {
            $makeWidth: 100px;
            $modelWidth: 90px;
            $yearWidth: 60px;
            $stateWidth: 60px;
            $componentWidth: 200px;
            $crashedWidth: 30px;
            $fireWidth: 30px;
            $injuredWidth: 30px;
            $speedWidth: 40px;
            $descriptionWidth: 302px; //942px - 640px

            letter-spacing: 0.15em;

            thead tr {
                display: block;
                position: relative;
            }

            thead {
                th {
                    background-color: transparent;
                    border-bottom: 6px solid #5F5F5F;
                    font-size: 11px;
                    height: 52px;
                    vertical-align: bottom;
                    overflow: visible;
                }

                th.make {
                    min-width: $makeWidth;
                }

                th.model {
                    min-width: $modelWidth;
                }

                th.year {
                    min-width: $yearWidth;
                }

                th.state {
                    min-width: $stateWidth;
                }

                th.component {
                    min-width: $componentWidth;
                }

                // Rotate Column Headers
                // http://css-tricks.com/rotated-table-column-headers/
                th.crashed {
                    min-width: $crashedWidth;
                    max-width: $crashedWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, 2px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.fire {
                    min-width: $fireWidth;
                    max-width: $fireWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, 1px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.injured {
                    min-width: $injuredWidth;
                    max-width: $injuredWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, 1px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.speed {
                    min-width: $speedWidth;
                    max-width: $speedWidth;
                    white-space: nowrap;

                    div {
                        transform: translate(0, -3px) rotate(315deg);

                        span {
                            padding: 5px 10px;
                        }
                    }
                }

                th.description {
                    width: $descriptionWidth;
                    min-width: $descriptionWidth;
                }
            }

            tbody {
                display: block;
                width: 100%;
                overflow-y: auto;
                overflow-x: hidden;

                td {
                    border-left: 1px solid #5F5F5F;
                    border-bottom: 1px solid #5F5F5F;
                    border-right: 1px solid #5F5F5F;
                    font-size: 11px;
                }

                td.bullet {
                    color: #6d6e71;
                }

                td:nth-child(1){
                    min-width: $makeWidth;
                }
{'fraction_non_alphanumeric': 0.10352099761599119, 'fraction_numerical': 0.046335350571550825, 'mean_word_length': 1.0585755631055744, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 10, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2183439', 'n_tokens_mistral': 10934, 'n_tokens_neox': 9130, 'n_words': 1972}