page {
  background-color: #f2f2f2;
}
.flex-wrap{
  display: flex;
  flex-direction: row;
}
.form-wrap {
  margin: 12px 0;
}
.tappable{
  color: #0080f0;
  padding: 0 12px;
}

.tappable:hover {
  opacity: .6;
}
.container {
  padding: 0 12px;
}
.hint,
.error
.warning {
  display: block;
  margin: 7px 0;
  color: #888;
  font-size: 12px;
}
.error{color:red;}
.warning{color: orange;}
.color-main{color:#00b0f0}
.bg-main{background-color:#00b0f0}
.color-dark-main{color:#0080f0}
button.button-main{background:#00b0f0}
.border-main{border-color:#00b0f0}
.flex-col,.flex-row{display: flex}
.flex-col{flex-direction: column}
.fl{float:left}
.fr{float:right}
.p4{padding:4px}
.p8{padding:8px}
.p12{padding:12px}
.m4{margin:4px}
.m8{margin:8px}
.m12{margin:12px}
.color-white{color: white}
.single-line{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.round{
  border-radius: 50%;
  overflow: hidden;
}

/*
radio .wx-radio-input.wx-radio-input-checked{
  background: #00b0f0;
  border-color: #00b0f0;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  color: #00b0f0!important;
}
.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  color: #00b0f0;
}
*/
button[type=main][plain],button[type=cap][plain]{
  color: #00b0f0;
  border: 1px solid #00b0f0;
  background-color: transparent;
}
button[type=cap],button[type=main]{
  background: #00b0f0;
  color: white;
}
button[type=cap]{
  border-radius: 30px;
}
button[type=cap][disabled],button[type=main][disabled]{
  background: #00b0f0aa;
}
button[plain][disabled]{
  background: transparent;
}
button[type=secondary]{
  color: #00b0f0;
  background: #eee;
}
button[type=error]{
  background: #fa5151;
  color: white;
}
button[type=error][plain]{
  color: #fa5151;
  border: 1px solid #fa5151;
  background-color: transparent;
}