.lighthouse-main {
    position: fixed;
    top: 0px;
    right: -600px;
    width: 600px;
    padding: 0 0 0 50px;
    min-height: 120px;
    z-index: 9999999;
    bottom: 0;
}
.lighthouse-main .open-close {
    position: absolute;
    top: 50%;
    left: -48px;
    display: block;
    height: 136px;
    width: 48px;
    outline: none !important;
    background-color: #fff;
    padding: 5px 14px;
    margin-top: 6px;
    border: 1px solid #000;
}
.lighthouse-main.open .open-close {
    left: 3px;
}
.lighthouse-main .open-close:hover {
    background-color: #ffb463;
}
.lighthouse-main .open-close span {
    transform: rotate(-270deg);
    display: inline-block;
    width: 96px;
    height: 24px;
    position: absolute;
    left: -23px;
    top: 69px;
    font-size: 20px;
    color: #222222;
    outline: none !important;
    line-height: 1;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.05px;
}
.lighthouse-main .open-close img {
    width: 20px;
}
.lighthouse-main #lighthouse-outer {
    background-color: #fff;
    overflow-y: scroll;
    height: 100%;
    border-left: 1px solid;
    font-size: 14px;
}
.lighthouse-header {
    text-align: center;
    border-bottom: 1px solid #eee;
}
.lighthouse-header button {
    background: #2f57cc;
    color: #fff;
    border-radius: 5px;
    padding: 3px 15px;
}
#lighthouse-outer form {
    padding: 0 10px;
}
#lighthouse-outer form span {
    margin-top: 15px;
    font-size: 22px;
}
@media(max-width:500px) {
    .lighthouse-main {
        top: 0;
    }
}
@media(max-width:400px) {
    .lighthouse-main {
        width: 315px;
        right: -265px;
    }
}
/*** RADIAL PROGRESS ***/
/* Circumference = 2πr */
/* π = 3.1415926535898 */
/* r = 35 */

svg.radial-progress {
    height: auto;
    max-width: 95px;
    padding: 1em;
    transform: rotate(-90deg);
    width: 100%;
}

svg.radial-progress circle {
    fill: rgba(0,0,0,0);
    stroke: #fff;
    stroke-dashoffset: 219.91148575129; /* Circumference */
    stroke-width: 7;
}

svg.radial-progress circle.incomplete { opacity: 0.10; }

svg.radial-progress circle.complete { stroke-dasharray: 219.91148575129; /* Circumference */ }

svg.radial-progress text {
  fill: #000;
  font: 400 1em/1 'Oswald', sans-serif;
  text-anchor: middle;
}

/*** COLORS ***/
/* Primary */

