}

a {

color: #6E73B7;
text-decoration: none;

}

body {

font-family: sans-serif;
font-size: 16px;
padding: 3em 0;

}

.container {

overflow: hidden;
margin: 0 auto;
padding-left: 1em;
padding-right: 1em;
max-width: 1280px;

}

footer {

font-size: 90%;
margin-top: 2em;
text-align: center;

}

.site-info {

display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

}

.site-info .site {

background-color: #F9F9FB;
flex-basis: 49%;
flex-grow: 0;
flex-shrink: 0;
padding: 1em;

}

.site__tag {

margin-top: 0;
margin-bottom: .5em;

}

/* Statistical info */ .statistical-info {

display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
margin-bottom: 1em;

}

.statistical-info > div {

flex-basis: 49%;

}

.statistical-info h3 {

display: inline-block;
margin-right: 1em;

}

.statistical-info .count {

background-color: #eeeeee;
border-radius: 50%;
display: inline-block;
font-weight: bold;
line-height: 2em;
padding: .1em .25em 0;
height: 2em;
width: 2em;
text-align: center;

}

/* Buttons */

.button {

background-color: #EAECF3;
cursor: pointer;
display: inline-block;
font-size: .9em;
padding: .25em .5em .3em;
text-decoration: none;

}

/**

* Forms.
*/

label {

cursor: pointer;

}

/* Checkboxes */ .form-checkboxes .form-checkbox {

display: inline-block;
margin-right: .5em;

}

.form-checkbox input {

height: 1em;
width: 1em;

}

/* Search */ .form-search label {

display: none;

}

.form-search input {

font-size: .9em;
padding-left: .5em;
padding-right: .5em;
width: 200px;

}

/* SiteDiff Toolbar */ .sitediff-toolbar {

margin-top: 1em;
margin-bottom: 1em;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;

}

.sitediff-toolbar .form-item {

display: inline-block;
margin-right: 1em;

}

.sitediff-toolbar .form-item:last-child {

margin-right: 0;

}

.sitediff-toolbar .toolbar__left {

float: left;

}

.sitediff-toolbar .toolbar__right {

float: right;

}

/* Table */ table {

width: 100%;

}

table thead {

background: #F9F9FB;
color: #999999;

}

td, th {

text-align: left;
padding: .4em .5em;

}

th {

border-bottom: 2px solid #EAECF3;
padding-top: .5em;
padding-bottom: .5em;

}

table tbody td {

border-bottom: 2px solid #F9F9FB;

}

table tbody tr:hover {

background-color: #F9F9FB;

}

table .path {

margin-right: 1em;

}

table td.description .buttons {

float: right;

}

table td.description a {

display: none;
margin-left: .4em;

}

table td.description:hover a {

display: inline-block;

}

table td.description .button-diff {

display: block;

}

table .icon-col {

width: 25px;

}

table .status-col {

width: 100px;

}

/* Icons */ .icon {

display: inline-block;
height: 1em;
width: 1em;

}

.icon-result-changed {

background-color: lightcoral;
border-radius: 50%;

}

.icon-result-unchanged {

background-color: lightgreen;
border-radius: 50%;

}

.icon-result-error {

background: khaki;
border-radius: 50%;

}

/* Side-by-side view */ sidebyside {

margin: 0;

}

sidebyside iframe {

float: left;
height: 100%;
width: 50%;
border: 0;

}

/* Page: Diff */ diff-navigator {

background-color: #fefefe;
box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
padding: .25em;
margin-top: 0;
position: fixed;
top: 0;
width: 100%;

}

/*** Overlay */ .overlay {

background-color: rgba(0, 0, 0, 0.25);
height: 100vh;
left: 0;
padding: 2em;
position: fixed;
top: 0;
width: 100vw;

}

.overlay__inner {

background-color: #fff;
height: 100%;
margin: 0;
position: relative;
width: 100%;

}

.overlay header {

background-color: #f9f9fb;
border-bottom: 2px solid #eaecf3;
display: flex;
min-height: 3em;
left: 0;
position: absolute;
top: 0;
width: 100%;

}

.overlay header .prev, .overlay header .next, .overlay header .exit {

padding: 0.5em 0;
margin: 0.5em;

}

.overlay header .prev a, .overlay header .next a, .overlay header .exit a {

background-color: #eaecf3;
font-size: .9em;
padding: 0.5em;
text-decoration: none;

}

.overlay header .prev a:hover, .overlay header .next a:hover, .overlay header .exit a:hover {

background-color: #d2d7ef;

}

.overlay header .prev.disabled a, .overlay header .next.disabled a, .overlay header .exit.disabled a, .overlay header .prev.disabled a:hover, .overlay header .next.disabled a:hover, .overlay header .exit.disabled a:hover {

background-color: eaecf3;
color: #9b9db8;
cursor: not-allowed;

} .overlay header .path {

flex-grow: 1;
padding: 1em;

}

.overlay article {

background-color: #fff;
height: 100%;
width: 100%;

}

.overlay article iframe {

height: 100%;
width: 100%;

}