* { 
  margin: 0;
  padding: 0;
}

body {
  background: #f8f8f8;
}

h2 {
  text-align: center;
  margin-top: 10px;
  /* color: gray; */
  color: transparent;
  background: #666666;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  text-shadow: 0px 3px 3px rgba(255, 255, 255, 0.5);
  font-size: 3rem;
  font-weight: bold;
}

#text {
  display: block;
  /* border-bottom: solid 1px #000; */
  padding: 10px 10px 0px 10px;
  min-height: 3px;
  width: 500px;
  margin: 20px auto 0px auto;
  direction: rtl;
  font-family: 'Noto Naskh Arabic';
  word-wrap: break-word;
  font-size: 1.2rem;
  background-color: #f8f8f8;
  border-style: hidden;
  border-bottom-style: solid;
}
#text:focus {
  outline: none;
}

#keyboard {
  z-index: 20;
  margin: 20px auto 20px;
  width: 800px;
  height: 275px;
  background: #bbb;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.27, rgb(212, 216, 219)),
    color-stop(0.64, rgb(213, 217, 220)),
    color-stop(0.95, rgb(230, 233, 235)),
    color-stop(1, rgb(191, 191, 191))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(212, 216, 219) 27%,
    rgb(213, 217, 220) 64%,
    rgb(230, 233, 235) 95%,
    rgb(191, 191, 191) 100%
  );
  -moz-border-radius-topleft: 7px 21px;
  -moz-border-radius-topright: 7px 21px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 7px 21px;
  border-top-right-radius: 7px 21px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 10px 0 0;
  -webkit-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb,
    0 10px 30px #ddd;
  -moz-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb,
    0 10px 30px #ddd;
  box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
  /* Below disables highlighting anything */
  -webkit-user-select: none;
  -khtml-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
      -o-user-select: none;
         user-select: none;
}

ul {
  list-style-type: none;
  width: 784px;
  margin: 0 auto;
}
li {
  float: left;
}

.key {
  display: block;
  color: #aaa;
  font: bold 9pt arial;
  text-decoration: none;
  text-align: center;
  width: 44px;
  height: 41px;
  margin: 5px;
  background: #eff0f2;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-top: 1px solid #f5f5f5;
  -webkit-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9,
    0 2px 3px #333;
  -moz-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9,
    0 2px 3px #333;
  box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9,
    0 2px 3px #333;
  text-shadow: 0px 1px 0px #f5f5f5;
  filter: dropshadow(color=#f5f5f5, offx=0, offy=1);
}

.key:active,
.keydown {
  color: #888;
  background: #ebeced;
  /* margin: 7px 5px 3px; Removed this line. So apparent benefit.*/
  -webkit-box-shadow: inset 0 0 25px #ddd, 0 0 3px #333;
  -moz-box-shadow: inset 0 0 25px #ddd, 0 0 3px #333;
  box-shadow: inset 0 0 25px #ddd, 0 0 3px #333;
  border-top: 1px solid #eee;
}

/* .fn span {
  display: block;
  margin: 14px 5px 0 0;
  text-align: right;
  font: bold 6pt arial;
  text-transform: uppercase;
} */
/* #esc {
  margin: 6px 15px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
} */

#numbers li a span {
  display: block;
}

#numbers li a b {
  margin: 3px 0 3px;
  display: block;
}

#numbers li .alt b {
  display: block;
  margin: 0 0 3px;
}

#numbers li #Backspace span {
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}

#qwerty li a span {
  display: block;
  margin: 3px 0 0 5px;
  text-align: left;
  text-transform: uppercase;
}

#qwerty li #tab span {
  text-align: left;
  margin: 23px 0 0 10px;
  font-size: 7.5pt;
  text-transform: lowercase;
}

#qwerty li .alt b {
  display: block;
  margin: 3px 0 0;
}
#qwerty li .alt span {
  margin: 2px 0 0;
}

#asdfg li a span {
  display: block;
  margin: 3px 0 0 5px;
  text-align: left;
  text-transform: uppercase;
}

#asdfg li .alt span {
  margin: 0;
  text-transform: lowercase;
}
/* #asdfg li .alt b {
  display: block;
  margin: 3px 0 0;
} */
#asdfg li #CapsLock b {
  display: block;
  background: #999;
  width: 4px;
  height: 4px;
  border-radius: 10px;
  margin: 9px 0 0 10px;
  -webkit-box-shadow: inset 0 1px 0 #666;
  -moz-box-shadow: inset 0 1px 0 #666;
  box-shadow: inset 0 1px 0 #666;
}
#asdfg li #CapsLock span {
  text-align: left;
  margin: 10px 0 0 10px;
  font-size: 7.5pt;
}
#asdfg li #Enter span {
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 7.5pt;
}

#zxcvb li a span {
  display: block;
  margin: 3px 0 0 5px;
  text-align: left;
  text-transform: uppercase;
}
#zxcvb li .shiftleft span {
  text-align: left;
  margin: 23px 0 0 10px;
  font-size: 7.5pt;
  text-transform: lowercase;
}
#zxcvb li .shiftright span {
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}
/* #zxcvb li .alt b {
  display: block;
  margin: 4px 0 0;
} */
/* #zxcvb li .alt span {
  margin: 0;
} */

/* #bottomrow li #fn span,
#bottomrow li #control span,
#bottomrow li #optionleft span,
#bottomrow li #commandleft span {
  display: block;
  text-align: left;
  margin: 31px 0 0 8px;
  font-size: 7.5pt;
  text-transform: lowercase;
} */