svg.radial-progress.good circle { stroke: #0cce6b; }
svg.radial-progress.good circle.incomplete { fill: #0cce6b; }
/* Secondary */

svg.radial-progress.bad circle { stroke: #ff0000; }
svg.radial-progress.bad circle.incomplete { fill: #ff0000; }
/* Tertiary */

svg.radial-progress.ok circle { stroke: #ffa400; }
svg.radial-progress.ok circle.incomplete {fill: #ffa400}
.progress-wrapper {
    width: 19%;
    display: inline-block;
    text-align: center;
}

.progress-wrapper span {
    width: 85px;
    display: inline-grid;
}
.googlespeed-info{
    text-align: center;
}
.googlespeed-info .googlespeed-info-inner {
    display: inline-block;
    border: 1px solid #eee;
    padding: 8px 35px;
    border-radius: 30px;
    margin-top: 20px;
}
.googlespeed-info .googlespeed-info-inner .bad-output {
    position: relative;
    padding-left: 24px;
    padding-right: 25px;
}
.googlespeed-info .googlespeed-info-inner .bad-output:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 5px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid red;
}
.googlespeed-info .googlespeed-info-inner .ok-output {
    position: relative;
    padding-left: 24px;
    padding-right: 25px;
}
.googlespeed-info .googlespeed-info-inner .ok-output:before {
    content: '';
    width: 10px;
    height: 10px;
    background: #ffa400;
    position: absolute;
    left: 0;
    top: 5px;
}
.googlespeed-info .googlespeed-info-inner .good-output {
    position: relative;
    padding-left: 24px;
}
.googlespeed-info .googlespeed-info-inner .good-output:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #0cce6b;
    position: absolute;
    left: 0;
    top: 5px;
    border-radius: 50%;
}
#progressCounter {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0,0,0,0.6);
    border: 1px solid;
    text-align: center;
}
#progressCounter #loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.center-content {
    text-align: center;
}
.li-50-50 {
  padding: 0;
  list-style: none;
}
.li-50-50 li {
    width: 46%;
    float: left;
    border-top: 1px solid #eee;
    padding: 8px 0;
    font-size: 14px;
}
.li-50-50 li:nth-child(even) {
    margin-left: 2%;
}
.li-50-50 li:nth-child(odd) {
    margin-right: 2%;
}
.li-50-50 li:last-child {
    border-bottom: 1px solid #eee;
}
.li-50-50 li:nth-last-child(2) {
    border-bottom: 1px solid #eee;
}
.table .tr{
    display: flex;
}
.table .tr .td {
    word-break: break-all;
    padding: 0 10px 0 0;
}
.render-blocking-resources .tr .th {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}
.tx-wind-google-lighthouse .render-blocking-resources .tr .td:first-child,.tx-wind-google-lighthouse .render-blocking-resources .tr .th:first-child{
    width: 70%;
}
.tx-wind-google-lighthouse .render-blocking-resources .tr .td:nth-child(2),.tx-wind-google-lighthouse .render-blocking-resources .tr .th:nth-child(2){
    width: 15%;
}
.tx-wind-google-lighthouse .render-blocking-resources .tr .td:nth-child(3),.tx-wind-google-lighthouse .render-blocking-resources .tr .th:nth-child(3){
    width: 15%;
}
.tx-wind-google-lighthouse .audit-outer .auditheader {
    border-top: 1px solid rgba(0,0,0,0.125);
}
.tx-wind-google-lighthouse .audit-outer .auditheader h2 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #0288D1;
}
.tx-wind-google-lighthouse .audit-outer .auditheader:last-child {
    border-bottom: 1px solid #eee; 
}
.tx-wind-google-lighthouse .accordion .card-header {
    padding: 1px 0px;
    background: transparent;
}
.tx-wind-google-lighthouse .accordion .card-header button {
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
}
.tx-wind-google-lighthouse .accordion .card-header button:after {
    content: "";
    border: solid #808080;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    position: absolute;
    right: 4px;
    top: 17px;
}
.tx-wind-google-lighthouse .accordion .card-header button.collapsed:after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: 12px;
}
.tx-wind-google-lighthouse .accordion .card {
    border-left: 0;
    border-right: 0;
}
.good {
    color: #0cce6b;
}
.good-score {
    width: 12px;
    height: 12px;
    background: #0cce6b;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}
.ok {
    color: #ffa400; 
}
.ok-score {
    width: 10px;
    height: 10px;
    background: #ffa400; 
    display: inline-block;
    margin-right: 10px;
}
.bad {
    color: red;
}
.bad-score {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid red;
    margin-right: 10px;
}
.unch {
    color: #808080;
}
.unch-score {
    width: 12px;
    height: 12px;
    background: #808080;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}
.performance-text {
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
}
.opportunity-label {
    display: inline-block;
    width: 100%;
}
.opportunity-label span {
    color: #808080;
    font-weight: 500;
}
.left-text {
    float: left;
}
.right-text {
    float: right;
}
.opportunity-text {
    margin-top: 10px;
    margin-bottom: 15px;
}
.category-text {
    margin-top: 20px;
    margin-bottom: 15px; 
}
.categories-content {
    width: 70%;
    margin: 0 auto;
}