.close-cross-KB
{
  width: 'auto';
  height:'auto';
  position:'absolute';
}

.lkb
{
    background-color:transparent; 
    position:absolute;
   
}
.kb1-row
{
    position:absolute;
    height: 50px;
    z-index:305;
}

.kb-keys
{
    position:absolute;
    height: 50px;
    width: 70px;
    z-index:305;

    border: thin dotted blanchedalmond;
    background-color: ghostwhite;
    text-align: center;
    vertical-align: middle;
    line-height:50px;
    font-size: 22px;
    color:#141A54;
    border-radius: 6px;
    background-position: center;

    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.kb-keys:hover  
{
  background-color: lightblue;
}

.kb-input
{
    position:absolute; 

    background-color:#feb300;
    top:10px; 
    left:30px; 
    width:745px; 
    height: 60px;
    text-align: left;
    vertical-align: middle;
    line-height:50px;
    font-size: 22px;
    padding: 0px 5px;
    border-radius: 6px;
    z-index:306;
}

.kb-input-span
{
    position:absolute;
    top:10px;
    width:700px;
    height:45px;
}

.kb-input-label
{
    position:absolute;
    width:660px;
    height:30px;
    font-size:20px;
    opacity: 0.6;
    left:5px;
    top:0px;   
    text-align: left;
    vertical-align: top;
    line-height:30px; 
    color:#141A54;
}

.pwd-instructions
{
    position:absolute;
    font-size:15px;
    opacity: 0.8;
    left:230px;
    top:0px;   
    text-align: left;
    vertical-align: top;
    line-height:30px; 
    color:#141A54;
    
    z-index: 500;
}

.kb-panel-A
{
    position:absolute;
    top:70px; 
    left:30px; 
    width:500px; 
    height: 250px
}

.close-visualise-img
{
    position:absolute;
    left:0px;
    top:0px;
    width:auto;
    height:auto; 
}
.kb-input-email 
{
    position:absolute;
    height: 50px;
    width: 70px;

    border: thin dotted blanchedalmond;
    background-color: ghostwhite;
    text-align: center;
    vertical-align: middle;
    line-height:50px;
    font-size: 22px;
    color:black;
    border-radius: 6px;

    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.kb-input-email:hover  
{
  background-color: lightblue;
}

.kb-email-dom
{
    position:absolute;
    display:none;
    width:145px;
    height:200px;
    top: 100px;
    left: 30px;
    border: thin solid lightblue; 
    background-color: ghostwhite;
    z-index: 110;
    border-radius: 6px;
    z-index:306;
}

.kb-email-dom-item
{
    position:absolute;
    width:145px;
    height:50px;
    text-align: center;
    vertical-align: middle;
    line-height:50px;
    font-size: 18px;
}

.kb-email-dom-item:hover  
{
  background-color: lightblue;
  color:ghostwhite;
  font-size: 22px;
}


.kb-clear-all-input
{
    position:absolute; 
    border: thin solid ghostwhite;
    width:70px;
    height:20px;
    left:672px;
    bottom:4px;
    text-align: center;
    vertical-align: middle;
    line-height:20px;
    font-size: 12px;
    border-radius: 3px;
    color: black;
    z-index:306;
}

.kb-clear-all-input:hover  
{
  background-color: lightblue;
  cursor: pointer;
}

.kb-switch-kb-all-input
{
    position:absolute; 
    border: thin solid ghostwhite;
    width:70px;
    height:20px;
    left:672px;
    top:4px;
    text-align: center;
    vertical-align: middle;
    line-height:20px;
    font-size: 12px;
    border-radius: 3px;
    color: black;
    z-index:306;
}

.kb-switch-kb-all-input:hover  
{
  background-color: lightblue;
  cursor: pointer;
}

.kb-special-char
{
    position:absolute;
    display:none;
    width:670px;
    height:50px;
    top: 245px;
    left: 30px;
    border: thin solid lightblue; 
    background-color: ghostwhite;
    z-index: 110;
    border-radius: 6px;
    z-index:306;
}

.kb-special-char-item
{
    position:absolute;
    width:65px;
    height:45px;
    top:2px;
    text-align: center;
    vertical-align: middle;
    line-height:50px;
    font-size: 18px;
    border-radius: 6px;
    border: thin solid ghostwhite; 
}

.kb-special-char-item:hover  
{
  background-color: lightblue;
  color:ghostwhite;
  font-size: 22px;
}

.kb-visualise-img
{
    position:absolute;
    width:745px;
    height:270px; 
    left:30px; 
    top:75px;
    background-color: lightblue;
    z-index: 120;
    border-radius: 6px;
}

.kb-visualise-row
{
    position:absolute;
    height: 50px;
}

.kb-visualise-grid-img
{
    position:absolute;
    height: 50px;
    width: 70px;
    border: thin dotted blanchedalmond;
    background-color: ghostwhite;
    border-radius: 6px;
}
.kb-msg
{
    position:absolute;
    width:335px;
    height:160px;
    left:235px;
    top:100px;
    background-color: black;
    border-radius: 6px;
    z-index:308;

}

.kb-msg-span
{
    position:absolute;
    width:335px;
    height:30px;
    left:0px;
    top:15px;

    text-align: center;
    white-space: pre-wrap;
    vertical-align: middle;
    line-height:30px;

    color: ghostwhite;
    font-size: 22px;
}

.close-btn-KB 
  {
    position: absolute;
    font-size: 50px;
    color: ghostwhite;
    z-index: 301;
    cursor: pointer;
    left:778px;
    top:9px;
    width:30px;
    height:50px;

    text-align: center;
    white-space: pre-wrap;
    vertical-align:top;
    line-height:10px;
  }

  .close-btn-KB:hover, .close-btn-KB:focus
  {
    color:red;
  }

  .explore-keyB
  {
    position: absolute;
    border-radius: 4px;
  }

  .explore-P
  {
    position: absolute;
    border: thin solid #feb300;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #feb300;
    font-size: 20px;
    font-family: 'Bubblegum Sans';
  }

  .exploreKB-span-label
  {
    border: thin solid #feb300;
    border-radius: 4px;
    font-size: 16px;
    color: ghostwhite;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .blinking-cursor 
  {
    
    font-weight: 100;
    font-size: 27px;
    color: #2E3D48;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
  }
  
  @keyframes blink 
  {
    from, to 
    {
      color: transparent;
    }
    50% 
    {
      color: black;
    }
  }
  
  @-moz-keyframes blink 
  {
    from, to 
    {
      color: transparent;
    }
    50% 
    {
      color: black;
    }
  }
  
  @-webkit-keyframes blink 
  {
    from, to 
    {
      color: transparent;
    }
    50% 
    {
      color: black;
    }
  }
  
  @-ms-keyframes blink
   {
    from, to 
    {
      color: transparent;
    }
    50% 
    {
      color: black;
    }
  }
  
  @-o-keyframes blink 
  {
    from, to 
    {
      color: transparent;
    }
    50% 
    {
      color: black;
    }
  }