#report {
    padding: 0px;
    background-color: #ecf0f1;
}

.navbar-default {
    background-image: none;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0px;
    border: 0px;
    padding-top: 15px;
    text-align: center;
    color: #384047;
    font-size: 16px;
    font-weight: 300;
}

.navbar-default a {
    color: #384047;
}

.navbar-active {
    background-color: #334d5c;
    transition:0.6s;
    color: white;
}

.navbar-active a {
    color: white;
    transition:0.6s;
}

#report > #console-title {
    padding-left: 20px;
    margin-top: 100px;
    font-size: 18px;
    font-weight: 700;
    color: #8D9AA5;
}
#report > #console {
    background-color: #3C3C3C;
    height: 400px;
    margin-left: 20px;
    overflow:auto;
    padding: 10px;
    color: #FCFCFB;
}
#report > .report-title {
    padding: 0px;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #8D9AA5;
    text-align: center;
    font-family: Bitter;
}
#report > #issues-feed .issue {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 15px;
    color: black;
    border-radius: 0px;
    overflow-x: auto;
    border-bottom: 5px solid  #ecf0f1;
    --box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    padding: 0px;
    border-radius: 2px;
    background-color: #ecf0f1;
}

dl.report { background-color: #eee;}

table {
    width: 100%;
    overflow: auto;
    background-color: #eee;}

#side-nav {
    height: 50px;
    font-size: 14px;
    text-align: left;
    margin-top: 0px;
    padding-top: 20px;
}

#side-nav a {
    color: #8D9AA5;
}

#side-nav span {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}
#side-nav .return-button {
    padding: 0px;
}
#side-nav .return-button a {
    padding: 10px;
    background-color: white;
    border-radius: 2px;
    color: #384047;
    border-bottom: 2px solid #eee;
}

#side-nav .return-button a:hover {
    transition:0.3s;
    padding: 10px;
    background-color: #eee;
}

#report > #issues-feed {
    margin-top: 10px;
}

.issue-category {
    margin-top: 5px;
    color: #999;
}

#report > #issues-feed .issue > div > .title-issue {
    margin-top: 0px;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 14px;
    font-family: Open Sans;
    color: #334d5c;
    text-align: left;
    text-transform: uppercase;
}

#report > #issues-feed .issue > .content-issue {
    background-color: white;
    padding: 10px;
    border-radius: 2px;
}

#report > #issues-feed .issue > .content-issue > p {
    font-weight: 400;
    color: #666;
    font-size: 1rem;
}
#report > #issues-feed .issue > .content-issue > h3 {
    font-weight: 300;
    font-size: 1.2rem;
    color: #384047;
}

#system-info {
    padding: 0px;
}

#report .alert {
        background-color: #ecf0f1;
        padding-bottom: 20px;
        margin-bottom: 0px;
        border: 0px;

}

#report .alert h2 {
    font-size:1.2em;
    margin: 5px 0;
}

#system-info p{
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #e74c3c;
    padding: 10px;
    background-color: white;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#error-issue-feed, #warning-issue-feed, #info-issue-feed{
    padding: 0px;
    margin-top: 20px;
    background-color: white;
    border-radius: 2px;
}

#tip-issue-feed {
    padding: 0px;
    margin-top: 0px;
}

#error-issue-feed .title-issue{
}

#warning-issue-feed .title-issue{
}

#info-issue-feed .title-issue{
}

#error-issue-feed #issue-status span {
    font-size: 40px;
    color: #df5a49;
}

#warning-issue-feed #issue-status span {
    font-size: 40px;
    color: #efc94c;
}

#info-issue-feed #issue-status span {
    font-size: 40px;
    color: #3498db;
}

#tip-issue-feed .issue {
    background-color: transparent;
}

#tip-issue-feed .issue .title-issue {
    background-color: white;
}

#issue-status {

}
#issue-status span {
    margin-top: 10px;
    font-size: 40px;
}

.fixit span {
    color: #44ad99;
    font-size: 20px;
}

.alert-warning {
   color: #9F890C;
}

.alert-info {
    color: #3498db;
}

#report > #overview {
    padding: 0px;
    margin-top: 30px;
}
#report > #overview > #smartphone {
    height: 700px;
    background-repeat:no-repeat;
    margin: auto;
}
#report > #overview > #smartphone.sm {
  background-image: url(../img/smartphone.svg);
}
#report > #overview > #smartphone.sm2 {
  background-image: url(../img/smartphone2.svg);
}
#report > #overview > #smartphone.tab {
  background-image: url(../img/tablet.svg);
  background-size:295px auto;
}
#report > #overview > .sm #screenshot, #report > #overview > .sm2 #screenshot {
    margin-left: 28px;
    margin-top:82px;
}
#report > #overview > .sm2 #screenshot {
    margin-top:72px;
}
#report > #overview > .tab #screenshot {
    margin-left: 15px;
    margin-top:16px;
}

/* ANIMATION */
#sm, #sm2, #tab, #home, #report {
    transition: -webkit-transform 1s;
    transition: transform 1s;
}
.screenshot {
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
}
#report {
    position: absolute;
    top: 0;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}
#report.report {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
#home.report {
    -webkit-transform: translate3d(-100%, 0,0);
    transform: translate3d(-100%, 0,0);
}
#inprogress {
    opacity:0.5;
}
#cogs {
  text-align: center;
}
#cog2 { margin-top: -12px;}
#cog1 { margin-top: 12px;}
#cog1.active, #cog2.active {
        -webkit-animation: 2s rotate linear infinite;
    animation: 2s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.fixit {
    padding: 0px;
    color: #666;
    background-color: white;
    margin-top: 10px;
    margin-bottom: 0px;
}

.fixit h2 {
    margin-top: 0px;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 14px;
    font-family: Open Sans;
    color: #999;
    text-align: left;
    text-transform: uppercase;
}

.range-issue {
    font-size: 20px;
    text-align: center;
    margin-top: 5px;
}

#cog2.active {
     -webkit-animation-direction: reverse;
     animation-direction: reverse;
}
@keyframes rotate {
    from {
    transform: rotate(0);
    }
    to {
    transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    from {
    -webkit-transform: rotate(0);
    }
    to {
    -webkit-transform: rotate(360deg);
    }
}

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

table tbody {
    max-width: 100%;
    overflow: auto;
}
.return-button {
    visibility: hidden;
}
.navbar-default {
    padding-top: 0px;
}
#title-report {
    margin-top: 0px;
}

}

td.number { text-align:right;}