}

body {

background-color: #ebebeb;
background-image: linear-gradient(
  45deg,
  #f4f4f4 25%,
  transparent 25%,
  transparent 75%,
  #f4f4f4 75%,
  #f4f4f4
), linear-gradient(
  45deg,
  #f4f4f4 25%,
  transparent 25%,
  transparent 75%,
  #f4f4f4 75%,
  #f4f4f4
);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;

}

.InlineLink {

color: #000000;
text-decoration: none;

}

.InlineLink:hover {

text-decoration: underline;

}

.InlineLink::after {

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMy45IDEyYzAtMS43MSAxLjM5LTMuMSAzLjEtMy4xaDRWN0g3Yy0yLjc2IDAtNSAyLjI0LTUgNXMyLjI0IDUgNSA1aDR2LTEuOUg3Yy0xLjcxIDAtMy4xLTEuMzktMy4xLTMuMXpNOCAxM2g4di0ySDh2MnptOS02aC00djEuOWg0YzEuNzEgMCAzLjEgMS4zOSAzLjEgMy4xcy0xLjM5IDMuMS0zLjEgMy4xaC00VjE3aDRjMi43NiAwIDUtMi4yNCA1LTVzLTIuMjQtNS01LTV6Ii8+PC9zdmc+);
content: '';
display: inline-block;
height: 24px;
opacity: .2;
vertical-align: middle;
width: 24px;
margin-left: 5px;

}

.InlineLink:hover::after {

opacity: 1;

}

.HappoDiffs__header {

align-items: baseline;
background-color: #ffffff;
box-shadow: 0 0 4px rgba(0, 0, 0, .3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 10px 15px;

}

.HappoDiffs__header > * {

margin-right: 10px;
margin-bottom: 5px;

}

.HappoDiffs__header > :last-child {

margin-right: 0;

}

.HappoDiffs__headerTitle {

margin: 0;

}

.HappoDiffs__main {

padding: 10px;

}

.Diff__images, .NewImage__image {

white-space: nowrap;
max-width: 100%;
overflow-x: auto;

}

.Diff__buttons {

margin-bottom: 5px;

}

.Diff__button {

border: 1px solid #ccc;
border-left-width: 0;
background-color: #f0f0f0;
padding: 10px 20px;
cursor: pointer;

}

.Diff__button {

background-color: #666;
border-color: #444;
color: white;

}

.Diff__button–first {

border-left-width: 1px;
border-radius: 3px 0 0 3px;

}

.Diff__button–last {

border-radius: 0 3px 3px 0;

}

.Swiper {

display: inline-block;
line-height: 0;
position: relative;

}

.Swiper__cursor {

box-shadow: 0px 0px 2px 0px #ffffff;
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background-color: #666666;
pointer-events: none;

}

.Swiper__image {

left: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;

}

.SideBySide__image {

vertical-align: top;

}

.SmoothProgress {

overflow: hidden;
height: 10px;
width: 100%;
max-width: calc(100vw - 20px);
border: 1px solid #cccccc;
border-radius: 5px;
transition: opacity 1s;

}

.SmoothProgress__bar {

background-color: rgba(179, 54, 130, .5);
height: 100%;
width: 100%;
transition: transform 1s ease-in-out;

}