.cet-fullscreen body {
  background-color: white !important;
}

body {
  cursor: default;
  -ms-touch-action: auto !important;
  touch-action: auto !important;
}

.app-outer-wrapper {
  background-color: #37353A;
}

.app-content * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

.ar .app-help-content b {
  color: black !important;
  font-weight: normal;
}

.app-help-wrapper{
  display:none;
}


.game-container {
  background-color: #37353A;
  width: 800px;
  height: 550px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}

.app-footer {
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.top-panel {
  width: 100%;
  height: 90px;
  position: absolute;
  top: 0px;
  z-index: 1;
}

.colors-container {
  width: 246px;
  height: 77px;
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #62758C;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.mobile .colors-container {
  width: 266px;
}

.ui-sprite {
  background-image: url(img/sprite.svg);
  background-repeat: no-repeat;
}

.magnifier {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 35px;
  height: 53px;
  cursor: pointer;
  background-position: -1652px 0px;
  display: none;
}

  .magnifier.disabled {
    background-position: -1688px 0px;
  }

.protected .magnifier {
  background-position: -1688px 0px;
}

.magnifier.off {
  background-position: -1724px 0px;
}

.mobile .magnifier {
  display: block;
}

.color1 {
  position: absolute;
  left: 26px;
  top: 12px;
  background-position: 0px 0px;
  width: 58px;
  height: 53px;
  cursor: pointer;
}

.mobile .color1 {
  left: 58px;
}

.color1:hover {
  background-position: -413px 0px;
}

.color1.selected {
  background-position: -236px 0px;
}

  .color1.selected:hover {
    background-position: -590px 0px;
  }

.color1.disabled {
  background-position: -177px 0px;
}

.protected .color1 /*:not(.selected)*/ {
  background-position: -177px 0px;
}

.color2 {
  position: absolute;
  left: 94px;
  top: 12px;
  background-position: -59px 0px;
  width: 58px;
  height: 53px;
  cursor: pointer;
}

.mobile .color2 {
  left: 127px;
}

.color2:hover {
  background-position: -472px 0px;
}

.color2.selected {
  background-position: -295px 0px;
}

  .color2.selected:hover {
    background-position: -649px -0px;
  }

.color2.disabled {
  background-position: -177px 0px;
}

.protected .color2 /*:not(.selected)*/ {
  background-position: -177px 0px;
}

.color3 {
  position: absolute;
  left: 162px;
  top: 12px;
  background-position: -118px 0px;
  width: 58px;
  height: 53px;
  cursor: pointer;
}

.mobile .color3 {
  left: 196px;
}

.color3:hover {
  background-position: -531px -0px;
}

.color3.selected {
  background-position: -354px 0px;
}

  .color3.selected:hover {
    background-position: -708px 0px;
  }

.color3.disabled {
  background-position: -177px 0px;
}

.protected .color3 /*:not(.selected)*/ {
  background-position: -177px 0px;
}

.division-container {
  width: 253px;
  height: 77px;
  position: absolute;
  top: 12px;
  left: 270px;
  background-color: #62758C;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.mobile .division-container {
  width: 235px;
  left: 289px;
}

.part-back,
.rows-back,
.cols-back {
  width: 58px;
  height: 53px;
  background-color: #2F3438;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  position: absolute;
  top: 0px;
}

.counter-all,
.counter-rows,
.counter-cols {
  position: absolute;
  width: 58px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 27px;
  text-align: center;
  color: white;
}

.single-panel {
  display: block;
  position: absolute;
  top: 12px;
  left: 79px;
}

.mobile .single-panel {
  left: 72px;
}

.part-plus {
  top: 0px;
  left: 0px;
}

.part-minus {
  top: 30px;
  left: 0px;
}

.part-back {
  left: 32px;
}

.counter-all {
  left: 32px;
  top: 3px;
}

.counter-all-txt {
  left: 32px;
}

.double-panel {
  display: none;
  position: absolute;
  top: 12px;
  left: 23px;
}

.mobile .double-panel {
  left: 16px;
}

.delimiter {
  width: 2px;
  height: 53px;
  left: 102px;
  position: absolute;
  background-color: #74879B;
}

.counter-all-txt,
.counter-rows-txt,
.counter-cols-txt {
  position: absolute;
  width: 58px;
  color: white;
  text-align: center;
  top: 32px;
}

.he .counter-all-txt,
.he .counter-rows-txt,
.he .counter-cols-txt {
  font-family: Arimo;
  font-size: 15px;
}

.ar .counter-all-txt,
.ar .counter-rows-txt,
.ar .counter-cols-txt {
  font-family: Lateef;
  font-size: 18px;
}

.en .counter-all-txt,
.en .counter-rows-txt,
.en .counter-cols-txt {
  font-family: sans-serif;
  font-size: 12px;
}

.rows-plus {
  top: 0px;
  left: 0px;
}

.rows-minus {
  top: 30px;
  left: 0px;
}

.rows-back {
  left: 32px;
}

.counter-rows {
  left: 32px;
  top: 3px;
}

.counter-rows-txt {
  left: 32px;
}

.cols-plus {
  top: 0px;
  left: 115px;
}

.cols-minus {
  top: 30px;
  left: 115px;
}

.cols-back {
  left: 147px;
}

.counter-cols {
  left: 147px;
  top: 3px;
}

.counter-cols-txt {
  left: 147px;
}


.units-container {
  width: 253px;
  height: 77px;
  position: absolute;
  top: 12px;
  left: 535px;
  background-color: #62758C;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.unit1 {
  position: absolute;
  left: 50px;
  top: 12px;
  background-position: -767px 0px;
  width: 58px;
  height: 53px;
  cursor: pointer;
}

  .unit1:hover {
    background-position: -1298px 0px;
  }

  .unit1.selected {
    background-position: -1121px 0px;
  }

    .unit1.selected:hover {
      background-position: -1475px 0px;
    }

  .unit1.disabled {
    background-position: -944px 0px;
  }

.protected .unit1 /*:not(.selected)*/ {
  background-position: -944px 0px;
}

.unit2 {
  position: absolute;
  left: 115px;
  top: 12px;
  background-position: -826px 0px;
  width: 58px;
  height: 53px;
  cursor: pointer;
}

  .unit2:hover {
    background-position: -1357px 0px;
  }

  .unit2.selected {
    background-position: -1180px 0px;
  }

    .unit2.selected:hover {
      background-position: -1534px 0px;
    }

  .unit2.disabled {
    background-position: -1003px 0px;
  }

.protected .unit2 /*:not(.selected)*/ {
  background-position: -1003px 0px;
}

.unit3 {
  position: absolute;
  left: 180px;
  top: 12px;
  background-position: -885px 0px;
  width: 58px;
  height: 53px;
  cursor: pointer;
}

  .unit3:hover {
    background-position: -1416px 0px;
  }

  .unit3.selected {
    background-position: -1239px 0px;
  }

    .unit3.selected:hover {
      background-position: -1593px 0px;
    }

  .unit3.disabled {
    background-position: -1062px 0px;
  }

.protected .unit3 /*:not(.selected)*/ {
  background-position: -1062px 0px;
}

.colors_caption-txt,
.division_caption-txt,
.units_caption-txt {
  color: white;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 5px;
}

.he .colors_caption-txt,
.he .division_caption-txt,
.he .units_caption-txt {
  font-family: Arimo;
  font-size: 18px;
}

.ar .colors_caption-txt,
.ar .division_caption-txt,
.ar .units_caption-txt {
  font-family: Lateef;
  font-size: 18px;
}

.en .colors_caption-txt,
.en .division_caption-txt,
.en .units_caption-txt {
  font-family: sans-serif;
  font-size: 18px;
}

.part-plus,
.rows-plus,
.cols-plus,
.unit-plus {
  position: absolute;
  background-position: -1761px 0px;
  width: 26px;
  height: 23px;
  cursor: pointer;
}

  .part-plus:before,
  .rows-plus:before,
  .cols-plus:before,
  .unit-plus:before {
    display: inline-block;
    height: 37px;
    width: 40px;
    content: '';
    bottom: 0;
    right: 0;
    position: absolute;
  }

  .part-plus:hover,
  .rows-plus:hover,
  .cols-plus:hover,
  .unit-plus:hover {
    background-position: -1869px 0px;
  }

  .part-plus.disabled,
  .rows-plus.disabled,
  .cols-plus.disabled,
  .unit-plus.disabled {
    background-position: -1815px 0px;
  }

.protected .part-plus:not(.disabled),
.protected .rows-plus:not(.disabled),
.protected .cols-plus:not(.disabled),
.protected .unit-plus:not(.disabled) {
  background-position: -1815px 0px;
}

.part-minus,
.rows-minus,
.cols-minus,
.unit-minus {
  position: absolute;
  background-position: -1788px 0px;
  width: 26px;
  height: 23px;
  cursor: pointer;
}

  .part-minus:before,
  .rows-minus:before,
  .cols-minus:before,
  .unit-minus:before {
    display: inline-block;
    height: 37px;
    width: 40px;
    content: '';
    top: 0;
    right: 0;
    position: absolute;
  }

  .part-minus:hover,
  .rows-minus:hover,
  .cols-minus:hover,
  .unit-minus:hover {
    background-position: -1896px 0px;
  }

  .part-minus.disabled,
  .rows-minus.disabled,
  .cols-minus.disabled,
  .unit-minus.disabled {
    background-position: -1842px 0px;
  }

.protected .part-minus:not(.disabled),
.protected .rows-minus:not(.disabled),
.protected .cols-minus:not(.disabled),
.protected .unit-minus:not(.disabled) {
  background-position: -1842px 0px;
}

.unit-plus {
  top: 12px;
  left: 14px;
}

.unit-minus {
  top: 42px;
  left: 14px;
}

.middle-panel {
  width: 100%;
  height: 320px;
  position: absolute;
  top: 90px;
}

.bottom-panel {
  width: 100%;
  position: absolute;
  top: 410px;
  height: 140px;
}

.unit {
  -ms-touch-action: none !important;
  touch-action: none !important;
}

#band1, #band2, #band3 {
  position: absolute;
  width: 648px;
  height: 34px;
  left: 76px;
}

