/* Normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on h1 elements within section and
 * article contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

figcaption,
figure,
main { /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * Add the correct text decoration in Edge, IE, Opera, and Safari.
 */

abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent sub and sup elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

/* Embedded content
========================================================================== */

/**

Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}

/* Forms
========================================================================== */

/**

Change the font styles in all browsers.
Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 /
font-size: 100%; / 1 /
line-height: 1.15; / 1 /
margin: 0; / 2 */
}

/**

Show the overflow in IE.
Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}

/**

Remove the inheritance of text transform in Edge, Firefox, and IE.
Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}

/**

Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}

/**

Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}

/**

Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}

/**

Remove the additional ':invalid' styles in Firefox.
*/
:-moz-ui-invalid {
box-shadow: none;
}

/* Accessibility
========================================================================== */

/**

Hide the contents of visually hidden elements when they are focused.
Remove the margin in IE 8.
*/
[hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
display: inherit;
position: absolute;
}

/* Custom Styles
========================================================================== */

header {
background-color: #0077b6;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}

h1 {
margin: 0;
}

main {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}

input {
width: 100%;
max-width: 500px;
padding: 10px;
border: none;
border-radius: 4px;
margin-bottom: 10px;
}

button {
padding: 10px;
border: none;
border-radius: 4px;
background-color: #0077b6;
color: #fff;
cursor: pointer;
}

#loading {
display: none;
margin-bottom: 20px;
}

#loading img {
width: 50px;
height: 50px;
}

#results {
display: none;
max-width: 100%;
overflow-x: auto;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#results table {
    width: 100%;
    border-collapse: collapse;
    
}

#results th,
#results td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

#results th {
background-color: #0077b6;
color: #fff;
}

#results tr:nth-child(even) {
background-color: #f2f2f2;
}

#results tr:hover {
background-color: #ddd;
}

@media only screen and (max-width: 600px) {
input {
max-width: 100%;
}
}

@media only screen and (max-width: 768px) {
header {
height: auto;
}

h1 {
    margin: 20px 0;
}

main {
    padding: 0;
}

#results {
    overflow-x: scroll;
}

}

/* Error Page Styles
========================================================================== */

body.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}

h1.error-message {
font-size: 4rem;
font-weight: bold;
margin: 0;
color: #0077b6;
}

p.error-description {
font-size: 1.5rem;
margin: 0;
color: #333;
}

a.error-link {
font-size: 1.2rem;
color: #0077b6;
margin-top: 20px;
text-decoration: none;
border-bottom: 1px solid #0077b6;
padding-bottom: 2px;
transition: all 0.2s ease-in-out;
}

a.error-link:hover {
color: #fff;
background-color: #0077b6;
border-bottom-color: transparent;
}

a.error-link:hover {
color: #fff;
background-color: #0077b6;
border-bottom-color: transparent;
}

/* Loader Styles
========================================================================== */

#loader {
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
overflow: visible;
background: #f2f2f2 url('https://free-seo-tool.cxn.ro/img/loader.gif') no-repeat center center;
opacity: 0.7;
}

#loader.hidden {
animation: fadeOut 1s;
animation-fill-mode: forwards;
}

@keyframes fadeOut {
100% {
opacity: 0;
visibility: hidden;
}
}

/* Media Queries
========================================================================== */

@media only screen and (max-width: 768px) {
main {
margin-top: 60px;
}
}

@media only screen and (max-width: 600px) {
header {
padding: 20px;
}

h1 {
    font-size: 2rem;
}

#input-url {
    margin-bottom: 20px;
}

}

/* Modal Styles
========================================================================== */

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Alert Styles
========================================================================== */

.alert {
padding: 20px;
background-color: #f44336;
color: white;
margin-bottom: 15px;
}

.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}

.closebtn:hover {
color: black;
}

/* Tooltips
========================================================================== */

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;

}

.tooltip:hover .tooltiptext {
visibility: visible;
}

/* Responsive Tables
========================================================================== */

@media screen and (max-width: 700px) {
table.responsive-table {
border-collapse: collapse;
border-spacing: 0;
display: block;
overflow-x: auto;
width: 100%;
-webkit-overflow-scrolling: touch;
}

table.responsive-table th,
table.responsive-table td {
    padding: 0.5em;
}

table.responsive-table th {
    text-align: left;
}

table.responsive-table tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

}

/* Utility Classes
========================================================================== */

.text-primary {
color: #0077b6;
}

.text-secondary {
color: #6c757d;
}

.text-success {
color: #28a745;
}

.text-danger {
color: #dc3545;
}

.text-warning {
color: #ffc107;
}

.text-info {
color: #17a2b8;
}

.text-light {
color: #f8f9fa;
}

.text-dark {
color: #343a40;
}

.bg-primary {
background-color: #0077b6;
}

.bg-secondary {
background-color: #6c757d;
}

.bg-success {
background-color: #28a745;
}

.bg-danger {
background-color: #dc3545;
}

.bg-warning {
background-color: #ffc107;
}

.bg-info {
background-color: #17a2b8;
}

.bg-light {
background-color: #f8f9fa;
}

.bg-dark {
background-color: #343a40;
}

.text-center {
text-align: center;
}

.text-right {
text-align: right;
}

.text-left {
text-align: left;
}

