body {
font-family: 'Open Sans', sans-serif;
background: #e1e1e1;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
#data h3 { font-size: 20px; font-weight: 700; margin: 20px 0 20px 0; }
#data h4 { font-size: 18px; font-weight: 700; margin: 20px 0 20px 0; }
#progress {
width: 500px;
border: 1px solid #aaa;
height: 10px;
margin: 20px auto;
}
#progress .bar {
background-color: #3c9adc;
height: 10px;
}
#message { font-size: 20px; height: 30px; } .web-description { text-align: center; font-size: 16px; margin-bottom: 15px; }
.report {
margin: 30px auto;
width: 80%;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
.report i { font-size: 30px; }
#data { margin-top: 20px; text-align: left; }
.report-details-info {
font-size: 18px;
} #report-input form.domainCheck {
width: 95%;
text-align: center;
}
#report-input form.domainCheck .field-wrapper { 
width: 95%; 
display: flex;
position: relative;
margin: 0 auto;
border-radius: 50px;
border: 8px solid rgba(180,178,178,.5)!important;
}
#report-input form.domainCheck .field-wrapper input[type=text] {
padding-left: 50px;
color: #2f3943;
height: 58px;
background-size: 25px 25px !important;
padding: 0 0 0 50px;
width: calc(100% - 220px);
margin: 0;
background: #fff url(//www.websicherheit.at/wp-content/plugins/scanner/images/navsearch.svg) no-repeat 15px 50%;
font-size: 18px;
line-height: 20px;
float: left;
vertical-align: middle;
border: none;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;   		
}
#report-input form.domainCheck .field-wrapper button[type=submit] {
background-color: #E33B00;
border-color: #E33B00;
height: 58px;
-webkit-box-flex: 0;
-ms-flex: 0 0 220px;
flex: 0 0 220px;
font-size: 19px;
line-height: 26px;
margin-top: 0;
width: auto;
position: relative;
padding-left: 18px;
float: left;
font-weight: 700;
display: inline-block;
color: #fff;
text-transform: uppercase;
border-style: solid;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
cursor:pointer;		
}
#report-input button[type=submit] .arrow {
left: -6px;
top: 22px;
background: #e33b00 none repeat scroll 0 0;
content: "";
display: block;
height: 12px;
position: absolute;    
width: 12px;
transform: rotate(45deg);
}
#report-input input:focus, #report-input button:focus { outline: none; } #overview tr, #overview td { border: none; vertical-align: middle; }
#overview .top-box {
width: 50%;
height: 170px;
margin: 0 auto; 
max-width: 500px;
border: 4px solid #c1c1c1;		
}
#overview .top-box tbody, #overview .top-box tr {
background: #fff !important;
}
#overview .top-box #score {
font-size: 120px; 
font-weight: 600;
padding: 0 20px 0 20px;
text-align: center;
}
#overview .top-box #web-url {
font-size: 20px;
font-weight: 400;
} #overview .report-scores, #overview .report-page-details {
padding-right: 30px;
width: 49%;
float: left;
}
@media only screen and (max-width: 1000px) {
#overview .report-scores, #overview .report-page-details {
width: 95%;
}
}
#overview .report-scores h4, #overview .report-page-details h4 { margin: 5px; }
#overview .report-scores .box, #overview .report-page-details .box {
display: flex;
height: 99px;
padding: 0;
font-size: 14px;
border: 4px solid #c1c1c1;
background: linear-gradient(#fff,#f3f3f3);
text-align: center;
}
#overview .report-score, #overview .report-web-vital {
display: flex;
flex: 1;
flex-direction: column;
border-right: 1px solid #e0e0e0;
white-space: nowrap;
}		
#scanMalware, #scanSpam, #scanPhishing, #blacklisted, #googleSpam, #serverStatus { 
font-size: 48px; 
font-weight: 700;
height: 65px;
padding-top: 16px;
}
#overview .color-grade- { 
background: rgb(126,126,125);
background: -moz-linear-gradient(126deg, rgba(126,126,125,1) 0%, rgba(205,204,199,1) 90%);
background: -webkit-linear-gradient(126deg, rgba(126,126,125,1) 0%, rgba(205,204,199,1) 90%);
background: linear-gradient(126deg, rgba(126,126,125,1) 0%, rgba(205,204,199,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7e7e7d",endColorstr="#cdccc7",GradientType=1);	
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#overview .color-grade-A { 
background: rgb(20,78,6);
background: -moz-linear-gradient(126deg, rgb(20,78,6) 0%, rgb(37,214,105) 90%);
background: -webkit-linear-gradient(126deg, rgb(20,78,6) 0%, rgb(37,214,105) 90%);
background: linear-gradient(126deg, rgb(20,78,6) 0%, rgb(37,214,105) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#144e06",endColorstr="#25d669",GradientType=1);	
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;			
}
#overview .color-grade-B { 
background: rgb(43,201,64);
background: -webkit-linear-gradient(126deg, rgba(43,201,64,1) 0%, rgba(2,255,133,0.7511379551820728) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;			
}
#overview .color-grade-C { 
background: rgb(166,176,46);
background: -webkit-linear-gradient(126deg, rgba(166,176,46,1) 0%, rgba(211,255,2,0.7511379551820728) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;			
}
#overview .color-grade-D { 
background: rgb(238,160,13);
background: -webkit-linear-gradient(126deg, rgba(238,160,13,1) 0%, rgba(255,197,2,1) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;			
}
#overview .color-grade-E { 
background: rgb(212,104,16);
background: -webkit-linear-gradient(126deg, rgba(212,104,16,1) 0%, rgba(255,91,2,1) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;			
}
#overview .color-grade-F { 
background: rgb(129,26,26);
background: -webkit-linear-gradient(126deg, rgba(129,26,26,1) 0%, rgba(255,0,0,1) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;			
} #details {
table-layout: fixed;
width: 95%;
border-collapse: collapse;
}
#details thead, #details thead .rules-name {
font-size: 14px;
color: #a1a1a1;
font-weight: 600;
}
#details thead th { padding-left: 12px; border: none; vertical-align: bottom; }
#details tbody { border: 4px solid #c1c1c1; }
#details tr, #details td { border: none; vertical-align: middle; }
#details .rules-name {
font-weight: 400;
font-size: 16px;
height: 56px;
}
.main_color table, #details thead tr, #details th { background: transparent !important; }
#details .rules-row:nth-child(4n+1) { background: #f1f1f1; }		
#details .rules-row:nth-child(2n+2) { background: #fff; }
#details .rules-row:nth-child(4n+3) { background: #e3e3e3; }
#details td {
padding: 6px;
border: none;
}
#details .rules-impact {
width: 100px;
text-align: center;
}
#scanMalwareDetails, #scanSpamDetails, #scanPhishingDetails, #blacklistedDetails, #googleSpamDetails, #serverStatusDetails {
width: 100px;
text-align: center;
color: #fff; 
font-size: 24px; 
font-weight: 600;
}
#details .color-grade- {
background: rgb(126,126,125);
background: linear-gradient(126deg, rgba(126,126,125,1) 0%, rgba(205,204,199,1) 90%);
}		
#details .color-grade-A {
background: rgb(20,78,6);
background: -webkit-linear-gradient(126deg, rgb(20,78,6) 0%, rgb(37,214,105) 90%);
}
#details .color-grade-B {
background: rgb(43,201,64);
background: linear-gradient(126deg, rgba(43,201,64,1) 0%, rgba(2,255,133,0.7511379551820728) 90%);
}
#details .color-grade-C {
background: rgb(166,176,46);
background: linear-gradient(126deg, rgba(166,176,46,1) 0%, rgba(211,255,2,0.7511379551820728) 90%);
}
#details .color-grade-D {
background: rgb(238,160,13);
background: linear-gradient(126deg, rgba(238,160,13,1) 0%, rgba(255,197,2,1) 90%);
}
#details .color-grade-E {
background: rgb(212,104,16);
background: linear-gradient(126deg, rgba(212,104,16,1) 0%, rgba(255,91,2,1) 90%);
}
#details .color-grade-F {
background: rgb(129,26,26);
background: linear-gradient(126deg, rgba(129,26,26,1) 0%, rgba(255,0,0,1) 90%);
}
#details .rules-expand { width: 52px; }
#details .rules-row:nth-child(4n+1) td.rules-expand { background: #ededed; }		
#details .rules-row:nth-child(4n+3) td.rules-expand { background: #e0e0e0; }
#details tr.rules-row:hover { background: #d4d4d4; }
#details i { color: #a1a1a1; }
#details tr.rules-row.rules-details:hover { background: #fff; }
#details .rules-details td { padding: 0; }
.rules-details td div, .rules-details td p { font-size: 15px; }
#details .report-desc { padding: 20px 20px 20px 32px; }
.b-status { margin-left: 40px; margin-bottom: 20px; }
.offline, #oldSoftware { color: #E33B00; font-weight: 600; display: flex; align-items: center; margin-bottom: 20px; }
.offline i,  #oldSoftware i { font-size: 30px; color: #E33B00; margin-right: 12px; }
.report-desc h4 { display: flex; align-items: center; }
#details .report-desc h4 i { color: #E33B00; }
#details .report-desc h4 i.orange { color: rgb(255,91,2); }
#web-status div { display: flex; align-items: center; font-size: 20px; font-weight: 600; }
#web-status div i { margin-right: 12px; font-size: 34px; } 
#web-status div i.icon-ok-circled { color: rgb(37,214,105); }
#web-status div i.icon-exclamation { color: #E33B00; }
#web-status div i.icon-attention { color: rgb(255,91,2); }
@media only screen and (max-width: 768px) { 
.report {
margin: 20px auto;
width: 100%;
}
}