/******************************************************************************/
/*  SudokuPuzzo: color.css                                                    */
/******************************************************************************/

/******************************************************************************/
/*  SudokuPuzzo: main.css                                                     */
/******************************************************************************/
.MS-home {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: #888;
  position: relative;
}
.MS-main {
  background-color: transparent;
  margin: 0;
  width: 100%;
}
.MS-select {
  margin: 1vh auto 2vh;
}
.MS-button-bar {
  border: none;
  background-color: transparent;
}
.MS-bar-button {
  cursor: pointer;
  border: solid thin #331a00;
  background-color: #663300;
  color: yellow;
  margin: 0;
}
.MS-cell {
  cursor: pointer;
  border: solid thin #888;
  color: #0080FF;
}
.MS-cell.red {
  color: #e61919;
}
.MS-cell.yel {
  color: #b89c14;
}
.MS-cell.grn {
  color: #1f7a2e;
}
.MS-cell.blu {
  color: #4000ff;
}
.MS-cell.pnk {
  color: #993399;
}
.MS-cell.bnw {
  color: #000;
}
.MS-cell.dark.red {
  color: #ff5500;
}
.MS-cell.dark.yel {
  color: #ffd500;
}
.MS-cell.dark.grn {
  color: #00ff00;
}
.MS-cell.dark.blu {
  color: #00ffff;
}
.MS-cell.dark.pnk {
  color: #ff80ff;
}
.MS-cell.dark.bnw {
  color: #FFF;
}
.MS-cell.focus {
  border-color: #F60;
}
.MS-cell.emphasis {
  border-color: #ff7d66;
  border-width: medium !important;
}
.MS-cell.input {
  background-color: #208000;
  color: yellow;
}
.MS-cell.showall {
  background-color: #afb4b6;
  color: #5c6470;
}
.MS-cell.unit {
  background-color: #663300;
  color: cyan;
}
.MS-cell.peer {
  background-color: pink;
  color: black;
}
.MS-cell.chars {
  background-color: #ff9f80;
  color: black;
}
.MS-cell.chars.selection {
  border-color: #66cc00;
  border-width: thick;
}
.MS-cell.select {
  background-color: #FFB84D;
  color: #3D3D29;
  border-color: #3D3D29;
}
.MS-cell.select.easy {
  background-color: #FFFF80;
}
.MS-cell.select.hard {
  background-color: #FF4D4D;
}
.MS-cell.select.current {
  color: black;
  border-color: black;
  border-width: medium;
}
.MS-button {
  cursor: pointer;
  font-size: 20px;
  height: 50px;
  width: 150px;
  margin: 0 20px;
  border: solid 6px #DDD;
  color: yellow;
}
.MS-button.hint {
  background-color: orange;
}
.MS-button.solve {
  background-color: #009933;
}
.MS-button.clear {
  background-color: #00aaff;
}
.MS-button.check {
  background-color: #bf4040;
}
.MS-toolbar {
  padding: 0;
  margin: 0;
  border: none;
  background: no-repeat;
  background-color: #d98026;
  color: #F6E44A;
  white-space: nowrap;
  text-align: center;
  position: relative;
}
.MS-toolbar.caption {
  background: transparent;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.MS-toolbar.setup {
  background-color: #bf4040;
}
.MS-toolbar.transparent {
  background-color: transparent;
  color: #333;
}
.MS-toolbar.alleft {
  text-align: left;
}
.MS-toolbar.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.MS-caption-bar {
  width: 100%;
  background-color: #d98026;
  color: #F6E44A;
  text-align: center;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.MS-toolbutton {
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.MS-tutor {
  background-color: #009900;
}
.MS-icon {
  margin: 0 2vmin;
  vertical-align: middle;
  background-color: #d98026;
}
.MS-icon.tut {
  background-color: #009900;
}
.MS-message {
  color: black;
  background-color: transparent;
  text-align: center;
  font-family: Arial;
  font-weight: 500;
  font-size: 4.8vmin;
  padding: 0;
  margin: 2vmin 2vmin 4vmin;
}
.MS-message.score {
  font-size: 10vmin;
}
.MS-message.head {
  font-weight: 700;
  font-size: 5.2vmin;
  margin: 3vmin;
}
.MS-frame-image {
  width: 9vmin;
  height: 9vmin;
}
span.button {
  padding: 1vh 2vh;
  color: white;
}
span.button.orange {
  background-color: #ff9900;
  text-transform: uppercase;
  font-weight: bold;
}
span.button.orange.selected {
  color: yellow;
  background-color: #663d00;
}
span.button.green {
  background-color: #093;
  font-weight: bold;
  text-transform: lowercase;
}
span.button.white {
  color: black;
  background-color: #DDD;
  text-transform: lowercase;
}
span.button.yellow {
  color: black;
  background-color: #FF0;
  text-transform: lowercase;
}
span.button.lime {
  color: black;
  background-color: #0F0;
  text-transform: lowercase;
}
span.button.cancel {
  background-color: #ff471a;
}
span.button.warning {
  background-color: #ff9900;
}
span.button.OK {
  font-size: 3.6vh;
}
span.cap {
  text-transform: capitalize;
}
span.sel {
  font-style: italic;
  color: yellow;
}
span.sel.red {
  background-color: #e61919;
}
span.sel.yel {
  background-color: #b89c14;
}
span.sel.grn {
  background-color: #1f7a2e;
}
span.sel.blu {
  background-color: #4000ff;
}
span.sel.pnk {
  background-color: #993399;
}
span.sel.bnw {
  background-color: #000;
}
span.sel.dark {
  color: #333;
}
span.sel.dark.red {
  background-color: #ff5500;
}
span.sel.dark.yel {
  background-color: #ffd500;
}
span.sel.dark.grn {
  background-color: #00ff00;
}
span.sel.dark.blu {
  background-color: #00ffff;
}
span.sel.dark.pnk {
  background-color: #ff80ff;
}
span.sel.dark.bnw {
  background-color: #FFF;
}
span.ilb {
  display: inline-block;
}
span.smallcaps {
  color: #004D00;
  font-weight: 900;
  font-variant: small-caps;
}
span.note {
  color: #666;
  font-weight: 500;
  font-style: italic;
}
span.frame {
  border: medium solid black;
  margin: 1vmin;
  padding: 1.5vmin;
  font-size: 8vmin;
}
span.frame.image {
  height: 9vmin;
  display: inline-block;
  vertical-align: middle;
}
span.frame.active {
  border-color: #0d3300;
  background-color: #b3ff99;
}
.left {
  float: left;
}
.right {
  float: right;
}
.italic {
  font-style: italic;
}
.invisible {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
.highlight {
  border-style: solid;
  border-color: #F6E44A;
  border-width: 5px;
}
.relative {
  position: relative;
}
.center {
  text-align: center;
}
.center-vert {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.center-both {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.stroke {
  -webkit-text-stroke: 1px #994A00;
}
/******************************************************************************/
.MS-dialog-page {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: #ffdd99;
  text-align: center;
}
.MS-dialog-page.left-text {
  text-align: left;
}
.MS-dialog-title {
  font-weight: bold;
  background-color: #C90;
  color: #F6E44A;
  border: none;
  margin-bottom: 2vh;
}
.MS-dialog-content {
  font-weight: 500;
  color: #000;
  text-align: left;
  width: 92%;
  margin: 2vh auto 0;
  padding: 0;
}
.MS-dialog-note {
  text-transform: none;
  font-weight: 700;
  color: #666;
}
.MS-dialog-note.no-margin {
  margin: 0;
}
.MS-dialog-note.after-label {
  margin: 1vh 0;
}
.MS-dialog-note.language {
  margin-top: 4vh;
  margin-bottom: 3vh;
}
.MS-dialog-note.footnote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2vh;
}
.MS-dialog-close {
  position: absolute;
  right: 0;
  top: 0;
}
.red-popup {
  cursor: pointer;
  position: absolute;
  right: -5.12vmin;
  top: -5.12vmin;
  width: 6.4vmin;
  height: 6.4vmin;
  padding: 0.64vmin;
  text-decoration: none;
  background-color: red;
  font-family: Arial;
  font-weight: bold;
  font-size: 5.12vmin;
  border-style: solid;
  border-color: white;
  border-radius: 50%;
  border-width: 1.28vmin;
}
.MS-popup {
  text-align: center;
  background: no-repeat;
  background-color: #F3E2A9;
}
.MS-popup.warning {
  background-color: #F1948A;
}
.MS-popup.fadeout {
  animation: fadeOut ease 8s;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.enyo-scrim.popup {
  pointer-events: auto;
  background-color: #000;
  opacity: 0.60;
  filter: alpha(opacity=60);
}
.MS-checkbox {
  height: 8vh;
  background-color: transparent;
  color: #996600;
  padding: 0;
  margin: 0 auto;
  width: 50vw;
}
@media (orientation: portrait) {
  .MS-checkbox {
    height: 6vh;
  }
}
@media (orientation: portrait) {
  .MS-checkbox {
    width: 80vw;
  }
}
.MS-checkbox-label {
  width: 70%;
  line-height: 8vh;
  text-align: right;
  padding: 0;
}
.MS-checkbox-label.wideLabel {
  width: 80%;
}
@media (orientation: portrait) {
  .MS-checkbox-label {
    line-height: 6vh;
  }
}
.MS-checkbox-label:hover {
  background: #f5cca3;
  color: #d98026;
}
.MS-checkbox-box {
  width: 10%;
  float: left;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.MS-pushbutton {
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  background-color: #d98026;
  color: #F6E44A;
  border: solid thick #d98026;
}
.MS-pushbutton.selList {
  color: #332200;
}
.MS-pushbutton.selList.active {
  border-color: #F6E44A;
  color: #F6E44A;
}
.MS-pushbutton.message {
  margin-bottom: 10px;
}
.MS-pushbutton.tutorial {
  border: none;
  color: yellow;
  background-color: #009900;
}
.MS-pushbutton.OK {
  border: none;
  color: white;
  background-color: #33cc73;
}
.MS-pushbutton.warning {
  border: none;
  color: white;
  background-color: #ff9900;
}
.MS-legend {
  width: 100%;
  height: padding: 0;
  margin: 0 0 1vh 0;
  border: none;
  background-color: transparent;
  color: black;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
.MS-square {
  background-color: #FFB84D;
  border: medium solid black;
  margin: 0 1vw 0 5vw;
}
.MS-square.easy {
  background-color: #FFFF80;
}
.MS-square.hard {
  background-color: #FF4D4D;
}
.MS-configure-label {
  font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  margin: 1.5vh 0;
  color: #996600;
}
.MS-configure-label.sample {
  margin-top: 0;
  text-align: center;
}
.MS-configure-box {
  cursor: pointer;
  padding: 0;
  margin: 0 2px;
  border: solid thick #d98026;
  background: no-repeat;
  background-color: #FFF;
  color: #0080FF;
}
.MS-configure-box.dark {
  background-color: #000;
}
.MS-configure-box.shaded {
  background-color: #e7e4e4;
}
.MS-configure-box.dark.shaded {
  background-color: #403a3a;
}
.MS-configure-box.pressed,
.MS-configure-box.active {
  border: solid thick #66cc00;
  background-image: none;
}
.MS-configure-box.red {
  color: #e61919;
}
.MS-configure-box.yel {
  color: #b89c14;
}
.MS-configure-box.grn {
  color: #1f7a2e;
}
.MS-configure-box.blu {
  color: #4000ff;
}
.MS-configure-box.pnk {
  color: #993399;
}
.MS-configure-box.bnw {
  color: #000;
}
.MS-configure-box.dark.red {
  color: #ff5500;
}
.MS-configure-box.dark.yel {
  color: #ffd500;
}
.MS-configure-box.dark.grn {
  color: #00ff00;
}
.MS-configure-box.dark.blu {
  color: #00ffff;
}
.MS-configure-box.dark.pnk {
  color: #ff80ff;
}
.MS-configure-box.dark.bnw {
  color: #FFF;
}
.MS-configure-background {
  text-align: center;
  width: 25%;
}
.MS-configure-background.both {
  width: 50%;
}
.MS-configure-corner {
  text-align: center;
  width: 38%;
}
.MS-configure-spacing {
  text-align: center;
  width: 6%;
}