body
{
display:block;
}
.searchandfilter p
{
margin-top: 1em;
display:inline-block;
}
.searchandfilter ul
{
display:inline-block;
}
.searchandfilter li
{
list-style: none;
display:inline-block;
padding-right:10px;
} .widget-area .searchandfilter li, .widget-area .searchandfilter p
{
display:block;
}
.searchandfilter label
{
display:block;
}
.searchandfilter h4
{
margin:15px 0;
font-size:16px;
}
.searchandfilter ul > li > ul:not(.children)
{
margin-left:0;
}#seo-scan-form {
margin: 20px 0;
}
div#seo-scan-tool {
width: 100%;
padding: 0;
margin: 0;
max-width: 100%; } #seo-scan-results {
margin-top: 20px; background: #f9f9f9;
}
#seo-scan-results th {
padding: 10px 20px;
color: #243d47de;
}
#seo-scan-results td {
padding: 10px 20px;
}
.snippet-preview {
border: 1px solid #ddd;
padding: 10px;
margin-top: 10px;
font-family: Arial, sans-serif;
}
.snippet-title {
color: #1a0dab;
font-size: 18px;
margin: 0;
}
.snippet-url {
color: #006621;
font-size: 14px;
margin: 0;
}
.snippet-description {
color: #545454;
font-size: 13px;
margin: 0;
}
.seo-tabs {
display: flex;
margin-bottom: 15px;
text-align: center;
vertical-align: middle;
justify-content: center;
gap: 10px;
}
.seo-tab-panel.active label {
float: left;
width: 100%;
font-weight: 500;
}
.seo-tab-panel.active #seo-result label {
font-weight: 700 !important;
}
.seo-tab-panel input,
.seo-tab-panel textarea {
padding: 8px;
border: 1px solid #ccc;
width: 100%;
border-radius: 6px;
}
.seo-tab-button {
padding: 0px 45px !important;
cursor: pointer;
border: 1px solid #ddd;
background: #f9f9f9;
margin-right: 5px;
border-radius: 4px;
}
.seo-tab-button.active {
background: #0073aa;
color: #fff;
border-color: #0073aa;
}
.seo-tab-panel {
display: none;
}
.seo-tab-panel.active {
display: block;
} @keyframes growProgressBar {
0%,
33% {
--pgPercentage: 0;
}
100% {
--pgPercentage: var(--value);
}
}
@property --pgPercentage {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
div[role="progressbar"] {
--size: 12rem;
--fg: #369;
--bg: #def;
--pgPercentage: var(--value);
animation: growProgressBar 3s 1 forwards;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
font-family: Helvetica, Arial, sans-serif;
font-size: calc(var(--size) / 5);
color: var(--fg);
}
div[role="progressbar"]::before {
counter-reset: percentage var(--value);
content: counter(percentage) '%';
} .main-resultdiv.hidden {
background-color: #fafafc;
display: none !important;
}
.main-resultdiv {
background-color: #fafafc;
padding: 50px;
margin-top: 40px;
border-radius: 15px;
}
.resultdiv {
justify-content: space-between;
gap: 100px;
margin-top: 10px;
}
div#seo-result {
width: 100%;
}
.result-preview-block {
display: flex;
gap: 20px;
}
.result-preview-mobile-snippet,
.result-preview-desktop-snippet {
border: 2px solid #e2e3e8;
border-radius: 12px;
padding: 30px 15px;
}
.result-preview-desktop,
.result-preview-mobile {
width: 100%;
}
.counttitle,
.countdesciption,
.result-icons-title,
.result-icons-description {
display: flex;
gap: 20px;
margin-top: 10px;
align-items: end;
}
.result-icons-title-desktop,
.result-icons-description-desktop {
display: flex;
width: 40px; padding: 3px;
background: #ff6464d4;
border: 2px solid red;
border-radius: 4px;
fill: white;
}
.result-icons-title,
.result-icons-description {
gap: 10px;
}
.result-icons-title-mobile,
.result-icons-description-mobile {
display: flex;
width: 40px;
padding: 3px;
background: #ff6464d4;
border: 2px solid red;
border-radius: 4px;
fill: white;
}
p#suggestion-note {
display: flex;
}
p#suggestion-note svg {
width: 20px !important;
height: 20px !important;
}
.result-icons-desktop-bulk,
.result-icons-mobile-bulk {
display: flex;
width: 36px;
padding: 3px;
background: #ff6464d4;
border: 2px solid red;
border-radius: 4px;
fill: white;
}
.result-icons-desktop-bulk-description,
.result-icons-mobile-bulk-description {
display: flex;
width: 36px;
padding: 3px;
background: #ff6464d4;
border: 2px solid red;
border-radius: 4px;
fill: white;
}
.result-icons-good {
background: #4dbc7099;
border: 2px solid #4dbc70;
}
tbody,
td,
tfoot,
th,
thead,
tr {
border-color: #dbdbdb;
border-style: solid;
border-width: 1px;
padding: 15px;
}
.bulk-result-table {
display: flex;
gap: 10px;
margin-top: 8px;
}
.seo-tab-panel {
margin: 20px 0px 20px;
}
.analyse-btn-single,
.analyse-btn-bulk-url {
margin: 20px 0px 15px;
width: 100%;
}
.result-preview-desktop-snippet h3,
.result-preview-mobile-snippet h3 {
font-size: 20px;
color: #1f78db;
font-weight: 400;
margin-bottom: 5px !important;
}
.result-preview-desktop-snippet p,
.result-preview-mobile-snippet p {
margin-bottom: 4px;
}
.result-preview-desktop {
width: 70%;
}
.result-preview-mobile {
width: 30%;
}
.result-preview-title-desktop,
.result-preview-title-mobile {
margin-bottom: 10px;
}
.main-resultdiv .form-control {
font-size: 17px;
}
.no-url-analyze {
text-align: center;
text-decoration: underline !important;
cursor: pointer;
color: #0073aa;
font-weight: 600;
}
#result-preview-page-title,
#result-preview-page-title-mobile,
.result-preview-page-title-mobile { display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
width: 100%;
box-sizing: border-box;
}
#result-preview-page-description-mobile,
#result-preview-page-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
width: 100%;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
div#seo-scan-tool {
width: 100%;
}
.seo-tabs {
flex-wrap: wrap;
}
.seo-tab-button {
width: 100%;
}
} .result-icons-title-desktop,
.result-icons-title-mobile,
.result-icons-mobile-bulk,
.result-icons-desktop-bulk {
position: relative;
}
.result-icons-title-desktop .seo-page-mobile-tooltip,
.result-icons-title-mobile .seo-page-mobile-tooltip,
.result-icons-mobile-bulk .seo-page-mobile-tooltip-bulk,
.result-icons-desktop-bulk .seo-page-mobile-tooltip-bulk {
visibility: hidden;
opacity: 0;
position: absolute;
top: -50px;
left: auto%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
font-size: 14px;
text-align: center;
white-space: nowrap;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10;
}
.result-icons-title-desktop:hover .seo-page-mobile-tooltip,
.result-icons-title-mobile:hover .seo-page-mobile-tooltip,
.result-icons-mobile-bulk:hover .seo-page-mobile-tooltip-bulk,
.result-icons-desktop-bulk:hover .seo-page-mobile-tooltip-bulk {
visibility: visible;
opacity: 1;
}
.result-icons-medium {
background: #feda203d;
border: 1px solid #ffd600;
fill: #ffd600;
}
.title-notes-info-main svg,
.description-notes-info-main svg {
width: 30px;
height: 17px;
margin-top: 3px;
}
.title-notes-info-main,
.description-notes-info-main {
display: flex;
margin-top: 15px;
align-items: flex-start;
}
div#score-level-indicator {
margin-top: 30px;
padding: 5px 10px;
color: white;
border-radius: 4px;
font-weight: bold;
display: flex;
justify-content: center;
}
.seo-page-description-tooltip,.seo-page-mobile-tooltip-bulk {
visibility: hidden;
opacity: 0;
position: absolute; left: auto%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
font-size: 14px;
text-align: center;
white-space: nowrap;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10;
}
.result-icons-description-mobile:hover .seo-page-description-tooltip,.result-icons-description-desktop:hover .seo-page-description-tooltip,.result-icons-desktop-bulk-description:hover .seo-page-mobile-tooltip-bulk, .result-icons-mobile-bulk-description:hover .seo-page-mobile-tooltip-bulk{
visibility: visible;
opacity: 1;
}