.mt-0 {
margin-top: 0;
}

.mb-0 {
margin-bottom: 0;
}

.ml-0 {
margin-left: 0;
}

.mr-0 {
margin-right: 0;
}

.mt-1 {
margin-top: 0.25rem;
}

.mb-1 {
margin-bottom: 0.25rem;
}

.ml-1 {
margin-left: 0.25rem;
}

.mr-1 {
margin-right: 0.25rem;
}

.mt-2 {
margin-top: 0.5rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}

.ml-2 {
margin-left: 0.5rem;
}

.mr-2 {
margin-right: 0.5rem;
}

.mt-3 {
margin-top: 1rem;
}

.mb-3 {
margin-bottom: 1rem;
}

.ml-3 {
margin-left: 1rem;
}

.mr-3 {
margin-right: 1rem;
}

.mt-4 {
margin-top: 1.5rem;
}

.mb-4 {
margin-bottom: 1.5rem;
}

.ml-4 {
margin-left: 1.5rem;
}

.mr-4 {
margin-right: 1.5rem;
}

.mt-5 {
margin-top: 3rem;
}

.mb-5 {
margin-bottom: 3rem;
}

.ml-5 {
margin-left: 3rem;
}

.mr-5 {
margin-right: 3rem;
}

.pt-0 {
padding-top: 0;
}

.pb-0 {
padding-bottom: 0;
}

.pl-0 {
padding-left: 0;
}

.pr-0 {
padding-right: 0;
}

.pt-1 {
padding-top: 0.25rem;
}

.pb-1 {
padding-bottom: 0.25rem;
}

.pl-1 {
padding-left: 0.25rem;
}

.pr-1 {
padding-right: 0.25rem;
}

.pt-2 {
padding-top: 0.5rem;
}

.pb-2 {
padding-bottom: 0.5rem;
}

.pl-2 {
padding-left: 0.5rem;
}

.pr-2 {
padding-right: 0.5rem;
}

.pt-3 {
padding-top: 1rem;
}

.pb-3 {
padding-bottom: 1rem;
}

.pl-3 {
padding-left: 1rem;
}

.pr-3 {
padding-right: 1rem;
}

.pt-4 {
padding-top: 1.5rem;
}

.pb-4 {
padding-bottom: 1.5rem;
}

.pl-4 {
padding-left: 1.5rem;
}

.pr-4 {
padding-right: 1.5rem;
}

.pt-5 {
padding-top: 3rem;
}

.pb-5 {
padding-bottom: 3rem;
}

.pl-5 {
padding-left: 3rem;
}

.pr-5 {
padding-right: 3rem;
}

.font-weight-light {
font-weight: 300;
}

.font-weight-normal {
font-weight: 400;
}

.font-weight-bold {
font-weight: 700;
}

.line-height-1 {
line-height: 1;
}

.line-height-2 {
line-height: 1.5;
}

.line-height-3 {
line-height: 1.8;
}

.line-height-4 {
line-height: 2;
}

/* Buttons
========================================================================== */

.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
color: #fff;
background-color: #0077b6;
border-color: #0077b6;
}

.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}

.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #0077b6;
border-color: #0077b6;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #0062cc;
border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

/* Error alert
========================================================================== */

.alert {
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}

.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}

.alert-danger hr {
border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
color: #491217;
}

/* Result table
========================================================================== */

#results {
margin-top: 2rem;
}

#results h2 {
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 1rem;
text-align: center;
}

#results table {
width: 100%;
border-collapse: collapse;
}

#results th,
#results td {
padding: 0.75rem;
vertical-align: middle;
border-top: 1px solid #dee2e6;
}

#results th {
color: #0077b6;
font-weight: 700;
border-bottom: 2px solid #dee2e6;
}

#results td a {
color: #0077b6;
font-weight: 400;
text-decoration: none;
}

#results td a:hover {
color: #0056a8;
}

/* Loading animation
========================================================================== */

#loading-indicator {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
}

.spinner-border {
display: inline-block;
width: 3rem;
height: 3rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
to {
transform: rotate(360deg);
}
}

/* Error modal
========================================================================== */

#error-modal .modal-dialog {
max-width: 400px;
}

#error-modal .modal-content {
border: none;
border-radius: 0.5rem;
}

#error-modal .modal-header {
border-bottom: none;
}

#error-modal .modal-title {
font-size: 1.5rem;
font-weight: 400;
}

#error-modal .modal-body {
font-size: 1.25rem;
font-weight: 400;
}

#error-modal .modal-footer {
border-top: none;
}

/* Media queries
========================================================================== */

@media only screen and (max-width: 768px) {
header {
padding: 1.5rem;
}

#form-container {
    padding: 1.5rem;
}

#results table {
    font-size: 0.875rem;
}

}

@media only screen and (max-width: 600px) {
header {
padding: 1rem;
}

#form-container {
    padding: 1rem;
}

#results table {
    font-size: 0.75rem;
}

#form-container {
    padding: 1rem;
}

#results table {
    font-size: 0.75rem;
}

}

/* Animation keyframes
========================================================================== */

@keyframes fadeIn {
from {
opacity: 0;
}

to {
    opacity: 1;
}

}

@keyframes fadeOut {
from {
opacity: 1;
}

to {
    opacity: 0;
}

}