#circle1, #circle2, #circle3,
#square1, #square2, #square3 {
  position: absolute;
  width: 220px;
  height: 220px;
  top: 50px;
}

#circle1, #circle2, #circle3 {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

#band1 {
  top: 50px;
}

#band2 {
  top: 133px;
}

#band3 {
  top: 216px;
}

#circle1, #square1 {
  left: 35px;
}

#circle2, #square2 {
  left: 290px;
}

#circle3, #square3 {
  left: 545px;
}


.app-footer .btn {
  display: none;
}



#clean {
  display: block;
  direction: rtl;
}

.en #clean {
  /*float: right;*/
  direction: ltr;
}

#help {
  background-image: url('img/help.svg');
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center top;
  cursor: pointer;
}

  #help.on {
    background-image: url('img/help_s.svg');
  }

.ar #help {
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#help_close {
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  top: -10px;
  left: -16px;
}

.en #help_close {
  left: auto;
  right: -16px;
  float: right;
}


.en .app-help-content {
  font-family: sans-serif;
  font-size: 16px;
}

.he .app-help-content {
  font-family: Arimo;
  font-size: 18px;
}

.icon-exit {
  width: 14px;
  height: 14px;
  background-image: url(img/exit.svg);
  background-repeat: no-repeat;
  margin-top: 10px;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

.app-footer .fl {
  margin-left: 0px;
  margin-right: 8px;
}

.app-footer .fr {
  margin-right: 0px;
}

.protector {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.001;
  display: none;
}

.protected .protector {
  display: block;
}

.left-panel,
.right-panel {
  width: 12px;
  height: 320px;
  background-color: #37353A;
  position: absolute;
  top: 90px;
}

.left-panel {
  left: 0;
}

.right-panel {
  right: 0;
}


.scroll-wrapper {
  width: 776px;
  height: 10px;
  background-color: rgba(255,255,255,0.1);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  top: 400px;
  left: 12px;
  display: none;
}

.scroll-handle {
  height: 30px;
  width: 260px;
  background-color: transparent;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  top: -10px;
}

.scroll-visible-handle {
  height: 10px;
  width: 260px;
  background-color: rgba(255,255,255,0.5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  top: 10px;
}

.protected {
  pointer-events: none;
}

.btn {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  /*font-family: sans-serif;*/
  color: white;
  font-size: 19px;
  background: #53a9ca;
  border: solid #53a9ca 1px;
  text-decoration: none;
}

  .btn.hover:not(.disabled) {
    background: #99dcf4;
    text-decoration: none;
  }

  .btn[disabled], .btn.disabled {
    background-color: white !important;
    color: #9f9f9e !important;
    cursor: default;
  }

  .btn span {
    display: inline-block;
    vertical-align: top;
  }

.he .btn {
  font-family: 'Arimo',sans-serif;
}

.ar .btn {
  font-family: Lateef,serif;
  font-weight: normal;
  font-size: 24px;
}

.en .btn {
  font-family: 'Arimo',sans-serif;
  font-size: 14px;
}


#fullscreen {
  display: block;
  background-image: url('img/fullScreen.svg');
  width: 50px;
  height: 50px;
  background-size: 80%;
  margin-top: -3px;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

  #fullscreen.out {
    background-image: url('img/fullscreen-out.svg');
  }

.icon {
  width: 30px;
  height: 30px;
  background-image: url('img/icons.svg');
}

.disabled .icon {
  background-image: url('img/icons_disabled.svg');
}

.icon.clean {
  background-position-y: -30px;
}