.ux-common-main {
  padding: 20px;
  width: 950px;
  min-height: 310px;
  margin: -35px auto 20px auto;
  background-color: white;
  position: relative;
}
.ux-common-main:before,
.ux-common-main:after {
  content: '';
  display: table;
}
.ux-common-main:after {
  clear: both;
}
.ux-common-main.ux-common-main-modules {
  background: none;
}
.ux-common-main .socialMedia {
  padding-top: 4px;
  float: right;
}

#mainContainer {
  margin: -35px auto 20px auto;
  position: static;
}

.ux-common-responsive {
  background: #eee;
}
.ux-common-responsive .ux-common-main {
  max-width: 1180px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  width: auto;
}
@media (max-width: 800px) {
  .ux-common-responsive .ux-common-main {
    padding: 5px;
    border-radius: 0;
  }
}
.ux-common-responsive #mainContainer {
  margin: -35px auto 20px auto;
  width: auto;
  max-width: 1500px;
}
.ux-common-responsive.ux-common-responsive-large .ux-common-main {
  max-width: 1460px;
  margin: 0px auto;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
@media (min-width: 1501px) {
  .ux-common-responsive.ux-common-responsive-large .ux-common-main {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
  }
}
.ux-common-responsive.ux-common-responsive-large .ux-common-main.ux-common-main-modules {
  background: none;
  border: 0;
}
@media (max-width: 800px) {
  .ux-common-responsive.ux-common-responsive-large .ux-common-main.ux-common-main-modules {
    background-color: white;
  }
}
.-good {
  background-color: #029729;
}

.-regular {
  background-color: #ffc005;
}

.-bad {
  background-color: #f96f5d;
}

@media (max-width: 768px) {
  .flow-step-detail .shifu-3-footer {
    display: none;
  }
}