body {
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 13px;
  line-height: 1.3em;
  color: #242729;
  margin: 0;
}
h1 {
  color: #777;
  background-color: #f5f5f5;
  padding: 30px 10px;
  margin: 0;
  font-size: 24px;
  font-weight: normal;
}
p {
  padding: 10px;
  margin: 0 0 10px 0;
}
input {
  padding: 20px;
  color: #777;
  background-color: #f5f5f5;
  border: none;
  font-size: 120%;
  outline: none;
  cursor: pointer;
}
input:active {
  opacity: 0.5;
}
.note {
  color: #777;
  background-color: #f5f5f5;
  font-size: 90%;
}
.flex {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
}
body[data-os=windows] .linux {
  display: none;
}
body[data-os=linux] .windows {
  display: none;
}
body[data-step="1"] .step1 {
  text-decoration: line-through;
  opacity: 0.5;
}
a,
a:visited {
  color: #06c;
  text-decoration: none;
}
.guide {
  padding-left: 10px;
}
.guide ul {
  margin: 5px;
}
#notify {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 300px;
}
#notify>div {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 40px;
  border: solid 1px #ccc;
  background-position: left 10px center;
  background-repeat: no-repeat;
  background-size: 20px;
  margin: 5px 0;
}
#notify>div[data-type=success] {
  background-image: url('success.svg');
  background-color: #abf8b6;
  color: 006f00#;
  border-color: #30d053;
}
#notify>div[data-type=error] {
  background-image: url('error.svg');
  background-color: #ff787d;
  color: #fff;
  border-color: #ff3857;
}
#notify>div[data-type=info] {
  background-image: url('info.svg');
  background-color: #ffea9f;
  color: #744b00;
  border-color: #ffcd17;
}

body[data-installed=true] #steps>li {
  text-decoration: line-through;
  opacity: 0.5;
}
body[data-installed=true] #alternative {
  font-weight: bold;
  color: red;
}
body[data-installed=true] .canhide {
  opacity: 0.5;
}
