html, body {
  height: 100%;
}

body {
  background: #efefef;
  color: hsl(240,30,10);
  letter-spacing: 0.125em;
  text-align: center;
  /* text-transform: uppercase; */

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

	overflow: hidden;
}

h1 {
  margin: 3em 0 2em;
}

p:focus {
  border:0;
}

/***********/

/* 
   A horrible hack but there's no way to turn
   off text highlighting in a text area.
   Instead, make the highlight color the same as the
   background and font color.
   I still see artifacts but they're much subtler then
   the default text highlighting.
*/
/*
::selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-moz-selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-o-selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-ms-selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-webkit-selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
*/

.statuslogin {
  font-size:20px;
  resize:none;
  background: #f7f7f7;
  overflow:hidden;
  overflow-x:hidden;
  overflow-y:hidden;
  word-wrap:off;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -moz-user-select: none;
}

.statusmain {
  font-size:20px;
  resize:none;
  background: #f7f7f7;
  overflow:auto;
  overflow-x:hidden;
  overflow-y:hidden;
  word-wrap:off;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor:default;
  -moz-user-select: none;
}

.row {
  height: 80px;
}

.col {
  width: 80px;
}

.bdisp {

  font-size: 20px;
  font-weight: bold;
  color: #444444;

  margin-top: 15px;
  margin-right: 15px;
  margin-left: auto;

  background: none;
  border: none;
}

.bdisp:focus {
  outline:0;
}


.bmsg {

  font-size: 20px;
  font-weight: bold;
  color: #444444;

  background: #ADD8E6;
  border: solid 2px #888888;
  box-shadow: 3px 3px 0px #aaaaaa;

}

.bmsg:focus {
  outline:0;
}

.bstatus {

  font-size: 20px;
  font-weight: bold;
  color: #444444;

  border: solid 2px #888888;
  box-shadow: 3px 3px 0px #aaaaaa;

}

.bstatus:focus {
  outline:0;
}


.bdrop {

  /* font-size: 15px; */
  font-size: 19px;
  font-weight: bold;
  color: #444444;

  background: none;
  border: solid 2px #888888;
  box-shadow: 3px 3px 0px #aaaaaa;

}

.bdrop:focus {
  outline:0;
}


.bdropinp {

  font-size: 22px;
  font-weight: bold;
  color: #444444;

  background: none;
  border: solid 2px #888888;
  box-shadow: 3px 3px 0px #aaaaaa;

  -webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bdropinp.ltyellow {
  background: #ffffe0;
}

.bdropinp.mny {
  color: #446444;
}

.bdropinp.logout {
  color: #aa4444;
}

.bdropinp.highlight {
  background: #aaaaff;
}


.bdropinp:focus {
  outline:0;
}

.bdropinp:active {
  margin-left:9px;
  background: #aaaaaa;

  /*
  -webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  */
  -webkit-transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
  -moz-transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
  transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;

  -webkit-box-shadow: 0px 0px 0px #8e44ad;
  -moz-box-shadow: 0px 0px 0px #8e44ad;
  box-shadow: 0px 0px 0px #8e44ad;
}

/***********/

.bkey {
  width: 75px;
  height:75px;
}

.bkey:focus {
  outline:0;
}

/*
.bkey {
  width: 58px;
  height:58px;
}
*/

.bkeym {
  width: 100px;
  height:58px;
}

.bkeym:focus {
  outline:0;
}

/*****/

.bkeyw {
  width: 150px;
  height:58px;
}

.bkeyw:focus {
  outline:0;
}

/*****/

.bkeyHuge {
  width: 300px;
  height:300px;
}

.bkeyHuge:focus {
  outline:0;
}

/*****/

.bfieldinp {
  width: 150px;
  height: 58px;
}

.bfieldinp:focus {
  outline:0;
}

/*****/

.btnprv {
  position: absolute;
  left: 83%;
  top: 5%;
}

.btnnxt {
  position: absolute;
  left: 83%;
  top: 35%;
}

#mainstatus {

  font-family: "Courier New";
  font-weight:bold;
  color: #d7d644;
  font-size: 16px;

  position:absolute;
  bottom:0;
  width:110%;
  height:25px;
  background:#555555;
  /* margin:0; */
  margin-left:-35px;
  /* margin-top:5px; */
  /* padding:0; */
}

/*****/

.rowmain0 {
  position: absolute;
  top: 50%;
}

.rowmain1 {
  position: absolute;
  top: 70%;
}

/** **/

.invisiblock {
  /* background: rgba(255,0,0,0.5); */
  background-color: rgba(0,0,0,0);
  /* background-color: rgba(255,0,0,0.5); */
  width: 100px;
  height: 100px;
  border: none !important;
  font-size: 0;

  position: fixed;
  z-index: 2;
  outline:0;
}