/** Main application */
.wordgame, .wordgame-edit-panel, .wordgame-edit {
  /** UiControl */
  /** Drag Area **/
  /** UiPlayground */
  /** UiImage */
  /** UiWordSet */
  /** uiWord */
  /** UiSoundButton */
  /** UiSimpleImage */
  /* copy from bootstrap.css */
  /* for spectrum color picker */
}
.wordgame .uiMain, .wordgame-edit-panel .uiMain, .wordgame-edit .uiMain {
  background-color: #6d3e2f;
  overflow: visible;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
  position: relative;
  box-sizing: border-box;
  clear: both;
  /* clear the previous float item position if there is any. */
}
.wordgame form .uiMain tbody, .wordgame-edit-panel form .uiMain tbody, .wordgame-edit form .uiMain tbody {
  border-top: 0;
  /* to cancel out the setting of lctheme. */
}
.wordgame .uiControl .uiControlLeftArea, .wordgame-edit-panel .uiControl .uiControlLeftArea, .wordgame-edit .uiControl .uiControlLeftArea {
  float: left;
  margin-top: 0;
  margin-bottom: 0;
}
.wordgame .uiControl .uiControlRightArea, .wordgame-edit-panel .uiControl .uiControlRightArea, .wordgame-edit .uiControl .uiControlRightArea {
  float: right;
}
.wordgame .uiControl .navbar-nav-wg, .wordgame-edit-panel .uiControl .navbar-nav-wg, .wordgame-edit .uiControl .navbar-nav-wg {
  padding-left: 0;
  margin: 0;
  white-space: nowrap;
  list-style: none;
}
.wordgame .uiControl .navbar-nav-wg > li, .wordgame-edit-panel .uiControl .navbar-nav-wg > li, .wordgame-edit .uiControl .navbar-nav-wg > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: white;
  white-space: nowrap;
}
.wordgame .uiControl .navbar-nav-wg > li:hover, .wordgame-edit-panel .uiControl .navbar-nav-wg > li:hover, .wordgame-edit .uiControl .navbar-nav-wg > li:hover,
.wordgame .uiControl .navbar-nav-wg > li:focus,
.wordgame-edit-panel .uiControl .navbar-nav-wg > li:focus,
.wordgame-edit .uiControl .navbar-nav-wg > li:focus,
.wordgame .uiControl .navbar-nav-wg > li.active,
.wordgame-edit-panel .uiControl .navbar-nav-wg > li.active,
.wordgame-edit .uiControl .navbar-nav-wg > li.active {
  background-color: #46180b;
}
.wordgame .uiControl .navbar-nav-wg > li.textBtn, .wordgame-edit-panel .uiControl .navbar-nav-wg > li.textBtn, .wordgame-edit .uiControl .navbar-nav-wg > li.textBtn,
.wordgame .uiControl .navbar-nav-wg > li.txtOutput,
.wordgame-edit-panel .uiControl .navbar-nav-wg > li.txtOutput,
.wordgame-edit .uiControl .navbar-nav-wg > li.txtOutput {
  line-height: 20px;
  padding: 10px;
}
.wordgame .uiControl .navbar-nav-wg > li.txtOutput:hover, .wordgame-edit-panel .uiControl .navbar-nav-wg > li.txtOutput:hover, .wordgame-edit .uiControl .navbar-nav-wg > li.txtOutput:hover,
.wordgame .uiControl .navbar-nav-wg > li.txtOutput:focus,
.wordgame-edit-panel .uiControl .navbar-nav-wg > li.txtOutput:focus,
.wordgame-edit .uiControl .navbar-nav-wg > li.txtOutput:focus {
  background-color: #6d3e2f;
}
.wordgame .uiControl .navbar-nav-wg > li.menuListWrap, .wordgame-edit-panel .uiControl .navbar-nav-wg > li.menuListWrap, .wordgame-edit .uiControl .navbar-nav-wg > li.menuListWrap {
  clear: both;
  height: 0;
  display: block;
}
.wordgame .uiControl .navbar-nav-wg > li.iconBtn, .wordgame-edit-panel .uiControl .navbar-nav-wg > li.iconBtn, .wordgame-edit .uiControl .navbar-nav-wg > li.iconBtn {
  padding: 7px;
  line-height: 0;
}
.wordgame .uiControl .navbar-nav-wg > li.iconBtn img, .wordgame-edit-panel .uiControl .navbar-nav-wg > li.iconBtn img, .wordgame-edit .uiControl .navbar-nav-wg > li.iconBtn img {
  width: 26px;
  height: 26px;
}
.wordgame .uiControl .navbar-nav-wg > li.textBtn, .wordgame-edit-panel .uiControl .navbar-nav-wg > li.textBtn, .wordgame-edit .uiControl .navbar-nav-wg > li.textBtn,
.wordgame .uiControl .navbar-nav-wg > li.iconBtn,
.wordgame-edit-panel .uiControl .navbar-nav-wg > li.iconBtn,
.wordgame-edit .uiControl .navbar-nav-wg > li.iconBtn {
  background-image: url("../images/pg_ui_images/chocolate-piece-40px.jpg");
  background-size: 100% 100%;
  cursor: pointer;
}
.wordgame .uiControl .navbar-nav-wg > .disabled, .wordgame-edit-panel .uiControl .navbar-nav-wg > .disabled, .wordgame-edit .uiControl .navbar-nav-wg > .disabled,
.wordgame .uiControl .navbar-nav-wg > .disabled:hover,
.wordgame .uiControl .navbar-nav-wg > .disabled:focus {
  opacity: 0.7;
  background-color: transparent;
  pointer: default;
  pointer-events: none;
}
.wordgame .uiControl .navbar-nav-wg.verticalList, .wordgame-edit-panel .uiControl .navbar-nav-wg.verticalList, .wordgame-edit .uiControl .navbar-nav-wg.verticalList {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  width: auto;
  z-index: 10;
  margin-top: 0;
  background-color: #6d3e2f;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  white-space: normal;
}
.wordgame .uiControl .navbar-nav-wg.verticalList > li, .wordgame-edit-panel .uiControl .navbar-nav-wg.verticalList > li, .wordgame-edit .uiControl .navbar-nav-wg.verticalList > li {
  float: none;
  display: block;
}
.wordgame .dragArea, .wordgame-edit-panel .dragArea, .wordgame-edit .dragArea {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.wordgame .uiPlaygroundOuter, .wordgame-edit-panel .uiPlaygroundOuter, .wordgame-edit .uiPlaygroundOuter {
  width: 100%;
  overflow: hidden;
}
.wordgame .uiPlaygroundHolder, .wordgame-edit-panel .uiPlaygroundHolder, .wordgame-edit .uiPlaygroundHolder {
  overflow: visible;
  width: 690px;
  height: 380px;
  padding: 0 10px;
  box-sizing: border-box;
}
.wordgame .uiPlayground, .wordgame-edit-panel .uiPlayground, .wordgame-edit .uiPlayground {
  float: left;
  position: relative;
  width: 670px;
  height: 380px;
}
.wordgame .uiPlayground canvas, .wordgame-edit-panel .uiPlayground canvas, .wordgame-edit .uiPlayground canvas,
.wordgame .uiPlayground .innerLayer,
.wordgame-edit-panel .uiPlayground .innerLayer,
.wordgame-edit .uiPlayground .innerLayer {
  outline: none;
  position: absolute;
  left: 0;
  top: 0;
}
.wordgame .uiRestAreaOuter, .wordgame-edit-panel .uiRestAreaOuter, .wordgame-edit .uiRestAreaOuter {
  overflow: hidden;
}
.wordgame .uiRestArea, .wordgame-edit-panel .uiRestArea, .wordgame-edit .uiRestArea {
  white-space: nowrap;
  overflow: visible;
  padding: 0 10px;
  line-height: 0px;
  margin-left: auto;
  margin-right: auto;
}
.wordgame .uiRestArea table td, .wordgame-edit-panel .uiRestArea table td, .wordgame-edit .uiRestArea table td {
  padding: 0 5px;
  vertical-align: top;
}
.wordgame .uiRestAreaDummy, .wordgame-edit-panel .uiRestAreaDummy, .wordgame-edit .uiRestAreaDummy {
  box-sizing: border-box;
  border: 1px dashed yellow;
  display: inline-block;
}
.wordgame .incompressibleImages, .wordgame-edit-panel .incompressibleImages, .wordgame-edit .incompressibleImages {
  overflow: hidden;
  height: 100000px;
  width: 100000px;
}
.wordgame .uiImage, .wordgame-edit-panel .uiImage, .wordgame-edit .uiImage {
  -ms-transform-origin: 0 0 0;
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
  width: auto;
  height: auto;
  position: absolute;
}
.wordgame .uiSoundImage, .wordgame-edit-panel .uiSoundImage, .wordgame-edit .uiSoundImage {
  z-index: 1;
  width: 32px;
  height: 32px;
}
.wordgame .uiSoundImage .hitArea, .wordgame-edit-panel .uiSoundImage .hitArea, .wordgame-edit .uiSoundImage .hitArea {
  position: absolute;
  left: 0;
  top: 0;
}
.wordgame .uiWordSet, .wordgame-edit-panel .uiWordSet, .wordgame-edit .uiWordSet {
  position: absolute;
}
.wordgame .uiWordSet-hidden, .wordgame-edit-panel .uiWordSet-hidden, .wordgame-edit .uiWordSet-hidden {
  visibility: hidden;
}
.wordgame .uiWord, .wordgame-edit-panel .uiWord, .wordgame-edit .uiWord {
  opacity: 0.99;
  cursor: default;
  max-width: none;
  position: absolute;
  display: inline-block;
}
.wordgame .uiWord div, .wordgame-edit-panel .uiWord div, .wordgame-edit .uiWord div,
.wordgame .uiWord input,
.wordgame-edit-panel .uiWord input,
.wordgame-edit .uiWord input {
  line-height: normal;
  white-space: nowrap;
  /* 'pre' will wrap text on Microsoft Edge */
  padding: 1px;
  border: 0px solid gray;
  box-sizing: content-box;
  position: absolute;
  display: inline-block;
}
.wordgame .uiWord.large div, .wordgame-edit-panel .uiWord.large div, .wordgame-edit .uiWord.large div {
  padding: 6px 5px;
}
.wordgame .uiWord-center div, .wordgame-edit-panel .uiWord-center div, .wordgame-edit .uiWord-center div {
  text-align: center;
}
.wordgame .uiWord-borderOnly div, .wordgame-edit-panel .uiWord-borderOnly div, .wordgame-edit .uiWord-borderOnly div {
  border: 1px solid gray;
  padding: 0px;
  background-color: rgba(255, 255, 255, 0.9);
}
.wordgame .uiWord-input input, .wordgame-edit-panel .uiWord-input input, .wordgame-edit .uiWord-input input {
  max-width: none;
  border: 1px solid gray;
  padding: 0 0 0 3px;
  background-color: rgba(255, 255, 255, 0.9);
}
.wordgame .uiWord-dragEnabled, .wordgame-edit-panel .uiWord-dragEnabled, .wordgame-edit .uiWord-dragEnabled {
  cursor: move;
  z-index: 10;
}
.wordgame .uiWordTxtNormal-center, .wordgame-edit-panel .uiWordTxtNormal-center, .wordgame-edit .uiWordTxtNormal-center {
  text-align: center;
}
.wordgame .uiWordTxtNormal-borderOnly, .wordgame-edit-panel .uiWordTxtNormal-borderOnly, .wordgame-edit .uiWordTxtNormal-borderOnly {
  border: 1px solid gray;
  padding: 0px;
  background-color: rgba(255, 255, 255, 0.9);
}
.wordgame .uiWordTxtInput, .wordgame-edit-panel .uiWordTxtInput, .wordgame-edit .uiWordTxtInput {
  max-width: none;
  border: 1px solid gray;
  padding: 0 0 0 3px;
  background-color: rgba(255, 255, 255, 0.9);
}
.wordgame .wordTest, .wordgame-edit-panel .wordTest, .wordgame-edit .wordTest {
  visibility: hidden;
  display: inline;
}
.wordgame .uiSoundButton, .wordgame-edit-panel .uiSoundButton, .wordgame-edit .uiSoundButton {
  background-color: rgba(255, 255, 153, 0.7);
  padding: 1px;
  cursor: pointer;
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  line-height: 0;
}
.wordgame .uiSoundButton.large, .wordgame-edit-panel .uiSoundButton.large, .wordgame-edit .uiSoundButton.large {
  padding: 6px;
}
.wordgame .uiSoundButton-down, .wordgame-edit-panel .uiSoundButton-down, .wordgame-edit .uiSoundButton-down {
  padding: 2px 0 0 2px;
}
.wordgame .uiSoundButton-down.large, .wordgame-edit-panel .uiSoundButton-down.large, .wordgame-edit .uiSoundButton-down.large {
  padding: 7px 5px 5px 7px;
}
.wordgame .uiSoundButton-dragEnabled, .wordgame-edit-panel .uiSoundButton-dragEnabled, .wordgame-edit .uiSoundButton-dragEnabled {
  z-index: 10;
}
.wordgame .uiSoundButton-disabled, .wordgame-edit-panel .uiSoundButton-disabled, .wordgame-edit .uiSoundButton-disabled {
  cursor: default;
}
.wordgame .uiSoundButton-down-disabled, .wordgame-edit-panel .uiSoundButton-down-disabled, .wordgame-edit .uiSoundButton-down-disabled {
  cursor: default;
  opacity: 0.5;
  filter: alpha(opacity=45);
  zoom: 1;
}
.wordgame .uiSoundButton-hidden, .wordgame-edit-panel .uiSoundButton-hidden, .wordgame-edit .uiSoundButton-hidden {
  visibility: hidden;
}
.wordgame .uiSoundButton img, .wordgame-edit-panel .uiSoundButton img, .wordgame-edit .uiSoundButton img {
  vertical-align: baseline;
}
.wordgame .uiSimpleImage, .wordgame-edit-panel .uiSimpleImage, .wordgame-edit .uiSimpleImage {
  position: absolute;
  line-height: 0;
}
.wordgame #uiAssistantLabel, .wordgame-edit-panel #uiAssistantLabel, .wordgame-edit #uiAssistantLabel {
  border: 1px solid black;
  background-color: #FFFFFF;
  font-size: 16px;
  padding: 1px 2px;
  display: inline;
  white-space: nowrap;
  position: absolute;
}
.wordgame .uiHelp, .wordgame-edit-panel .uiHelp, .wordgame-edit .uiHelp {
  background-color: #FFFFFF;
  border: 1px solid grey;
  border-radius: 10px;
  opacity: 0.97;
  width: 550px;
  position: absolute;
  z-index: 20;
  box-sizing: border-box;
  overflow-y: auto;
}
.wordgame .uiHelpLine, .wordgame-edit-panel .uiHelpLine, .wordgame-edit .uiHelpLine {
  display: inline-block;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  margin-bottom: 20px;
  width: 100%;
}
.wordgame .uiHelpTitle, .wordgame-edit-panel .uiHelpTitle, .wordgame-edit .uiHelpTitle {
  font-size: 32px;
  text-align: center;
  /* for centering when display is inline-block */
  margin: 20px auto 0 auto;
  /* for centering when display is flex */
}
.wordgame .uiHelpLine1Image, .wordgame-edit-panel .uiHelpLine1Image, .wordgame-edit .uiHelpLine1Image {
  margin-left: 10px;
  display: block;
  float: left;
  -webkit-flex: 0 0 100px;
  /* Safari 6.1+ */
  -ms-flex: 0 0 100px;
  /* IE 10 */
  flex: 0 0 100px;
  width: 100px;
  height: 80px;
  background-image: url("../images/pg_ui_images/help_diagrams.jpg");
  background-repeat: no-repeat;
  background-position: 0px -5px;
}
.wordgame .uiHelpLine1, .wordgame-edit-panel .uiHelpLine1, .wordgame-edit .uiHelpLine1 {
  font-size: 16px;
  margin: 0 10px;
  display: block;
  max-width: 420px;
  /* IE 10 */
}
.wordgame .uiHelpBtnDiv, .wordgame-edit-panel .uiHelpBtnDiv, .wordgame-edit .uiHelpBtnDiv {
  margin-left: 10px;
  display: block;
  float: left;
  clear: both;
  min-width: 100px;
  -webkit-flex: 0 0 100px;
  /* Safari 6.1+ */
  -ms-flex: 0 0 100px;
  /* IE 10 */
  flex: 0 0 100px;
}
.wordgame .uiHelpBtn, .wordgame-edit-panel .uiHelpBtn, .wordgame-edit .uiHelpBtn {
  display: block;
  float: left;
  clear: both;
  font-size: 12px;
  padding: 2px 4px;
  background-image: url("../images/pg_ui_images/chocolate-piece-40px.jpg");
  background-size: 100% 100%;
  color: white;
}
.wordgame .uiHelpBtnMatchup1, .wordgame-edit-panel .uiHelpBtnMatchup1, .wordgame-edit .uiHelpBtnMatchup1 {
  margin-top: 0;
  margin-bottom: -18px;
  margin-left: 11px;
}
.wordgame .uiHelpBtnMatchup2, .wordgame-edit-panel .uiHelpBtnMatchup2, .wordgame-edit .uiHelpBtnMatchup2 {
  margin-top: 15px;
  margin-bottom: -33px;
  margin-left: 24px;
}
.wordgame .uiHelpBtnMatchup3, .wordgame-edit-panel .uiHelpBtnMatchup3, .wordgame-edit .uiHelpBtnMatchup3 {
  margin-top: 30px;
  margin-bottom: -48px;
  margin-left: 0;
}
.wordgame .uiHelpBtnFillin, .wordgame-edit-panel .uiHelpBtnFillin, .wordgame-edit .uiHelpBtnFillin {
  margin-top: 45px;
  margin-bottom: -63px;
  margin-left: 44px;
}
.wordgame .uiHelpBtnDictation, .wordgame-edit-panel .uiHelpBtnDictation, .wordgame-edit .uiHelpBtnDictation {
  margin-top: 60px;
  margin-left: 13px;
}
.wordgame .uiHelpBtnComplete, .wordgame-edit-panel .uiHelpBtnComplete, .wordgame-edit .uiHelpBtnComplete {
  margin-left: 0;
}
.wordgame .uiHelpLine2, .wordgame-edit-panel .uiHelpLine2, .wordgame-edit .uiHelpLine2 {
  font-size: 16px;
  margin: 0 10px;
  display: block;
  max-width: 420px;
  /* IE 10 */
}
.wordgame .uiHelpLine3, .wordgame-edit-panel .uiHelpLine3, .wordgame-edit .uiHelpLine3 {
  font-size: 16px;
  text-align: right;
  min-width: 100px;
  margin-left: 10px;
  display: block;
  /* for use when display is inline-block */
  float: left;
  /* for use when display is inline-block */
}
.wordgame .uiHelpReviewLine4, .wordgame-edit-panel .uiHelpReviewLine4, .wordgame-edit .uiHelpReviewLine4 {
  font-size: 24px;
  text-align: center;
  /* for centering when display is inline-block */
  margin: 0 auto;
  /* for centering when display is flex */
}
.wordgame .uiHelpGameLine4, .wordgame-edit-panel .uiHelpGameLine4, .wordgame-edit .uiHelpGameLine4 {
  font-size: 16px;
  margin: 0 10px;
  max-width: 420px;
  /* IE 10 */
}
.wordgame .uiHelpBackButton, .wordgame-edit-panel .uiHelpBackButton, .wordgame-edit .uiHelpBackButton {
  display: block;
  margin: 0 auto;
}
.wordgame .downloadMessage, .wordgame-edit-panel .downloadMessage, .wordgame-edit .downloadMessage {
  background-color: #6d3e2f;
  position: absolute;
  box-sizing: border-box;
  z-index: 999;
  left: 0;
  top: 0;
  border: 1px gray solid;
  display: table;
}
.wordgame .downloadMessage .holder, .wordgame-edit-panel .downloadMessage .holder, .wordgame-edit .downloadMessage .holder {
  display: table-cell;
  vertical-align: middle;
}
.wordgame .downloadMessage .progress, .wordgame-edit-panel .downloadMessage .progress, .wordgame-edit .downloadMessage .progress {
  margin-left: 5%;
  width: 90%;
  border: 1px white solid;
  height: 22px;
}
.wordgame .unselectable, .wordgame-edit-panel .unselectable, .wordgame-edit .unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.wordgame .selectable, .wordgame-edit-panel .selectable, .wordgame-edit .selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.wordgame .dragging, .wordgame-edit-panel .dragging, .wordgame-edit .dragging {
  cursor: move;
}
.wordgame .progress, .wordgame-edit-panel .progress, .wordgame-edit .progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.wordgame .progress-bar, .wordgame-edit-panel .progress-bar, .wordgame-edit .progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.1s linear;
  -o-transition: width 0.1s linear;
  transition: width 0.1s linear;
}
.wordgame .progress-striped .progress-bar, .wordgame-edit-panel .progress-striped .progress-bar, .wordgame-edit .progress-striped .progress-bar,
.wordgame .progress-bar-striped,
.wordgame-edit-panel .progress-bar-striped,
.wordgame-edit .progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}
.wordgame .progress.active .progress-bar, .wordgame-edit-panel .progress.active .progress-bar, .wordgame-edit .progress.active .progress-bar,
.wordgame .progress-bar.active,
.wordgame-edit-panel .progress-bar.active,
.wordgame-edit .progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
.wordgame .progress-bar-success, .wordgame-edit-panel .progress-bar-success, .wordgame-edit .progress-bar-success {
  background-color: #5cb85c;
}
.wordgame .progress-striped .progress-bar-success, .wordgame-edit-panel .progress-striped .progress-bar-success, .wordgame-edit .progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.wordgame .progress-bar-info, .wordgame-edit-panel .progress-bar-info, .wordgame-edit .progress-bar-info {
  background-color: #5bc0de;
}
.wordgame .progress-striped .progress-bar-info, .wordgame-edit-panel .progress-striped .progress-bar-info, .wordgame-edit .progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.wordgame .progress-bar-warning, .wordgame-edit-panel .progress-bar-warning, .wordgame-edit .progress-bar-warning {
  background-color: #f0ad4e;
}
.wordgame .progress-striped .progress-bar-warning, .wordgame-edit-panel .progress-striped .progress-bar-warning, .wordgame-edit .progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.wordgame .progress-bar-danger, .wordgame-edit-panel .progress-bar-danger, .wordgame-edit .progress-bar-danger {
  background-color: #d9534f;
}
.wordgame .progress-striped .progress-bar-danger, .wordgame-edit-panel .progress-striped .progress-bar-danger, .wordgame-edit .progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.wordgame .btn, .wordgame-edit-panel .btn, .wordgame-edit .btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.wordgame .btn:focus, .wordgame-edit-panel .btn:focus, .wordgame-edit .btn:focus,
.wordgame .btn:active:focus,
.wordgame .btn.active:focus,
.wordgame .btn.focus,
.wordgame-edit-panel .btn.focus,
.wordgame-edit .btn.focus,
.wordgame .btn:active.focus,
.wordgame .btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.wordgame .btn:hover, .wordgame-edit-panel .btn:hover, .wordgame-edit .btn:hover,
.wordgame .btn:focus,
.wordgame-edit-panel .btn:focus,
.wordgame-edit .btn:focus,
.wordgame .btn.focus,
.wordgame-edit-panel .btn.focus,
.wordgame-edit .btn.focus {
  color: #333;
  text-decoration: none;
}
.wordgame .btn:active, .wordgame-edit-panel .btn:active, .wordgame-edit .btn:active,
.wordgame .btn.active,
.wordgame-edit-panel .btn.active,
.wordgame-edit .btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.wordgame .btn.disabled, .wordgame-edit-panel .btn.disabled, .wordgame-edit .btn.disabled,
.wordgame .btn[disabled],
.wordgame-edit-panel .btn[disabled],
.wordgame-edit .btn[disabled],
.wordgame fieldset[disabled] .btn,
.wordgame-edit-panel fieldset[disabled] .btn,
.wordgame-edit fieldset[disabled] .btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0.65;
}
.wordgame a.btn.disabled, .wordgame-edit-panel a.btn.disabled, .wordgame-edit a.btn.disabled,
.wordgame fieldset[disabled] a.btn,
.wordgame-edit-panel fieldset[disabled] a.btn,
.wordgame-edit fieldset[disabled] a.btn {
  pointer-events: none;
}
.wordgame .btn-default, .wordgame-edit-panel .btn-default, .wordgame-edit .btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.wordgame .btn-default:focus, .wordgame-edit-panel .btn-default:focus, .wordgame-edit .btn-default:focus,
.wordgame .btn-default.focus,
.wordgame-edit-panel .btn-default.focus,
.wordgame-edit .btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.wordgame .btn-default:hover, .wordgame-edit-panel .btn-default:hover, .wordgame-edit .btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.wordgame .btn-default:active, .wordgame-edit-panel .btn-default:active, .wordgame-edit .btn-default:active,
.wordgame .btn-default.active,
.wordgame-edit-panel .btn-default.active,
.wordgame-edit .btn-default.active,
.wordgame .open > .dropdown-toggle.btn-default,
.wordgame-edit-panel .open > .dropdown-toggle.btn-default,
.wordgame-edit .open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.wordgame .btn-default:active:hover, .wordgame-edit-panel .btn-default:active:hover, .wordgame-edit .btn-default:active:hover,
.wordgame .btn-default.active:hover,
.wordgame-edit-panel .btn-default.active:hover,
.wordgame-edit .btn-default.active:hover,
.wordgame .open > .dropdown-toggle.btn-default:hover,
.wordgame-edit-panel .open > .dropdown-toggle.btn-default:hover,
.wordgame-edit .open > .dropdown-toggle.btn-default:hover,
.wordgame .btn-default:active:focus,
.wordgame-edit-panel .btn-default:active:focus,
.wordgame-edit .btn-default:active:focus,
.wordgame .btn-default.active:focus,
.wordgame-edit-panel .btn-default.active:focus,
.wordgame-edit .btn-default.active:focus,
.wordgame .open > .dropdown-toggle.btn-default:focus,
.wordgame-edit-panel .open > .dropdown-toggle.btn-default:focus,
.wordgame-edit .open > .dropdown-toggle.btn-default:focus,
.wordgame .btn-default:active.focus,
.wordgame-edit-panel .btn-default:active.focus,
.wordgame-edit .btn-default:active.focus,
.wordgame .btn-default.active.focus,
.wordgame-edit-panel .btn-default.active.focus,
.wordgame-edit .btn-default.active.focus,
.wordgame .open > .dropdown-toggle.btn-default.focus,
.wordgame-edit-panel .open > .dropdown-toggle.btn-default.focus,
.wordgame-edit .open > .dropdown-toggle.btn-default.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.wordgame .btn-default:active, .wordgame-edit-panel .btn-default:active, .wordgame-edit .btn-default:active,
.wordgame .btn-default.active,
.wordgame-edit-panel .btn-default.active,
.wordgame-edit .btn-default.active,
.wordgame .open > .dropdown-toggle.btn-default,
.wordgame-edit-panel .open > .dropdown-toggle.btn-default,
.wordgame-edit .open > .dropdown-toggle.btn-default {
  background-image: none;
}
.wordgame .btn-default.disabled:hover, .wordgame-edit-panel .btn-default.disabled:hover, .wordgame-edit .btn-default.disabled:hover,
.wordgame .btn-default[disabled]:hover,
.wordgame-edit-panel .btn-default[disabled]:hover,
.wordgame-edit .btn-default[disabled]:hover,
.wordgame fieldset[disabled] .btn-default:hover,
.wordgame-edit-panel fieldset[disabled] .btn-default:hover,
.wordgame-edit fieldset[disabled] .btn-default:hover,
.wordgame .btn-default.disabled:focus,
.wordgame-edit-panel .btn-default.disabled:focus,
.wordgame-edit .btn-default.disabled:focus,
.wordgame .btn-default[disabled]:focus,
.wordgame-edit-panel .btn-default[disabled]:focus,
.wordgame-edit .btn-default[disabled]:focus,
.wordgame fieldset[disabled] .btn-default:focus,
.wordgame-edit-panel fieldset[disabled] .btn-default:focus,
.wordgame-edit fieldset[disabled] .btn-default:focus,
.wordgame .btn-default.disabled.focus,
.wordgame-edit-panel .btn-default.disabled.focus,
.wordgame-edit .btn-default.disabled.focus,
.wordgame .btn-default[disabled].focus,
.wordgame-edit-panel .btn-default[disabled].focus,
.wordgame-edit .btn-default[disabled].focus,
.wordgame fieldset[disabled] .btn-default.focus,
.wordgame-edit-panel fieldset[disabled] .btn-default.focus,
.wordgame-edit fieldset[disabled] .btn-default.focus {
  background-color: #fff;
  border-color: #ccc;
}
.wordgame .btn-default .badge, .wordgame-edit-panel .btn-default .badge, .wordgame-edit .btn-default .badge {
  color: #fff;
  background-color: #333;
}
.wordgame .occupiedArea, .wordgame-edit-panel .occupiedArea, .wordgame-edit .occupiedArea {
  z-index: 20;
}
.wordgame .event, .wordgame-edit-panel .event, .wordgame-edit .event {
  z-index: 30;
}
.wordgame .addLine, .wordgame-edit-panel .addLine, .wordgame-edit .addLine {
  z-index: 40;
}
.wordgame .edit, .wordgame-edit-panel .edit, .wordgame-edit .edit {
  z-index: 35;
}
.wordgame .edit svg rect:focus, .wordgame-edit-panel .edit svg rect:focus, .wordgame-edit .edit svg rect:focus,
.wordgame .edit svg line:focus,
.wordgame-edit-panel .edit svg line:focus,
.wordgame-edit .edit svg line:focus {
  outline: 0;
}
.wordgame .edit .items, .wordgame-edit-panel .edit .items, .wordgame-edit .edit .items {
  cursor: move;
}
.wordgame .uiEditPanelOuter, .wordgame-edit-panel .uiEditPanelOuter, .wordgame-edit .uiEditPanelOuter {
  overflow: hidden;
  margin-top: 5px;
  box-sizing: border-box;
  font-size: 14px;
  font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
}
.wordgame .uiEditPanel, .wordgame-edit-panel .uiEditPanel, .wordgame-edit .uiEditPanel {
  background-color: #F4FFE4;
  border: 1px solid #828177;
  width: 832px;
}
.wordgame .after, .wordgame-edit-panel .after, .wordgame-edit .after {
  content: ".";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden;
}
.wordgame .uiEditPanelA, .wordgame-edit-panel .uiEditPanelA, .wordgame-edit .uiEditPanelA {
  height: 39px;
}
.wordgame .uiEditPanelA .btn, .wordgame-edit-panel .uiEditPanelA .btn, .wordgame-edit .uiEditPanelA .btn {
  margin: 3px 5px;
}
.wordgame .uiEditPanelB, .wordgame-edit-panel .uiEditPanelB, .wordgame-edit .uiEditPanelB {
  min-height: 153px;
  border-top: 1px solid #828177;
}
.wordgame .uiEditSubPanel, .wordgame-edit-panel .uiEditSubPanel, .wordgame-edit .uiEditSubPanel {
  float: left;
  box-sizing: border-box;
  min-height: 153px;
  width: 580px;
}
.wordgame .sp-setting, .wordgame-edit-panel .sp-setting, .wordgame-edit .sp-setting {
  padding: 0 50px;
}
.wordgame .sp-add-image .btn, .wordgame-edit-panel .sp-add-image .btn, .wordgame-edit .sp-add-image .btn {
  margin: 5px;
}
.wordgame .sp-edit-image, .wordgame-edit-panel .sp-edit-image, .wordgame-edit .sp-edit-image {
  padding: 18px 20px;
}
.wordgame .sp-wordset, .wordgame-edit-panel .sp-wordset, .wordgame-edit .sp-wordset {
  padding: 0 10px;
}
.wordgame .sp-line, .wordgame-edit-panel .sp-line, .wordgame-edit .sp-line {
  padding: 35px 55px;
}
.wordgame .uiEditPanel .ui-widget input, .wordgame-edit-panel .uiEditPanel .ui-widget input, .wordgame-edit .uiEditPanel .ui-widget input {
  font-size: 16px;
  margin: 2px 18px 2px 1px;
}
.wordgame .uiEditPanel input, .wordgame-edit-panel .uiEditPanel input, .wordgame-edit .uiEditPanel input {
  line-height: normal;
}
.wordgame .show-aux-info-set, .wordgame-edit-panel .show-aux-info-set, .wordgame-edit .show-aux-info-set {
  display: inline-block;
  float: right;
  margin: 10px 10px 0 0;
}
.wordgame .show-aux-info-set .disabled, .wordgame-edit-panel .show-aux-info-set .disabled, .wordgame-edit .show-aux-info-set .disabled,
.wordgame .equal-set.disabled,
.wordgame-edit-panel .equal-set.disabled,
.wordgame-edit .equal-set.disabled {
  opacity: 0.7;
  background-color: transparent;
  pointer: default;
  pointer-events: none;
}
.wordgame .ep-label, .wordgame-edit-panel .ep-label, .wordgame-edit .ep-label {
  display: inline-block;
  vertical-align: middle;
}
.wordgame .ep-console-set, .wordgame-edit-panel .ep-console-set, .wordgame-edit .ep-console-set {
  float: right;
  padding: 5px;
}
.wordgame .ep-console, .wordgame-edit-panel .ep-console, .wordgame-edit .ep-console {
  width: 240px;
  height: 118px;
  resize: none;
}
.wordgame .ep-col, .wordgame-edit-panel .ep-col, .wordgame-edit .ep-col {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 5px;
}
.wordgame .ep-col2, .wordgame-edit-panel .ep-col2, .wordgame-edit .ep-col2 {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.wordgame .ep-col-games-enabled, .wordgame-edit-panel .ep-col-games-enabled, .wordgame-edit .ep-col-games-enabled {
  text-align: left;
  padding-left: 15px;
}
.wordgame .ep-col-last, .wordgame-edit-panel .ep-col-last, .wordgame-edit .ep-col-last {
  height: 153px;
  margin: 0;
}
.wordgame .ip-set, .wordgame-edit-panel .ip-set, .wordgame-edit .ip-set {
  padding: 2px 5px;
}
.wordgame .ip-set input, .wordgame-edit-panel .ip-set input, .wordgame-edit .ip-set input {
  vertical-align: middle;
}
.wordgame .btn.ip-front-back, .wordgame-edit-panel .btn.ip-front-back, .wordgame-edit .btn.ip-front-back {
  padding: 6px 4px;
}
.wordgame .ep-btn-4d, .wordgame-edit-panel .ep-btn-4d, .wordgame-edit .ep-btn-4d {
  width: 42px;
}
.wordgame .ep-btn-5d, .wordgame-edit-panel .ep-btn-5d, .wordgame-edit .ep-btn-5d {
  width: 48px;
}
.wordgame .ep-btn-6d, .wordgame-edit-panel .ep-btn-6d, .wordgame-edit .ep-btn-6d {
  width: 54px;
}
.wordgame .ep-soundButton, .wordgame-edit-panel .ep-soundButton, .wordgame-edit .ep-soundButton {
  background-color: transparent;
  position: relative;
  vertical-align: middle;
  margin-left: 10px;
}
.wordgame .wp-spelling, .wordgame-edit-panel .wp-spelling, .wordgame-edit .wp-spelling, .wordgame .wp-phonetics, .wordgame-edit-panel .wp-phonetics, .wordgame-edit .wp-phonetics {
  width: 130px;
}
.wordgame .lc-edit-spectrum .sp-palette-row-selection, .wordgame-edit-panel .lc-edit-spectrum .sp-palette-row-selection, .wordgame-edit .lc-edit-spectrum .sp-palette-row-selection {
  width: 40px;
}
.wordgame table, .wordgame-edit-panel table, .wordgame-edit table {
  border: 0;
  width: auto;
}

.wordgame-edit-panel .ss-tooltip {
  position: absolute;
  z-index: 1;
  background-color: #ffff99;
  text-align: center;
  padding: 5px;
  border: #333333 solid 1px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.wordgame-edit-panel .sound-selector {
  display: flex;
  flex-direction: row;
  width: 278px;
}
.wordgame-edit-panel .sound-selector .ss-get-sounds {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  white-space: break-spaces;
}
.wordgame-edit-panel .sound-selector .ss-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  width: 26px;
  height: 24px;
  border: gray solid 1px;
  border-radius: 3px;
  padding: 5px;
}
.wordgame-edit-panel .sound-selector .ss-button:hover {
  cursor: pointer;
}
.wordgame-edit-panel .sound-selector .ss-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.wordgame-edit-panel .sound-selector .ss-button:active {
  transform: translateX(1px) translateY(1px);
}
.wordgame-edit-panel .sound-selector .ss-sounds-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-wrap: nowrap;
  gap: 2px;
  background: white;
  margin-left: 5px;
  border: gray solid 1px;
  border-radius: 3px;
  padding: 2px;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container::-webkit-scrollbar {
  height: 8px;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container::-webkit-scrollbar-thumb {
  background: #888;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container .ss-sound-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: transparent solid 3px;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container .ss-sound-container.selected {
  border: blue solid 3px;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container .ss-sound-container .ss-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 25px;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container .ss-sound-container .ss-sound-player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 25px;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container .ss-sound-container .ss-sound-player:hover {
  cursor: pointer;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container .ss-sound-container .ss-sound-player[disabled] {
  opacity: 0.5;
  cursor: default;
}
.wordgame-edit-panel .sound-selector .ss-sounds-container .ss-sound-container .ss-sound-player:not([disabled]):active {
  transform: translateX(1px) translateY(1px);
}