.disp0 {
  display: inherit;
}
.dispB {
  display: block;
}
.dispI {
  display: inline;
}
.dispIB {
  display: inline-block;
}
.floatL {
  float: left;
}
.floatR {
  float: right;
}
.clear0 {
  clear: inherit;
}
.clearL {
  clear: left;
}
.clearR {
  clear: right;
}
.clearLR {
  clear: both;
}
.pos0 {
  position: inherit;
}
.posS {
  position: static;
}
.posA {
  position: absolute;
}
.posR {
  position: relative;
}
.posF {
  position: fixed;
}
.posY {
  position: sticky;
}
.margin-5 {
  margin: 5 px;
}
.padding-5 {
  padding: 5 px;
}
.margin-10 {
  margin: 10 px;
}
.padding-10 {
  padding: 10 px;
}
.margin-15 {
  margin: 15 px;
}
.padding-15 {
  padding: 15 px;
}
.margin-20 {
  margin: 20 px;
}
.padding-20 {
  padding: 20 px;
}
.margin-25 {
  margin: 25 px;
}
.padding-25 {
  padding: 25 px;
}
.margin-30 {
  margin: 30 px;
}
.padding-30 {
  padding: 30 px;
}
.margin-35 {
  margin: 35 px;
}
.padding-35 {
  padding: 35 px;
}
.margin-40 {
  margin: 40 px;
}
.padding-40 {
  padding: 40 px;
}
.margin-45 {
  margin: 45 px;
}
.padding-45 {
  padding: 45 px;
}
.calendar table tr,
.calendar table td {
  border: 1px solid #d3d3d3;
}
.calendar table td,
.calendar table th {
  width: 50px;
  height: 40px;
  text-align: center;
}
.calendar table td.weekend,
.calendar table th.weekend {
  color: #f03333;
}
.calendar table th.prev-month:hover,
.calendar table th.prev-year:hover,
.calendar table th.next-month:hover,
.calendar table th.next-year:hover {
  cursor: pointer;
  background-color: #ffffa0;
}
.calendar table td:hover {
  background-color: #eeeeee;
}
.calendar table td.today {
  background-color: #0000ff;
  color: #ffffff;
}
.calendar table td.today:hover {
  background-color: #3333ff;
}
.calendar table td.prev,
.calendar table td.next {
  color: #808080;
}
.calendar table td.holiday {
  position: relative;
  background-color: #ffd6d6;
}
.calendar table td.holiday:before {
  position: absolute;
  top: 2px;
  right: 2px;
  content: "休";
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 10px;
  margin: 1px;
}
.calendar table td.workday {
  position: relative;
}
.calendar table td.workday:before {
  position: absolute;
  top: 2px;
  right: 2px;
  content: "班";
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background-color: #808080;
  color: #ffffff;
  font-size: 10px;
  margin: 1px;
}
.calendar table td.ok {
  position: relative;
}
.calendar table td.ok:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #008000;
  content: ' ';
}
.calendar table td.late {
  position: relative;
}
.calendar table td.late:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffa500;
  content: ' ';
}
.calendar table td.early {
  position: relative;
}
.calendar table td.early:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffa500;
  content: ' ';
}
.calendar table td.miss {
  position: relative;
}
.calendar table td.miss:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #00dddd;
  content: ' ';
}
.calendar table td.off {
  position: relative;
}
.calendar table td.off:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff0000;
  content: ' ';
}
.calendar table td.leave {
  position: relative;
}
.calendar table td.leave:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #008000;
  content: ' ';
}
.calendar table td.ot {
  position: relative;
}
.calendar table td.ot:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0000ff;
  content: ' ';
}
.calendar table td.bz {
  position: relative;
}
.calendar table td.bz:after {
  position: absolute;
  bottom: 4px;
  left: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #008000;
  content: ' ';
}
.score {
  padding: 5px;
  border-right: 1px solid lightgrey;
  width: 100px;
}
@media screen and (max-width: 600px) {
  .score {
    width: 60px;
  }
}
.score:last-child {
  border-right: 0;
}
.score:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}
.score .score-heading {
  float: left;
  font-size: 90%;
}
.score .score-body {
  clear: left;
  font-size: 200%;
  text-align: center;
}
.score .score-body .score-unit {
  font-size: 50%;
}
.score .score-foot {
  font-size: 90%;
}
.row .score {
  display: inline-block;
}
.scoreboard.scoreboard-white {
  background-color: #ffffff;
}
.scoreboard .scoreboard-heading {
  border-bottom: 1px solid lightgrey;
  padding: 5px 10px;
}
ul.scoreboard,
ol.scoreboard {
  list-style-type: none;
  padding-left: 0;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
}
ul.scoreboard li,
ol.scoreboard li {
  padding: 5px;
  border-right: 1px solid lightgrey;
  width: 100px;
  list-style-type: none;
  margin-left: -1px;
  display: inline-block;
  text-indent: 0px;
}
@media screen and (max-width: 600px) {
  ul.scoreboard li,
  ol.scoreboard li {
    width: 60px;
  }
}
ul.scoreboard li:last-child,
ol.scoreboard li:last-child {
  border-right: 0;
}
ul.scoreboard li:hover,
ol.scoreboard li:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}
ul.scoreboard li .score-heading,
ol.scoreboard li .score-heading {
  float: left;
  font-size: 90%;
}
ul.scoreboard li .score-body,
ol.scoreboard li .score-body {
  clear: left;
  font-size: 200%;
  text-align: center;
}
ul.scoreboard li .score-body .score-unit,
ol.scoreboard li .score-body .score-unit {
  font-size: 50%;
}
ul.scoreboard li .score-foot,
ol.scoreboard li .score-foot {
  font-size: 90%;
}
.row ul.scoreboard li,
.row ol.scoreboard li {
  display: inline-block;
}
ul.scoreboard li:first-child,
ol.scoreboard li:first-child {
  margin-left: 0px;
}
.board {
  background-color: #ffffff;
  border-radius: 5px;
}
.board-item {
  display: inline-block;
  margin: 10px;
  padding: 0 20px;
  border-right: 1px solid #e8e8e8;
}
.board-item:last-child {
  border-right: none;
}
.board-item .board-heading {
  margin: 10px;
  color: #000000;
  font-size: 10px;
}
.board-item .board-body {
  margin: 10px;
  color: #0000ff;
  font-size: 40px;
  text-align: center;
}
.board-item .board-foot {
  margin: 10px;
  color: #000000;
  font-size: 10px;
}
.usernav {
  float: right;
  padding: 10px 20px 0;
}
ol.usernav li,
ul.usernav li {
  margin-left: 10px;
  display: inline-block;
  list-style-type: none;
}
.groupbox {
  border: 3px double lightgray;
  position: relative;
}
.groupbox .title {
  position: absolute;
  left: 30px;
  top: -10px;
  z-index: 10;
  background-color: grey;
  color: white;
}
.groupbox .groupbox-content {
  margin: 20px 20px 10px;
}
.listctrl {
  border: 1px solid #808080;
  padding: 0 5px;
  overflow: auto;
}
.listctrl .listctrl-item {
  padding: 5px 0;
  list-style-type: none;
  display: block;
}
.listctrl .listctrl-item:hover {
  background-color: lightgrey;
  color: white;
}
.listctrl .listctrl-item.selected {
  background-color: #5555ee;
  color: white;
}
.stacked .stacked-tab {
  margin-bottom: 10px;
  display: block;
  border-radius: 4px;
  list-style-type: none;
}
.stacked .stacked-tab-item {
  display: inline;
  position: relative;
  float: left;
  margin-left: -1px;
  padding: 2px 10px;
  list-style-type: none;
  background-color: white;
  color: darkgrey;
  border: 1px solid grey;
  cursor: pointer;
  margin-bottom: 10px;
}
.stacked .stacked-tab-item.active {
  background-color: lightgrey;
  color: gray;
}
.stacked .stacked-tab-item:first-child {
  margin-left: 0px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.stacked .stacked-tab-item:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.stacked .stacked-item {
  display: none;
  clear: both;
}
.stacked .stacked-item.active {
  display: block;
}