/* #bottomrow li #optionright span,
#bottomrow li #commandright span {
  display: block;
  text-align: right;
  margin: 31px 8px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}

#bottomrow ol li #left span,
#bottomrow ol li #right span,
#bottomrow ol li #up span,
#bottomrow ol li #down span {
  display: block;
  margin: 9px 0 0;
} */

/* .fn {
  height: 26px;
  width: 46px;
} */
#Backspace {
  width: 72px;
}
#tab {
  width: 72px;
}
#CapsLock {
  width: 85px;
}
#Enter {
  width: 85px;
}
.shiftleft,
.shiftright {
  width: 112px;
}
/* #fn,
#control,
.option,
.command, */
#Space {
  height: 45px;
}

/* #control {
  width: 56px;
}
.option {
  width: 46px;
}
.command {
  width: 67px;
} */
#Space {
  width: 316px;
}

/* #left img,
#up img,
#down img,
#right img {
  border: none;
}
ul ol {
  list-style-type: none;
}
#down {
  height: 23px;
  font-size: 8px;
}
#up,
#left,
#right {
  height: 24px;
  font-size: 8px;
}
#left,
#right {
  margin: 30px 5px 5px;
}
#left:active,
#right:active {
  margin: 32px 5px 3px;
}
#up {
  margin: 5px 5px 1px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
#up:active {
  margin: 8px 5px -2px;
}
#down {
  margin: 0 5px 5px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
#down:active {
  margin: 3px 5px 4px;
} */

.c220.key > span{
  margin-left: 7px !important;
}

.c220.key b{
  text-align: left !important;
  margin-left: 7px !important;
}
/* MY ADDITIONS */

#bottomrow {
  display: flex;
  justify-content: center;
}

span.weak {
	pointer-events: none;
}

img {
  height:100%;
  margin: auto;
}

a {
  /* display:flex !important; */
  align-items: center;
}




/* DEBUG */
.debug{
  width: 200px;
  height: 300px;
  background-color: #ddd;
  position: absolute;
  right:200px;
  top:140px;
  border: 2px white solid;
  border-radius: 6px;
}

.debug p {
  margin:5px;
}

.debug h6 {
  text-align: center;
}

#toggle {
  display:flex !important;
  justify-content: center !important;
}

input[type="checkbox"] {
  top:5px !important;
  position: relative !important;
  width: 35px !important;
  height:20px !important;
  appearance: none !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #c6c6c6 !important;
  outline:none !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 5px rgba(0,0,0,.2) !important;
  transition: 0.5s !important;
  opacity: 1 !important;
  pointer-events: inherit !important;
}

input:checked[type="checkbox"]{
  background: #ddd !important;
  background-color: rgb(58, 139, 58) !important;
}

input[type="checkbox"]:before{
  content: '';
  position:absolute;
  width: 22px;
  height:22px;
  border-radius: 20px;
  top:-1px;
  left: -1px;
  background-color: #FFF;
  transition: .5s;
  box-shadow: 0 2px 5px rgba (0,0,0,0.2);
}
input:checked[type="checkbox"]:before{
  left:15px;
}

#ar-sound {
  color: #aaa;
  font: bold 9pt arial;
  text-align: center;
  width: 70px;
  height: 45px;
  margin: 5px;
  background: #eff0f2;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-top: 1px solid #f5f5f5;
  -webkit-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9,
    0 2px 3px #333;
  -moz-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9,
    0 2px 3px #333;
  box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9,
    0 2px 3px #333;
  text-shadow: 0px 1px 0px #f5f5f5;
  filter: dropshadow(color=#f5f5f5, offx=0, offy=1);

}

#erase, #copy {
  height:45px;
  width:70px;
}

/* Github Ribbon */
.ribbon-wrap {
  color: #FFFFFF;
  position: absolute;
  text-align: center;
  z-index: 0;
}
.ribbon-wrap > span {
  display: block;
  height: 100%;
  position: relative;
}
.ribbon-wrap > span:before, .ribbon-wrap > span:after {
  content: "";
  position: absolute;
  z-index: -1;
}
.ribbon-wrap:before, .ribbon-wrap:after {
  content: "";
  position: absolute;
  z-index: -2;
}

.right-edge.fork {
  border-radius: 0 5px 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 40px;
  right: 0px;
  top: 20px;
  width: 120px;
}

.right-edge.fork > span:after {
  border-style: solid;
  border-width: 20px;
  left: -20px;
  top: 0;
}

.right-edge.fork:before {
  background: none repeat scroll 0 0 #666666;
  bottom: 5px;
  box-shadow: -25px 8px 4px rgba(0, 0, 0, 0.5);
  height: 20px;
  left: 22px;
  transform: rotate(22deg) skew(-18deg, -28deg);
  width: 80px;
}
.right-edge.fork:after {
  background: none repeat scroll 0 0 #666666;
  box-shadow: -20px -5px 4px rgba(0, 0, 0, 0.5);
  height: 20px;
  left: 22px;
  top: 5px;
  transform: rotate(-32deg) skew(18deg, 28deg);
  width: 80px;
}

.lblue.right-edge.fork > span {
  background-color: #42A5D4;
  background-image: -moz-linear-gradient(right center , #42A5D4 0px, #42A5D4 5px, #24769D 15%, #24769D 65%, #42A5D4 100%);
}
.lblue.right-edge.fork > span:after {
  border-color: #42A5D4 #42A5D4 #42A5D4 transparent;
}

 a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
}