@charset "utf-8";
.container {
    width: 400px;
    height: 200px;
    height: 199px;
    position: absolute;
    top: 30%;
    top: 140px;
    left: 50%;
    overflow: hidden;
    text-align: center;
    transform: translate(-50%, -50%);
    border-bottom: 5px solid gold;
}

.gauge-a {
    z-index: 1;
    position: absolute;
    background-color: rgba(255, 255, 255, .2);
    width: 400px;
    height: 200px;
    top: 0%;
    border-radius: 250px 250px 0px 0px;
}

.gauge-b {
    z-index: 3;
    position: absolute;
    background-color: #222;
    background-color: gold;
    width: 250px;
    height: 125px;
    top: 75px;
    margin-left: 75px;
    margin-right: auto;
    border-radius: 250px 250px 0px 0px;
}

.gauge-c {
    z-index: 2;
    position: absolute;
    background-color: #5664F9;
    width: 400px;
    height: 200px;
    top: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0px 0px 200px 200px;
    transform-origin: center top;
    transition: all 1.3s ease-in-out;
    transition: all 1000ms linear;
}

#percent {
    font-weight: bold;
}

.container:hover .gauge-data {
    color: rgba(255, 255, 255, 1);
}

.gauge-data {
    z-index: 4;
    color: rgba(255, 255, 255, .2);
    font-size: 1.5em;
    line-height: 25px;
    position: absolute;
    width: 400px;
    height: 200px;
    top: 90px;
    margin-left: auto;
    margin-right: auto;
    transition: all 1s ease-out;
}

#ux {
    margin: 200px auto 1.618em;
}

#scan-control {
    display: table;
    margin: auto;
}

#results {
    margin: 1.618em auto;
}

#results td {
    padding: .5em;
    vertical-align: top;
}

.matched,
.altered,
.skipped {
    width: 300px;
    vertical-align: top;
    background: #0c0;
    padding: .5em;
    color: white;
}

.altered {
    background: #fc0;
}

.skipped {
    background: #888;
}