.clearfix {
  overflow: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.fontsize125 {
  font-size: 125%;
}

.fontsize150 {
  font-size: 150%;
}

html,
body {
  background: #f7f7f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  line-height: 1.5;
}

pre,
code,
kbd,
samp {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.layout-comp {
  display: block;
  max-width: 600px;
  margin: 20px auto 24px;
}

header.layout-header .logo {
  display: block;
  width: 142px;
  height: 32px;
  background: url("/assets/img/logo.png") no-repeat left center;
  background-size: 142px 32px;
}

main.layout-main {
  background: white;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}

.success-icon {
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 104px;
  background: url("/assets/img/success.svg") no-repeat center center;
  background-size: 80px 80px;
}

.error-icon {
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 104px;
  background: url("/assets/img/error.svg") no-repeat center center;
  background-size: 80px 80px;
}

.waiting-icon {
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 104px;
  background: url("/assets/img/waiting.svg") no-repeat center center;
  background-size: 80px 80px;
}

.info-icon {
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 104px;
  background: url("/assets/img/info.svg") no-repeat center center;
  background-size: 80px 80px;
}